画像やテキストが用意されているコーディング練習課題です。
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.テスト終了
作業が終わったらストップウォッチを止めてください。
<タイムアタックが終わったら>
\ シェアしていただけると嬉しいです。 /
タイムアタックコーディングお疲れ様でした。
またのご利用をお待ちしています。