HTMLとCSSを学んだ後、どうすればいい?未経験者向け勉強&キャリアガイド

web制作
スポンサーリンク

「HTMLとCSSは学んだけど、次に何をすればいいかわからない…」
そんな悩みを持つ人は多いです。本記事では、学習を次のステップに進める方法と、未経験からWeb業界を目指すキャリアプランを解説します。


HTMLとCSSはWeb制作の基礎ですが、それだけでは実践レベルには不十分です。
次に学ぶべきスキルをいくつかご紹介します。

① JavaScript(JS)

JavaScriptを学ぶことで、Webページに動きをつけられます。
まずは以下の基礎を学びましょう。

  • 変数・関数・条件分岐
  • イベントリスナー(クリック・スクロールなどの動作)
  • DOM操作(要素を動的に変更する)

Progateなどで基礎の基礎をおさえてから、本やudemyの教材などを活用して勉強を進めることをオススメします。

② CSSフレームワーク

CSSを効率よく書くために、フレームワークを学ぶのもおすすめです。

  • Bootstrap:簡単にレスポンシブデザインを実装できる
  • Tailwind CSS:ユーティリティクラスを活用した効率的なスタイリング

また、フレームワークではないですが、CSSをより書きやすくするためのツールである「Sass」を学ぶこともおすすめします。

③ webデザイン

コーディングについて学んでみたところで、デザインにも興味を持った方はデザインを学び始めるのもアリです。
しかし注意点として、コーディングについての知識がまだ甘いなと感じる方にはオススメしません
これは、コーディングとデザインのどちらも中途半端なスキルになってしまう可能性が高いためです。

学習に余裕ができたり、デザインの知識が必要になったタイミングで学び始めるのがベストだと私は考えています。


学習した知識は、実際にコードを書いて身につけることが大切です。
特にプログラミングに関してはインプットよりもアウトプットを多くすることを意識しましょう。
私の体感としては、インプットとアウトプットは 2:8くらいの割合で学習するのが良いです。

アウトプットの学習を進めるための方法である模写コーディングについてご紹介します。

模写コーディング

デザインが完成しているサイトを自分でHTML/CSS/JSで再現する練習です。
これが最もスタンダードなアウトプットの学習法だと思います。
自分で好きなサイトを選んで模写するのもいいですが、結構な確率で挫折します。

そこでおすすめなのが「codejump」という学習サイトです。
codejumpには、学習用のオリジナルのサイトが多数用意されています。
しかも難易度別であり、レイアウト解説、ソースコード付きという超親切設計です。

まずは入門編のサイトを一つ模写してみましょう。


HTMLとCSSを学んだ後は、次のステップとしてJavaScriptやフレームワークを学び、実践的なアウトプットを増やすことが大切です。
また、キャリアプランを明確にすることで、学習の方向性が定まりやすくなります

「何から始めればいいかわからない」という方は、まずは模写コーディングから挑戦してみましょう!

コメント