はじめまして．らくだと申します．フロントエンジニア微経験（React,typescript,vue.js）からUI/UXデザインもアウトプットできるフルスタックエンジニアを目指して学習しています．
現在デザインの学校に通っているのですが、どうすればサイト制作(HTML,CSS)が身につくのかよく聞かれるのでまとめてみました。
あくまで初心者の方に負荷が少なめで挫折することなく、トレーニングしていただけるように書いているので、自信のある方は2と3を飛ばしてもらっても構いません。(いきなりステップ4でも大丈夫という人は手順を飛ばして下さい。)
はじめに
まずはじめにHTML,CSSを実務で使いたい場合、検索力(調べて解決する力)が大切になってくるので
初めはできなくていいし、chat-gptに聞いてもいいので
調べてどうにかしようとする習慣を身につけていきましょう。
ささいなことでもググっていくことをおすすめします。
検索力は調べた回数、経験値で伸びていくものなので初めのうちは戸惑っても、あとから楽になります。
余談ですが、検索力があれば、いろんな教材を買わなくて済む…
それにHTML,CSS以外のことにも応用が効きます。
ステップ4までたくさん検索しつつ終わらせた時には
検索力、サイト制作(HTML,CSS)する力ともに
すごく実力がついていると思います。
初めは理解できなくても触れているうちに頭が馴染んで理解できることもあるので
少々理解できなくても落ち込まず。次々すすめていきましょう。(でもなるべく理解しようとググったり考えたりしてね笑)
ステップ1.プロゲートの上級編までを終わらせる。
僕はドットインストールをやりましたが、ただ、プロゲートの方が詳しく、初心者に優しそうでサイト作りにより活きそうな印象でした。
僕が今初心者ならプロゲートをやります。(月1000円ほど)
カエル🐸トレーニングで確認するとより2と3が楽になります。
ステップ2.Youtubeに落ちてる動画を見ながら模写、もしくは下記の本の順序通り進める。
動画でも本でも好みのものをやってください。どちらかだけで十分です。
僕は動画派かな。
動画の教材
webサイトチャンネル(この方のチャンネルはすべての解説が揃ってる)
先に網羅的にやるのではなく、いきなり動画を見て模写をして分からない部分だけ動画を見て下さい。
効率が非常に悪くなるので
動画(webサイトチャンネルの方の動画です。)
本のおすすめ
ステップ3.模写トレーニングサイトで模写する
こちらのサイトをなるべく答えを見ずにやる!!
入門、初級、中級、上級まで1つずつこなせればかなり実力がついてるはず
上級はJQueryが入っているので飛ばしても問題ないです。
jQuery,JavaScriptを扱えるとサイト制作楽しいですよ。
ステップ4.ポートフォリオでオリジナルなものを作る。
できれば、Figma、XD(Figmaがおすすめ)でサイトの画面を作りそれに合わせてつくっていく。
figmaはイラレが使えれば使えるので問題なく使えると思います。(3つまで無料枠があります。)
figma(解説動画)
これを見た後はググってどうにかfigmaを扱えると思います。
あとはポートフォリオをつくっていきましょう。
デスクトップ版とレスポンシブ(スマホサイズ)版をそれぞれ作りましょう!!
ポートフォリオの参考はWEB制作会社のポートフォリオを参考にした方が絶対にいいです。!!
追記
もしwebコーダーやwebデザイナーを目指すのであれば、
さらに
git(プログラム管理と共有ツールのようなもの)
wordpress(自動でHTML,CSSを入れてくれます。)
wordpressに使うphpまでできればなおいい(飛ばしてもいい)
Sass(CSSを便利にしたもの)
最低限のjQuery,javascript
まで使えるようにした方がいいです。
それではまたいつか〜