結論：　コピーサイトを作る

「前書き」
私の記事は主に、プログラミング初心者がフロントエンドエンジニアになるために経験していることを書いたものです。
今回が初投稿になります。

勉強開始：3/18/2022

今回はHTMLとCSSの基礎を教科書で学んだ後、
やってよかった経験に関して書いていこうと思います。

好きなウェブサイトのトップページのコピーを作ってみる

HTMLとCSSの基礎を教科書で学んだ後、学んだことを忘れず「身に着ける」ために
愛用しているウェブサイトの見た目のコピーをトップぺージだけ作ってみることにしました。

勉強のために使用した本のリンク貼っておきます。

使った教科書：HTML&CSSの教科書

コピー元参考サイト：airbnb

コピーした時から時間が経ってトップページが変わってしまいました

コピーサイトを作ってみようと思った理由は以下の３点です。

教科書だけでは学習が受け身になる
デザインを１から考えなくていい
好きなサイトだからモチベーションも上がる

教科書だけでは学習が受け身になる

教科書を１通りしてみて思ったのは、「そりゃ教科書に沿りながらならできるよな」でした。

飛ばしてもいい内容

英語の勉強で例えてみます。

教科書を使って勉強中に「How are youって書け」って指示されたら、
誰でも書けますよね。だって写すだけだもの。

でも日記に「なんでもいいから英語で書け」とか言われると、一気に難しくなる。

まず何を書いたらいいか迷うし、どうやって書いたらいいかもすぐには出てきません。

この二つの指示での大きな違いは、明確な指示があるかどうかというところです。

HTMLとCSSの話に戻ります。

divとかflexboxとかbackgroundとかmediaクエリなどの基礎を教科書を見ながら使ってみた後、
いざ何かを作ろうとすると、
「あれ、、、、どっから始めるんだ...？？？」って私はなりました。

教科書では明確な指示が章ごとにあったから、それを真似していればどうにかいろんな技術が使えていたんです。受け身学習というものですね

受け身学習中はやった気にはなるし、ぐいぐい学習は進むしで正直とても楽しいです。

ですが、プログラミングは知識寄りの技術なので、
受け身学習だけでは最終的に身につきません。学んだことは応用して使うことが大事です。

自分で考えて作ってみて初めて「知識」が「技術」に変わるものだと私は思います。

なので受け身学習で終わらないようにするため、私はコピーサイトを作ってみました。

デザインを１から考えなくていい

ウェブデザインの経験があるひとはここは飛ばして読んでもいいと思います。

ウェブサイトを作る上でHTMLやCSSと同等に大切なことがデザインです。異論は認めます。

私は絵のコピーは人並みにできますが、新たなイメージを創り出すことがとても苦手です。

「でも実用的なアウトプットはしてみたい。どうしよう...」と少し悩みました。

ここでコピー（模写）の登場です。
HTMLとCSSの身につけたいわけだから、デザインの勉強は二の次にして、
コピーすればいいじゃんという考えに至りました。

デザインの勉強も将来的には必要かもしれません。
ですが、デザインはそもそも今の目標ではないので、
コードの練習に集中するためには、コピー・模写がその時は最適解でした。

結果、参考サイトを見ながら、「ここはdivで囲うのかな〜」とか「ここはflex？float？」とか
「クラス名はこんなのにしてみよう」とか色々試行錯誤を繰り返しながら、作業を進めることができました。

デザイン考える時間要らなかったので、学んだ知識を新しいうち使うことができたと思います。

好きなサイトだからモチベーションも上がる

好きなサイトをでもあったので、モチベーションの維持にも繋がったと思います。

また、いろんなサイトがある中で好きなサイトに絞ると、スタートダッシュも早くできました。

ただコーディングをどこからどう始めたらいいのかは分かりませんした。

なので、色々調べて使ったツール・サイトがいくつかあります。

使ったツールの数は言い出すとキリが無いので最重要なのを３個だけ最後に紹介します。

使ったツール

Google Developer tool
Visual Studio Code
HTMLとCSSのValidator

Google Developer tool

これなかったら正直コピーサイトを作るのは始めなかったと思います。
簡単にいうとウェブサイトのHTMLとCSSが見れるようになるツールです。

日本語訳では「Google開発ツール」

名前の通り、開発するためのツールです。

私はこれでサイトの構成を見ながら一つずつ作っていきました。
最初から全部できるわけではないので、ヘッダーだけやってみるとか
フッターだけやってみるとか、一歩ずつでも進むことができれば、
最終的に形になりと思います。

使い方の説明をされているページのリンクを下記に貼っておきます。

Google Developer Toolのリンク

Visual Studio Code

エディターです。HTMLとかCSSのファイルはこのアプリから書き始めたり、編集するようにします。
拡張機能も色々あり使いこなせれば最高の相棒になるはずです。

Visual Studio Codeのリンク
 Visual Studio Codeの拡張機能紹介リンク

HTMLとCSSのValidator

コードの打ちミスとかを見つけてくれるサイトです。

私がコピーサイトを作っててよくあったミスが、打ち間違えです。
クラス名が違ったり、小文字が大文字になってたりと初歩的なミスがいっぱいありました。
わかりやすいミスならコードをValidatorに貼れば、ミスがないか見てくれます。

勉強し始めの時は３０分以上自分の思ったことが実現できない時は
これらのサイトに頼っていました。

全てのミスを見つけてくれるわけではないですが、メンター等いない場合はとても役に立つと思います。

HTMLバリデーターのリンク
 CSSバリデーターのリンク

コピーサイトを作ってみた感想

最初はわからないなりに一歩ずつコピーを進めました。
１週間もやり続けるとめちゃくちゃレベルが上がりました。

初日のコードを見ると、「あれ？なんでこんな書き方してんの？」って
自分の書いたコードのクオリティの低さにびっくりしたのを今でも覚えています。

要するに、まず基礎を学習して、知識を得る。
実践で試行錯誤しながら進めることで知識が技術に変わったのだと思います。

最後に

HTMLやCSSは厳密にはマークアップ言語であり、プログラミング言語ではありません。
ですが、習得する上で大切なことは変わらないと思います。
それは「知識に触れて、そして技術に変える」こと。

現時点で（2022/07/04）で勉強を始めて約４ヶ月目です。
HTMLとCSSから始まり、JavaScript、PHPを学びました。
フレームワークとその他の技術はjQuery、Node.js、Laravel、MySQL、SCSS、Firebase、Git、Githubなどを使ってWebサイトを作ってみました。

時々、受け身学習しっぱなしで、すぐに忘れて勉強し直ししたものもありました。
スケジュールの管理が原因だったので、そこに気をつけながら
これから学んでいくことも、しっかりと自分のものにしていきたいと思います。

HTMLやCSSの学習を始めた読者の方々も
学んだことを自分の一部にできるよう頑張ってください。

最後まで読んでいただきありがとうございました。
またどこかの記事でお会いしましょう。

Shoより