道場コースとは

プログラミングの学習を始め、まず始めるのが「progate」の人は多いと思います。しかし、挫折する所として名高いのが「道場コース」。

プログラミング初心者の

挫折あるあるNo.1

progateは、ヒントや答えがあるので進めます。ところが、「道場コース」に入ると「０からサイトを作れ。」と言われて、一歩も動けない自分に気づかされます。

サイトの全体像や構造がイメージできていないからです。言葉（言語）だけ学んでいても何をしたらいいのか分からないのです。

そんな人が次に取り組むオススメは、YouTubeで模写です。

YouTubeで模写

progateでhtml,cssを終えたら、模写をするのが良いとはよく聞きます。おすすめ模写サイトというのを見つけますが、余計に難しくて書けません。

「道場」が作れないのに、

そんなの無理。

そこでおすすめするのは、YouTubeを見ながら模写です。１から作っていくのを一緒に打ち込んでいくのです。

似たものに、有料教材のudemyとドットインストールがあります。これらは短い動画がつながっていて、説明も丁寧です。
ところが、説明が丁寧であればあるほど、サイトを作る基本的なことがぼやけてしまいます。

大切なのは、言われた解答をそのまま書くのではなく、基本的なことを理解することです。
似たようなサイトを続けて作ると、全体像がやっと見えてきて理解できます。

これから紹介するのは、少しずつレベルアップしていくサイトを動画で見ながら作るものです。
しかも、YouTubeなので無料です。

YouTube模写動画おすすめ３選！

YouTubeには、模写をする動画がいくつかあります。中でもおすすめは以下の３つです。

紹介する順に作るのを勧めます。シンプルで分かりやすい順です。
取り掛かりやすく、理解も深まります。

HIROCODE

【実践】ヘッダーの組み方 HTML/CSSコーディング part.1
https://www.youtube.com/watch?v=vRZRwfQvoos&t=18s

挫折しかけたあなたに

光がさしこみます。

これは、ヘッダーだけがpart.3まであります。
ヘッダーを少しずつ変えて繰り返し作るので、言葉（言語）が全体の中でどのように働いているのか、少しずつ分かってきます！

フロントエンドチャンネル

【実践！サイト模写コーディング！超初心者向け】解説しながらHTML/CSSを書いていきます！レスポンシブ（スマホ）対応まで！
https://www.youtube.com/watch?v=Vh3qwpyYkuM&list=PLv7E5OqNAIPyy_7Mk5nskvNfHCKSIiIdt&index=2

じっくり取り組めます。

録音の声が小さいのが残念ですが、音量を大きくして見る価値はあります。
第三弾まである他、動画がたくさんあります。（他の動画はきちんと声が聞こえます。）

実践から始まるので、まずは以下の準備する所から見るのを勧めます。

【サイト模写コーディング】初心者向け！メリット・注意点・流れなどを解説！実際の模写をやるところまで。
https://www.youtube.com/watch?v=Pj63nxvRwwY&list=PLv7E5OqNAIPyy_7Mk5nskvNfHCKSIiIdt&index=1&t=138s

クリ★スタ

【コーディング中級編】①TOPページのHTML
https://www.youtube.com/watch?v=l-DvNqyJcdw&list=PLrSE9qv8sNyptO6apUQ4tjt0tDL8uLJL_&index=1&t=569s

ここまでくれば、

分かってきてます。

ブログはとても有名だと思います。プログラミングのあらゆる所まで紹介してあります。
下記の「初級編」から取り組むのがおすすめです。
初級編に動画はありませんが、分かりやすいです。

初級編
https://crestadesign.org/cording-first/
中級編の説明
https://crestadesign.org/cording-second/

次点：玉袋浩二の知恵袋ちゃんねる

【DAY28-30】初心者のための模写コーディング実践編【Web制作入門】
https://www.youtube.com/watch?v=n6aOk9ZJ6jI

「プログラミング初心者がHTML＆CSSを勉強して稼げるようになるのか検証」というテーマの中の一つ。
初心者でYouTube模写動画を作っているのはこの方ぐらいでしょうか。
このサムネイル画像は一見怖そうですが、話が上手で面白く、他の動画も楽しく見られます。

まとめ

progateの道場コースに挫折したら、、、

です！

no lonely,

no only.