【 実証解説 】 独学でWEB制作フリーランスになるまでの学習①HTML・CSS 投資家のFIREへの旅路 ♯413

WEBサイト制作
にて、フリーランスとして活動結果が出るまでの
私の場合の道のりを書きたいと思います。

スクールなどは使わず、メンターなしで、全て独学です。

同じ目標をもっているの人の、参考になれば幸いです。

細かく解説したいので、数回に分けて書いていきたいと思います。

【 学習の流れ 】

学習の流れを紹介し、その具体的な学習方法を紹介します。

1. HTML・CSS
2. jQuery
3. JavaScript
4. SCSS
5. Photoshop・Illustrator
6. WordPress・PHP
7.XD
8. サーバー関連

このような流れで学習を進めました。

これは、1が終わったら、2というわけではありません。
1をやりながら、2を追加。
1、2をやりながら、3を追加。
1、2、3、をやりながら、4を追加・・・・。
という形になります。

ひとつの言語や、ソフトを100%できるようになることは不可能とも言ってもいいと思います。

ひとつ完璧にして次へと進んでいたら、WEBサイトを作るという目的を達成するまでに、時間がかかりすぎます。

そして、技術や、言語は相互に連携して使用していきます。
ある程度できるようになったら、次を追加していき、連携させてできることを増やしていく。

これが最適解のひとつです。

次は、具体的な学習方法を紹介します。

1. HTML・CSS

---

プロゲート
U-demy
模写コーディング
YouTube

・　プロゲート

「さわり」を学習する

始まりみんなここかもしれません。
スマホで移動中などに取り組みました。

プロゲートを使っている人によくいるのが、何週もする人です。

これは、私はやっていません。
暗記する意味はないからです。

また、無料のところまでしかやっていません。
有料でやるなら別のサービスの方が有益と思います。

プロゲートは、「さわり」を理解する程度で終わりです。

・　U-demy

セールを利用すれば安価
自分のペースで進められる

WEBサイトを作る流れを学習します。

動画観ながら、コードを書いていく作業を行います。

HTMLの構造や、考え方を学びます。
CSSの指定の仕方を学びます。

動画は初回登録時に、セール価格でまとめて購入しました。
定価2万円から3万円のコースを、セールで、1800円ほどで購入できます。

このセールは月一回はありますから、
気になるものをチェックしておき、セールで購入しましょう。

私の場合は、3本ほどの動画で学びました。
2本はコーディングの学習。
1本はレスポンシブの学習でした。

・　模写コーディング

実戦で使われているプロパティを学ぶ
ググる力がつく

この時点で、HTML・CSSを使って、基本的なコーティングができるようになっています。

実際のWEBサイトを見ながら、
同じレイアウトになるように、コーディングしていきます。

その際に、GoogleChromeの拡張機能、image downloaderを使用して画像を取得して、実際のサイトを構築するのと同じように、コーディングしてきます。

実際のWEBサイトは、プロの仕事ですから、
これを真似しようとすることで、様々なCSSのプロパティをググることになるでしょう。

模写コーディングで最も大切なのは、わからないことをググって、自分のやりたいことに応用することです。

私は、これが最も自分のスキルアップにつながったと感じています。

そして、何より、動画学習よりも、模写コーディングは楽しいのです。
自分のコードがWEBサイトととして動くの最高に嬉しいものです。

注意としては、
ピクセルパーフェクトなどは、気にしないこと。
トップページのみにすること。

あくまでも、練習ですから、
大幅なレイアウト崩れが起きない限り、ピクセルパーフェクトは目指しません。

トップページには、デザイナーのこだわりが詰まっていますから、
そこだけコーディングするだけでも十分です。

全ての階層ページを仕上げることよりも、
10個サイトのトップページを仕上げましょう。

・　YouTube

隙間時間を有意義にする
学習の答え合わせをする
楽しみながら学ぶ

こちらは、移動中にやりました。

U-demyや、模写コーディングでやったことを、復習したり、答え合わせをするイメージです。

様々なコーディングの動画ありますから、
様々なコーダーやデザイナーの方のやり方を知ることで、
自分のやり方が、正しいのかを確認します。

また、知らなかった効率的な方法を知ることもできます。

移動中に聞きながら学習して、気になったところを、自宅でやってみるという感じです。

【 予告 】

次回は、jQuery　の学習から解説します！