模写コーディングで、初めて「手応え」を感じた話

HTMLとCSSを一通り学んだあと、
正直に言うと、少し困っていました。

文法はなんとなく分かる。
タグも、クラスも、指定の仕方も知っている。

でも、

「で、これで何ができるんだろう?」

という感覚が、ずっと残っていた。


作ろうとすると、手が止まる

Progateや教材を進めているときは、
用意された答えがありました。

でも、
「じゃあ自分で何か作ってみよう」と思った瞬間、
急に手が止まる。

何から書けばいいのか分からない。
レイアウトをどう組めばいいのかも分からない。

知識は増えたのに、
使い方が分からない状態でした。


そこで選んだのが、模写コーディング

自分でゼロから考えるのが無理なら、
すでにあるものを、そっくりそのまま作ってみればいい。

そう思って始めたのが、
模写コーディングでした。

利用したのは、
「CodeJump」というサイトです。

完成形のデザインがあり、
それを見ながら、同じものをHTMLとCSSで再現していく。

設計は考えなくていい。
ゴールもはっきりしている。

今の自分には、ちょうどよかった。

↓僕は使っていませんが、コードジャンプから出ている書籍を紹介します。


HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門 [ 小豆沢 健 ]

「あ、これ知ってる」が増えていく感覚

最初は、やっぱり時間がかかりました。

余白が合わない。
文字サイズが違う。
配置がズレる。

でも、途中から変化がありました。

「あ、これflexだな」
「ここはmargin-topか」
「この指定、前にやったやつだ」

完全に理解しているわけじゃないのに、
手が動く。

この感覚は、
これまでの学習では一度もなかったものでした。


正解がある安心感

模写コーディングの一番よかったところは、
正解が目の前にあることでした。

「これで合っているのか?」
と悩まなくていい。

違えば、見た目がズレる。
合っていれば、近づく。

評価基準が、すごくシンプルです。

だから、
「間違えてもいい」という気持ちで進められた。


できるようになった、というより…

この頃の自分は、
「もうWeb制作できる!」
なんてレベルでは、もちろんありません。

でも、

  • HTMLとCSSは、触れば何とかなる
  • 分からなくても、調べながら進められる
  • 前より明らかに、怖くなくなっている

そう感じられるようになっていました。

できるようになった、というより、
逃げなくなった。

それが一番大きな変化だったと思います。


初めて「積み上がっている」と感じた

模写コーディングをいくつかこなした頃、
ふと、こう思いました。

「あ、これ。
ちゃんと積み上がってるかもしれない。」

毎日派手な成長はない。
でも、昨日よりは少し早く書ける。

昨日より、少し迷わない。

この感覚は、
これまでの挫折経験にはなかったものでした。


次回予告

次回は、
WordPressを触ってみて、
初めて「これは仕事っぽいな」と感じた話を書きます。

HTMLとCSSが、
「知識」から「道具」に変わった瞬間。

正直、
ここで一段階、見える世界が変わりました。

↓僕が独学を始めたきっかけになった本です。


改訂版 本当の自由を手に入れる お金の大学 [ 両@リベ大学長 ]

\ 最新情報をチェック /

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です