フリーランスとしてサイト制作の仕事ができるようになりたいけど、どのように学習を進めていけば良いのかわからない。

という方に向けて解説していきます。

この記事では、未経験から学習を初めて2ヶ月でサイト制作の仕事ができるようになった私がオススメする学習法と学習の流れを紹介していきます。

サイト制作のスキルを独学で身に付けたい方はぜひ参考にしてください。

学習にオススメのサイト紹介

html.cssの学習に関しては、今はサイト上で充分に学べるので、そちらを利用するといいと思います。

Progate

 

Progateとはプログラミング言語基本を取得のためのサイトです。

一つ一つのステップを丁寧にわかりやすく解説してくれる上に、実際にコードを書きながら実践的に学習することができます。

 

まずはこちらのhtml、cssコースを一通り受講して、基本的な理解をしていきましょう。

どうしてもわからない部分は、答えを開いて、どこが違うのか確かめたのちに進むようにしましょう。

ある程度理解できたなと実感できるまでコースを繰り返し受講するのも効果的です。

Progateで学習する上でのポイント

ここでのポイントは、「10分考えてわからなかったら答えを見て、どこが違うのか確認した後、次にどんどん進むこと」です。

長い時間悩んで完全に理解した後の進むのではなく、6割程度で理解ができたのならどんどん進んで、繰り返し問題を解いていく方が理解が早いかと思います。

ドットインストール

ドットインストールは3分ほどの動画で構成された学習サイトです。

こちらは動画を見ながらエディター上で同じように手を動かしながら学習していきます。

私のオススメする学習するべきコースと流れは以下の通りです。

1、学習環境の設定
windowsの場合
macの場合

2、HTML入門

3、CSS入門

4、HTML基礎文法入門

5、CSS基礎文法入門

6、実装!ウェブサイトを作ろう!

7、実装!スマートフォンサイトを作ろう!

これを一通りやれば、よりサイト制作の仕事のイメージが湧きますし、スマートフォン用の表示もわかるようになるかと思います。

 

実際のサイトを模写して作ってみる

ここからはより実践に近づけるために、シンプルなサイト、これならできそう、というサイトを見つけて、同じように1からコーディングしてみましょう

できるだけ自力で作ってみた後にどうしてもわからない部分や、完成したのちにグーグルクロームの検証機能を使ってコードを見比べてみると良いでしょう。

学習する上でのポイント

html、cssの学習をする上でもっとも重要なのは、「自分で調べて解決する力をつける」ことです。つまりググる力をつけることが大切です。

要素全てを暗記するというよりも、検索して答えにたどり着ける力が重要です。

今はhtml、cssでしたらほぼ解決策を書いている記事が存在しますので、たくさん調べながら作っていくやり方をオススメします。

プロのエンジニアもそうですが、制作では必ずたくさんググりながら作りますので、フリーランスとして活動したいのであればなおさらググる力をつけましょう。

勉強に役立つtwitterアカウント紹介

ツイッター上ではhtml、cssの効率の良い学習方法を発信しているエンジニアの方のアカウントがあります。

わかりやすく簡潔にまとめたエンジニアの方の生の声を聞くことができますので、そちらもとても参考になります。

今回は2名のアカウントを紹介します。

トモキさん

1ヶ月でhtml、css、wordpressのテーマ作成のスキルを身に付けた方です。技術的な面はもちろん、学習に向かう思考もとても勉強になります。

https://twitter.com/bitKangaroo3

ちづみ

この記事を書いています。html、cssを中心に、視覚的にわかりやすくを意識して発信しています。

https://twitter.com/098ra0209/

まとめ

フロントエンドにおけるHTML、CSSは繰り返し行うこと、実サイトを作ってみることが大切です。

基本の構造を理解したのであれば、あとは数をこなして慣れていきましょう。