【 #30DAYSトライアル】1stの内容をまとめました。【プログラミング学習】

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは、0371です。

ショーヘーさんはにわまんさん主催の、プログラミング学習グループ【 #30DAYSトライアル 】に参加しています。

なんと、1ヶ月で副業として5万円稼げるようになることが目標!

基本的にツイッターのハッシュタグとSlackにて情報共有しています。

1stでの使用言語はHTML&CSS、Bootstrap、多少のJavascriptです。

少し説明をしてから本題に入りますね!

スポンサーリンク

【 #30DAYSトライアル 1st – 概要】

こちらが活動中のSlackです。

主に2ndのカリキュラムを行なっています。

メールアドレスを登録して参加しましょう!

質問は1stと2ndのどちらも受け付けてると思います。(現在LINEグループに動きがないため)

用語や「30DAYSトライアル」で検索してもわからない場合は、質問部屋に書き込んで先輩方に聞きましょう!

書き方を工夫すると、返信してもらえる確率が高まります。

 

こちらがグループLINEです。

3月現在はほとんど活動停止していますので、Slackの方に入りましょう。

タイムラインに有益なことが書かれてたりしますので、気になる方はチェックしてもいいかもしれません。

1stの必要経費は、

  • 月額課金性のProgate 1000円くらいを1回
  • 海外のHTMLテンプレート 500円~2000円くらいのものの購入を1回以上(アレンジして販売するごとに一回購入しなければなりません)

なので、1500円~3000円くらいの投資で、2万~5万円稼げるようです。(本人の努力ももちろん必要)

 

ぼく自身、実は言語学習に挫折していて、どうしようかと悩んでいるところでこのグループに飛び乗りましたw

結果としては、三日坊主にならずに順調に学習を続けられていて、入ってよかったと思います。

 

稼げるかどうかは別として、皆さんの学習意欲も非常に高く、ググっても分からないところは気軽に質問もできます。

学習環境としても、とてもいいところだと思いました。

入るだけなら完全無料ですので、とりあえず雰囲気だけでも感じてみてはいかがでしょうか。

 

【 #30DAYSトライアル – 学習の心得】

 

    1. コードを丸暗記しない

 

プロの人でもコードを書く時間よりも、ネットで調べている時間の方が長いようです。

「こういう動きができる記述があるんだなあ」程度でいいんだよと覚えておいてください。

 

 

    2. 30分考えて(ググって)分からないことは一旦飛ばす

 

わからない場合は大抵ドツボにハマって抜け出せなくなります。

昼寝してリフレッシュしたり、きちんと調べた上でグループの人に質問しましょう。

些細な打ち間違いや、勘違いがあったということに気がつくはずですw

 

 

    3. コードを正解から少し変えながら進める(Progate、Youtube動画の場合)

 

コーディングには明確な正解がなく、想定通りに動作すればそれが正解になります。

ですので、正解を丸暗記ではなく、「このコードはどういう動作をして、ここの記述を変えればどうなるのかをだいたい理解すること」が大切です。

 

なぜ明確な正解がないのかというと、会社やグループによって「コーディング規約」が存在するからです。

1つの案件を何人かで受け持つ時に、皆が自分流のコーディングをしていたら、1つにまとめる時に大変ですよね。

スパゲッティコード (ぐちゃぐちゃになって読解性がないコード) にならないように、ルールを設けることが基本となっています。

 

これらの決まりは、Kazutaka Shimizuさんの無料noteに詳しく書かれています。

気になる方はぜひ読んで見てください。

 

 

【 #30DAYSトライアル – Progate編】

なんと1週間でProgateを卒業しちゃいます。

 

Progate』(月額課金制 1000円)

クレジットカード等必要です。

バンドルカードでも支払いできるかは未確認。

学習終了時に課金を切るのを忘れないようにしましょう。

 

DAY1.『Progate HTML & CSS 初級編(4章の「ヘッダーを作ろう!」まで)』

DAY2.『Progate HTML & CSS 初級編(7章の「お問い合わせフォームを作ろう!」まで)』

DAY2補足【ボックスモデルとは】

DAY3.『Progate HTML & CSS 中級編(3章の「ヘッダーを作ろう!」まで)』

ここから先は有料部分になるので、スクショをオープンなSNSにあげるのは問題になるかもしれないので注意!

SlackなどのクローズドなSNSならセーフかも・・・?

DAY4.『Progate HTML & CSS 中級編(最後まで)』

DAY5.『Progate HTML & CSS 上級編(全て)』

DAY6. 『Progate HTML & CSS 初級・中級道場コース』

※ここは鬼門です。最初は行き詰まったら答え見てもいいので、大体の構造を覚えてクリアしましょう。モチベ維持が最優先。

この先の学習で余裕が出てきたら、その都度挑戦していって知識を定着させた方がいいかもしれません。

DAY7. 『Progate HTML & CSS 上級道場コース + 復習・休憩』

  余裕がある人向け課題 『JavaScript (ES6) Ⅰ〜Ⅳ』

2ndシーズンの課題の1つになっています。

無理にやらなくても良いですが、やっておくと多少学習がスムーズになるでしょう。

 

【Progate編 – 学習時に便利なリンク集】

ググり力をつけるために3分くらいは自分で検索してみてね!

躓きそうなポイントを挙げておきました。

また、ツイッターのハッシュタグ「#30DAYSトライアル」にも有益な情報がありますので、要チェック!

 

HTMLとCSSクラスでよく使う命名について

CSSのmarginとは?paddingとは?余白の指定方法まとめ|サルワカ

【CSS】displayの使い方を総まとめ!inlineやblockの違いは?|サルワカ

「display: flow-root」について調べても幸せになります。

「display:flex」も非常に便利ですので、余裕がある方は下のサイトを使い、ゲーム感覚で学習するといいですね。

 FLEXBOX FROGGY

 

CSSのpositionを総まとめ!absoluteやfixedの使い方は?|サルワカ

containerクラスを使う理由は、Bootstrap編で理解できますのでお楽しみに。

また、2ndで擬似要素を使う際にpositionを多用します。

今は完璧に理解しなくてもいいですので、徐々に覚えていきましょう!

 

これは学習時に必要なサイトです。

実践編でも活用するので、扱い方を覚えておきましょう。

Font Awesome 4.7.0

 

【Progate編 – 忘れがちなポイント】

  1. fant-familyで指定するフォント名にスペースがあるときはダブルクォーテーションで囲む。(CSSタブをクリックしてね)

Google fontを使用する際にもこの記述方を使います。

See the Pen
font-family
by おさない (@0371ao)
on CodePen.

2.<li>の先頭にある数字や黒点を消す list-style: none;

See the Pen
list-style: none;
by おさない (@0371ao)
on CodePen.

3. 字の間隔を空ける letter-spacing

See the Pen
letter-spacing
by おさない (@0371ao)
on CodePen.

4. 対象を丸くする border-radius

使用頻度が結構高いです。

See the Pen
border-radius
by おさない (@0371ao)
on CodePen.

5. テキスト等のインライン要素やインラインブロック要素の配置を指定する text-align

よく中央揃えにするときに使用します。

See the Pen
text-align
by おさない (@0371ao)
on CodePen.

6. 透過するための opacity & rgba

See the Pen
opacity & rgba
by おさない (@0371ao)
on CodePen.

7. アニメーション効果のtransition hoverとの組み合わせ (文章にマウスを当ててください)

【CSS3】Transition(変化)関連のまとめ こちらに分かりやすい解説あります。

See the Pen
KJVdmb
by おさない (@0371ao)
on CodePen.

 

【 #30DAYSトライアル – Bootstrap編】

なんと1週間でBootstrap4を卒業しちゃいます。

学習の詳細はリンク先で見ることができます。

 

DAY8. 『エディタをインストールしよう』

「はじめて」でも簡単!Emmetの使い方とよく使うパターン集

 

DAY9. 『基本のショートカットを覚えよう+ファイルパスを理解しよう』

余裕がある人向け課題『Progate jQuery 中級編まで』

DAY10. 『Chromeの検証を使ってみよう+LiveServerをインストールしよう』

DAY11. 『Bootstrapの基本を学ぼう』

ドットインストールの教材をこなしていくのですが、課金は不要です。

ドットインストールのEmmet入門講座もあるみたいなので、時間に余裕がある方はやりましょう。

DAY12. 『Bootstrapでレイアウトを作ろう 前編』

DAY13. 『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』

アメリカ語が突然やってきますが、狼狽せずに立ち向かいましょうw

必要なファイルは動画概要欄からダウンロードできます。

DAY14. 『Bootstrapを使ってビジネスLP制作②』

  長い英文は、この記事の後ろの方でコピペできるように用意しておきましたので、ぜひ使ってください!

DAY15. 『Bootstrapを使ってビジネスLP制作③』

DAY16. 『Bootstrapを使ってビジネスLP制作④』

DAY17. 『HTML5/CSS3/Bootstrap4の復習』

【Bootstrap編 – 学習時に便利なリンク集】

ググり力をつけるために3分くらいは自分で検索してみてね!

使い方も調べれば、すぐに出てくると思います。

Bootstrapの記述について調べるときは、「Bootstrap4」というようにバージョンまで書くようにしましょう。

 

グループ生でもある、アルパカさんの記事は躓きやすいポイントを分かりやすく説明してくれています。

【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ #30DAYSトライアル – エンジニアステップ

 

 

EmmetとBootstrap4のショートカットキー集です。

Emmet Cheat Sheet

Bootstrap4 Cheat Sheet

 

特殊文字、記号について

Font Awesome 4.7.0

 

【Bootstrap編 – Day13~17の長い英文】

長いので、コピペしていってください。

誤字脱字はないかと思います・・・多分w

 

これが1つ目の動画分です。

See the Pen
Day13~14
by おさない (@0371ao)
on CodePen.

こちらは2つ目。

 

See the Pen
Day15~17
by おさない (@0371ao)
on CodePen.

 

【 #30DAYSトライアル – LP制作編】

なんと、もうランディングページが作れちゃいます。

HTMLテンプレートは購入しなくてもできますが、購入した方が理解も制作も早いです。

LP制作のコツとしては、誰が見てもわかりやすいページにすることです。

「マテリアルデザイン」でググると楽しくなるかもしれませんw

 

DAY18. 『HTMLテンプレートを使ってみよう+自分のポートフォリオサイトを作ろう①』

こちらは実際に購入したアルパカさんの記事です。

「Envato Market」の使い方説明。アカウントの作り方や購入方法など【日本語で解説】 – エンジニアステップ

テンプレート購入に手間取った方はぜひチェックしましょう。

DAY19. 『自分のポートフォリオサイトを作ろう②』

DAY20. 『ポートフォリオを公開しよう』

ショーへーさん上手いなぁ、なるほどなぁと思いましたw

参考にしたいですね。

 

【 LP制作編 -学習時に便利なリンク集】

ぼくはHTMLテンプレートを購入しませんでした。

BootStrap4編の動画内容を参考に、1から全て記述した結果がぼくのLPです。

だいたい30時間くらいかかっちゃいましたw

 

他の方のLPはこちらから。

このGoogle Spreadsheetsはいろんな方が編集できるようになっているので、書き換えた人による表記ズレや編集ミス等が発生しています。

ぼくのLPが他の人の欄にあったりしますねw

中には特徴的なLPもありますので、サラッとチェックしましょう。

 

ダウンロードなしで使えるフォント

Google font

おすすめは「M PLUS Rounded 1c」です。フォント指定時には、ダブルクォーテーションを忘れずに!

 

商用利用できる写真検索サイト

O-DAN

タダピク

 

とりあえず画像欄を埋めたい時のダミー画像作成のサイト

Dummy Image Generator

 

【 #30DAYSトライアル – 実践編】

なんと、もう実践します!

心の準備ができてません!w

 

DAY21. 『モデルを決めて、実在するお店のLPを作ってみよう①』

テンプレートの購入方法はアルパカさんが詳しくまとめてくれています。

「Envato Market」の使い方説明。アカウントの作り方や購入方法など【日本語で解説】

全く関係の持たない人よりも、友人や親戚などの繋がりがある方にお願いするのが良さそうですね!

DAY22. 『問い合わせフォームを実装しよう』

RequestのGET/POSTの違いはめっちゃ重要です。個人情報に関わる可能性があるので慎重に実装しましょう。

ぼくのLPは、1の方法を使用しています。

ページ遷移しませんが、ちゃんとぼくの設定したメアドに届きますw

ただし、暗号化などはできてないため、ここでの公開はしません。ご了承くださいorz

DAY23. 『ロゴ・画像作成に便利なオンラインサービス紹介』

ここのAdobe XDは2ndで使いますが、スルーしても大丈夫です。

DAY24. 『サイトをより見やすくオシャレにするには』

DAY25. 『実践的にコーディング力を伸ばそう』

DAY26. 『実店舗のLP制作を進めよう!』(課題等は特にないです。)

DAY27. 『Facebookを使って身近な人にアプローチしよう』

Facebookに友達1人もいないのでスルーしましたw

しかし、Twitterよりは真面目そうなSNSですので、手段としては有効だと思います。

DAY28. 『ヒアリングシートを作ろう』

これはかなり本質的情報だと思います。

DAY29. 『めんどくさいけど大切な事務処理をオンラインで簡単に終わらせよう』

DAY30. 『成長し続けるための3つのマインドを持とう』

 

これにて1stシーズンは終わりです!

お疲れ様でした!!!

 

【 実践編 -学習時に便利なリンク集】

実はぼく自身、LP販売できてません(汗)

なので、便利なリンク集だけ置いておきますね。

 

クローム拡張機能の全画面キャプチャ

Fireshot

 

色付きのアイコンサイト

flaticon.com

Instagramなどの色調整が面倒なアイコンもあります。

 

その他、足りないところを丁寧に説明してくれるサイト集

ショーヘーさんのブログ showtaki.com

アルパカさんのブログ engineer-step.com

サルワカさん(複数運営だそうです)のブログ saruwakakun.com

はにわまんさんのブログ haniwaman.com

 

【 #30DAYSトライアル – 次回予告】

次回は、1stの中身を少し充実させつつ、2ndシーズンをまとめたいと思います。

2ndは別記事になると思いますので、お楽しみに!

  • このエントリーをはてなブックマークに追加
  • LINEで送る