2019年にTwitterから誕生した格安オンラインプログラミングサービスの「デイトラ」の先駆けとなった「30DAYSトライアル1st」のProgate編(Day1からDay7)の課題をまとめた記事です。
毎日1つずつ課題が出題されるという学習ステップで、無理なく続けながらWeb制作のスキルを身につけられるので、プログラミング初心者におすすめです。
30DAYSトライアル1st Progate編
30DAYSトライアル1stのDay1からDay7はオンラインプログラミング学習サイトProgateを使って学習を進めていきます。

Day1: HTML&CSS学習コース 初級編 1章から4章
Day1の課題
Day1の課題はオンラインプログラミング学習サイト『Progate』でHTML&CSS学習コース 初級編 1章から4章をやります。
DAY1.『Progate HTML & CSS 初級編(4章まで)』
— ショーヘー@東フリCMO (@showheyohtaki) 2019年9月8日
まずはオンラインプログラミング学習サイト『Progate』( https://t.co/2CJ1eEz9Hd )で、コーディング(HTML・CSSでのライティング作業)の基礎を学びましょう❗️
DAY1は、初級編の4章『ヘッダーを作ろう』まで終わらせてください👨💻#30DAYSトライアル pic.twitter.com/t98prubRle
Day1の感想
Progateは分かりやすいスライドで学んだあと実際にコードを書いてみるという学習方法なのでさくさく進めます。
1週しただけでは理解できなかったので、以下のような流れで2週しました。
- 1週目はとりあえず進めて全体を把握
- 2週目は1週目の時につまづいたところや理解が怪しいところをメモやスクリーンショットを取りながらすすめる
このメモがDay6の道場編を進める時にとっても役立ちました。
Day2: HTML&CSS学習コース 初級編 5章から7章
Day2の課題
Day2の課題はProgateのHTML&CSS学習コース 初級編 5章から7章まで進めます。
DAY2.『Progate HTML & CSS 初級編(7章まで)』
— ショーヘー@東フリCMO (@showheyohtaki) 2019年9月9日
引き続きProgate( https://t.co/2CJ1eEz9Hd )でコーディングの基礎を学びます!
DAY2は初級編の7章まで終わらせて下さい👍
早く終わった人は『道場コース HTML & CSS 初級編』にもぜひトライを❗️
書けない箇所は復習しましょう#30DAYSトライアル pic.twitter.com/cW1ncpXYJJ
Day2の感想
Progateのコースにそって進めていくだけで、2日目にして簡単なWebサイトを作れるので早くも達成感を味わえます!
時間があれば、道場コースにチャレンジするのもオススメです。ただ、道場コースは少しのずれでも先に進めなくなるので、躓いてすぐに修正できなそうなら潔くあきらめて、学習コースの復習をしたほうがいいです。(まだ2日目ですし、焦らずいきましょう)
Day3: HTML&CSS学習コース 中級編 1章から3章
Day3の課題
Day3の課題はProgateのHTML&CSS学習コース 中級編 1章から3章まですすめます。
(中級編から先を進めるためにはProgateの有料会員になる必要があります。)
DAY3.『Progate HTML & CSS 中級編(3章まで)』
— ショーヘー@東フリCMO (@showheyohtaki) 2019年9月10日
プログラミング学習サイトProgate( https://t.co/2CJ1eEhyiD )で基本レイアウトを作るコーディングを学びます。
DAY3は、中級編の3章まで進めてください❗️
ここからサイトを作ってる感覚が出てきて楽しくなるはずですよ😄#30DAYSトライアル pic.twitter.com/leriGrlprU
Day3の感想
中級編では初級編で作ったサイトより洗練された雰囲気のサイトを作ります。
目標物を確認して、自分もこれがつくれるのか!って思うだけでワクワクしました。
ボタンのカタチを整えるためのCSSの記述が多くてビックリ。
要素を少し透かせることができる(opacityの設定)のが私的には一番感動しました。
Day4: HTML&CSS学習コース 中級編 4章から7章
Day4の課題
Day4の課題ではProgateのHTML&CSS学習コース 中級編 4章から7章までやります。
7章までやりきると、Day3で確認した目標サイトと同じものが出来上がりますよ!
DAY4.『Progate HTML & CSS 中級編(最後まで)』
— ショーヘー@東フリCMO (@showheyohtaki) 2019年9月11日
プログラミング学習サイトProgate( https://t.co/2CJ1eEhyiD )で基本レイアウトを作るためのコーディングを学びます!
DAY4は、中級編を終わらせてください。
「レッスン一覧」のようなレイアウトは頻出なので要チェックです‼️#30DAYSトライアル pic.twitter.com/n7aKik2EWe
Day4の感想
ここまで続けられたら、三日坊主を乗り越えてます!
レッスン一覧部分をやるとHTMLの記述量がすごく増えるので、パソコンが苦手なわたしにはちょっとアレルギーが出そう。というような感じになりました。
素敵なWebサイトを作れる様になりたい一心で最後までやりきり、2週目になるともう慣れていてメモを取りながら、復習するという流れで学習をしています。
中級編のメモのとり方として各CSSの使い方や記述方法をメモすると膨大な数になってしまうので、細かい点のメモはできるだけせずに、完成サイト全体像を描いてどういう要素で構成されているかをメモすると、俯瞰的にサイトを見ることができるようになります。
Day5: HTML&CSS学習コース 上級編 すべて
Day5の課題
Day5の課題はProgateのHTML&CSS学習コース 上級編 すべてを終わらせることです。
HTML&CSS学習コース 上級編ではスマホやタブレットでサイトをバランスよく表示させるための「レスポンシブコーディング」学んでいきます。
DAY5.『Progate HTML & CSS 上級編』
— ショーヘー@東フリCMO (@showheyohtaki) 2019年9月12日
プログラミング学習サイトProgate( https://t.co/2CJ1eEz9Hd )で、レスポンシブなサイトを作るためのコーディングを学びます!
DAY5は上級編を終わらせましょう
メディアクエリはもちろん、box-sizingも超重要です‼️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/ZiqYZeJvuj
Day5の感想
レスポンシブを作るために理解する必要がある「min-width」と「max-width」の違いを理解するためにかなりの時間がかかりました。
HTMLやCSSすら知らなかった私が、たった5日続けただけでここまで進めると思っていなかったので自分の成長に驚いています。
Day6: HTML&CSS道場コース 初級編と中級編
Day6の課題
Day6の課題では、今までの学習理解度が試されるHTML&CSS学習コース 道場編 初級と中級に挑戦します。
DAY6. 『Progate HTML & CSS 初級・中級道場コース』
— ショーヘー@東フリCMO (@showheyohtaki) 2019年9月13日
Progateの HTML & CSS コース( https://t.co/2CJ1eEhyiD )で学んできたことの総復習です。
DAY6は、初級・中級の道場編を1周ずつやるのが目標‼️
詰まったところはスレッドに戻って復習してください👍#30DAYSトライアル pic.twitter.com/0DIAvkeOlF
Day6の感想
今までとっていたメモを参考に道場コースにチャレンジしました。でもわからないところは潔く答えを見る勇気が大切です!
答えを見ることは理解を深めるためなので、全然悪いことではないと思います。
Day6の課題は個人的に時間がかかったので、お休みの時間がしっかり取れる日にやるのがオススメです。
Day7: HTML&CSS道場コース 上級編
Day7の課題
Day7の課題はProgateのHTML&CSS学習コース 上級編を終わらせます。
DAY7. 『Progate HTML & CSS 上級道場コース + 復習・休憩』
— ショーヘー@東フリCMO (@showheyohtaki) September 14, 2019
Progate(https://t.co/8q0BqOq0qA)で、レスポンシブデザインの復習をしてください。
早く終わると思うので、そのあとは今週学んだことの復習と息抜きに当てましょう👍
1週間お疲れさまでした ☺️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/HnQzJdgvl1
Day7の感想
レスポンシブにするのはDay5で時間をかけて理解したため比較的スムーズに進められました。
また、余裕があったらHTML & CSS Flexbox編もチャレンジしてみてください。
まとめ
たった一週間でWebページの 見た目をつくる言語であるHTMLのCSS基礎理解が完了しました!
30DAYSトライアルは、始めの1週間学習を続けただけで成長を確実に実感できるように課題が設定されているので、辛いこともありますが、毎日ワクワクしながら取り組めます。
また30DAYSトライアルを続けることで技術を習得するのはもちろん、「継続する力」 もつけられるのではないでしょうか。