自己学習用リスト 最新動画2022/5/6

自己学習用にカテゴリー分けして、タイトルと所要時間をリストアップしたものをシェアします。リンク付きなのでタイトルをクリックすると、そのまま動画が新規タブで開きます。
私もこれから観て学んでいくので、カテゴリー分けはタイトル等を参考にしています。

「Webの神様」チャンネルにもプレイリストがあり、トピック別に順に観られるようになっていますので、好みでご活用ください。

「Webの神様チャンネル」プレイリスト

【お知らせ】「Webの神様」があなたのメンターになります【未経験・初心者大歓迎】(00:06:31)

HTML・CSS / PHP / jQuery / JavaScript

【HTML・CSS】

【超入門】知らなきゃマズイ！HTML・CSS 基本の「き」【HTML・CSS コーディング】(00:16:46)

【超入門】HTML・CSSってなに？学習の始め方解説 2021年最新版【未経験・初心者向け】(00:21:56)

【超入門】たった20分でまるわかり！HTMLをはじめてみよう【HTML・CSS コーディング】(00:20:00)

【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（前編）【HTML・CSS コーディング】(00:12:31)

【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（後編）【HTML・CSS コーディング】(00:13:53)

【超入門】CSSの「セレクタ詳細度」って知ってる？【HTML・CSS コーディング】(00:10:06)

【超入門】CSSプロパティ「display」が使いこなせない方へ！10分攻略【HTML・CSS コーディング】(00:11:08)

【超入門】「イライラリンク」になってない？aタグの正しい使い方【HTML・CSS コーディング】(00:06:49)

【超入門】もうCSSの真ん中寄せで悩まない！横向き編【HTML・CSS コーディング】(00:11:56)

【超入門】もうCSSの真ん中寄せで悩まない！縦向き編【HTML・CSS コーディング】(00:12:46)

【超入門】初心者向け レスポンシブデザイン完全攻略！メディアクエリ等解説【HTML・CSS コーディング】(00:16:18)

【超入門】Flexboxを30分で完全習得！初心者向け【HTML・CSS コーディング】(00:29:43)

【超入門】今さら聞けない？！positionプロパティ！相対位置・絶対位置って？ 初心者向け【HTML・CSS コーディング】(00:13:46)

【超入門】何となく使ってない？ボックスモデル＆box-sizingプロパティ完全理解への道！【HTML・CSS コーディング】(00:27:07)

【超入門】初心者必見！CSSが効かなくて困った時のチェック項目リスト【HTML・CSS コーディング】(00:24:32)

【超入門】初心者必見！10分でわかるFlexbox講座【HTML・CSS コーディング】(00:11:43)

【初心者向け】CSSの小技シリーズ① 図形（丸・矢印・三角形）の作り方解説【HTML・CSS コーディング】(00:17:51)

【超入門・初心者向け】CSSの小技シリーズ② ちょっとした工夫でレベルアップ！テキスト装飾編【HTML・CSS コーディング】(00:06:41)

【CSS入門編】初心者必見！backgroundプロパティの使い方をマスターしよう【HTML・CSS コーディング】(00:27:22)


【PHP】

【超入門】Webデザイナーを目指す方必見！PHP学習のはじめ方解説【初心者向け】(00:42:55)

【初心者向け】10分で学べる！PHP入門編 #01 文法ルールの基本【Webデザイン・プログラミング】(00:16:20)

【初心者向け】10分で学べる！PHP入門編 #02 変数について（前編）【Webデザイン・プログラミング】(00:11:57)

【初心者向け】10分で学べる！PHP入門編 #03 変数について（後編）【Webデザイン・プログラミング】(00:12:06)


【jQuery】

【超初心者向け】jQuery最新版の読み込み・使い方解説2021！初めてでも簡単にアコーディオンメニューが作れるようになります【HTML・CSS コーディング】(00:41:37)

【初心者向け】jQueryで作るハンバーガーメニュー3種類！スライドメニュー、フェードインなど レスポンシブデザイン【HTML・CSS コーディング】(00:27:00)

【初心者向け】jQueryプラグイン「slick」で簡単にスライダー実装！【Webデザイン・コーディング】(00:47:51)


【JavaScript】

【超入門】初心者向けJavaScript解説！これから学習を始める方必見【Webデザイン・プログラミング】(00:25:07)

【超入門】初心者でも安心！JavaScript学習入門（前編）データに関する基礎知識【Webデザイン・プログラミング】(00:37:30)

【超入門】初心者でも安心！JavaScript学習入門（後編）処理に関する基礎知識 if文・ループ文などの仕組みを解説【Webデザイン・プログラミング】(00:44:21)

【初心者向け】JavaScriptの関数の仕組み・使い方を徹底解説！ 関数宣言 / 無名関数 / アロー関数って何？【プログラミング入門】(00:42:35)

【初心者向け】JavaScriptのメソッドを使ってみよう！DOM操作の基本解説 クリックイベントの設定・クラス操作のやり方 【プログラミング入門】(00:52:27)

勉強方法 / 便利ツール / 初歩的なノウハウ

【WordPress】

【フリーランス志望必見！】WordPressって？導入するメリットとは？習得のために必要な知識と学習内容についても解説【Webデザイン・コーディング】(00:23:42)


【勉強方法】

【超入門】初心者向け！ドットインストール無料版＆有料版のおすすめ講座と活用法【HTML・CSS コーディング】(00:15:43)

【Webデザイナー・プログラマー】初心者必見！挫折しないためのプログラミング勉強法 【独学・学習効率アップ】(00:19:07)

こういう人がプログラミングスクールに通ったら後悔する【Webデザイン・プログラミング未経験の方へ】(00:16:59)

「Web制作系の学習初心者あるある」言いたい【Webデザイン・コーディング】(00:10:40)


【便利ツール＆初歩的なノウハウ】

【作業効率UP！】Web制作にマストのGoogle Chrome拡張機能10選！現役Webディレクターも愛用【HTML・CSS コーディング】(00:13:57)

【初心者向け】Visual Studio Codeの使い方・便利機能解説！ショートカット/日本語化/Emmet【作業効率化】(00:30:40)

【作業効率化】Web制作にオススメ！Visual Studio Code 拡張機能5選 インストールするだけ簡単【コーディング・プログラミング】(00:11:29)

【誰でも爆速コーディング】Emmet（エメット）の使い方解説！初心者でも簡単【HTML・CSS コーディング】(00:18:48)

【超入門】作業効率爆上がり！必ず覚えておきたい超絶便利ショートカット【HTML・CSS コーディング】(00:10:37)

【タイピング練習】Web業界の必須スキル！タッチタイピングを最短で習得する方法【Webデザイナー・エンジニア・プログラマー】(00:20:49)

【Web業界の常識】「パス」の書き方、説明できますか？Webデザイナー・プログラマー志望の皆さんへ 初心者向け【HTML・CSS コーディング】(00:11:24)

【Webデザイン入門】SVGって何？SVG画像の作成・読み込み・ダウンロード方法まで一気に解説【HTML・CSS コーディング】(00:36:35)

【超入門】そのまま編集禁止！超初心者向けバックアップのススメ【HTML・CSS コーディング】(00:08:02)

【Webデザイナー・プログラマーになりたい皆さんへ】Web業界の常識シリーズ10選！知らないままではマズいです… キャッシュ/スーパーリロード/アクセス制限の方法etc【初心者必見】(00:14:23)


【レンタルサーバー関連＆Webサイト公開】

【超入門】初心者向け レンタルサーバーを借りてみよう！FTP接続 / ドメイン【HTML・CSS コーディング】(00:17:22)

【Webデザイナー】初めてでも安心！独自ドメイン取得＆レンタルサーバー側で必要な設定の手順解説【HTML・CSS コーディング】(00:19:56)

【Web制作】Webサイト公開までの流れを一気に解説！フリーランス志望の方必見【ドメイン / サーバー】(00:35:35)

プロを目指す / フリーランス志望

【プロを目指す人たちへ】

【Web・IT業界への就職・転職】新卒未経験→現役Webディレクターが、これまでの経緯について語ってみます【質問コーナー】(00:12:02)

【超入門】未経験からWebデザイナーを目指す方必見！現役採用担当者がポートフォリオで見ているポイントについて【Webデザイナー就活応援】(00:12:03)

【未経験OK？】Webデザイナーの厳しい現実をぶっちゃけます。【どんなスキルが必要？】(00:13:55)

【Webデザイナー 就職・転職】未経験でも本当に採用される？勉強がきつくて挫折しやすい？(00:09:21)

【Web・IT業界就活】とにかく第一印象が重要！！知ってるだけで差がつく就活のポイント(00:13:11)


【フリーランス志望の人たちへ】

【フリーランス志望必見】Webサイト納品前の表示確認で絶対にチェックすべきポイント5選【Webデザイン・コーディング】(00:09:37)

【Web制作】損害賠償、裁判？！フリーランスで案件獲得の前に、必ず知っておいてほしいことがあります【未経験・初心者の方へ】(00:14:57)

ライブ配信 / 質問回答

【ライブ配信！質問回答＆雑談】

【Webの神様】チャンネル登録者様1万人記念ライブ配信！質問回答＆雑談(01:13:22)

模写コーディング

【模写コーディング】

【超入門】初心者向け 模写コーディング！オススメのやり方とポイント【HTML・CSS コーディング】(00:20:02)

【超入門】初心者必見！模写コーディングをやってみた 実践編【HTML・CSS コーディング】(00:44:50)

【超入門】初心者必見！模写コーディングをやってみた 実践編 Part2【HTML・CSS コーディング】(01:23:07)

【超入門】初心者必見！模写コーディングをやってみた 実践編 Part3 レスポンシブデザイン編【HTML・CSS コーディング】(02:03:40)


【模写コーディングのよくあるご質問回答＆お悩み相談！】

【初心者向け】模写コーディングのよくあるご質問回答＆お悩み相談！【HTML・CSS コーディング】(00:16:43)


【「iSara」模写コーディングをやってみた】

【超入門】実践！「iSara」模写コーディングをやってみた① ソースコード配布【HTML・CSS コーディング】(01:28:41)

【超入門】実践！「iSara」模写コーディングをやってみた② ソースコード配布【HTML・CSS コーディング】(01:22:25)

【超入門】「iSara」模写コーディングをやってみた③ Font Awesome読み込み方法 ソースコード配布【HTML・CSS コーディング】(01:16:43)

【超入門】「iSara」模写コーディングをやってみた④ 初心者向けレスポンシブコーディング手順解説！ソースコード配布【HTML・CSS コーディング】(01:15:12)

【超入門】「iSara」模写コーディングをやってみた⑤ 初心者向け 効率的なレスポンシブコーディング方法！ソースコード配布【HTML・CSS コーディング】(01:37:14)

【初心者向け】「iSara」模写コーディングをやってみた⑥ レスポンシブコーディング＆jQueryでアコーディオンメニュー作成！ソースコード配布【HTML・CSS コーディング】(02:37:10)

【HTML/CSS 初心者向け】お問い合わせフォームのコーディングの基本を解説！「iSara」模写コーディングをやってみた⑦ 【form/input/button など】(00:51:11)

【初心者向け】「iSara」模写コーディングをやってみた⑧ 次回最終回！レスポンシブ対応など　ソースコード配布【HTML・CSS コーディング】(01:18:10)

【初心者向け】「iSara」模写コーディングをやってみた⑨ 最終回！ 要素のはみ出し特定・効率的な全体確認の方法を紹介【HTML・CSS コーディング】(01:30:10)