【道WEB】目指せ10分!タイムアタックコーディング

画像やテキストが用意されているコーディング練習課題です。
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.テスト終了

作業が終わったらストップウォッチを止めてください。 

<タイムアタックが終わったら>

\ シェアしていただけると嬉しいです。 /

タイムアタックコーディングお疲れ様でした。
またのご利用をお待ちしています。