今回は、僕が全くの知識ゼロの状態から、簡単なWebページを作成できるようになるまでにどのようにHTML/CSSを勉強したのかについて書いていきたいと思います。
まず、
僕がHTML/CSSや、Javascript、jQueryなどといった、フロントエンドの言語の存在を知ったのが、現在作成中の学内施設のWebページを作ると決まってからでした。
僕は情報系の学科で、講義の中でバックエンド(Java,C)については勉強をしていたのですが、当初は、フロントエンドについての知識は全くなく、そもそも、JavaやCがバックエンドの言語であり、HTML/CSSとは役割や動作が変わるということも全く知りませんでした。
そこで、まず、一緒にWebページを作成している先輩に前提知識として、
○フロントエンドとバックエンドについて
・フロントエンド：ユーザーなどと直接やり取りをする要素
→見た目を決定する。開発するときは、変化が直接見れるので、比較的容易。
ex)HTML,CSS,Javascript,jQuery,React.js
・バックエンド：フロントエンドの入力データや指示をもとに、処理を行って結果を出力したり、記録媒体に保存したりする処理
→ユーザーが入力したデータを裏でこっそり処理して、出力する。裏で処理をするため、変化が見えづらいため、比較的難しい。
ex)Java,C,Python,Ruby,Perl
○フロントエンドの言語について
・HTML: 記事のテキストを書く→”What”の部分
・CSS: テキストに加工を入れる→”How”の部分
・Javascript: テキストに動きをつける→"How"の部分
・jQuery,React.js: Javascriptの動きをいくつかまとめて簡単に動きをつけられるようにした辞書(ライブラリという)。他にもいろいろあり、それぞれエフェクトを付けるのが得意だったり、処理が速かったりするので、用途によって使い分ける。jsはJavascriptの略。
・Vue.js,Angular: フレームワーク。枠組み。開発を簡単にできるんだと思う。他にもいろいろあると思う。この記事を書く上で初めてライブラリと別物だと知ったので、説明は省く。
これを覚えておきましょう。
そして、ここからは僕が実際にした勉強について、
僕がしたのは、
・『作りながら学ぶ HTML/CSSデザインの教科書』を読む→実際にコードを書く。
⇒王道のWebページの作り方や注意点について学ぶ
・Progate有料版を登録(月額980円で学び放題)→HTML/CSSのコースを修了
⇒より実践的な練習で基本をおさらいしながら、仕様書を元にWebページを作成し、細かい部分の注意点について学ぶ
以上、2点です！！！
この2つをしたらある程度のものは作れるようになると思います。というか、HTML/CSSについて概要がわかるので、あとはわからないところは開発過程でググれれば大丈夫です。
そもそも、フロントエンドの言語は見た目で変化がわかりやすいことから、参考コードがネットに上がっているので、それらをコピー＆ペーストするだけである程度のものが作れるので、自分で書けなくても、コードを読めたらWebページ作成を始めちゃってもいいと僕は思います。
そのほうがモチベも保てますし◎
そして、今は、
・ProgateでJavascriptのコースを受講中
です。
今後は、学内施設のWebページを作成しながら、Webページの作成案件を受注していきたいと思っています。
そのために、勉強、開発、アウトプットの日々ですね◎