【実践】30DAYSトライアルで実際にお金を稼ぐまで① 【1~10days】

30daystrial

こんにちは。たなか(@tanaka_ricecake)です。

Twitterで話題になっていた『初心者からコーディングの副業で月5万円を稼ぐためのトライアル』こと「30DAYSトライアル」 を実際にやってみようと思います。

最終的な目標は実際に月5万円稼げるようになること。10日ずつ区切ってまとめていこうと思います。

今回の記事では1~10日目までの学習内容をまとめます。

『30DAYSトライアル』とは

プログラミング

『30DAYSトライアル』 概要

まず『30DAYSトライアル』 をご存知でない方のために概要をご説明します。

30DAYSトライアルはフリーランスエンジニアのショーヘー様によるプログラミング学習ロードマップです。

未経験レベルから、サイト制作技術を身につけ、まずは副業で月に5万円稼げるまでを目標としたものです。

特徴として以下が挙げられています。

・プログラミング未経験の方でも勉強しやすい「HTML/CSSのコーディング」が題材

・３０日間の集中学習で到達できるゴール設定

・毎日の具体的な学習ロードマップを用意

・実務に役立つ知識とスキルが身につくように構成

・参加無料

平日に2h、休日に4hを想定しているとのことなので、業務をこなしつつなんとか実践できるかなと思い、取り組んでみることにしました。

『30DAYSトライアル』 全体像

以下のスケジュールで『コーディングの副業で月5万円を稼ぐ』レベルを目指します。

★マークは4h想定、他は2hだそうです。

  • DAY1.『Progate HTML & CSS 初級編（4章まで）』
  • DAY2.『Progate HTML & CSS 初級編（7章まで）』
  • DAY3.『Progate HTML & CSS 中級編（3章まで）』
  • DAY4.『Progate HTML & CSS 中級編（7章まで）』
  • DAY5.『Progate HTML & CSS 上級編』
  • DAY6. 『Progate HTML & CSS 初級・中級道場コース』★
  • DAY7. 『Progate HTML & CSS 上級道場コース』★
  • DAY8.『エディタをインストールしよう』
  • DAY9.『基本のショートカットを覚えよう＋ファイルパスを理解しよう』
  • DAY10.『Chromeの検証を使ってみよう＋LiveServerをインストールしよう』
  • DAY11.『Bootstrapの基本を学ぼう』
  • DAY12.『Bootstrapでレイアウトを作ろう 前編』
  • DAY13.『Bootstrapでレイアウトを作ろう後編＋BootstrapでビジネスLP制作①』 ★
  • DAY14.『BootstrapでビジネスLP制作②』 ★
  • DAY15.『BootstrapでビジネスLP制作③』
  • DAY16.『BootstrapでビジネスLP制作④』
  • DAY17.『HTML5/CSS3/Bootstrap4の復習』
  • DAY18.『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』
  • DAY19.『自分のポートフォリオサイトを作ろう②』
  • DAY20.『ポートフォリオを公開しよう』
  • DAY21~DAY25.『モデルを決めて、実在するお店のLPを作ってみよう』
  • DAY26〜DAY29.『Facebookを使って身近な人にアプローチ＆初めての仕事にトライしよう』
  • DAY30. 『成長し続けるための3つのマインドを持とう』

『30DAYSトライアル』を始めてみた理由

『30DAYSトライアル』を始めてみようと思った理由は以下の3点です。

  • 副業で5万、嬉しくね？
  • ポートフォリオ作ろうと考えていました
  • フロント力の底上げと教育カリキュラムの参考に

副業で5万、嬉しくね？

Twitterで見ていても、実際に案件を獲得できている声を確認できます。

https://twitter.com/video_by_itsuka/status/1111233747003691008?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1111233747003691008&ref_url=https%3A%2F%2Ftokyofreelance.jp%2F30daystrial-coding-start%2F

再現性が高そうでいいなーと思いました。

また、私ごとですが、夏から一人暮らしする運びとなり、

たなか

家賃くらい稼げたら凄い助かるなー

みたいな気持ちもありました。

副業獲得に興味が湧きつつも、具体的にどうしたらよいかあまり分かっていなかったので、今回30daysトライアルのロードマップに沿ってやってみることにしました。

 

ポートフォリオ作ろうと考えていました

Webエンジニアに転職して1年が経ちましたが、お仕事でてんやわんやし続けて、いまだに自分の作品や成果物を持っていません。

今年の夏はポートフォリオとか作ってみたいなーと春くらいから考えていたので、ちょうど良さそうだなと思いました。

 

フロント力の底上げと教育カリキュラムの参考に

『フロントエンドとバックエンド、どっちが好き？』

と聞かれたらおそらくフロントと答えるのですが、特に実力や自信があるわけでもなく、先述した通り成果物も持っていませんでした。

たなか

自信を持ってフロント出来ますって言いたい！

カリキュラムの内容を見るとフロントに特化しているような印象を受けたので、終わった頃には自信がつくかなあと。

また、最近は会社で後輩に教育したりするシーンもちょいちょい出てきているのですが、30DAYSトライアルは『Progateのあとの次のステップにオススメ！』みたいなツイートも散見したので、人に教える時の参考にもなると良いなと思っています。

 

『30DAYSトライアル』DAY1

https://twitter.com/showheyohtaki/status/1082200204160299008?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1082200204160299008&ref_url=https%3A%2F%2Fhoshi-log.com%2F30days%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2582%25a2%25e3%2583%25ab%25e3%2581%25a8%25e3%2581%25af%25ef%25bc%259f%25e3%2582%2584%25e3%2582%258a%25e6%2596%25b9%25e3%2582%2584%25e9%2581%2594%25e6%2588%2590%25e3%2581%2599%25e3%2582%258b%25e3%2581%259f%25e3%2582%2581%25e3%2581%25ab%25e3%2581%25af%25ef%25bc%259f%2F

8月1日、さっそくDAY1からスタートです。

ProgateのHTML&CSSコースは実は一年前にやったことがありますが、今回は気持ちも新たにということで改めて最初からやってみます。

懐かしのProgateを1から進めます。

プログラミングがはじめての方もスライドでわかりやすく学習できます。

言葉もやさしいので、初学者の最初の一歩にぴったりのサービスですね。

『30DAYSトライアル』DAY2

https://twitter.com/showheyohtaki/status/1082562579245854726?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1082562579245854726&ref_url=https%3A%2F%2Fhoshi-log.com%2F30days%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2582%25a2%25e3%2583%25ab%25e3%2581%25a8%25e3%2581%25af%25ef%25bc%259f%25e3%2582%2584%25e3%2582%258a%25e6%2596%25b9%25e3%2582%2584%25e9%2581%2594%25e6%2588%2590%25e3%2581%2599%25e3%2582%258b%25e3%2581%259f%25e3%2582%2581%25e3%2581%25ab%25e3%2581%25af%25ef%25bc%259f%2F

https://twitter.com/tanaka_ricecake/status/1157330806517354496

DAY2からさっそくサボり始めましたが、休日の土曜に巻き返そうということで奮闘です。

HTMLの要素には、改行される要素と改行されない要素があります。
前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素といいます。

これまで勉強してきた<div>要素や<h1>要素、<p>要素はブロック要素です。
それに対して、<span>要素や<a>要素のように改行されない要素をインライン要素といいます。

初学者の頃、この辺とかボックスモデルとかよくわかんなかったなーみたいなことを思い出しつつ、初級編を終わらせていきます。

今後もそうですが、『よくわかんないけど、そういうもんなんだなー』くらいの感じで、とりあえず進めた方が良いです。

後で結びついて理解できるようになるので、最初から完全に理解せずともOKですね。

Progate初級編クリア

ってな具合でProgate初級編クリアです！　こういうの出ると嬉しいですね～～！

『30DAYSトライアル』DAY3

https://twitter.com/showheyohtaki/status/1082925002587017216?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1082925002587017216&ref_url=https%3A%2F%2Fhoshi-log.com%2F30days%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2582%25a2%25e3%2583%25ab%25e3%2581%25a8%25e3%2581%25af%25ef%25bc%259f%25e3%2582%2584%25e3%2582%258a%25e6%2596%25b9%25e3%2582%2584%25e9%2581%2594%25e6%2588%2590%25e3%2581%2599%25e3%2582%258b%25e3%2581%259f%25e3%2582%2581%25e3%2581%25ab%25e3%2581%25af%25ef%25bc%259f%2F

中級編スタート

よりモダンなサイト作成に入っていきます。デザイン的にも初級編よりカッコよさげ。

中級編からは有料会員登録（980円/月）が必要です。

Progateは初学者の学習素材としてはベストプラクティスかと思うのでここは課金推奨ですね。

980円と安価ですし、デイトラ終わったら止めちゃえばOKです。

 

background-size: cover;

 

とか何気に勉強になりました。いつもwidth: 100%;とか使ってだましだましやってましたが、これでいいじゃんみたいな。

初学者用と思いつつ改めてやってみると思わぬ気づきがありますね。

『30DAYSトライアル』DAY4

HTML&CSS 中級編を終わらせます。

ここまででopacityとかrgbaとかmargin 0 autoとか色々出てきますが、最初はよくわからなくても大丈夫です。

たなか

ほーん、なるほどな(鼻ホジ)

くらいの感じでふわっと分かっておけばOK。

必要になった時にググればいいので暗記することよりも認知していることの方が重要です。

たなか

あの中央揃えのやり方、なんて言ったっけ？？？

みたいになれば、「css 中央揃え」調べられます。知識をインデックス化していきましょう。

progate中級クリア

初学者の方は腹落ちしない部分もあったかもしれませんが、ひとまず達成の喜びを噛みしめましょう。

ツイートするなり自分へのご褒美を用意するなり、モチベーション上げていきましょうね。

『30DAYSトライアル』DAY5

HTML&CSS、上級編に挑んでいきます。

このレッスンでは、HTML&CSS中級編で制作したWEBサイトに、「レスポンシブデザイン」を適用していきます。 

レスポンシブデザインとは、様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのものです。
特にスマートフォン表示に対応したサイト制作においては必須の技術です。

モバイルファーストの時代、レスポンシブデザインは利用頻度の高い技術なのでしっかり学習していきます。

この日はbox-sizingについて新たな発見がありました。

  box-sizing: border-box;

 

box-sizingをborder-boxに指定すると、要素の幅(width)の合計にpaddingとborderが含まれるようになります。

そのため、paddingやborderを追加した時に生じるレイアウト崩れを未然に防ぐことができます（※ただし、marginはborder-boxでの合計値に含まれません）。

たなか

そうなんだ！！！！

これでwidth: 50%としつつpaddingとかも追加出来るんですね。力技でやってましたがスマートな方法を知りました。

 

htmlcss上級編クリア

さすが上級編ということでやや苦戦しながらもとりあえず達成です。

『30DAYSトライアル』DAY6

https://twitter.com/showheyohtaki/status/1083861139937587200?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1083861139937587200&ref_url=https%3A%2F%2Fhoshi-log.com%2F30days%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2582%25a2%25e3%2583%25ab%25e3%2581%25a8%25e3%2581%25af%25ef%25bc%259f%25e3%2582%2584%25e3%2582%258a%25e6%2596%25b9%25e3%2582%2584%25e9%2581%2594%25e6%2588%2590%25e3%2581%2599%25e3%2582%258b%25e3%2581%259f%25e3%2582%2581%25e3%2581%25ab%25e3%2581%25af%25ef%25bc%259f%2F

ということでここまでの知識を活用しつつ道場編です。

道場編では仕様書に対してある程度自由にコードを書いていきます。書いたコードの成果物に対してprogate判定が入る仕組みです。

ただ、過去にもやったことありますが、こちらの判定が上手く動作しないことがあったりします ね。

見た目上はほぼ完全に同一のものが作れているのに、判定で失敗することがままあります。

たなか

わたしのコードの方がむしろ美しくないです？

まあ重要なのは答えの通りにコードを書くことではなく、『想像したものをコードで表現できた』ということです。

なので個人的には、ぶっちゃけ完全に正解せずとも9割できていれば切り上げても良い気がしています。

『30DAYSトライアル』DAY7

https://twitter.com/showheyohtaki/status/1084223576906125312?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1084223576906125312&ref_url=https%3A%2F%2Fhoshi-log.com%2F30days%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2582%25a2%25e3%2583%25ab%25e3%2581%25a8%25e3%2581%25af%25ef%25bc%259f%25e3%2582%2584%25e3%2582%258a%25e6%2596%25b9%25e3%2582%2584%25e9%2581%2594%25e6%2588%2590%25e3%2581%2599%25e3%2582%258b%25e3%2581%259f%25e3%2582%2581%25e3%2581%25ab%25e3%2581%25af%25ef%25bc%259f%2F

上級道場編です。こちらもDAY6同様、概ね完成したら切り上げちゃっていいと思います。

道場コースではGoogleの検証ツールの使い方を解説しています。こちらは実務でも必ず使うことになるので、見ておくと後で楽かもしれません。

上級編がクリアできず

一応マネしながら作ってみますがなかなか成功しませんでした。見本の方もデザイン崩れちゃってますし「ええ…？」って感じです。

もうあとは数pxの世界かと思いますし、ニッチなところにこだわるよりざっくり復習でもしてた方がアドバンテージ取れる気がします。

ショーヘーさんもツイートされているように、終わったら休憩しましょうね。パフェとか食って自分を甘やかしましょう。

1週間お疲れ様でした。

『30DAYSトライアル』DAY8

Visual Studio Codeをインストールして、オススメのプラグインを導入するのみです。楽勝ですね。

それぞれのプラグインについて、どんな役割なのかググっても良いですが、とりあえず最初は思考停止で導入しちゃってもOK。

以下は導入推奨されているプラグインです。

余力がある人はこの他にも「VSCode おすすめ プラグイン」とかでググって色々導入しても良いかもです。

『30DAYSトライアル』DAY9

https://twitter.com/showheyohtaki/status/1085099344758419457?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1085099344758419457&ref_url=https%3A%2F%2Fhoshi-log.com%2F30days%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2582%25a2%25e3%2583%25ab%25e3%2581%25a8%25e3%2581%25af%25ef%25bc%259f%25e3%2582%2584%25e3%2582%258a%25e6%2596%25b9%25e3%2582%2584%25e9%2581%2594%25e6%2588%2590%25e3%2581%2599%25e3%2582%258b%25e3%2581%259f%25e3%2582%2581%25e3%2581%25ab%25e3%2581%25af%25ef%25bc%259f%2F

ショートカットとファイルパスについての学習です。

Visual Studio Codeのショートカットについて

ショートカットは覚えれば覚えるだけ効率化されますが、最初に全部覚えなくても良いです。

今後作業していく中で、「これ一括操作したいなー」とか「この行、下に何個も複製したいなー」とか思いついた時に調べて実践すると定着率も良いです。

参考程度にわたしのよく使うオススメショートカットもご紹介 しておきます。(Mac版です)

  • ⌘ + d （特定の文字を複数選択）
  • alt + ⇧ + ↓ (行を下に複製)
  • alt + ⌘ +  ↓(マルチカーソル化)

ファイルパスを理解しよう

ファイルパスについてはショーヘーさんのドキュメント通りに、手元でファイル作成してindex.htmlを表示すればOKですが、一番簡単な方法を紹介します。

STEP.1

Finderで好きな場所に「Practice」フォルダを作成

STEP.2

「Practice」フォルダをVSCodeにドラッグ＆ドロップ

STEP.3
⌘ + n で新規ファイル作成
STEP.4
⌘ + s でタイトルを「index.html」にしてPractice配下に保存

同じやり方でpractice配下にcssフォルダを作り「test.css」ファイルも作成。

最後にimgフォルダに好きな画像を配置して画像名を「test.png」にすれば準備は完了です。

画像のようなファイル構成になっていればOKです。

ファイルパス

課題①~③について

①index.htmlにh1で『Hello World!』と記入してください。
②test.cssにH1のフォントサイズを32pxに設定し、index.htmlで読み込んでください。
③H1の下にtest.pngを読み込んで表示してください。

上記の課題が用意されています。progateを思い出しつつ実践してみましょう。

不明点あればドットインストール見ながらでOKです。

ここで作成↓ファイルはDAY10以降も利用するので、表示できるようにしておきましょう。

『30DAYSトライアル』DAY10

https://twitter.com/showheyohtaki/status/1085461706770284544?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1085461706770284544&ref_url=https%3A%2F%2Fhoshi-log.com%2F30days%25e3%2583%2588%25e3%2583%25a9%25e3%2582%25a4%25e3%2582%25a2%25e3%2583%25ab%25e3%2581%25a8%25e3%2581%25af%25ef%25bc%259f%25e3%2582%2584%25e3%2582%258a%25e6%2596%25b9%25e3%2582%2584%25e9%2581%2594%25e6%2588%2590%25e3%2581%2599%25e3%2582%258b%25e3%2581%259f%25e3%2582%2581%25e3%2581%25ab%25e3%2581%25af%25ef%25bc%259f%2F

DAY7でも先述しましたが、Chromeのデベロッパーツールに触れつつ課題を実行します。

またVisual Studio Codeの拡張機能で、新たに「Live server」を導入します。

注意点として、フォルダごとVSCodeにドラッグ＆ドロップしないと「Go Live」が表示されない問題がありました。

私の場合で言うと、「practice」フォルダが入っている親ディレクトリの「30DAYSトライアル」フォルダをD&Dしてはじめて起動しました。

「Go Live」が表示されずLive Serverが起動しないと言う方は確認してみてください。

ちなみにChromeのデベロッパーツールですが、Macだとctrl +alt + i でショートカット表示できるのでぜひお試しください！

10日目達成！

デベロッパーツールで色々操作できると、普通のWebサイトの作りもわかるようになってきて、段々楽しくなってきますね。

『30DAYSトライアル』DAY1~10 まとめ

ということで『30DAYSトライアル』1~10DAYまでの学習内容をまとめてみました。

ここまでの所感としては、本当のプログラミング未経験者でも進められるようなステップが上手に設定されているな と感じました。

鬼門はProgateかと思いますが、発案者のショーへーさんもProgate学習時のコツについて以下のようにおっしゃっています。

  • 1周目から完全な理解を求めない
  • 正解を探すつもりで取り組まない
  • 正解した後、正解から少しコードを変えながら進めてみる

Progateで学習をする時、1周目は理解度30％くらいでもいいです。
スレッドやヒントを見つつ進めちゃっていいので『繰り返す』ことが大事です。

とりあえずサラッとやってみて、理解が浅かった部分については、躓いた時に調べ直せばOKです。

どうにも詰まってモチベ下がって途中でやめちゃうってのが一番勿体無いと思うので、時間がかかりそう、ハマりそうなら一旦スルーしちゃいましょう。

 

ということで私自身、引き続き進めていって副業で月5万円を目標に頑張ります。

今回はここまで。

『30DAYSトライアル』続き 11~15DAY

【実践】30DAYSトライアルで実際にお金を稼ぐまで②【11~15days】

参考サイト

コメントを残す

メールアドレスが公開されることはありません。

前の記事

リーンゲインズ
【プチ断食12日目】体重×3倍の超高タンパク食【リーンゲインズ…

次の記事

【プチ断食13日目】減量中の外食メニューに悩む【リーンゲインズ…
リーンゲインズ