画像やテキストが用意されているコーディング練習課題です。
10-30分程度で終わります。
この課題を毎日行うことで、コーディング時間の短縮を目指します。
「簡単にWebサイトを模写する方法」のタイムアタックバージョンです。
https://michiweb.net/cre-simple-cording/
今回つくるサイト
https://practice.michiweb.net/time-attack-01-ok/
＜得られるもの＞
・htmlの文章構造の理解
・タグの選択が早くなる
・CSSのトラブル対応が早くなる
・コーディングに対する不安が減る
＜用意するもの＞
・エディタ
・ストップウォッチ
・練習ファイル「time-attack.zip」
https://practice.michiweb.net/time-attack.zip
・見本画像
https://practice.michiweb.net/time-attack-01-view/
＜練習方法＞
1.ファイルのDL＆確認
「time-attack.zip」をDL後にファイルを解凍して、中身を確認してください。
・index.html
・style.css
・reset.css
・kv.png
・pic.png
2.テスト開始（タイマー起動）
ファイルをエディタで読み込み、index.htmlを開いてからテストを開始
見本画像を見ながらコーディングをします。
ーーー テストの仕様 ーーー
・PCのみコーディング
・サイトの全体幅は800px、背景色：#ccc
・メインコンテンツ：枠色:#666、背景色：#fff
・h1は画像にして、altは「#タイムアタックコーディング michiweb.net」を挿入する
・h2（文字サイズ：20px、行間1.3、文字色：白、太字）、ボーダー（太さ：5px、色：赤色、背景色：#999）
・テキスト（文字サイズ16px、行間1.6）
・ヘッダー画像780×300px
・コンテンツ画像 幅200px
・フッター：背景色 ＃999
・コピーライト：文字サイズ：14px、
ーーー 使用するテキスト ーーー
#タイムアタックコーディング michiweb.net
タイトルが入ります。タイトルが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。
タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。
テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。
Copyright 2019 test All rights reserved
ーーーーーーーーーーーーーー
3.テスト終了
作業が終わったらストップウォッチを止めてください。
＜タイムアタックが終わったら＞
\ シェアしていただけると嬉しいです。 /
タイムアタックコーディングお疲れ様でした。
またのご利用をお待ちしています。