Web制作

【Web制作】Progateの次にやるべきこと【効率的な学習法】

Progateが終わった人
Progateが終わった人
Progate終わったけど、次に何をやれば良いんだ。色々な情報が飛び交っているし、困る。いったいどうすれば良いの?

こんな疑問に答えます。

この記事の内容
  • Progateが終わったらやるべきこと【3ステップで解説】
  • 【もう一歩進みたい人向け】WordPressを勉強するべし
  • プログラミングを効率的に学習するには手を動かすことが大事

本題に入っていく前に軽く僕の自己紹介。

  • 独学でWebエンジニアになった
  • 学習にProgateを使ったことがある

Progateを学習に使い、Webエンジニアになった経験があります。

この記事は、「HTML」や「CSS」などを使ってWeb制作がしたい人向けです。

というわけで、この記事ではProgateが終わった後、学習するべきことについて詳しく解説していきます。

では、記事に入っていきます(/・ω・)/

Progateが終わったらやるべきこと【3ステップで解説】


本記事の対象者はProgateで以下のコースを修了していることが前提で話していきます。

  • HTML&CSS
  • jQuery
  • PHP
  • Sass
  • SQL

上記のコースが終わっていない方は、正直なところ少し学習不足かな、、、って感じなのでProgateで学習してからこの記事に戻ってきていただけたらなと。

というわけで、今回は3ステップで学習法を解説していきます。

具体的には以下のルートをたどります。

3ステップの学習ルート
  1. 開発環境を構築する
  2. Bootstrapを勉強する
  3. Flexboxを勉強する

というわけで、具体的な解説に入っていきます。

➀ 開発環境を構築する

とりあえず、開発環境を構築していない方は今すぐしましょう。

Progateのようにインターネット上ではプログラムが動いてくれないので、自分のパソコンで開発できるようにならなければなりません。

とはいえ、そんな難しくないので安心してください。

具体的にやることは二つだけです。

  • エディタをインストールする
  • Google Chromeをインストールする

というわけで、一つずつ解説していきます。

エディタをインストールする

プログラミングを行うなら、「メモ帳」の強化版みたいなエディタを使用する必要があります。

主要なエディタは以下の3つですね。

  • Atom
  • Sublime Text
  • Visual Studio Code

どれを選んでもぶっちゃけそんなに変わらないので、大丈夫です笑

AtomとSublime Textは使ったことありますけど、SublimeTextの方が若干軽いかなって感じですね。

まあ、ここら辺は好みなので各々気に入ったエディタを使っていただけたらなと。

個人的にはSublime Textがおすすめです。

各エディタのインストール方法は以下のリンクを参考に(※エディタは無料で使うことが出来ます)。

動画で学びたい方は、以下のリンクを参考に(ドットインストールというサイトで学べます)。

Visual Studio Codeは動画がなかったです<(_ _)>

テキストの方で理解していただけたらなと。

Google Chromeをインストールする

Web制作を行うなら、Google Chromeは必須ですね。

必ずインストールしておきましょう。

具体的なインストール方法は以下のリンクを参考に。

しかし、ただGoogle Chromeをインストールしただけではあんまり意味がありません。

ディベロッパーツールは使えるようになっておきましょう。

Webサイトを作成したときに、なんか変だなーと思ったら「右クリック」>「検証」を押してみると原因が分かる可能性ありです。

ディベロッパーツールは使えるようになっておくべきですね。

開発環境が構築出来たら、次のスッテプに進んでいきましょう(/・ω・)/

➁ bootstrapを勉強する


LP(ランディングページ)の模写をやった方が良いっていう方もいますが、個人的にはbootstrapを学ぶのをおすすめします。

正直、Progateが終わったばかりの方がLPの模写をやるのは骨が折れるかなと(実際に僕も挫折してしまいました笑)

それゆえ、一つハードルを落としてBootstrapをやるのが良いと思います。

Bootstrapとは?

コードが省略できるツールだと思っておけばOK。簡単にレスポンシブデザインのサイトが作ることが出来る。

正直なところ、Bootstrapは最近の現場ではあんまり使われていません。

しかし、学んでおくべきですね。

理由としては、Bootstrapで出てくるカラムという考え方が今後のコーディングにかなり重要になってくるからです。

実際に僕もBootstrapを学んでから、ある程度どんなコードを書いたら良いのか理解出来るようになったのでやっておくべきだと思います。

では、具体的な学習方法に移っていきます。

以下の二つのルートを辿るのがおすすめです。

bootstrapの学習方法
  1. ドットインストールで学習する
  2. Udemyで「Bootstrap 4 From Scratch With 5 Projects」を学習する

➀ ドットインストールで学習する


とりあえず、ドットインストールで「Bootstrap 4入門」を学習しましょう。

手を動かしながら、学ぶと学習効率が上がるのでおすすです。

➁ Udemyで「Bootstrap 4 From Scratch With 5 Projects」を学習する

Udemyとは、オンラインで動画の講座を購入できるサービスです。

僕は実際に「Bootstrap 4 From Scratch With 5 Projects」を学習したのですが、結構良い教材でしたね。

以下のツイートは、「Bootstrap 4 From Scratch With 5 Projects」作れるものの一部です。

英語の講座ではありますが、動画をみながら手を動かすだけでかなり力が付きます。

個人的に一番役にたった教材なのでガチでおすすめです。

以下のリンクからUdemyのサイトへ飛べます。
>>>オンライン教育のUdemy

Udemyは、たまにセールが行われており安く講座を買うことが出来ます。

それゆえ、セール期間なら今すぐ買っておいた方が良いですね(次のセールまで待たなければならないから)

目安としては、1000円台なら即買いでOKって感じです。

➂ Flexboxを勉強する

Flexboxは最近Web制作の現場で使われている手法です。

Bootstrapを勉強した方だったら、そんなに抵抗なく出来ると思います。

以下の本はFlexboxを学ぶならおすすめです。

Flexboxの基本的な部分について学べますし、HTMLとCSSの復習的な感じでも使えます。

デザインも綺麗で、わかりやすかったのでおすすめです。

以下の記事で感想も述べています。

いちばんよくわかるHTML5&CSS3デザインきちんと入門の感想どうも、Web制作について学習しているなかです。  この記事の内容 どんな本なのかザックリと紹介 成果物を紹介...

ここでひとまずの勉強は終わり

普通のLP(ランディングページ)を作るなら、ここまでの知識で大丈夫ですね。

しかし、WordPressまで出来ると、仕事の幅がグッと広がります。

というわけで、次のパートではもう一歩進んで学習したい人向けにWordPressの学習方法を解説していきますね。

【もう一歩進みたい人向け】WordPressを勉強するべし


では、WordPressの勉強法を紹介していきます。

具体的には3ステップで大丈夫です。

WordPress学習方法
  1. ドットインストールで学習する
  2. 「WordPressレッスンブック」で学習する
  3. 「WordPress教科書2で学習する

では、解説していきます(/・ω・)/

➀ ドットインストールで学習する

ドットインストールの「WordPress入門 」で基本的な部分について学びましょう。

すごく基本的な部分に関してはこれをやれば理解できるはずです。

➁ 「WordPressレッスンブック」で学習する

created by Rinker
¥3,024
(2019/09/17 00:24:38時点 Amazon調べ-詳細)

次は、「WordPressレッスンブック」で学習しましょう。

オリジナルテーマを1から作ることが出来ます。

WordPressの本なら、これが1番分かりやすいですね。

以下の記事で感想も書いているので、気になる方はそちらもぜひ。

➂ 「WordPress教科書2で学習する

ちょっと難しいけど、WordPressを勉強するならやっておくべき本です。

カスタマイズや実際の案件のようなサイトが作れます。

深く理解したい方にはおすすめの1冊です。

以下の記事で感想も書いているので、気になる方はそちらもぜひ。

プログラミングを効率的に学習するには手を動かすことが大事


プログラミングを効率的に学習するなら、とにかく量をこなすことが大事です(当然、実際に手を動かしながら)

根拠はないけど経験上量をこなした方が上手くいった

特に、作業量をこなすと出来るようになるという根拠はありません。

ただ、経験上いっぱいコードを書きまくった方が理解出来るようになりました。

Udemyの講座を見ながら、手を動かすだけでもかなり力が付くのでとにかくガムシャラにやりまくりましょう。

最初は、「なんだこれ、、、意味わからん、、、」ってなると思いますが、やっていると出来るようになってきます。

周りで実力を伸ばしている人もとにかく作業しまくっている

僕の周りで実力を伸ばしている人も、みなさんアホみたいに勉強しています。

最初の実力が微妙でも、努力で何とかすることが出来るのでとにかくやりまくるべきですね。

プログラミング学習は辛いこともあるかもしれないけどファイトです(/・ω・)/

やっていると急に理解が深まる瞬間が来ます。

というわけで、この記事は終わりです。

「独学無理過ぎてマジ\(^o^)/オワタ」ってなったらプログラミングスクールを活用してみるのもありです。

下記の記事におすすめのプログラミングスクールをまとめておきます。

おすすめのプログラミングスクール3社紹介【現役エンジニアが選ぶ】この記事では、 「おすすめのプログラミングスクールって何があるのかな、、、?」 「現役エンジニアが選んだプログラミングス...
RELATED POST