定番サービス!Progateの勉強方法《プログラミングの基礎を学ぼう》

定番サービス【Progate】の勉強方法《プログラミングの基礎を学ぼう》

定番サービス!Progateの勉強方法《プログラミングの基礎を学ぼう》

「プログラミングを独学できる定番サイトってどれ?」

そんなアナタに。ゲーム感覚でプログラミングを学習できるサイト『Progate』についてお伝えします。

初心者のプログラミング基礎学習にはうってつけのサービスです。

さっそく学んでみたので、どんな感じかお伝えします。

ヤドロク
無料でおためしできるよ!

定番サービス【Progate】の勉強方法

定番サービス【Progate】の勉強方法《プログラミングの基礎を学ぼう》

『Progeate』は出された問題を解きながら、ゲーム感覚でプログラミングを学んでゆけるサイトです。

基礎のHTML&CSSはもちろん、いろんなプログラミング言語を学ぶことができます。

無料のおためし講座も用意されていて、じっくり学びたい場合は有料で学ぶ感じです。

『Progeate』を使ってみると、自分で考えてコードを書きながら学べるのがわかります。

サイトの見た目もかわいくて使いやすいし、初心者から基礎を学ぶには良さそうですね。

『Progeate』で独学してみた

無料で学べるということで、さっそく『Progeate』を試してみました。

結論からいうと有料会員(月額1,078円)にならないと、仕事できるようなプログラミングスキルは学べないです。

とはいえ、1,078円(税込)で1ヶ月は学び放題。時間があるタイミングでガッツリ学んで退会するのもOK。また学びたい時は入り直せるので、コスパはいいですね。

無料で試した後、1ヶ月間の有料会員になって学んでみたいと思います。

学び始める前に「正しいProgate学習法」としてまとめられた、コチラの動画を見ておくことをオススメします↓

【未経験からエンジニアを目指す際の正しいProgate/プロゲート学習法】

レッスン①HTML&CSS初級編

レッスン①HTML&CSS初級編

まずはHTML&CSSのさわりだけ、無料で学べます↓

>>>HTML&CSS初級編(全23問

スライド画面で学んだ後に、問題が出されます。指示通りに自分でHTML&CSSを書けたらクリアー。

初心者すぎて何だかよくわからなくても、答えを見ながら進むことができます。

ヤドロク
指示通りやっていけば作れるのがイイ感じ!

とはいえ個人的には、動画で学べる【ドットインストール】のHTML&CSSをやってからの方がスムーズに理解できると思います。

【ドットインストール】で学んだあとに、問題集として【Progate】を解いてく感じにするといいです。なのでまだやっていない方はコチラ↓

【関連記事】>>>ドットインストールの勉強方法《無料動画で基礎を学ぼう》

レッスン①HTML&CSS中級編《3問目から有料》

「プログラミングを独学できる定番サイトってどれ?」 そんなアナタに。ゲーム感覚でプログラミングを学習できるサイト『Progate』についてお伝えします。 初心者のプログラミング基礎学習にはうってつけのサービスです。 さっそく学んでみたので、どんな感じかお伝えします。 ヤドロク 無料でおためしできるよ! 定番サービス!Progateの勉強方法 『Progeate』は出された問題を解きながら、ゲーム感覚でプログラミングを学んでゆけるサイトです。 基礎のHTML&CSSはもちろん、いろんなプログラミング言語を学ぶことができます。 無料のおためし講座も用意されていて、じっくり学びたい場合は有料で学ぶ感じです。 『Progeate』を使ってみると、自分で考えてコードを書きながら学べるのがわかります。 サイトの見た目もかわいくて使いやすいし、初心者から基礎を学ぶには良さそうですね。 『Progeate』で独学してみた 無料で学べるということで、さっそく『Progeate』を試してみました。 結論からいうと有料会員(月額1,078円)にならないと、仕事できるようなプログラミングスキルは学べないです。 とはいえ、1,078円(税込)で1ヶ月は学び放題。時間があるタイミングでガッツリ学んで退会するのもOK。また学びたい時は入り直せるので、コスパはいいですね。 無料で試した後、1ヶ月間の有料会員になって学んでみたいと思います↓ レッスン①HTML&CSS初級編 まずはHTML&CSSのさわりだけ、無料で学べます↓ >>>HTML&CSS初級編(全23問) スライド画面で学んだ後に、問題が出されます。指示通りに自分でHTML&CSSを書けたらクリアー。 わからなくても答えを見ながら進むことができます。 初心者すぎて何だかよくわからなくても、指示通りやっていけば作れることがわかります。 【学習ポイント】 ●コードを書いてどう変わるか試してみよう ●いろいろなタグを知ろう 初めはあくまで「お試し」って感じですね。 レッスン①HTML&CSS中級編《3問目から有料》 ここでコードを書くエディタも導入できます。 Windows編とmacOS編があります。ウィンドウズかマックか、それぞれ自分の環境に合った動画を見てマネしてくだけなので簡単ですね↓ >>>Web制作の準備をしよう Windows編 >>>Web制作の準備をしよう macOS編 無料で見れるのはここまで。これから『ドットインストール』でガッツリ学んでくなら有料のプレミアム会員になる必要があります。月額1,080円。 >>>プレミアムサービスに登録する 僕は『テックアカデミーの無料動画講座』を見ても『CSS講座』がよくわかりませんでした。なのでドットインストールの方でプレミアム会員になって勉強を進めます。 もっと詳しくHTML/CSSを学んでみよう(ここから有料) プレミアム会員になったら、見れなかった次の講座へ進めます↓ >>>詳解HTML 基本タグ編 あとは順番に見ていって、HTML/CSSの基礎を学んでいくだけです。 初めの『詳解HTML 基本タグ編』は27本の動画があって、学習内容はこんな感じ↓ HTMLファイルの作り方 見出し・段落・字下げ・コメント 画像の入れ方 リストと表の書き方 リンクの貼り方 セクションの区切り方 目次の作り方 ヘッダーとフッター metaタグ・タイトル・ファビコンについて 他、いろいろなタグ HTMLの仕様を確認する方法 実際にやってみると、動画のマネをして手を動かしながらコードを書いてくので「自分でプログラミングしてる」感があっていいですね。 間違っていても、お手本のコードと自分の書いたコードを簡単に比べられます。一目で違う箇所がわかるので便利。 なるほど、初心者がプログラミングを学ぶなら「ドットインストールがいいよ」といわれるのも納得。どんどん学んでいける感じがしますね。 重要:動画の再生・停止・戻しはカンタンにできます 動画学習する前に、動画の操作は知っておいた方がいいですね。 画面左下にある再生ボタンは反応が悪いです。なので使わないようにしましょう。 再生・停止は画面をクリックか「Enterキー」&「Spaceキー」でもできます。 あと、「←キー」で5秒逆戻し。「→キー」で5秒早送りです。 この動画操作を知っておくと、めちゃめちゃ効率アップします。 ヤドロク 僕はけっこー進んでから気づいたよ。先に知りたかった…。 同性の声の方が集中できる プレミアム会員だと、男性の声か女性の声か選べます。 一度切り替えて女性の声にしてみました。良い声で聞き取りやすいのですが、かわいい印象すぎて…。気が散る感じがしたので、勉強に集中するために男性の声に戻しました。 同性の声を選んだ方が学ぶには良さそうですね。 動画スピードも変えられる プレミアム会員なら動画再生スピードも変えることができます。 コードをマネして書きながらだとしょちゅう前のシーンに戻りながら見ることになるので、スピードを0.8倍くらいまで落として見るのがいいですね。 スピードを上げて見るのは確認の時くらいでしょう。 あとは順番にやってくだけ 引き続き、用意されたコースを順番にやっていきましょう。 1回見てわからなくても、2周3周してくうちに『HTML』と『CSS』が使えるようになってきます。基礎をじっくり学んでいきましょう↓ >>>詳解HTML フォームタグ編 詳解HTML フォームタグ編の【学習内容】↓ お問い合わせフォームの作り方 チェックボックス・ラジオボタンの作り方 ドロップダウンリスト・リストボックスの作り方 ボタンの設置 いろいろな入力部品を知っておこう >>>詳解CSS 基本スタイリング編 詳解CSS 基本スタイリング編の【学習内容】↓ CSSの基本的な書き方 ボックスモデルについて パディング・ボーダー・マージンの入れ方 ボックスの丸め方・影のつけ方 親要素の継承について フォント指定について sectionの使い方 CSSの仕様の調べ方 開発者ツールの見かた >>>詳解CSS 応用スタイリング編 詳解CSS 応用スタイリング編の【学習内容】↓ ブロック要素とインライン要素 classの使い方 position指定 さまざまなプロパティ リンク・ボタン・リストのスタイリング calcの使い方 単位のemとrem 色の指定とカラーピッカーついて まとめて指定できるCSS変数について >>>詳解CSS セレクター編 詳解CSS セレクター編の【学習内容】↓ セレクターの種類 要素型セレクターとclassセレクター idセレクターと全称セレクター 属性セレクター セレクターを組み合わせて使う 疑似要素の使い方 疑似クラスの使い方 詳細度の仕組みによって優先されるスタイル ここらへんから難しくなってくるので、必要になった時に見直すといいです。 >>>詳解CSS フレックスボックス編 詳解CSS フレックスボックス編の【学習内容】↓ フレックスボックスのいろいろなプロパティと動作 フレックスボックスを使ったレイアウト 一回見ただけでは理解できないので、必要になってきたら都度見直すと良さそうですね。 >>>詳解CSS アニメーション編 詳解CSS アニメーション編の【学習内容】↓ Web上のアニメーション表現 Chromeのデベロッパーツールでのアニメーションの調整 高度なアニメーションの作り方 >>>詳解CSS レスポンシブウェブデザイン編 詳解CSS レスポンシブウェブデザイン編の【学習内容】↓ レスポンシブウェブデザインについて 画面サイズに合わせてレイアウトを変えるやり方 Webサイトをゼロから制作してみよう ここからは学んだことを実践です。まずは自己紹介のポートフォリオサイトを作っていきます↓ >>>実践!ポートフォリオサイトを作ろう 次に、アプリの紹介ページを作りつつ「Emmet」で省略する書き方に慣れていきましょう↓ >>>実践!アプリ紹介ページを作ろう >>>実践!ECサイトをマークアップしよう Webサイトを公開してみよう >>>GitHub Pagesでウェブサイトを公開しよう ひとまずこれで『HTML』と『CSS』の基礎は終わりです。引き続き、興味あるプログラミング言語を学んでいきましょう。 ドットインストールの勉強方法 まとめ プログラミングを始めるなら「まずはドットインストールの動画で勉強するのがいい」ということがわかりました。 無料動画だけではムリですが。有料会員といっても月1,080円。1日30円で有料動画見放題と思えば安いものです。 HTML/CSSを学んだ後は、そのままJavaScriptやPHPなど他のプログラミング言語もどんどん学んでいける。 まずは『ドットインストール』と『Progate』を両方やって基礎を固めるのがいいですね。毎日少しづつ進めていきましょう。 それに加え『テックアカデミーの無料動画講座』や、以下のようなエンジニアさんのYoutube解説も併せて見ればイヤでもわかるようになってきます↓ 地道に学んでいけばいけそうな感じがしてきましたね。 ヤドロク 引き続きHTML/CSSを攻略していこう!

中級編は導入だけやって、あとは有料会員になったら進めるようになります。

1,078円(税込)なので、引きつづき学びたい方は登録して学びましょう。

>>>有料プランに登録する

僕は『テックアカデミーの無料動画講座』を見ても『CSS講座』がよくわかりませんでした。なのでドットインストールで学びつつ、Progateでもプレミアム会員になって勉強を進めます。

Progateの勉強方法 まとめ

Progateの勉強方法 まとめ

プログラミングを始めるなら「Progete」とはよく言われますが、「まずはドットインストールの動画で勉強した後にProgateをやるのがいい」ということがわかりました。

無料講座だけではマスターできませんが。月1,078円で学び放題なのでコスパは良いサービスです。

HTML/CSSを学んだ後は、そのままJavaScriptやPHPなど他のプログラミング言語もどんどん学んでいける。

まずは『ドットインストール』と『Progate』を両方やって基礎を固めるのがいいですね。毎日少しづつ進めていきましょう。

それに加え『テックアカデミーの無料動画講座』や、以下のようなエンジニアさんのYoutube解説も併せて見れば基礎は理解できるでしょう↓

地道に学んでいけばいけそうな感じがしてきますね。

ヤドロク
引き続きHTML/CSSを攻略していこう!
Twitter(@saisei_to_hakai)では、気になるカルチャーについてつぶやいています。レアな情報を流したりするのでフォローしといてください。