Codejump入門編までやってみた感想｜模写コーディングでスキルアップ！

こんにちは、aicoです☺
今回は、HTML/CSSの模写コーディング教材「Codejump」を使って入門編（レシピサイト）を完了したので、その感想をまとめてみます。

作ったのは「レシピページ」

Codejumpでは、入門編としてレシピサイトやプロフィールサイトなどのHTML/CSSでコーディングできるシンプルなデモサイトを模写します。

今回は、レシピページに挑戦。見本のデザインを見ながら、HTMLとCSSを使って同じようにページを再現していくのですが…
いや〜、思っていたより難しくて楽しかったです！

スマホ対応（レスポンシブ）デザインも含まれていて、CSSでメディアクエリを使ってスマホレイアウトに対応させる部分も実践できました。

模写のルールに沿ってチャレンジ

私が取り組んだ際に参考にしたのは、Codejump公式でも紹介されている「模写コーディングの基本ルール」👇

これを意識したおかげで、「細かくやりすぎて進まない」ことを避けられて、良い意味で“ざっくり”進められました。

実際につまずいたポイント

ここに、「自分がつまずいたポイント」や「ChatGPTに聞いて解決したこと」などをぜひ追加してみてください👇

• 要素が横並びにならない！→ display: flex; を見直した
• レスポンシブで画像が縮まない！→ max-width と height: auto の使い方を調整
• モバイル表示でレイアウトが崩れた → ブレークポイントの指定漏れを発見

やってみて感じたこと

Progateでは「知識としてのHTML/CSS」を学びましたが、Codejumpで模写してみてようやく「あ、こうやって組み立てるんだ」という“感覚”がつかめてきました。

画面とにらめっこしながら、「何が違うんだろう…？」と考える時間は大変だけど、
だからこそスキルアップにつながる実感があります。

まとめ｜“完璧じゃなくていい”から、やってみよう

Codejumpの模写コーディングは、初心者でも安心して挑戦できる内容でした。
特に「細かい部分は気にしすぎなくてOK」という方針が、私にはぴったり！

迷ったり悩んだりする時間も含めて、「Web制作って面白いな」と思えるようになってきました。

これからも少しずつ模写を進めて、いつか自分のデザインを形にできるようになりたいです☺

この記事を読んだ方へ

Codejumpをやってみた方、今からやる予定の方、ぜひコメントで感想を教えてください♪
一緒にがんばりましょう✨