プログラミング初心者の60日間チャレンジ【36~40日目】

プログラミング日記

プログラミング初心者の60日間チャレンジ【36日目】

ページをまるごと作ってみよう

昨日の続きで、HTMLコードを書き切りたいと思います。見本のページをお手本にしながら、とにかく書いていきます。

  1. 見本のWebページを確認
  2. headerを書く
  3. 無事に表示される
  4. mainを書く
  5. 表示がおかしい(けど、無視)
  6. footerを書く
  7. 無事に表示される
  8. 表示がおかしい場所に戻る
  9. mainではなくheaderがおかしいことに気付く
  10. 無事に表示される(HTML終了)

表示がおかしいときって、焦りますよね。自分ではきちんとコードを書いているつもりになっているので、自分で誤りを見つけるのが難しいです。もう少しSublimeTextに慣れてきたら、自分用に設定をカスタマイズしていきます。

 

プログラミング初心者の60日間チャレンジ【37日目】

ページをまるごと作ってみよう

HTMLを書いたので、次はCSSです。「base」「pc」「tablet」に分けるため、最初はbaseから挑戦していきます。

  1. 見本のWebページを確認
  2. ざっくり、カテゴリ分け
  3. Web表示を小さくする
  4. これ以上小さくならない?
  5. 頑張って書いてみた
  6. 何故か反映されない
  7. HTML記述を忘れていることに気付く
  8. 無事に表示される
  9. navで思考停止(次回課題)

私としては、順調な進行具合です。もっと勉強時間を増やせば、もっと書き進められるのかもしれませんが、覚えながら進むにはこれくらいが限界です。一度、ひとつのWebページを書き切れば、要領も良くなるので、初めの一歩は踏ん張っていきますね。

 

プログラミング初心者の60日間チャレンジ【38日目】

ページをまるごと作ってみよう

baseのCSSの続きです。

  1. しっかり復習
  2. navを書く
  3. 無事に表示される
  4. まだレスポンシブではない
  5. 次はメイン
  6. 無事に表示される
  7. footerでスペルミス発見
  8. なぜか、行間が狭い
  9. HTMLに戻る
  10. 修正完了

今日は時間がかかりました。量は書いていませんが、何を書くのかを考えるのと調べるために、時間を費やしました。自分で考えることが、きっと大切。

 

プログラミング初心者の60日間チャレンジ【39日目】

ページをまるごと作ってみよう

tabletのCSSを書いていきます。

  1. baseと同じカテゴリ分け
  2. 変更部分をコピペ
  3. 書き換えても、反映されない
  4. HTML記述を忘れていることに気付く
  5. 次も忘れそうなので、先に書いておく
  6. 変更部分をコピペ(その2)
  7. 書換え後、無事に表示される
  8. 変更部分をコピペ(その3)
  9. 記述が必要ない部分に気付く
  10. 不要部分を探してみる
  11. 消してみる
  12. PC画面
  13. タブレット画面
  14. 無事に表示される

冗長なコードを書いてしまいました。使わないコードは、メモリの圧迫とセキュリティホールにつながるので、ダメですね。理由はわかっているのですが、何が冗長になってしまうのかを理解するまで、しばらく時間がかかりそうです。

 

プログラミング初心者の60日間チャレンジ【40日目】

ページをまるごと作ってみよう

tabletの続きからCSSを書いていきます。完成のあと、pcのCSSを書きます。

  1. baseからtabletにコピペしようとして
  2. 部分コピペで良いことに気付く
  3. 無事に表示される
  4. pc表示の設計図を確認
  5. ページ全体を書く
  6. 無事に表示される
  7. ヘッダーを書く
  8. navがおかしい
  9. 記述が足りないことに気付く
  10. 書き加える
  11. 無事に反映される
  12. メインを書く
  13. 体裁がおかしい
  14. セミコロンが足りない
  15. まだ、体裁がおかしい
  16. 『:first-child』に直す
  17. 無事に反映される
  18. フッターを書く
  19. 無事に表示される
  20. sample site完成

このコード書きをしている途中で、コントラスト比率を確認できるサイトを、参考書で知りました。良質なユーザインタフェースを考えるためには必要なため、即ブックマークです。

「ページをまるごと作ってみよう」はこれで完成しました。

しかし、この課題を簡単にクリアしたわけではありません。今日だけでも「:first-child」に気付けず、1時間くらいググり続けました。動画にまとめるとあっと言う間ですが、初心者ならではの躓きがいくつもあったと思います。めげずにこれからも、勉強+実践を続けていきます。