前回に引き続き、学習3週目の状況をリアルに振り返ります。
実際に使った教材や、そのとき感じた難しさ、できるようになったことを日記的にまとめました。これから勉強を始める方の参考にもなれば嬉しいです。

学習3週目でやったこと

2週間でデイトラWEB制作コース・Progate 有料版・書籍を活用しながら、HTML/CSS/Sass/JavaScript/jQueryの“基礎に触れる”までは行けた。でも「自分でゼロからコードを書く」はまだ遠い……と実感。

そこで指針にしたのが しょーごログ さんと CodeJump さんでした。
インプット中心だった最初の2週間から学習スタイルを大きく変えて、学習3週目は『 読む→模写→答え合わせ 』に挑戦。
インプットよりも、自力でのアウトプットを最優先にしました。

①「しょーごログ」で“地図”を手に入れた

とくにこの記事を何回も読み返しました：
https://shogo-log.com/after-progate/

この1本が、今の自分の現在地と、WordPressテーマ作成までの道筋を示してくれる“地図”でした。この記事を書いている今でも、この地図に沿って学習を進めています。
次にやることが明確なので、迷いが減ってモチベーションが保ちやすいのも◎。

また、以下の学習課題も購入：
デザインカンプからのコーディング練習課題 | 爆速レビュー付き
https://shogo-log.com/coding-study/

ただ、この週の時点では「まだ自分で書ける」状態ではない自覚があったので、一旦パス。まずは模写で“型”を体に入れることを優先しました。

②「CodeJumpの模写」で“型”を体に入れる

いつもお世話になっているサイト：
https://code-jump.com/

3週目にやった学習手順

• ①コードを印刷
• ②クラス命名を観察：ブロック/要素等をメモ
• ③CSSの当て方を観察：display/grid/flex の使い分け、余白スケール、レスポンシブの切り替え位置
• ④手を動かして模写：HTML骨格→主要パーツ→装飾

5日間で入門編・初級編を一通り確認。正直かなりボリューミー。楽しいけれど、しんどかったのも本音です…！

③ 書籍：『HTML & CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』

最高の1冊です。CodeJumpの書籍版『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』にて第1章・第2章を実践。

書籍の学習手順

• ①本でコードの流れを理解
• ②AIを活用しつつ自力で実装：自分のデザインカンプから
• ③本で答え合わせ：命名・構造・CSSの当て方を比較

取り組んだ章の概要

【第1章】入門編：プロフィールサイト基礎学習を終えたあとのウォーミングアップ用の練習サイト
【第2章】初級編：ブランドサイトかんたんなHTMLとCSSだけで作れる、1ページのシンプルなWebサイト

どちらも各1日で完成まで仕上げられました。
自分で組んだ後に本の解法を確認すると、差分がハッキリ見えるので修正ポイントが掴みやすかったです。

学習3週目でできるようになったこと

当時のメモを見返すと、次のように書いていました。

①HTML骨格の理解：header / main / footer と section / article / figure の使い分けが定着
②CSSの基本操作：Flexbox / Grid などの活用がスムーズに
③ミニサイトの模写：AIに相談しながら、デザインカンプ → コーディングの流れを一人で回せるように

学びと反省

①レスポンシブ対応が難しい：ブレークポイントの基準、要素の並び替え、画像のアスペクト比管理など
②CSSの命名を深掘りしたい：再利用前提の命名／BEMの“粒度”の揃え方
③答えがない模写のハードル：設計（何をどの順で作るか）の段取り力がまだ弱い

まとめ

「読んで理解」→「模写で習得」→「自分の設計で書いて答え合わせ」
3週目でやっと、どうすれば“書けるようになるか”の道筋が見えました。

これからも、学習0日目〜今日までの歩みを、週ごとにまとめていきます。

過去の記事はこちら

• 前回：Week2｜スピード重視でインプット
  https://step-log.com/week2-web/
• 初回：Week1｜基礎の反復で土台づくり
  https://step-log.com/week1-web/