こんにちは、キノ(@zB75pWavnhDTIxr)です。

今日は前々から書きたかったSkill Hacksについてのレビューを書いていきます。

本当なら、もっと早くにレビューを書きたかったんですけど、

コーポレートサイト作成演習 という追加コンテンツがあってそれを消化してからレビューをしようと思い、Blog Hacksを先に書きました。

結論を先に言います。

初心者にオススメです。

ここでいう、初心者とは「１からプログラミングをして成果物を作ること、そしてその成果物をネットで公開できない人」を指します。

迫　祐樹って何者なの？

 

中高生から社会人まで，今まで3000人以上にプログラミングを教えながら, フリーランスとして活動する学生エンジニアブロガー．
月18万回読まれる当ブログ，ロボット・IT雑食日記を運営中．

プログラミングスキルを使って収入を上げ，ブログや電子書籍等をはじめとするスモールビジネスや資産運用で人生のセーフティネットを構築中

……ロボット・IT雑食日記のプロフィール欄より引用。

迫さんの本業はエンジニアで、2018年10月25日より、株式会社スキルハックスを運営しています。

Skill Hacks（スキルハックス）の内容は？

……Skill Hacksから引用。

↑上記に、新たに2019年2月28日 コーポレートサイト作成演習(8本)が追加されました。

これは、クラウドソーシングサイトで最初の案件を取るためのコツや、

HTMLやCSS、Bootstrapを使ってコーポレートサイト＝ランディングページ（LP）を作って実践的なことが学べる章です。

上記の章で言うと01章～04章の知識を使って、よりフリーランス向けにした感じですね！

Skill Hacksを学習した後は、エンジニア初心者を脱しているので、下記のサイトで実践することができます。

または、

クラウドソーシングとフリーランスエージェントの案件探しのコツは、

キーワード入力時に「未経験者」や「未経験者歓迎」、または「コーディング」など検索をかけると、未経験者でもできる案件が絞り込めます。

Skill Hacksを学習した人は「Ruby」や「Rails」などのキーワードから探せますね。

みんなのレビューは？

僕が作っているプログラミング学習教材， #SkillHacks に関するつぶやきをまとめてみました！
おかげさまで大好評をいただいていております．受講検討中の方はみんなの感想を確認してみてください！

⚡️ 「プログラミング学習教材『Skill Hacks』みんなのつぶやきまとめ」https://t.co/dSnC1z9JIj

— 迫 佑樹@人生攻略ロードマップ著者 (@yuki_99_s) August 25, 2018

概ね好評です。

Progateというサイトを併用して学習している人が多い印象ですね。

僕も併用して学習しています。

Progateの知識をSkill Hacksで実践的なアウトプットに昇華していくこともできます。

初心者にオススメなのがこの学び方です。

というのも、僕はどうやってエンジニアやプログラマーが実践的なプログラミングしているのか気になったので。

質問してみた感想

Blog Hacksにもあった質問は無制限サポート、そして質問はLINEでの受付です。

迫さんは「質問すること＝時間を節約すること」ってスタンスなので、気軽に質問できましたね。

僕は３回質問しました。うち1回は、僕が英語できなかったのが原因です(笑)

早い、早すぎてこっちが申し訳ないと思うくらい早い。

なのに、的確。半日もかからないで問題解決です。

どうやら受講生はみんな、つまずくところは同じみたいで

同じような回答を返しているようです。

感想は非常に良かったです。

この質問以外にも、

「何言ってんだ、こいつ…」レベルのとんちんかんな質問も丁寧に答えてくれました(;´･ω･`)

終わりに

残念ながら、この講座は有料ですが、

僕はプログラミングスキルを早く身につけるには、

教えられる人に教わり、質問しながらアウトプットした方が圧倒的に早いということに気づいたわけです。

Skill Hacksの良さは迫さんがプログラマーやエンジニアは問題にぶち当たったとき、

こういう思考で解決するんだよって教えてくれるのがいいです。

僕はSkill Hacksを知ったきっかけは迫さんがYouTubeで迫さんのプログラミング挫折した話を聞き、共感したからです。

迫さんは本でJavaを勉強して、環境構築を導入するところから躓いたらしいです。

ちょうど、僕も同じ経験があったので共感したんです。

僕は質問するなら、初心者の気持ちが分かる人に教わりたいなと思っていたので。

では、また

ここまで見てくれてありがとうございました。

The post 【体験談】エンジニア初心者がSkill Hacks（スキルハックス）をレビュー【自走可能】 first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.

こんにちは、キノ(@zB75pWavnhDTIxr)です。

4月11日に、30DAYSトライアルを終わりました！

次は30DAYSトライアルの2ndを進めています。

今日はProgate編 DAY5～DAY7について書こうと思います。

下記の通りに進めてみてください！

↓詳細はこちらからどうぞ！↓

後から #30DAYSトライアル を始められた方のために、これまでの課題とTipsをまとめたモーメントを作りました。新しい課題やTipsは随時更新していきます👍https://t.co/m0yaoLnoin

— ショーヘー@Webエンジニア (@showheyohtaki) January 16, 2019

Progate編

（補足説明です）DAY4    HTML & CSS 中級編最後まで②（absoluteの話）

DAY3に続いてレイアウトを学びます。個人的には最低２～3回やらないと身につかないと思います。

つまずきやすいところはposition : absoluteですね。

基本的にどっちか１つしか使わないのはまれです。

これらを使って文字と画像を重ね合わせています。

なぜ、この２つを使うのか。それはスマートフォンやタブレットから見ると崩れちゃうのを防ぐためです。

absoluteは「絶対的」とあるように、例えば、top:0;と指定をとれば、上頂部へ固定されます。

パソコンやスマートフォンなどの画面幅が違うものがあったとしても同じような見た目に見えるんです。

marginやpaddingは一見してみるとパソコンだと見栄えが良いのに、スマートフォンで見ると崩れているのが多いんです。

これは、marginやpaddingは「パソコンの余白」に合わせただけで、

スマートフォンやタブレットの余白に合わせたってわけではないんですよ。

使い方は、

配置したい文字（画像）をクラスを割り当ててやって、そのクラス名にposition : absoluteを付与するんです。

このまま何もしないとbodyタグを基準に動きますから、そうならないようにposition : relativeを使います。

そして、position : relativeは通常、親要素に使います。

hiro pon-programmingさんの動画で詳しく解説しています。↓

DAY5　 HTML & CSS 上級編まで

DAY5.『Progate HTML & CSS 上級編』
プログラミング学習サイト『Progate』( https://t.co/2CJ1eEz9Hd )でレスポンシブなサイトを作るためのコーディングを学びます！

DAY5は上級編を終わらせましょう
メディアクエリはもちろん、box-sizingも超重要です‼️#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/0OtXSOUIme

— ショーヘー@Webエンジニア (@showheyohtaki) January 11, 2019

重要な概念である「レスポンシブデザイン」、パソコン、スマートフォン、タブレットなどで画面が崩れないように設定をするんです。

メディアクエリは正直、これだけだと身につかないと思います。

これは、何度か模写コーディングをするしか身につかないと思いますね。

bootstrap編で模写コーディングをするので、自分のものにしてください。

Progateではresponsive.cssというファイルを作って、普通のcssとは別々に管理してました。

１つのcssファイルを使うのか別々に管理するのか。

これは、別にどっちでもいいです。

僕は１つにした方が見やすいと思ったので、あえてメディアクエリのファイルを作らなかったので…。

30DAYSトライアルの2nd、１DAYの課題をやり終えたとき、メディアクエリは泥臭い作業だと感じました。

「自分で見て確認をしながら画面上のバランスを整える」

メディアクエリに正解はないようです。

ただ、自分が見た感覚を信じていくのみです。(*´･ω･`)b

#30DAYSトライアル

1DAYやっと終わった( ง ×ω×`)ว💨

初回から難しいよ😢

ハンバーガーメニューとメディアクエリって実装したよ(*ゝ｀ω・)

手探りだから、雑に仕上がってるけど😣💦

2DAYは1DAYよりも簡単だったよ☺️
カード実装までスムーズにいったよ

明日には終わると思う( ง •`ω•´)ว pic.twitter.com/EmSAQ4sagz

— キノノート (@zB75pWavnhDTIxr) April 15, 2019

DAY6　HTML & CSS 初級・中級道場コースとDAY7　HTML & CSS 上級道場コース 

DAY6. 『Progate HTML & CSS 初級・中級道場コース』
Progateの HTML & CSS コース( https://t.co/2CJ1eEhyiD )で学んできたことの総復習です。

DAY6は、初級・中級の道場編を1周ずつやるのが目標‼️
詰まったところはスレッドに戻って復習してください👍#30DAYSトライアル#30DAYSトライアル課題 pic.twitter.com/svbBN2n2W1

— ショーヘー@Webエンジニア (@showheyohtaki) January 11, 2019

DAY7. 『Progate HTML & CSS 上級道場コース ＋ 復習・休憩』
Progate（https://t.co/8q0BqOq0qA）で、レスポンシブデザインの復習をしてください。
早く終わると思うので、そのあとは今週学んだことの復習と息抜きに当てましょう👍#30DAYSトライアル#30DAYSトライアル課題#1週間お疲れさまでした pic.twitter.com/QeWRRm28Mf

— ショーヘー@Webエンジニア (@showheyohtaki) January 12, 2019

課題の復習です。正直いって一回では無理でした。

「今まで習ったことをアウトプットする」

これが一番難しい。

ヒントを見ても分からなければ、答えを見てもいいと思います。

ただし、自分がどこでつまずいたのか考えるまでは見てはだめです（２分でいい）。

個人的に難所だったのが、「<div>を囲うのにどこまで囲えばいいんだ？」って思ったりしていましたね。

余裕がある方はこちら↓（30DAYSトライアルの1stではJavaScriptは取り扱わないので注意！）

余裕がある人向け課題 『JavaScript (ES5) Ⅰ〜Ⅳ』
Progate（https://t.co/8q0BqOq0qA）でJavaScript (ES5)Ⅳまでやりましょう。
トライアルの目的「月5万稼ぐ」ためのスキルとしては、JavaScriptはなくてもOK。
でも変数・演算子・if・for・関数はどの言語でも基礎なので、知っておくとベターです👍 pic.twitter.com/hvQNgw2cIt

— ショーヘー@Webエンジニア (@showheyohtaki) January 12, 2019

ランディングページ（LP)って何？

さて、中級編ではランディングページ（LP)作りました。

LPは企業がユーザー（僕たち）に情報を伝えることために作られています。一言で言うとウェブ上で自社の商品やサービスのチラシです。

そして、クラウドソーシング上で企業がフリーランスエンジニアに向けて発注しています。

下記のサイトがよく知られるクラウドソーシングですね。

「コーディングのみ」や「html css」と検索すればランディングページ（LP)制作案件があります。

個人的にランサーズの方が見やすかったです。

終わりに

これでProgate編は終わりです。

一度で理解できないはずです。

ちょくちょく戻ってくると思いますので、また再チャレンジしてみてください。

「あなたがつまずいたところはみんながつまずいたところです」を忘れずに

お疲れ様でした。

では、また

ここまで読んでくれてありがとうございました。

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacksをレビュー【自走可能】

The post 【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7 first appeared on kinoblog　初心者エンジニアブロガーの成長記録！.