独学

【30DAYSトライアル1st】はじめてのLPコーディング【学習内容】

東京フリーランスさんの学習コンテンツ、30DAYSトライアルの2ndを終えたので、1st〜2ndまでの学習内容をまとめておきたいと思います。

1stは、結論から言うと「サイトを作る楽しさ」を学べて、「もっと学びたい」という意欲をかき立てられる内容でした。

 

学習ロードマップはこちら↓

【無料】完全未経験からのプログラミング独学方法まとめ【 Web制作】 こんな質問に答えたいと思います。 結論から言うと、 しっかり基礎をこなして、手を動かしていけばスキル...

30DAYSトライアルとは?

東京フリーランスさんが運営されている学習コンテンツで、通称デイトラとも言われます。
30日間の集中学習で、僕のようなプログラミング初心者からでも挫折しにくいおすすめの学習カリキュラムです。

 

【30DAYSトライアル】独りで学習する限界、サロンに入ってみた 先日からBootstrapの勉強をしていますが、今更ながらドットインストールでBootstrap4の学習をしています。 B...

 

  • 「何をどうやったらいいかわからない」
  • 「どこまでスキルをみにつけていいかわからない」

 

という方には、30日間という期間で明確なゴールを示してくれるので、迷いがなくなります。初心者はとにかくゴールに向かって学習しまくればいいし、チャットで質問もできる。

とてもいい環境が用意されています。

 

 

何よりTwitterで#30DAYSトライアルをつけてツイートすると、みんながいいね!してくれるので、めちゃくちゃ頑張れますw

 

 

デイトラ1st〜2ndまでの学習内容

デイトラのコーディング学習は2パートに分かれていて、以下のようなゴール設定がされています。

1st.初心者からコーディングの副業で月5万円を稼ぐ ← 今回はココ

2nd.コーダーとして企業と仕事ができる

僕はこれまで、ProgateでHTML/CSSの学習を進めつつ、ドットインストールで理解を深めていました。

でも、結局1からサイトを作るような実務に近いスキルをつけるにはどうしたらいいか、一人で悩んでいたんですね・・・。

 

「結局プログラミングスクールかなあ」

 

と近くのプログラミングスクールの情報を調べたりしているうち、Twitterで#30DAYSトライアルのタグを見つけ、すぐさま飛び込みました。

 

とりあえず、1stのBootstrap学習から初めてみることにしました。

 

1st.初心者からコーディングの副業で月5万円を稼ぐ

デイトラ1stでは、Bootstrapを学びつつ、HTMLテンプレートをカスタマイズして自分のポートフォリオサイトを作りました。

  • Bootstrapで架空のLPを作る
  • 自分のポートフォリオサイトを作る
  • 実在するお店のLPを作る

 

Bootstrapで架空のLPを作る

はじめにBootstrapを使った時は、こんな簡単にサイトを作れるんだ!と感動しました。

ヘッダーメニューを作るにしても、クラスをつけるだけで完成してしまいますし、グリッドシステムは便利すぎて手放せません。

 

【Bootstrap4】ドットインストールを復習して学んだ内容まとめドットインストールのBootstrap4入門を完走してみて、学んだことをまとめてみたいと思います。主に「navbar」と「グリッドシステムの応用」の知識を学習できました。...

 

https://keibloglife.com/2019/06/22/%e3%80%90day13-17%e3%80%91bootstrap%e3%81%a7lp%e3%82%92%e5%88%b6%e4%bd%9c%e3%81%97%e3%81%9f%e6%83%85%e5%a0%b1%e3%81%be%e3%81%a8%e3%82%81/

 

 

自分のポートフォリオサイトを作る

ポートフォリオサイトを作りますが、1stではHTMLテンプレートを使います。

HTMLテンプレートを使うと、立派なサイトが一瞬で完成します。転職用にポートフォリオサイトを作りましたが、めちゃくちゃかっこいい。

サイトを実際に後悔する時、サーバーを契約する必要があリますが、王道のエックスサーバーが一番やりやすかったです。

 

 

 

実在するお店のLPを作る

実在するお店については思い浮かばなかったので、、、

今年に結婚式を控える妹夫婦のLPを作ってみました。

 

 

実際に妹に見てもらうと、喜んでくれましたが実際に使うことはありませんでしたw

 

模写しつつtwitterやブログにアウトプット

1stを終えてからは、2ndに進むために模写で実力をつけようと思いました。ちづみさんとはにわまんさんのnoteを購入し、模写しつつアウトプットをしていきます。

 

 


ちづみさんのnoteでは、基本的なHTMLCSSの書き方の復習や、flexboxについての学習ができたし、レスポンシブデザインの練習にもなりました。

 

flexboxで画像とテキストを交互に表示する【レスポンシブ対応】画像とテキストを交互に表示するデザインをCSSで実装します。さらに、レスポンシブ対応で上下に配置する方法をまとめておきたいと思います。...

 

 

はにわまんさんのnoteでは、calc関数を新しく学んで、カラム落ちの対策方法について知ることができました。

どちらも、レスポンシブデザインをコーディングするため、めちゃくちゃ勉強になったなーと思います。

 

30DAYSトライアル1stまとめ

僕が30DAYSトライアル1stまでで作ったもの

  • BootstrapLP2サイト
  • 自分のポートフォリオサイト
  • 架空の結婚式パーティーサイト
  • デザインカンプからの模写コーディング

 

ざっくり書くと、コレくらいです。プログラミング初心者がここまでできるようになるなんて、自分でもびっくりです。

6月16日から1stをはじめて、6月28日には「2ndに入ります」と宣言していたので、これを約12日で実施したことになります。

  • Bootstrapの基礎
  • HTMLテンプレートの使い方
  • FTPの使い方
  • サーバー契約とドメインの取得
  • flexboxの理解
  • レスポンシブデザインの理解
  • デザインカンプからのコーディング練習

書き出すとキリがないですが、本当にたくさんの基礎を学べたなーと実感しています。

そして、2ndに進むとさらに実践的な知識がたくさん学べ、毎日が楽しいですw

 

次回は、2ndの内容について記事にまとめてみたいと思います。

 

【30DAYSトライアル2nd】デザインカンプからのコーディング【学習内容】前回の記事では、30DAYSトライアル1stの学習内容を紹介しました。 具体的には、動画を見ながらBootstrapでLPをコーディングしたり、HTMLテンプレートを使ってポートフォリオを作ったりと、「コーディングの楽しさ」を知ることができました。 今回は、2ndのコーダーとして企業と仕事ができるレベルに挑戦したので、学習内容をまとめてみたいと思います。...

 

 

 

 

【無料】完全未経験からのプログラミング独学方法まとめ【 Web制作】 こんな質問に答えたいと思います。 結論から言うと、 しっかり基礎をこなして、手を動かしていけばスキル...