Twitterで見かけたProgate[プロゲート]というサイト。プログラミングの基礎が学べるオンラインプログラミング学習サービスサイトで、「初心者から、創れる人を生み出す」というコンセプトで運営されています。
わたしは学校に通って HTML や CSS や JavaScript を勉強しているのではなく、書籍を購入して独学で勉強しているので学習が進んでいるのかどうかがわからないのと、書籍を読むだけではなくて手を動かして覚えたいのですが、適当な教材が見当たらなくて困っていました。
そんな時に見つけたちょうど見つけた Progate 。早速試してみました。
公式サイト:Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
- Progate で学習できるプログラムの種類
- Progate[プロゲート]のHTML＆CSS 初級編 をやってみた
- Progate[プロゲート]のHTML＆CSS 中級編 をやってみた
- Progate[プロゲート]のHTML＆CSS 上級編 をやってみた HTML
- Progate[プロゲート]の有料会員を利用してみた感想
Progate で学習できるプログラムの種類
Progate で学習できるプログラム言語の種類は
- HTML＆CSS
- JavaScript
- jQuery
- Ruby
- Ruby on Rails5
- PHP
- Java
- Python
- Command Line
- Git
- SQL
- Sass
- Go
- React
- Node.js
- Quest
いろんな言語が学べるようになっています。
今回私が試してみたのは、HTML＆CSSで全部で7項目ありました。
| 学習 | レッスン名 |
|---|---|
| 学習レッスン | 初級編 |
| 中級編 | |
| 上級編 | |
| FLEXBOX編 | |
| 道場レッスン | 初級編 |
| 中級編 | |
| 上級編 |
最初の学習レッスン初級編のみ無料で、あとは有料です。
有料会員になれば、Progateで公開中の全レッスンを学習できるようになります。税込¥1,078/月
わたしの場合は趣味でお勉強しているので、趣味に1か月1,000円ちょっとならかけてもいいかな？という感じで申し込みました。
Progate[プロゲート]のHTML＆CSS 初級編 をやってみた
HTML&CSSの初級編で学べる事
HTML&CSSの初級編では、基礎的なことを学びながら簡単な1ページのサイトを作っていきます。
学べる項目は
- HTML
- 見出しと段落
- リンク
- 画像
- リスト
- CSS
- 文字の色
- 文字の大きさと種類
- 高さと幅と背景の色
- タグに名前を付ける
- レイアウト
- HTMLの全体構造
- HTMLの全体構造（２）
- 全体のレイアウト
- ヘッダー・フッター・コンテンツ・問い合わせフォームの作り方
目安 3h50m
今までブログのCSSを編集していたので楽勝だと思っていたのですが、うろ覚えのところが多々あるんだと確認チェックができました。
うろ覚えのところをメモしておくと
<!DOCTYPE html> <meta charset="utf-8"> <link rel="stylesheet" href="stylesheet.css"> <form></form> <input> <textarea></textarea> <input type="submit" value="送信">
headの部分はコピペで済ませてしまっているので全然覚えていませんでした。あと、ブログだとフォームをあまり使わないのでformがちょっと苦手です。type="submit" が出てこない。
ブログを書く方は、HTMLを少し覚えておくと便利なので、HTMLが全く分からないという方は、初級編は無料なので学習してみるのをお勧めします。
基本的な見出しの使い方やリストの使い方、リンクや画像の貼り方などは記事を書くときに覚えておくと記事を書くときに便利ですよ。
Progate[プロゲート]のHTML＆CSS 中級編 をやってみた
中級編になると、初級編よりも少し実践に近い形のサイトを作っていきます。
中級編で学習できる項目
- トップ部分のレイアウト
- 透明度、文字の間隔の調整
- ボタンの作成
- レイアウトを整える
- アイコンを使う
- ヘッダー部分のレイアウト
- ログインリンク作成
- 画像を横並びにする
- 立体的なボタンの作成
- クリック時の変化をつける
- ヘッダーを固定する
中級編になると少し難易度があがります。opacity displaypositionなどがでてきます。CSSは普段から触っているのにも関わらず、やっぱりうろ覚えのところがたくさん。
独学だと自分の苦手を探すのが難しいですが、一通りの項目が入っているので、これだと自分の苦手なところがよくわかるような気がします。
letter-spacing: 2px;
transition: all 1s;
文字の横幅の調整をあまりしないので、letter-spacingがでてこないのと、アニメーションをあまりつけたことがないのでtransitionがうろ覚えでした。
それから、押したときに凹んだように見えるボタンの作り方でposition: relative;で位置をずらしつつ、box-shadowをdisplay:noneにする小技。こんな風にして動きのあるボタンって作られているんですね。
押したときに凹んだように見えるボタンのHTMLとCSS
See the Pen btn by mono (@lifelogtan) on CodePen.
Progate[プロゲート]のHTML＆CSS 上級編 をやってみた HTML
HTML & CSS 上級編 はレスポンシブデザインが学習できます。
box-sizing: border-box; @media (max-width: 670px) { } max-width: ◯◯px;
レスポンシブデザインは、ブログのテーマを作成した時にすごく悩まされたところなので、だいたい理解できました。
ブレイクポイントをいくつするかを決めるのが実践だと難しいです。
Progate[プロゲート]の有料会員を利用してみた感想
プロゲートのHTML＆CSSのコースを7項目すべて終わらせてみた感想です。
学習レッスンでは、最初に解説のスライドを見た後に、左側に指示、真ん中にコードを入力する画面、右側にブラウザという配置でHTMLやCSSを入力すると右側のブラウザ部分に反映される形で学習ができます。
スモールステップで少しずつ進みながら1枚のサイトが出来上がっていくのが実践的で楽しく学習できる理由かなと思います。
道場レッスンでは、学習した内容を覚えているかどうか、仕様書を元に1枚のサイトを作っていきます。
わたしのように全くの初心者で、書籍を読んで何とかなく理解しているけど手を動かして覚えていきたいという方にはおすすめです。
HTMLとCSSが終わったので、今度はJavaScriptとWeb開発コース（Node.js）をやっていこうと思っています。
