Webデザイン

コーディングを独学で勉強する方法。Progate・ドットインストールが終わった後は何をする?

コーディング

コーディングを学べるサイトでおなじみのProgateとドットインストール。
私は仕事の都合上スクールに通えず、独学で勉強を進めてきたんですがこの2つのサイトにはめちゃくちゃ助けられました。

この記事では、Progate・ドットインストールのHTML・CSSを学び終わった後にどう勉強しているかをご紹介します。

HTML・CSSは一通り学び終えたけど、その後はどう勉強すればいい?
基礎はだいたいわかってきたけど、イチからコードを書くのは難しい…!
という方の参考になればと思います!

まずはProgate・ドットインストールをやる&繰り返す

Progateの初級〜上級と道場コース・ドットインストールのHTMLとCSSをまず一通りやります。
▶︎ Progate
▶︎ ドットインストール

どちらを先にやっても大丈夫です。並行して進めてもOK。
1回通してやるだけではたぶん覚えられないと思うので、最低2回はやったほうがいいです。
繰り返しやるのは、個人的にはProgateがやりやすいです。
(もちろんドットインストールを繰り返しても!)

「HTML&CSSとWebデザインが 1冊できちんと身につく本」をやる

この本おすすめです!

写真家のポートフォリオサイトを作りながら学ぶ本です。
作ったサイトを自分用のポートフォリオサイトに作り変えたり、別のサイトにアレンジできたり、それと何よりわかりやすくておすすめです。

Udemyで動画を購入して学ぶ

Udemyはよくセールをやっているので、セールのときを狙うと1,200円とかで買えるのでお得です!

・Webデザインのことを網羅的に学ぶ
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース

レッスン数が多いので、通勤時間にスマホで観ていました。
動画を観ながらパソコンに向かって手を動かしてもいいし、すでに学んだことと被ってる部分もあると思うのでそういうとこは軽く観るなど、使いやすいように使うとよいと思います!

・レスポンシブを学ぶ
CSS3+メディアクエリで「レスポンシブWEBデザイン」サイト作成をマスターする

レスポンシブ中心の動画を観たかったのでこちらでも学びました。

・Dreamweaverを学ぶなら
Bootstrap3+Dreamweaver(CC2018)+HTML5+CSS3 レスポンシブWEBデザイン実践コース

上記の動画の村守先生つながりでこちらも買ってみました。
会社でDreamweaverが使われてたので勉強したんですが、動画ではそんなに特別なことやってるわけではないので、本のほうがやりやすいって方は本でもよいかと。

実際のWebサイトを写経する(マネして作る)

実際のWebサイトから好きなサイトを選んでマネして作ってみます。

○写経……見本のコードをマネして自分で打ち込むこと。

・作るのがあんまり難しくなさそうなサイトを探す
・グーグルクロームの「検証」で開く
・コードをマネして書いていく
という流れです。

慣れてきたら、いろんなパターンのレイアウトのサイトを写経すると勉強になりますよ。

コードを写経するだけではなくて、デザインをPhotoshopなどで模写するのもいい練習になります。

見本にするサイトは、
I/O 3000 | Webデザインギャラリー
MUUUUU.ORG
などのギャラリーサイトから探したり、
好きなデザインテイストの制作会社の制作実績から探す、
Pinterestを見る、などの方法で探してます。

自作の簡単なサイトをコーディングする

まずは簡単なつくりのWebサイトをデザイン

Progateで作ったものぐらいのシンプルなものを、PhotoshopやXDなどのツールで自作します。

▼ 参考までに、私が作った例
簡単なサイト作例

このぐらいならコーディングできそう、と思えるものを作ると挫折しにくいです。

コーディング

デザインしたものを、コーディングしていきます。
Progateなどで書いたコードを見てもOKです。

サイトをいくつか写経したり、0からコード書くのをいくつかやっていくうちに、徐々にコーディングに慣れてくると思います。

おわりに

私自身もまだまだ勉強中です。
こういうやり方のほうががいいな…とかがあったらまた書きたいと思います!