RalaCode

44件の記事があります

【周回はダメです】Progateの次は何をすればいいの?

【周回はダメです】Progateの次は何をすればいいの?
サムライエンジニアプラス

「Progateである程度学習したけど、次は何をしたらいいんだろう...」

今回はこんな疑問にお答えします。

Progateはプログラミング学習を始めるのに最適なサービスです。
ですが、いつの間にかProgateを延々と繰り返す状況になっていないでしょうか。

progate_level

僕みたいに、もう少しでレベル300になりそう...みたいなことになっていないでしょうか。

Progateは「プログラミング学習を始めるための手段」です。
「延々と繰り返すものではない」と僕は考えます。

プログラミングは「何をどれだけ作ったか」であって、「どれくらい練習したか」ではありません。

では、Progateの次は何をすればいいのか、以下で解説していきます。

ちなみにですが、ProgateはHTML & CSSの初級コースだけクリアしていれば十分です。
その前提で記事を書きます。

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

note_clip_glasses

Progateの次はいきなり実務的なことに進みましょう。
具体的には「エディタ」をパソコンにインストールします。

Progateでは、「Progateの中で」コードを書いていただけです。
コードは「エディタ」に書くものです。

「エディタ」がないというのは、「文字を書きたいのに紙がない」みたいな状態です。
というわけで、エディタを用意しましょう。

エディタにも色んな種類があります。
僕は「VSCode」というエディタをおすすめします。
とにかく使いやすくて人気です。

僕はYouTubeでプログラミング学習したりしますが、日本でも海外でもたいていの人がVS Codeを使っている印象です。

VS Codeのインストール方法と使い方については以下の記事で解説しています。
VS Codeは設定画面が英語だったりするんですが、初期設定で日本語化する方法も解説しています。

【初心者向け】Visual Studio Codeの使い方【図解あり】
【初心者向け】Visual Studio Codeの使い方【図解あり】
記事を読む

これで、「エディタをインストール」したことになります。
次に進んでいきましょう。

サイトを作ってみる

website

エディタさえインストールしてしまえば、後はやるべきことは単純です。

  • エディタにコードを書きまくる

  • なぜかエラーが発生する

  • ググる

ひたすらこの繰り返しです。
HTML、CSSを学習するのであれば、とにかくWebサイトをたくさん作りましょう。

とはいえ、まだエディタをインストールしただけです。
「コードを書きまくろう」、「Webサイトをたくさん作ろう」って言われても困るはずです。

まずやることは、「お手本を見ながらコードを書きまくる」ことに絞りましょう。
「何をお手本にするの?」って感じですよね?

そこでProgateです。
ProgateのHTML & CSSの初級コースで作ったサイトを、今度はVSCodeを使って作ってください。

Progateは一度クリアしたコースをもう一度学習することができます。

その時に、「リセットして復習」か「そのまま復習」のどちらかを選べます。
「そのまま復習」を選べば、そのコースで書いたコードは消さずに復習できます。

コピペしてもいいんですが、おすすめは全て手打ちです。
「エラーが発生したら、仕方なくコピペする」とかがいいです。
Webサイトを実際に作るときは、結局手打ちです。

ProgateのHTML & CSSの初級コースで作ったサイトをVS Codeで作ることができたら、次の段階に進みます。

書籍で学習する

book_and_glasses

サイトを一つ作り上げたとはいえ、やはりまだしばらくは「お手本を見ながらコードを書く」ことを継続するべきです。
次は書籍を利用することをおすすめします。

「Progateの有料コースに課金してもいいんじゃないの?」

と思われる方もいるかもしれません。
確かに、Progateの有料コースに課金するのも手です。

ですが、Progateで解説されているサイトの作り方は少し古いです。

具体的にどこが古いかというと、「float」を使っているところです。
要素を横並びにする時に、Progateでは「float」を使っています。

2021年現在、要素を横並びにする場合は「flexbox」というものを使うのが一般的になっています。
「float」は使われなくもないですが、現状ほとんど使われることはなくなってます。

現代のWebサイトの作り方」にできる限り早く触れるため、ここでは書籍を使った学習をおすすめしたいと思います。

「flexbox」の使い方も結構奥が深いです。
「flexbox」の使い方をより簡単に、より確実に理解するならエビスコム社の書籍がおすすめです。
具体的には以下の書籍がおすすめです。

フレキシブルボックスで作るHTML5&CSS3レッスンブック|エビスコム>>Amazonで見る>>楽天で見る

まず今やるべきことは「お手本を見ながらコードを書くこと」です。
でもただ書いてるだけだと、お手本がなくなった時に不安です。

「フレキシブルボックスで作るHTML5 & CSS3レッスンブック」で解説されているのは、「flexbox」についてだけではありません。

Webサイトを作り始める上で、「まず何を考えてどのように作っていくか」が解説されています。
そして、最初から最後まで、Webサイトが完成するところまで、解説とともにコードが載っています。

「お手本を見ながらコードを書く」に加えて、「意味を理解しながらコードを書く」ことができます。

スクールで学ぶ

上記では、書籍で学ぶ方法を解説しました。
ですが、まだ不十分かもです。

書籍での学習もだんだん楽しくなっていきます。
だからこそ、またProgateみたいに延々と繰り返してしまう可能性があります。

目標とすべきは、やはり「プログラミングで稼ぐこと」です。
ここは個人で違うかもですが、とはいえ大多数は当てはまるはず。

そのためには「ただ学習しているだけ」から脱却しないといけません。
そこでスクールがひとつの手段となります。

「でもスクールって学費が高いんじゃ...」

確かにそうです。
プログラミングスクールは20万円とか50万円とか普通にします。

しかも、プログラミングスクールはたくさん存在するため「試しに入学してみよう」みたいな気軽な決め方はできません。

そこでおすすめなのが「サブスク型」のスクールです。

具体的には「SAMURAI ENGINEER Plus+(サムライエンジニアプラス)」というスクールをおすすめします。
以下が詳細ページへのリンクです。

サムライエンジニアプラス

料金は月額2980円(税込3278円)です。
一気に数十万円の料金を取られるのに比べると、かなり良心的じゃないですかね。

内容もかなり充実しています。

  • HTML, CSS

  • JavaScript

  • Ruby

  • Python

  • WordPress

  • Photoshop

上記に加えて、以下も学べます。

  • ITリテラシー

  • エンジニア転職

  • 案件獲得

僕もプログラミング学習経験者ですが、わりと手探りでした。

初心者のうちに、これだけの内容をサブスクで学べるのは正直うらやましいです。
それだけの内容であると言ってもいいのかなと。

ただ、プログラミング学習経験者だからこそできるアドバイスもあります。
それは、「最初からあれこれ手を出さないこと」です。

「あれもこれも」ってなると、成果は出にくいかもです。
あるプログラミング言語を学ぶと決めたら、確実に「作品」を残してください。

この作品が「就活」、「転職」、「案件獲得」につながるわけです。

とはいえ、「でも、どのプログラミング言語から手をつけていいかわからない」

という方も多いはず。
僕のおすすめは以下です。

  • HTML, CSS

  • JavaScript

上記の2つです。

例えば、RubyやPythonを学び始めたとします。
でも、結局上記の2つが必要であることに気づくはず。

サブスクなので、やはり短時間で効率よく学びたいところです。

繰り返しになりますが、とにかく「作品」を残しましょう。
学習を延々と繰り返す」から「プログラミングで稼ぐ」にステップアップしましょう。

サムライエンジニアプラス

まとめ

記事をまとめます。
ProgateのHTML & CSSの初級コースをクリアした後、次にやるべきことは以下です。

  • エディタ(VSCode)をインストールする

  • ProgateのHTML & CSSの初級コースで作ったサイトをVS Codeを使って作る

  • 書籍を利用し、お手本を見ながらコードを書く

  • スクールで学びつつ作品を残す

記事は以上です。

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

【無料です】作ったWebサイトを簡単に公開する方法

【無料です】作ったWebサイトを簡単に公開する方法

【Google Chrome】Webサイトのスマホ表示、PC表示を確認する

【Google Chrome】Webサイトのスマホ表示、PC表示を確認する

【自動コンパイル】VSCodeでSassを使う方法を解説

【自動コンパイル】VSCodeでSassを使う方法を解説

Netlifyのアカウントを作成する

Netlifyのアカウントを作成する

【無料】Unsplashで画像をダウンロードする方法解説

【無料】Unsplashで画像をダウンロードする方法解説

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy