はじめまして．らくだと申します．フロントエンジニア微経験（React,typescript,vue.js）からUI/UXデザインもアウトプットできるフルスタックエンジニアを目指して学習しています．
現在デザインの学校に通っているのですが、どうすればサイト制作(HTML,CSS)が身につくのかよく聞かれるのでまとめてみました。
あくまで初心者の方に負荷が少なめで挫折することなく、トレーニングしていただけるように書いているので、自信のある方は2と3を飛ばしてもらっても構いません。(いきなりステップ4でも大丈夫という人は手順を飛ばして下さい。)
はじめに
まずはじめにHTML,CSSを実務で使いたい場合、検索力(調べて解決する力)が大切になってくるので
初めはできなくていいし、chat-gptにバンバン聞いてもいいので
調べてどうにかしようとする習慣を身につけていきましょう。
ささいなことでもググっていくことをおすすめします。
検索力は調べた回数、経験値に比例して伸びていくものなので初めのうちは戸惑っても、あとから楽になります。
余談ですが、検索力があれば、いろんな教材を買わなくて済む…
それにHTML,CSS以外のことにも応用が効きます。
ステップ4までたくさん検索しつつ終わらせた時には
検索力、サイト制作(HTML,CSS)する力ともに
すごく実力がついていると思います。
初めは理解できなくても触れているうちに頭が馴染んで理解できることもあるので
少々理解できなくても落ち込まず。次々すすめていきましょう。(でもなるべく理解しようとググったり考えたりしてね笑)
ステップ1.プロゲートの上級編までを終わらせる。
僕はドットインストールをやりましたが、ただ、プロゲートの方が詳しく、初心者に優しそうでサイト作りにより活きそうな印象でした。
僕が今初心者ならプロゲートをやります。月額1,490円（税込）
さっとやってひと月で解約しましょう。
カエル🐸トレーニングで確認するとより2と3が楽になります。
ステップ2.Youtubeに落ちてる動画を見ながら模写、もしくは下記の本の順序通り進める。
動画でも本でも好みのものをやってください。どちらかだけで十分です。
僕は動画派かな。
動画の教材のすすめ
vscode(コードを書いていく便利なメモ帳のようなもの)の設定
下記の動画や下記の動画の右下に出る関連動画をいくつか好きなものを選んで
動画の通りに書き写しみててください。
本のおすすめ
ステップ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
まで使えるようにした方がいいです。
それではまたいつか〜
下記のurlの方のチャンネルはだいたい揃っているのでおすすめです。