【副業-Progate学習記録】開始76日でLevel.42到達|HTML&CSS上級道場を完走してJavaScript IIへ

Progateを使ったWeb開発学習も、開始から2か月半で76日目。
HTML&CSS上級道場(レスポンシブ対応)を完走し、続いて Flexbox編 → JavaScript II に進みました。
副業スキルとしてのWeb制作を意識しながら、少しずつ“形になる学び”を積み重ねています。
レベルは Lv.34 → Lv.42 に。HTML&CSSの集大成から、再びJavaScriptの世界へとステップアップした期間でした。


目次

Progate学習進捗まとめ(62〜76日目/Lv.34 → Lv.42)

日数学習時間到達L主な内容
62日目0:19Lv.34メディアクエリ復習。スマホ向けに幅100%やfooter中央寄せを調整
63日目0:23Lv.35HTML&CSS上級レッスン完了。次はProgateおすすめの道場へ
64日目0:13Lv.35上級道場「ヘッダーをレスポンシブ対応」開始
65日目0:17Lv.35道場①完了。「トップ部分をレスポンシブ対応」開始
66日目0:12Lv.36道場②完了。細かいミスをヒントで確認
67日目0:22Lv.36道場③「レッスン一覧部分」をレスポンシブ対応。float解除を忘れて修正
72日目0:08Lv.37道場④「フッター」をレスポンシブ対応。footerにドット不要を再確認
72日目0:38Lv.38上級道場完了!→ HTML&CSS Flexbox編も完走
74日目1:05Lv.40JavaScript IIに進む前にIを15分復習してから開始
75日目1:28Lv.42配列+オブジェクト+for文の課題に挑戦。const character = characters[i]; の意味を理解してスッキリ!

合計学習時間:5時間07分
📅 1日平均:約20分


HTML&CSS上級道場を完走して得られた学び

全4問の上級道場をやり切り、レスポンシブ対応の理解が一気に深まりました。
とくに印象に残ったのは、float解除の重要性footerタグの扱い方
「小さなミスが全体の崩れにつながる」経験を通して、CSS設計の考え方が少しずつ身についてきたと感じます。

また、上級道場の課題は「画面サイズごとにデザインを整える」実践型。
中級までの「完成を目指す学び」から、「どう見せるかを考える学び」に変わり、コードを書く意識が変化しました。


Progate Flexbox編での新しい発見

上級道場を終えたあと、ProgateおすすめのFlexbox編へ。
display: flex; や justify-content, align-items など、要素を自在に配置できる便利さを体感。
これまでfloatで苦戦していたレイアウトが、Flexboxでは驚くほどスムーズに整い、「デザインを自由に動かせる」感覚がつかめました。


Progate JavaScript IIで感じた“つながる”瞬間

Flexboxを終えたあと、再びJavaScript IIへ。
配列とオブジェクトを組み合わせた課題で登場したのが、この一文。

const character = characters[i];

“キャラクターズ”の中から“キャラクター”を1人ずつ取り出すイメージがつかめ、
for文の仕組みが一気に腑に落ちた瞬間でした。
「データを整理して動かす」ことの面白さを感じ、HTML&CSSとはまた違う達成感がありました。


次の半月(77〜91日目)の目標

  • Lv.46を目指す
  • JavaScript II〜IVを完了させる
  • 毎回「復習5分」を継続して記憶を定着

まとめ:Progate学習で“動く楽しさ”を実感した半月

この半月は、HTML&CSSで「形を整える力」を磨き、
JavaScriptで「動きをつける面白さ」に触れた期間でした。
Progate学習を通して、コードが少しずつ思い通りに動くようになり、
“作れる”から“動かせる”へと一歩進んだ感覚。
副業に向けて、Web制作スキルの土台が少しずつ固まりつつあります😊


💡 この記事とあわせて読みたい:

【副業-Progate学習記録】開始31日でLevel.26到達|JavaScript初級とHTML&CSS中級をクリア
【副業-Progate学習記録】開始46日でLevel.29到達|HTML&CSS道場と復習の大切さ
【副業-Progate学習記録】開始61日でLevel.34到達|HTML&CSS中級道場を完走して上級レスポンシブへ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

このブログの人

コメント

コメントする

CAPTCHA


目次