【独学の記録】勉強0日目〜7日目で学んだこと Progateやドットインストールで独学をはじめました

web制作
記事内に広告が含まれています。
れもも
れもも

プロフィール
れもも(@lamoneido)と申します。
2021/12〜本業休職をきっかけにweb制作の学習を始めました。先日デイトラweb制作コースの卒業制作を終えました。
これからshopifyコースも控えています^^

学習を始めた時から「今日は何を何時間やった」という記録を残していたので、今回はその記録を振り返って学習記録にまとめていこうかなと思います。
今回が振り返り1発目ということですが、これから1週間ずつ振り返りの記事を出していこうと思います。
※ちなみにこの記事では、当時記録していた学習記録もそのまま公開しています。

web制作学習はなんで始めたの?

本業を休職したことをきっかけでweb制作学習を始めました。休職した理由は今は置いときまして、2021年12月1日から会社を休み始め、この時はweb制作をやろうなんて1ミリも思っていなく、ましてやプログラミングやホームページ制作のことも全く知らない状態でした。 

れもも
れもも

会社を休む直前まで本業のことで精一杯だったのでプログラミングやりたいとか考えたこともなかったですね。

きっかけは、会社を休み始めた瞬間に「自分、会社に復帰できなかったらどうなっちゃうんだろう」っとゆう不安・焦りから何かやれること見つけないと自分ヤバいかもと思ったことでした。
焦っているにも関わらずベットの上でダラダラ見ていたyoutubeの広告でプログラミングのことをたくさん耳にし、プログラミングって自分にできるのかな?って考え始めました。
すぐさま「プログラミング 初心者」とGoogle先生で調べたところProgateが初心者にはオススメと書いてあったのでとりあえずiPhoneでProgateのアプリをダウンロードしました。
これが2021年12月1日の出来事であり、web制作学習の始まりでした。

れもも
れもも

会社を休んだ途端、自分て会社辞めたら何にも出来ない人なんだなって、この時はすごく不安になりましたね、、、

web制作 学習の記録

ということでProgateをダウンロードしたれももは、無料版のままHTMLから学習を始めました。
ちなみに0日目〜7日目の1週間で学習に費やした時間は44.5時間でした。

学習0日目〜7日目(学習:1週間目)

れもも
れもも

当時記録していた資料見づらいので下表にまとめ直ました!笑

日付学習内容学習時間合計時間
12/1・Progate:HTML/CSS初級1周2.0h2.0h
12/2・Creator Quest:chapter1〜10(HTML)4.5h4.5h
12/3・Creator Quest:chapter11~23(HTML)6.5h6.5h
12/4・休み(父親とサッカー観戦へ)00
12/5・Creator Quest:chapter1~3(CSS)
・Progate:HTML/CSS初級1周(復習)
・Progate:HTML/CSS中級1周
・Progate:HTML/CSS初級道場レッスン
1.0h
1.5h
2.5h
2.5h
7.5h
12/6・Progate:HTML/CSS中級道場レッスン
・Progate:HTML/CSS上級&上級道場レッスン
・Progate:Flexbox編
・模写コーディング
6.5h
1.5h
0.5h
4.0h
12.5h
12/7・ドットインストール(HTML/CSS基礎文法、フォーム編)
・ドットインストール(CSSセレクタ編、flexbox編)
・模写コーディング「Profile」
5.0h
2.0h
4.5h
11.5h
学習開始1日目〜7日目までの記録

という感じで、かなりやりこんでいますねw 自分でも引いております!笑
一日12時間半はちょっと気持ち悪いですよね。。。

12/1(学習:1日目)

この日はProgareのアプリをダウンロードして、スマホでHTML/CSS初級を1周しました。
アプリでやったことある方はわかると思うんですけど、アプリ版は文字を打たずに「<h1>」とか「</h1>」のタグがボタンになっているのでポチポチ押していくだけで進められるので結構スイスイ進められました。
この日の感想としては、「めっちゃ簡単じゃん!簡単逆に不安なんだけど?Progateって簡単すぎるのかな?」という感じでした。

れもも
れもも

本当にこんな簡単でいいのかな?と心配になったので2日目は他の教材に取り組んでいます。
この時はまだProgateに課金する勇気がまだなかったってゆうのもありましたね。

12/2、12/3、12/4(学習:2〜4日目)

Progateが簡単すぎて不安を感じたれももはCreator Questという無料で動画解説+教材までサイトに用意してあるサイトを発見しこれで学習をしてみました。
この解説動画がわかりやすくて面白くて、2日かけて全動画を全てみました!笑
Progate初級を1周していたからってゆうのもあると思いますが、解説が本当にわかりやすくてHTML/CSSの基礎中の基礎はこのCreator Questで身についたと言ってもいいくらいです。

進め方が面白くて、まずHTMLだけを一気に解説するんですよね(chapter1〜23)。CSSにはあまり触れずにHTMLだけでサイトを作っていきます。なのでHTMLを細かく説明してくれるので超初心者の人には個人的におすすめなサイトです!
ただし12/5の記録を見るとCSS編chapter1〜3までやってこのサイトでの学習終わっているじゃないですか?なんとここで教材更新がストップしているんですねww
はい、ということで12/5〜またProgateに戻ります!

れもも
れもも

次の日は父親とサッカー観戦に行ってましたので勉強お休みしましたm(_ _)m

CreatorQuest
CreatorQuest(クリエータークエスト)はWebサイト制作に関するスキルをオンラインで学習できるサイトです。WebデザイナーやWebディレクター、フロントエンジニアなどに必要なスキルを独学するのに最適な教科書になると思います。

12/5(学習:5日目)

Creator Questを全部制覇したれももはProgate初級を再び復習して、Progateに課金することを決意し、中級編→初級道場レッスンと一気に進めていきました。
Creator Questでかなり基礎力はついた自信があったのでこの辺りは難なく進められました。
自信がついてきてモチベーションがかなり上がっていたのでこの辺りの勉強時間がエグいですね、、、笑

れもも
れもも

初めてオンライン教材に課金するのは少し緊張しましたね〜。

12/6(学習:6日目)

Progateを引き続き進めていき、中級道場レッスン→上級→上級道場レッスン→Flexbox編まで一気に進めこの日でHTML/CSS編が無事完了しました!
ここまで学習するともうサイトの見た目くらいだったら作れちゃうよね?と思って模写コーディングを始めました。
おそらくご存知の方も多いと思いますが、模写コーディングおすすめの練習素材を紹介しているサイトがあって、入門〜上級まで用意されているんですが、まず入門からやってみました。

やり方としては、画像素材はサイトからダウンロードできるのでそれを使用し、余白やフォントの種類・サイズはGoogle拡張機能を使って調べながらHTML/CSSを書いていました。

【模写コーディング】おすすめの練習サイト【入門編~上級編】
模写コーディングの練習におすすめのサイトを難易度にあわせて、入門編、初級編、中級編、上級編の4つ紹介しています。それぞれのサイトには、デモサイトとコーディングのヒントとなる「レイアウト構成」の解説がついていますので初心者の方にもおすすめです。

12/7(学習:7日目)

この日は前日から取り組んでいた模写コーディングを完成させました。少し上手くいかないところもありながらもなんとか自力でできたので、すごい自信になりました!

そして模写コーディングをやっていた際に、HTML/CSSに関して理解が曖昧なところやProgateで出てきた事しか自分はまだできないんだと気づき、この日からドットインストールでの学習を始め、すぐに有料版に切り替えてガンガン進めていきました!

れもも
れもも

学習1週間でサイトの見た目だけ自力でできるようになるなんて本当に感動でした!

まとめ

以上がれももの1週間の学習記録でした。
こうやって記録してみると結構頑張ったなと感じるものですね。ただ、これだけ進められたのは休職して時間を大量に確保できたからに尽きます。

れもも
れもも

質より量でカバーするタイプなのでこのスタイルが功を奏している感じで良かったです。

学んだこと

Progate

  • HTML/CSS 初級&初級道場レッスン
  • HTML/CSS 中級&中級道場レッスン
  • HTML/CSS 上級&上級道場レッスン
  • Flexbox編

ドットインストール

  • HTML基礎文法編
  • HTMLフォーム部品編
  • CSS基礎文法編
  • CSSセレクター編
  • HTMLフレックスボックス編

Creator Quest

  • HTML chapter1〜23
  • CSS chapter1〜3

模写コーディング

この記録が皆さんの参考になればと思います。気になることがあれば是非コメントなどお待ちしております。
それでは次回は14日目まで(学習2週間)の記録を書きますのでそちらもご覧ください。

コメント

タイトルとURLをコピーしました