【プログラミング】HTML・CSSの学習日記!(21y-Feb-8th-14th)

学習記21年2月8日~14日のサムネWeb制作

こんにちは、ほうまちです。

今週もなんとか続けられたので、学習日記の2週間目です。

スポンサーリンク

2月8日

  • 実践!アプリ紹介ページを作ろう(ドットインストール):【46分】
  • 実践!スマートフォンサイトを作ろう(ドットインストール):【2時間29分】

この日までで、とりあえず学習サイトを使った勉強はいったん終わり。

次の日から何をしようか、と悩んでいました。

2月9日

  • 模写コーディング(プロゲート上級):【35分】

学習サイトを一通り終えたので、簡単な案件は行けるのか?

と考えていましたが、難しそうだったのでパス。

ですが、実践的にスキルを活用する練習が必要だと考えたので、

模写コーデングにチャレンジすることにしました!

その際、どのサイトを模写するか、やり方などはこちらのサイトを参考にしました!

【レベル別】模写コーディングにおすすめのサイトまとめ9選 | HikoPro Blog
HikoPro こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していま...

レベル別に摸写元をまとめてくださっているので、とても助かりました。

とりあえず、当面の目標は初心者レベルの3サイトを模写することにしました!

2月10日

  • 摸写コーディング(プロゲート上級):【3時間】

この日も引き続きサイト摸写。

昨日はあまり頑張れなかったし、正直今日もあまり集中できていませんでした。

初心者の私には、摸写コーディングは難しいという事が分かってきました……

100%の完成度はできなくても、60~80%くらいを目指し、答え合わせまで到達することをゴールに設定しました。

2月11日

  • 模写コーディング(プロゲート上級):【2時間53分】

フッターとヘッダーのアニメーションをつけました。

かなーりムズイ。

2月12日

  • 模写コーディング(プロゲート上級):【1時間19分】

メディアクエリを実装……しようと思いましたが、もうかなり心は折れています。

なぜかスマホ画面にすると変な余白出来るし、他にも見本通りにいかない所が多い……

とりあえず、もう答え合わせしちゃおうか、といったところでまた明日。

2月13日

  • 模写コーディング(プロゲート上級):【28分】

答え合わせにちょっと手を付けて、その日は終了。

朝起きるのも遅かったので、まあこういう日もあるでしょう。

2月14日

  • 模写コーディング(プロゲート上級):【1時間58分】

そして、現在。

答え合わせをして終了。

答え合わせをした感想は、正直に言うと解決しないことの方が多い。

お手本のコード通りに書けるようになれば、当たり前のように完璧に同じサイトを作れます。

ですが、自分で書いたコードを修正できる答えではないので、どうすればいいのか、と……

 

とりあえず、少なからず学びを得ようと考えて、今後気を付けることを書こうと思います。

  • 全体に通じるスタイルを先に、一つ一つにつけるスタイルをその後に。
  • 最初に全体像を意識して、大まかに構造とスタイルを考えておく

模写コーディング中に思ったことは、最初の方に書いたスタイルとかを修正するのはメンドイということです。

修正を少なくするために、全体から細部に、という流れを意識し

書き始める前に全体のイメージを膨らませておこうと考えました。

まとめ

というわけで、2週目も終了です。

「このまま模写コーディングして、本当に実力がつくのか……?」

という不安はありますが、これが現状で最善の策だと思うので、出来る限り学べることを拾っていこうと思います!

 

ちょうど模写コーディングを紹介しているサイトに中級から、BootstrapとjQueryの基礎を勉強するので、これは先週のマナブさんの学習手順とけっこうマッチしていることに気づきました。

これは、自分だけの学習ロードマップ的なものが見えてきたので、ちょっとテンションアップ!

模写コーディングを通じて、スキルを自分のものにしていきたいと思います。

 

来週からも模写コーディングをしていくつもりですが、

今週の勉強から得たことを活かしていきたいと思います。

それではっ!