プログラミング学習は、以前にプロゲートでコードを書く練習をしていた。

それから、初めてWebサイトの模写にチャレンジした。

その体験談を述べていく。

模写をしたWebサイトだが、ある教本に登場するカフェを紹介する架空のサイトである。

その教本が、

「１冊ですべて身につくHTML&CSSとWebデザイン入門講座」

である。

この本では、HTML&CSSの基本が学べるだけでなく、架空サイトを制作するまでのコードの書き方が詳細に盛り込まれている。

今回は、その架空サイトのトップページを作成した。

実際にWebサイトをつくって感じたことは次のとおりである。

・コードはコピー&ペーストではなく、実際に入力した方がいい。

・不明なコードがあればそこで手を止めて、教本を読み返して理解してから進めた。

・少しずつWebサイトができていく楽しさと嬉しさがあった。

この教本では、QRコードからサンプルデータの取得が可能であり、Webサイト制作をするためのコードを簡単にコピーができるのだ。

QRコードは株式会社デンソーウェーブの登録商標です。

そのため、コードをあまり理解していなくても、既に完成してあるコードをコピー&ペーストすれば、教本どおりにつくったものと同じWebサイトができあがるのだ。

ただ、コピーばかりしていたら、コードをしっかりと理解しないまま完成することになり、それだと今後 新たに別のWebサイトをつくることができないかもしれない。

そこで、手間であっても１文字１文字を手入力で打ち込み、ひとつひとつ理解するようにした。

さらに、ちゃんと理解できていないコードが教本で出てきた場合、面倒であっても過去に学習したページに戻って、改めて理解してからコードを打つようにした。

このようなやり方なので時間はかかる。

だが、ちゃんと理解をすることができる。

「このWebサイトはどのようにしてつくったのか？」を理論的に説明できるくらい理解しておけば、今後のプログラミング学習やWebサイト制作に役立つと思ったのだ。

進むスピードは遅くても、確実にWebサイトができあがっていくのは楽しい。

「今日は、ロゴがWebサイトに反映できた。」
「今日は、背景画像が反映できた。」

このように、自分がつくったコードが実際にどのようにWebサイトに反映されるのかを確認するのだが、視覚的にできあがっていくのがわかるのは嬉しい。

こうした積み重ねにより、Webサイトのトップページが完成した。

このことは、少なからず自信となり、大きな達成感があった。

今後は、トップページからのリンク先ページをつくり、この架空サイトが実務で使えるような状態まで模写していく。