【HTML, CSS】 Progateの次はコレがオススメ ! 【初学者向け】
こんにちは。
Webデザイナー目指して勉強中のかいもちです🐣
勉強を始めて3ヶ月半になりますが、そろそろ今までの勉強についてまとめたいな〜(まだまだ勉強中だけど)と思いまして、今日から少しずつ、書いていこうと思います !
せっかくなので、ただの記録ではなく、私的に、効率がいいと思う勉強方法や順序 をまとめますので、初学者の方に是非読んで頂けたら...と思います。 📚
今回はHTML, CSS編としていますが、のちのちJavaScriptやイラレ、フォトショなどについても書いていけたらと思っております。
※ XDについては、既にまとめたものがあるので、よろしければぜひこちらから。
ちなみに現在、当の本人は、ワードプレスの学習に四苦八苦しております🤣
1. プロゲート終わったら真っ先に ! "ドットインストール"
プロゲートに負けず劣らず、超有名なオンライン学習ツール「ドットインストール」。
よく「プロゲートとどっちがオススメ ? 」なんていう議論をツイッターで見かけたりしますが... 私的には「どっちもがオススメ」です。笑
プロゲートは、「開発環境の用意がいらない(サイト上で完結)」ため、より手軽に勉強できるのが利点です。
が、実際のサイト作成は、開発環境をじぶんのPCで整えることが必須ですし、プロゲートの内容だけでは、いざサイトを作ろう ! と思った時に手が止まる(何からやっていいかわかんない)という状態になるかと思われます。
と、いうことで、「プロゲート終了」と「自分で一からマークアップしてサイトを作る」の間のクッションとして、ドットインストールをオススメします。
ちなみに... ドットインストールは無料 / 有料会員がありますが...
ぜひぜひ、1ヶ月でも有料会員になって、PREMIUMのついた部分もやってみてほしいと思います !
特に、プロゲートであまり触れられていない「フレックスボックス編」や「グリッドレイアウト編」などは、今後必ず必要になる知識ですので、ここでガッツリと勉強することをオススメします。
5の「ウェブサイトをゼロから制作してみよう」と、6の「ウェブサイトを公開してみよう」に関しては、この段階でやってもやらなくてもどっちでもいいと思います。
githubは、いつかは必ず勉強する必要があると思いますが、もう少し学習を進めてからでも問題ないです。
2. 本派のあなたにオススメ ! "1冊ですべて身につくHTML & CSSとWebデザイン入門講座"
超良書です。
ドットインストールやってみたけど、動画見ながら勉強するの私には合わないわ〜という人や、とにかくおしゃれなWebサイトを作ってみたい ! という人にオススメ。
ドットインストールで学ぶ内容のほとんどが網羅されていますし、最後までやると下層ページまで作れるので、かなりボリュームがあります。
説明もわかりやすく、出来上がったページは自分で作ったと思えないほど素晴らしく、テンション上がります。(ま、写してるだけなんですけど笑)
3. いよいよ自力でマークアップ ! "Codestep"
え、これ、無料でいいの ! ? 🥺 と、今でも思ってます。笑
回答例はもちろん、ダミーの画像や程よいヒントまで用意されており、至れり尽くせり。
より実践に近い、XDからの模写コーディングもできるようになっているので、慣れてきたらそちらもオススメです。
さまざまなレベルの課題が用意されていますが、中級編の途中まではJavaScriptの知識がなくても出来るものになります。
入門編を2つくらいやったら→初級編→中級編と進んでいくと良いと思います。
中級編のマークアップが(もがきながらも)出来るようになっている頃には、かなり力がついていると思いますので、JavaScriptやphpなど、他の言語の勉強に移るのがいいかな ? と思います👍
(それらを学びながらも、HTML, CSSの知識は増強していけるはずです ! )
---
番外編 : こちらもオススメ
私がHTML, CSSの勉強を始めた頃には無かった本です。(2021, 7 出版)
今から私がHTML, CSSを学ぶとしたら、まず一番に導入したい本だな ! と思ってので、合わせてオススメいたします。
「HTMLやCSSの、1つ1つの書き方はわかる。
でも、それらをどう組み合わせてWebサイトにしていくのかがわからない」
↑これ、Codestepをやり始めた頃の私が、毎日毎日思っていたことです。笑
この本は「デザインを分割し、小さなパーツに分解する」というところから入るという点が、他の類似本と大きく異なります。
Webサイトのデザインを、どのように分けて、どのようなかたまりでマークアップしていけば良いのかということがわからないと、自分でゼロからサイトを作れないのは当たり前です。
ただ、現状、そのへんの考え方は人や会社によって大きく異なるからなのか、詳しく説明してくれている本やサイトは少ないと感じています。
小学生が、原稿用紙の使い方や、起承転結について学ぶのと同じように、マークアップに必要な情報を整理する力をつけてくれるのがこの本です。
そのあたりが、教科書では教えてくれない...なのかな。
あえて本で学ばなくとも、模写コーディング等、場数を踏めば自然とわかってくる感覚かもしれませんが(私はそうでした)、初めから身につけておいて損は絶対ないと思います。
のちのち、BEMなどのCSS設計を学んでいく上でも、この考え方は絶対活きると思います・・・ !
---
以上、なぜか番外編をものすごい熱量で語ってしまいましたが🤣笑、
どうぞ参考にしていただけたらと思います😌💐
この記事が気に入ったらサポートをしてみませんか？