本日のプログラミング学習
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ページを決める
レベル別におすすめされている、こちらのブログを参考にしています。
Web系フリーランスになるために初心者のときに知りたかったことをまとめました […]
２． LP全体をFull Page Screen Captureを使用してダウンロードし、pagesに貼り付ける
3. 画像の右側に、画像を見ながらサイトの枠組みを書いていく。
４． 実際にコーディングしていく。
フォントサイズやwidth、heightなどはChromeのディベロッパーツールで確認し、それ以外は見ないで記述する。
参考サイト
模写についての練習法や効果について書かれており、参考になります。
「Progateやドットインストールなどの教材で、HTML／CSSの基礎はわかった。そこで、次のステップに進み ... […]
Color Pick、Image Downloadのツールを紹介していた @nyanko_R_mottiさん。
とても便利なツールをご紹介頂きありがとうございます。
学習は全てウェブカツ！！というプログラミングスクールで学んでいます。
大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]