とある地方大学生の生き方

学生。主にプログラミング関連の記事を書きます。

【日記】僕が3か月間パソコン1つで稼ぎたいという夢のためにやったこと WEB制作初心者~3か月

f:id:Reiji_Kusuzawa:20201130212128j:plain

Photo-AC

今回は、僕が2020年9月からパソコンで稼ぎたいという夢のためにコツコツやってきたことを日付とともに整理してみたいと思います。稼ぎ方はWEB制作です。

一応コツコツ(笑)かっこ笑いです。3か月かかってようやく模写コーディングに進んでいるので…。なかなか大学の勉強以外の時間をそれだけに注いだとか、毎日ほぼ欠かさずやったとかではないです。

 

正直めちゃめちゃいろんな趣味や娯楽やらに時間取られてました。汗

 

でも、『「目標に向かって今日何をやりましたか?」と尋ねられたとき、何か言えるように行動すべきだ。』という言葉をとあるYouTuberの方から聞いたのでたびたび念頭に置きながらやってきました。

 

状況としては

・9月中は夏休み

・10、11月中は普通にキャンパスで授業

スマホゲームやYouTubeが面白くて普通にサボる日がある

・授業の課題はやる

・バイト,インターンなどは無し

 

ということでやったことリストです。

 

 HTML&CSSの基礎学習

8月29日

『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』を買う

 

9月の1か月間の貴重な夏休みができたということで、まずAmazonで本を買いました。Webデザイナーさんであり、Webクリエイターボックスというサイトを運営していらっしゃるManaさんという方の書籍です。

 

9月4日~9月15日

『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』をコーディングを真似しながら読み進める

届いてから実際に最初の基本は読み飛ばして、エディター(Atom)をインストールしてカフェのサンプルサイトを読みながら作っていく。最初は無鉄砲にほとんど考えなしにコードを写すだけでした。でもある程度HTMLとCSSには慣れて概要は理解。

※ちなみに高校の情報でHTMLとCSSは触らせてもらったけど知識が雀の涙過ぎた…。

 

JavaScriptの基礎学習

9月19日~

JavaScriptの学習のため、Progateの有料会員になる

高校のいつかしらの時期になぜかRubyの無料版だけやっており若干お世話になっていたProgate・・・。ついに本格的にお世話になるときが来る。

JavaScriptをやっているとき、初めてのプログラミング言語の概要を学んだのでいろいろと達成感が強い。楽しい。でもコレで何が出来るのかイマイチ分からない。後々勉強するjQueryをやるときにとても役立つ。

※ちなみにHTML&CSSはコーディング用の言語でプログラミング言語ではないそうです。

 

10月1日

JavaScript学習コース7つ完了

これでももう少し早く全て終われた気がします。途中で大学の前期の成績が振るわなさ過ぎて助言教員からお呼び出しを食らったのでなんか落ち込む期間がありました…笑

この辺りから後期の授業が始まります。

 

ProgateでHTML&CSS学習

10月前半ぐらい

書籍で勉強したが結局ProgateのHTML&CSS道場コースをやることに・・・

まだProgateの1か月プラスプランが残っていたのでHTML&CSS道場コースをやってみる。結果太刀打ちできずに焦る。

→書籍とProgateで二度手間になりましたが学習コースの初級編と中級編をとりあえず地道にやってみることに。

Manaさんなんかすみませn((

2周しました。もっとやってる人は10周もしたなんて聞いたことがあります。どんだけガチやねん!!

書籍は値段が張るので初心者の方は最初はProgateだけで良いかもしれませんね。

※書籍はProgateよりもさらに網羅的だったり有料プラン期限が切れても読めるので便利です!僕が買ったものも2019年ベストセラー本で今現在のホームページの作り方が分かってとても良質でした。

 

10月21日 Progate最初の1か月間のサブスクリプション期限が切れる。

10月26日 Progateで再び道場コースをやっていくために1か月分のつもりで課金

 

10月31日

HTML&CSS初級道場コース初めて修了

11月3日

HTML&CSS中級道場コース初めて修了

初めはwrapperやらcontainerやらdivタグのクラスの付け方に困惑しました。

f:id:Reiji_Kusuzawa:20201130203219j:plain

これはクラスの付け方とHTMLの構造、レイアウトがどうなっているのか把握するために僕が描いた雑なメモ。

他にもブロック要素・インライン要素の違い、position:absolute・position:relativeなど若干ややこしいけどめちゃめちゃ重要・頻出だなと思うことをメモしながら進めてました。

 

ProgateでjQuery学習

11月11日~11月28日

jQuery学習コース初級編、中級編をやる

ここで9月の夏休みごろに勉強していたJavaScriptの知識が申し訳程度で生きてきます。

jQueryはWEBサイトに動きを付けることができるJavaScriptライブラリ。モーダルウィンドウやハンバーグメニューなどWEBサイトに見られる身近なものがそういう名前ついてたんだ…っていう感じで出てくる。そしてそれが作れる。

HTML&CSSと違って一応プログラミング言語?なので論理的で複雑で自分の知識に取り込むにはもう少し練習が必要そうです。でもWEBページに動きを付けられるようになるのは楽しい。

 

模写コーディング準備

11月29日

コーディングを教えてくださるYouTuberさんの動画を見ながら模写コーディングの準備をしました。Google拡張機能(ColorPick Eyedropper・Image Downloader・Full Page Screen Capture)、エディターの各種パッケージのダウンロードなど。

 

※今後はPhotoShopのインストールが必要なんですが、恥ずかしながら自分の口座とクレジットカードがないのでさっさとネットバンクで口座を開設しようと思います。

PhotoShopが無くても模写コーディングはできますが、PhotoShopからできるとより実践的でいいとのことなので。

 

まとめ

本来であれば9月から3ヶ月でもう実際に稼ぐ予定だったのですが、だらだらペースでやっていたのでやっとのことで模写コーディングに入れる形になりました…。

 

反省としては、計画性が無くサボる日があったこと。作った専用のTwitterのアカウント@Reiji_Kusuzawaで日々の発信ができていなかったこと。そして、似たような仲間が作れなかったこと。・・・が大きかったのかなと思いました。(SNSアカウント作ると怪しい人達からのオンラインサロンの勧誘がすごいんじゃぁぁあ!!)

 

それでも着々と進んでいる感じが満足なのでこれからはWEB制作で稼いでいくために模写コーディング頑張っていこうと思います。

計画性についての書籍探して読んだほうがいいかもなぁ…。

 

最後までこの記事を読んでくださりありがとうございました。( `ー´)ノ