DAY 22 HTML & CSS

DAY 22 HTML & CSS 3周目ーLP模写 必要なツールと準備 【ウェブカツ 】

本日のプログラミング学習

HTML & CSS / 3hour

Aug / 44hour

Total / 69hour

 

本日からLPの模写にとりかかります。

以下、模写する際の準備やルールなど。

 

LP模写に必要なツール

ブラウザはGoogle Chromeで行います。

1.ColorPick Eyedropper ー サイトで使用されているカラーコードを調べるツール

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=ja

こんな感じで、カーソルを当てるとそこに使用されているカラーコードが表示される。↓

ColorPick Eyedropper

 

2.Image Downloader ー サイトに使用されている全ての画像データをダウンロードするツール

https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja

image downloder

 

3.Full Page Screen Capture ー ページ全体のスクリーンショットをダウンロードできるツール

https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl?hl=ja

screencapture-webukatu-sample-html-practice-2019-08-16-22_36_33

 

実際の手順

1. 模写するべきLPページを決める

レベル別におすすめされている、こちらのブログを参考にしています。

フリーランスで稼ぐ方法まとめ

コーディングの練習模写サイトをレベル別に紹介。 完全無料でできる方法で、コーディングの無料素材を提供してくださっている方のサイトも紹介しています。 コーディングの実案件はpsd(Photoshop)からの書き出しが圧倒的 ... […]

 

2. LP全体をFull Page Screen Captureを使用してダウンロードし、pagesに貼り付ける

 

screenshots_pages

 

3. 画像の右側に、画像を見ながらサイトの枠組みを書いていく。

 

copycording_block

 

4. 実際にコーディングしていく。

フォントサイズやwidth、heightなどはChromeのディベロッパーツールで確認し、それ以外は見ないで記述する。

 

参考サイト

模写についての練習法や効果について書かれており、参考になります。

SHIMOTSUMAGAZINE

「Progateやドットインストールなどの教材で、HTML/CSSの基礎はわかった。そこで、次のステップに進み ... […]

 

Color Pick、Image Downloadのツールを紹介していた @nyanko_R_mottiさん。

とても便利なツールをご紹介頂きありがとうございます。

 

学習は全てウェブカツ!!というプログラミングスクールで学んでいます。

プログラミングスクール「ウェブカツ!!」

大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール[…]

 

 

 

DAY 22 HTML & CSS
最新情報をチェックしよう!