これからウェブ作成の勉強を始める初心者のあなたが使うべき無料勉強ツール

私は20代後半のときに独学でウェブコーディングやワードプレスを勉強しました。

現在ではフリーランスを経て、マレーシアのIT系企業でウェブディレクターとして働いています。

まだまだ色々な経験をしながら日々勉強中ですが、私と同じように独学で勉強を始めようと考えている方にオススメのサイトと勉強方法をご紹介します。

とりあえずまずはこの2つのサイトで基礎知識を付けよう

独学で始める場合、まず最初にぶつかる壁が「どうやって勉強するか？」ですよね。

今はインターネットで調べればたくさん情報が出てきますが、たくさん出てくるからこそ何から手をつけていいか悩んでしまいます。

まずはウェブコーディングとはどうゆう仕組みで出来て、どのように始めたらいいのか？を知りましょう。

私はこの2つのサイトのみで勉強して基礎知識をつけ、あとはその都度ググって調べるという方法を取りました。

パソコンの知識がほとんどなかった私にも出来たので、必ずアナタにも出来ます！

まずはこの2つにトライしてみましょう。

ドットインストール

短い動画で教えてくれるドットインストール。

私がはじめに使った教材がこれです。

始める際に、必要なアプリケーションからそのインストールの方法まで丁寧に教えてくれますので、まったく知識のない状態でも動画通りに進めればウェブサイトが作れるようになります。

1つの動画が5分程度なので理解出来なかったポイントは何度も動画を見直すことで復習することもできます。

私は結構飽きずに観ることができました。（講師の男性の声が少しずつクセになりますw）

動画と同じように進めていくと簡単なウェブサイトが出来ますので、勉強目的であれば同じアプリケーションを使ってお題のウェブサイトを一緒に作ってみましょう。

私はここで紹介されているatomというエディタを今でも使っています。

高度な言語の勉強をしたい場合は有料版にて勉強することも可能ですが、ウェブサイトの作成が目的であれば無料で観れる動画の範囲で十分だと思います。

私も無料で勉強できる範囲しか使っていません。

①【はじめてのHTML】

②【はじめてのCSS】

③【実践！ウェブサイトを作ろう】

④【はじめてのJava Script】

の順番で動画を観ながら実際にコードを書いていくのが良いと思います。

まずは楽しみながら仕組みを覚えましょう。

私は『こうやって書いたらこうゆう風に画面に出るんだぁ』『なんかテキストエディタってかっこいいな〜』なんて思いながら勉強していました。

何事も楽しむことが上達への近道です。

https://dotinstall.com/

Progate

より実践に近くゲーム形式で学べるのがProgate。

こちらはいまだに勉強用として使っています。

会員登録が必要ですがこちらも無料で十分に勉強できます。

ドットインストールと同じく高度な言語は有料版になりますが、ウェブサイトを作るのに必要な言語は無料で使えます。

こちらは動画で勉強するのではなく実際に画面上でコードを入力してゲーム形式で勉強が進みます。

各課題をクリアすると経験値が入ってレベルが上がっていくので本当にゲームみたいですね。

スマホ用のアプリもあるので会員登録したらアプリもダウンロードしてみるのもいいですよ。

出先やちょっとした空き時間にゲーム感覚でコーディングの勉強が出来るなんて嬉しいですね。

まずは【HTML&CSS】の無料で勉強できる範囲で十分ですが興味が湧いてきたら【JQuery】や【JavaScript】などもトライしてみるといいかもしれません。（いきなりハードルが上がる感じがしたらやる必要はありません）

こちらもわからないポイントは反復してレベル上げを楽しみましょう。

Progate

それからそれから…

ドットインストールとProgateである程度勉強が出来て、コードを書くのが楽しくなってきたら、次は実際にウェブサイトを作ってみましょう。

とはいえ、いきなりサイトを作ると考えると『デザインはどうしよう？』とか『この書き方であってるのかな？』など正解がわからず手が止まってしまうと思います。

ですので、なんでもいいから現在既存であるウェブサイトの1ページやランディングページ（LP）と呼ばれる広告用の縦長のウェブサイトをそのままそっくり真似して作ってみましょう。

まずはあまり動的な要素（画像のスライダーやメールフォームなど）があるものは避け、コーポレートサイトやランディングページ（LP）などの静的な要素（HTML、CSSのみで表現できるもの）のみで構築されているサイトを真似するといいと思います。

作ったサイトの表示の仕方はドットインストールのやり方（直接ブラウザにドラッグする方法）を参考にしましょう。

コードの書き方の正解がわからなくても【見た目が真似したサイトのページと同じならとりあえずOK】というぐらいの気持ちで作るのがオススメです。

コードの書き方は作る人によってそれぞれクセなどがあってマチマチですので、最初から綺麗なコードを書こうとせず見た目から入るのが良いと思います。

HTMLの構造やCSSの書き方がわからない場合はすぐにGoogle先生に頼りましょう。

いくら自分で考えても正解は導けませんし、変なクセが付くぐらいならすぐに正解をググってしまったほうが足止めされず楽しくサイト作成ができます。

このブログでもコーディングやCSSの記述方法をメモしていますので、気になるカテゴリがあったら是非ゆっくりしていってください。

わからなかったらすぐに調べる→少しずつ書き方を覚えていく（参考になったサイトをブックマークしておくとなお良し）→またわからなかったらすぐに調べる→また少し書き方を覚える→またまたわから…といった具合で少しずつ進んでいきましょう。

楽しみにながら学ぶ

以上の方法で私は独学からフリーランスを経てマレーシアのIT企業へと進みました。

これから勉強を始める人の全ての方に当てはまるやり方ではないかもしれないですが、何から始めたら良いかわからず足踏みしてしまうぐらいであれば、まずはこの方法でサイト作成の勉強をしてみてはいかがでしょうか？

勉強方法は全ての人に当てはまりませんが、全ての人に当てはまるのは【楽しみながら学ぶ】ということです。

楽しくないことはいくら時間を費やしても身になりません。

勉強や仕事も楽しくやることで身になると考えています。

少しでもこれからウェブエンジニアを志す人の力になれたら嬉しいです。