今回はWeb制作の学習ロードマップについての記事です。
巷に溢れておりますが、私なりの見解を挟みつつ記事にしておりますので、他の記事と比較してご自身にあった学習方法を見つける手助けになればと思います。
エディターについて
エディターはMicrosoft製のVisual Studio Codeを左記のリンクよりダウンロードしてください。
お勧めのプラグインは下記記事を参考にしてください。
HTML、CSSの学習について
個人的にはドットインストールがお勧めです。
動画教材の学習ですが、1本1本の動画が短く、区切りよく見れるので動画学習が苦にならない方はドットインストール一択だと思います。
何よりVScodeを利用しながら学習できるので本番と変わらない環境で学習できるのが良いです。
動画学習が向いていない方はProgateがお勧めです。
ただブラウザ上での学習になるので、VScodeに慣れれないことがデメリットですね。
どちらも月額は同じくらいなので好みに合わせた学習方法で学んでください。
また同じ動画を2回以上見る必要はありません。
全てを記憶しようとするとかなり時間がかかります。
Web制作はカンニングOKなので必要な時にググる力を身につけることがもっとも大事だったりします。
よく使うプロパティーなどは自然と覚えて行きますが、滅多に使わないプロパティーもあるのでそう言った時はググって使い方を確認するでOKです。
またテックアカデミーならプログラミングスクール無料体験も可能なので併せて試してみるのもいいかもしれません。
書籍での学習になると1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座がお勧めです。
Sassの学習について
SassとはCSSを拡張した言語になります。
CSSをそのまま書くと数ページに渡るHPだとCSSだけで数千行になることも珍しくありません。
Sassを習得するとCSSをファイル分割したり、変数を利用したりといった事が可能になります。
長いですが、必ず必要になるので覚えておきましょう。
併せてCSSのお勧め書籍も紹介します。
CSSのClass命名規則などかなり奥深い事まで書かれてますので、CSSの深い所まで学習が可能です。
JavaScript(jQuery)の学習について
- ハンバーガーメニュー
- ドロワーメニュー
- ローディング画面
- タブメニュー
- アコーディオン
- モーダルウィンドウ
- スムーススクロールでページトップに戻るのボタン
上記が作成できるようになりましょう。
コピペコードがネットに落ちていますが、せっかくなのでそれぞれのコードの書き方を理解しておくのがベストです。
理解することでカスタマイズできる幅が増えたりするので、是非この機会に学習しましょう。
デザインカンプからのコーディングについて
ここまで学習したらデザインカンプからのコーディングに移りましょう。
サイト模写もいいですが、実践だとカンプからのコーディングがメインになるので、adobe XDやFigmaからのコーディングに慣れるためにもカンプからのコーディングを推奨します。
無料でデザインカンプを配布してるサイトを以下に記載します。
上記2サイトがお勧めです。
レベル別に別れているのでできる所からどんどんコーディングをしていきましょう！
WordPressについて
https://note.com/kurinosuke32/m/md1e98ceec949
今ならこのnote一択です。
さらに900円という破格の値段なので今のうちに買っておくべきです。
※セールはいつまでが不明です。。。
以上となります！何かの参考になれば幸いです！
