本日のプログラミング学習
HTML & CSS / 3hour
Aug / 44hour
Total / 69hour
本日からLPの模写にとりかかります。
以下、模写する際の準備やルールなど。
LP模写に必要なツール
ブラウザはGoogle Chromeで行います。
１．ColorPick Eyedropper ー サイトで使用されているカラーコードを調べるツール
こんな感じで、カーソルを当てるとそこに使用されているカラーコードが表示される。↓
２．Image Downloader ー サイトに使用されている全ての画像データをダウンロードするツール
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja
３．Full Page Screen Capture ー ページ全体のスクリーンショットをダウンロードできるツール
実際の手順
１. 模写するべきLPページを決める
レベル別におすすめされている、こちらのブログを参考にしています。
フリーランス3年目で、ずっと完全リモート&在宅ワークしています。初心者の時に知りたかった内容を書いています。[…]
２． LP全体をFull Page Screen Captureを使用してダウンロードし、pagesに貼り付ける
3. 画像の右側に、画像を見ながらサイトの枠組みを書いていく。
４． 実際にコーディングしていく。
フォントサイズやwidth、heightなどはChromeのディベロッパーツールで確認し、それ以外は見ないで記述する。
参考サイト
模写についての練習法や効果について書かれており、参考になります。
「Progateやドットインストールなどの教材で、HTML／CSSの基礎はわかった。そこで、次のステップに進み ... […]
Color Pick、Image Downloadのツールを紹介していた @nyanko_R_mottiさん。
とても便利なツールをご紹介頂きありがとうございます。
学習は全てウェブカツ！！というプログラミングスクールで学んでいます。
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]