Progateを卒業したら何をする?スキルアップのためのプログラミング学習
Progate でHTMLとCSSを勉強してきましたがなかなか後半は難しい内容になってきました。
それでもなんとか全項目を勉強し終えました。
で、この後はどうするのだろう。
初心者は必ず通る問題点ではないでしょうか。
Progate をやっているときは、どんどん課題をこなして進めれます。
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-12-153422.png?resize=432%2C671&ssl=1)
Q.最後まで勉強したら、次はどうやっていけば成長できるのか。
調べた結果私が選んだのは「模写コーディングをする」でした。
「模写コーディング」とは、
すでにあるサイトを、自分でコードを使ってサイトの再現をすることです。
ではどのようなサイトを再現していくか。
世の中にはたくさんサイトがありますが、どうなってんの?みたいな複雑なサイトは初心者は触れないようにしましょう。
嫌になります。
Visual Studio Code(VSCode)をインストール
実際コードを打つにはコードエディタをダウンロード・インストールしないといけません。
コーディングできる環境を作るということですね。
https://azure.microsoft.com/ja-jp/products/visual-studio-code
↑こちらからダウンロードします↑
そして無料です。
インストールしてみたら、表示言語は全て英語になっています。
ここで、VSCodeの拡張機能を使って、
Japanese Language Pack for Visual Studio Code
これを恐れずインストールしましょう。
表示言語が日本語化できて使いやすくなります。
わからなければ拡張機能の検索ボックスのとこで「japanese」と入力すれば出てきます。
・「install」をクリック…インストール開始
・「Restart」をクリック(画面右下に出てくる)…再起動開始
すると、自動的に日本語化完了です。
模写コーディングのサイトって?
・模写コーディング
・初心者向け
・入門
・おすすめサイト
など言葉を繋げて色々な検索をすると自分に合ったサイトが見つかるはず。
とりあえず「模写コーディング 初心者」で検索してみました。
様々なサイトが出てきます。
コーディングのレベル別に分けてくれていたり、
中には解説やヒントを載せてくれてるサイトもあります。
実際やってみて…
「模写コーディング 初級編」として紹介されていた、シンプルなサイトを模写してみました。
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-13-111900.png?resize=787%2C622&ssl=1)
・・・まったく進まない。
Progate でやってたときは、サクサク進んでいたコーディング。
調子よくやっていた時はProgate の学習した内容(コード)を覚えていただけだったのです。。。
基礎知識は身についたけど、いざ自分の力のみで進めってなったら微動だにせずでした。
そもそもどこから取り掛かる?
画像の抽出や文字サイズなど、どうやって模写する?
調べてはいたが実践ならず。。。
ちょっと考えて、模写は一旦やめました。
Youtubeを見ながら模写コーディング
次なるチャレンジはYoutubeを見ながら模写コーディング。
現役の方たちが模写コーディングに関して説明しながら、実際にコードを打ってくれます。
![](https://i0.wp.com/nyorabweb.com/wp-content/uploads/2023/07/スクリーンショット-2023-07-13-114105.png?resize=477%2C440&ssl=1)
なんてわかりやすいのでしょう!
これなら出来そうな予感です。
今まで知らなかったことが、ワンサカ出てきます。
Youtube見ながら、「へー」とか「ほー」とかつい呟いてしまってる状況。
模写をするにはとても便利なGoogle拡張機能があり、そちらについても説明をしてくれるので非常に助かりました。
拡張機能に関しては別の機会で綴っていきます。
コメント