【30DAYSトライアル1st】 Progate編

30DAYSトライアル Progate編Web Development
2020.10.11

30DAYSトライアル Progate編

2019年にTwitterから誕生した格安オンラインプログラミングサービスの「デイトラ」の先駆けとなった「30DAYSトライアル1st」のProgate編（Day1からDay7）の課題をまとめた記事です。

毎日1つずつ課題が出題されるという学習ステップで、無理なく続けながらWeb制作のスキルを身につけられるので、プログラミング初心者におすすめです。

 

スポンサーリンク

30DAYSトライアル1st Progate編

30DAYSトライアル1stのDay1からDay7はオンラインプログラミング学習サイトProgateを使って学習を進めていきます。

Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
prog-8.com

Day1: HTML&CSS学習コース 初級編 1章から4章

Day1の課題

Day1の課題はオンラインプログラミング学習サイト『Progate』でHTML&CSS学習コース 初級編 1章から4章をやります。

 

Day1の感想

 Progateは分かりやすいスライドで学んだあと実際にコードを書いてみるという学習方法なのでさくさく進めます。

1週しただけでは理解できなかったので、以下のような流れで2週しました。

  • 1週目はとりあえず進めて全体を把握
  • 2週目は1週目の時につまづいたところや理解が怪しいところをメモやスクリーンショットを取りながらすすめる

このメモがDay6の道場編を進める時にとっても役立ちました。

Day2: HTML&CSS学習コース 初級編 5章から7章

Day2の課題

Day2の課題はProgateのHTML&CSS学習コース 初級編 5章から7章まで進めます。

 

Day2の感想

Progateのコースにそって進めていくだけで、2日目にして簡単なWebサイトを作れるので早くも達成感を味わえます！

時間があれば、道場コースにチャレンジするのもオススメです。ただ、道場コースは少しのずれでも先に進めなくなるので、躓いてすぐに修正できなそうなら潔くあきらめて、学習コースの復習をしたほうがいいです。（まだ2日目ですし、焦らずいきましょう）

Day3: HTML&CSS学習コース 中級編 1章から3章

Day3の課題

Day3の課題はProgateのHTML&CSS学習コース 中級編 1章から3章まですすめます。

（中級編から先を進めるためにはProgateの有料会員になる必要があります。）

 

Day3の感想

中級編では初級編で作ったサイトより洗練された雰囲気のサイトを作ります。

目標物を確認して、自分もこれがつくれるのか！って思うだけでワクワクしました。

ボタンのカタチを整えるためのCSSの記述が多くてビックリ。

要素を少し透かせることができる（opacityの設定）のが私的には一番感動しました。

Day4: HTML&CSS学習コース 中級編 4章から7章

Day4の課題

Day4の課題ではProgateのHTML&CSS学習コース 中級編 4章から7章までやります。

7章までやりきると、Day3で確認した目標サイトと同じものが出来上がりますよ！

 

Day4の感想 

ここまで続けられたら、三日坊主を乗り越えてます！

レッスン一覧部分をやるとHTMLの記述量がすごく増えるので、パソコンが苦手なわたしにはちょっとアレルギーが出そう。というような感じになりました。

素敵なWebサイトを作れる様になりたい一心で最後までやりきり、2週目になるともう慣れていてメモを取りながら、復習するという流れで学習をしています。

中級編のメモのとり方として各CSSの使い方や記述方法をメモすると膨大な数になってしまうので、細かい点のメモはできるだけせずに、完成サイト全体像を描いてどういう要素で構成されているかをメモすると、俯瞰的にサイトを見ることができるようになります。

Day5: HTML&CSS学習コース 上級編 すべて

Day5の課題

Day5の課題はProgateのHTML&CSS学習コース 上級編 すべてを終わらせることです。

HTML&CSS学習コース 上級編ではスマホやタブレットでサイトをバランスよく表示させるための「レスポンシブコーディング」学んでいきます。

 

Day5の感想

レスポンシブを作るために理解する必要がある「min-width」と「max-width」の違いを理解するためにかなりの時間がかかりました。

HTMLやCSSすら知らなかった私が、たった5日続けただけでここまで進めると思っていなかったので自分の成長に驚いています。

Day6: HTML&CSS道場コース 初級編と中級編

Day6の課題

Day6の課題では、今までの学習理解度が試されるHTML&CSS学習コース 道場編 初級と中級に挑戦します。

 

Day6の感想

今までとっていたメモを参考に道場コースにチャレンジしました。でもわからないところは潔く答えを見る勇気が大切です！

答えを見ることは理解を深めるためなので、全然悪いことではないと思います。

Day6の課題は個人的に時間がかかったので、お休みの時間がしっかり取れる日にやるのがオススメです。

Day7: HTML&CSS道場コース 上級編

Day7の課題

Day7の課題はProgateのHTML&CSS学習コース 上級編を終わらせます。

 

Day7の感想

 レスポンシブにするのはDay5で時間をかけて理解したため比較的スムーズに進められました。

また、余裕があったらHTML & CSS Flexbox編もチャレンジしてみてください。

まとめ

たった一週間でWebページの 見た目をつくる言語であるHTMLのCSS基礎理解が完了しました！

30DAYSトライアルは、始めの1週間学習を続けただけで成長を確実に実感できるように課題が設定されているので、辛いこともありますが、毎日ワクワクしながら取り組めます。

また30DAYSトライアルを続けることで技術を習得するのはもちろん、「継続する力」 もつけられるのではないでしょうか。