どうも！プログラミング未経験からエンジニアへ転職を果たしたなおやん()です。
これからWeb系エンジニアを目指す方がまず勉強すべきなのはHTMLやCSSなど、マークアップ言語と言われるものとなります。
もしバックエンド開発を目指していたとしても少なからずフロントエンドのこれら言語は必須。
とは言え初心者の場合、
「どうやって自力で勉強したら良いかわからない」
こんな悩みを抱えがちです。
今日はそんなあなたに向けて、実際に僕自身が未経験から仕事を得るまでに実践した手順を詳細にお話していこうと思います！
難しいことは一切やっていないので、勉強方法に悩んでいる場合はぜひそっくりそのまま真似してみてください。
目次
【その前に】Web制作(フロントエンド)は独学で習得可能？→ 余裕で可能です
学習手順をお話する前に、そもそもWeb制作って独学でも習得できるの？と疑問に思う方も多いと思います。今はプログラミングスクールも多いので、スクールの受講を考える人もいるはずです。
ただ、結論を言うとWeb制作(フロントエンド)はスクール不要。余裕で独学で習得可能な範囲です。
どんなに初心者でも1ヶ月あれば簡単なWebページくらいは作れるようになるので、まずはこれからお話していく手順で進めてみてください！
Web制作初心者におすすめの勉強手順
それでは本題に入って、Web制作の初心者がHTMLやCSSを学んでいく手順をお話していきます。
この手順は実際に僕が実践した方法で、実績を見せることでフロントエンドのエンジニアとしても内定しましたので再現性ありです。
STEP①：Progete(プロゲート)で入門レベルを学ぶ
まずはプロゲートで入門レベルの知識を得ていきましょう。無料コースだけでもOKですが、できれば1,000円払って有料のコースもやっておくとベスト。
プロゲートの他にも入門者向けの教材はありますが、実際に手を動かしてコードを書ける上に面倒な環境構築が不要なプロゲートをおすすめします。
やっておくべき言語は「HTML」「CSS」のとりあえず2つでOK。
余裕があれば「JavaScript」と「jQuery」コースも無料の範囲だけで良いので触れておきましょう。
STEP②：Udemy(ユーデミー)で入門コースにトライ
次に、動画教材のUdemyで入門レベルの教材をこなします。好きなものを選んで良いのですが、個人的に最初におすすめなのは「手を動かしてマスターする WEBデザイン／プログラミング動画講座
」です。
環境構築から始まり、教材を終える頃には静的なWebページを作れるようになるので最初の一歩にとても最適。
特に初心者が躓きがちな環境構築を動画で丁寧に解説してくれている点はありがたいです。そしてHTMLとCSSの基礎はこの1本で学習可能です。
まだ全くWebページを作ったことのない方はこちらのコースで最初の1ページを作ってみてください。
| やるべき教材 | 学べること | 作れるもの |
| HTML5+CSS3 WEBデザイン講座 |
| 静的なWebページ |
STEP③：Udemy(ユーデミー)で中級者コースにトライ
上記のコースで静的なページを作ったら、次に少し難しいコースにトライしてみましょう。おすすめは「ガチで学びたい人のためのWEB開発徹底入門（フロントエンド編）」です。
こちらは動的(動く)Webページを作成していくコースで、CSSを利用したアニメーションの作り方やJavaScriptを利用したスクロールで発火するアニメーションなどを作成していきます。
例えば、下のような動くボタンをゼロから作ったり。
↓カーソルを乗せてみてください
その他ボタンのアニメーションや、画像のスライドアニメーションなどを作れるようになります。
またスマホでの表示に対応するレスポンシブ化や、SCCを効率的に書くSassを学ぶことも可能。
このように新しい情報が多く若干難しく理解に時間がかかる部分もあるので、じっくりとこなしていきましょう。
| やるべき教材 | 学べること | 作れるもの |
| Web開発徹底コース |
| 動的なWebページ |
STEP④：自力でWebページを作ってみる
STEP③の中級者コースを終えればWeb制作の基本的な部分はほぼ突破したことになるので、これまでの知識を生かして完全オリジナルのWebページを自力で作成してみましょう。
ここで作成したオリジナルのページは今後仕事を得るためのポートフォリオになるので、学んだことを総動員して渾身の1ページを作ってみてください。
ポートフォリオまで作成できれば単純な勉強の段階は終わりです！
ここまでできたら仕事を探しにいってOK
オリジナルのポートフォリオを作成したら、それをもって仕事を取りにいきましょう。転職活動をしても良いですし、個人で仕事を取るのもOKです。
ちなみに僕は上記のSTEP③の段階でコース内で作成したページをもって転職活動し、成功しました。
ただ、このように自分のオリジナル作品ではないものをポートフォリオとして持っていくのはあまりおすすめできないので出来るだけオリジナル作品は作っておきましょう。
ポートフォリオのあり、なしでは仕事獲得の確率が大きく変わりますので、これからエンジニアとして活動していきたいのであれば必ずポートフォリオを作成しておくことをおすすめします！
【まとめ】HTMLやCSSは最適な手順で独学可能！
今回は実際に僕が未経験からWeb制作(HTML / CSS)を学習し、エンジニア職に内定した手順をお話してきました。
もちろん人によって最適な方法は違いますが、この記事の内容は実例の1つとして実践してみてください！
- Progete(プロゲート)で入門レベルを学ぶ
- Udemy(ユーデミー)で中級レベルにステップアップ
- オリジナルページを作成する
この手順をこなせばあなたも十分に未経験から仕事を獲得することは可能なので、特に勉強方法に迷っている方はぜひ実践してみてください！