『HTML&CSS』で出来ること|初心者おじさんのSkillHacks(スキルハックス)レポート①

Skill Hacks(スキルハックス)って、どんなことが学べるんだろう。


プログラミング学習の教材をいろいろ探している方であれば『Skill Hacks(スキルハックス)』を耳にしたことはあるのではないでしょうか。


他のプログラミングスクールと比較しても安価といわれているものの、ネット上ではその評価は分かれています。


今回は、実際に『Skill Hacks(スキルハックス)』 で学習を終えた私が、結果的に身についた知識と感想をお伝えしたいと思います。


これからプログラミング学習を考えている初心者の方々の参考に少しでもなれば幸いです。


※学習レポートは、各章毎に分けて情報発信しています。
続きが気になる方は、記事の最後のほうの一覧から確認してみてくださいね!


※↓SkillHacksの詳細はこちらから↓※
-Skill Hacks- 動画で学ぶWebアプリ開発講座


私がSkill Hacks(スキルハックス)を選んだ理由

私は、自信をもって『三日坊主』だと言えます。

新しいことにチャレンジするのは好きですが、基本的にすぐに飽きてしまうので、習い事が続く自身がありません。

しかし、プログラミングは、一度学んで終わりではなく、常に新しいことを勉強し続けなければなりません。


そこで、モチベーション維持のためにも、勉強することで達成したい欲望を考えてみることにしました。



※学習の目的(欲望)を考える

なんでプログラミングを学びたいの?

欲望①:副業として収入増やしたい!
欲望②:アプリの開発で人生一発逆転したい!
欲望②:ノマドワーカーを目指したい!


とまあ、完全に都合のいいことばかりで構成。


とりあえず、


『プログラミングをマスターすれば、こんな欲望がかなうかも!』


といった、先にごほうびをちらつかせた『馬にニンジン』戦法で学習を始めました。


まず、手始めに試してみたのが、無料学習サイトです。


試してみた無料学習サイト

Progate
感想: 文章ひたすら読むスタイルがしんどい。科目が細かく分類されすぎて学習の進め方で迷子ぴえん 😢 。

ドットインストール
感想:動画という部分はわかりやすいけど、むずかしい用語やコード連発で粛々と進むので、初心者には理解が追い付かないぴえん 😢 。


正直なところ、無料サイトではあまりモチベーションも理解度も高まりませんでした。


そこで耳に入ってきたのが、『Skill Hacks(スキルハックス)』です。


いろんな情報を調べたり、プログラマーの友人にも相談をしたところ、何やらSkillHacksというコンテンツが界隈をにぎわせているとのこと。


早速、どういう教材なのか調査に入りました。


SkillHacksってどんな教材?

SkillHacks

実際に調べてみると、この教材を作った方は『迫 祐樹』さんという方。


動画教材サイトで有名な『Udemy』のベストセラー動画著者や、プログラミングに関する書籍出版経験もあるという凄腕経営者だと知りました。


YoutubeやTwitterでも積極的に情報を発信されている方なので、アウトプット力も高い人だということがわかります。


では、そんな迫さんが提供する『Skill Hacks(スキルハックス)』は、どんな特徴があるのか。


私が感じたメリット、デメリットを簡単にまとめてみました。

▼SkillHacksのメリット

☞ 『挫折しない学習』をウリにしている
☞ 学習期限も無期限
☞ LINEで不明点を聞けば無制限で返答してくれる

▼SkillHacksのデメリット

☞ 他社比較では安価とはいえ、初心者には少々勇気のいる金額
☞ 一括支払いのみの対応
☞ ある程度独学で学習した人にとっては物足りない内容

私の場合、

☑ スタートが楽になるなら、有料でもいいかな。
☑ LINEで不明点を直接問合せ出来るのはありがたいかも。

という点で挫折しにくいのではと感じ、SkillHacksで学習をチャレンジすることにしました。


講座の内容は、下記のように第10章まで分かれています。

▼【SkillHacks】コンテンツ内容▼
第00章 事前準備をしよう (2本)
第01章 HTMLのサイト作成講座 (6本)
第02章 CSSでのWebデザイン基礎講座 (6本)
第03章 HTML/CSSワークショップ -自己紹介サイトを作ろう- (6本)
第04章 Bootstrap活用デザイン講座 (7本)
第05章 Rubyプログラミング学習講座 (12本)
第06章 Rubyワークショップ -メモアプリ開発- (7本)
第07章 Ruby on Rails コントローラ・ビュー編 (14本)
第08章 Rails基礎講座 モデル・データベース編 (10本)
第09章 Rails実践編 メモアプリ開発・デプロイ (11本)
第10章 Rails実践編 メモアプリに削除編集カテゴリを追加 (13本)
おまけ コーポレートサイト作成演習 (9本)


一つの動画が大体10分前後なので、途中で集中力が切れるということもないイメージです。


好きな章から始められますが、おじさんはまったくの初心者なので、最初からコツコツ進めて行きました。


※無料体験動画は☟こちら



さっそく『HTML&CSS』の学習を開始してみた。

『HTML』って何となく聞いたことがありましたが、何が出来るかは不明なおじさん。

また、『CSS』に関しては、正直初めて聞いたおじさんです。

簡単に説明すると、下記のようなイメージだということがわかりました。


▼HTMLとは
ざっくり言うと見出しや箇条書き、リンクの貼付やフォームの作成など、ホームページの骨組みを整える言語。

▼CSSとは
文字や背景のカラーや、イメージのサイズ調整など、HTMLで作成したページデザインのビジュアルをキレイに整えてくれる言語。


例えば、私が課題で作成した『HTML』のWebサイトを例にみてみましょう。


下記は『HTML』言語のみで構成されたページです。


▼HTMLのみ▼

文字や画像、飛び先リンクなど、必要な項目はそろっていますが、デザインが整理されていない状態です。


そこで必要となるのが、『CSS』です。


文字や写真のサイズ調整、背景や色の指定、そのほかさまざまなデザイン要素を付け加えることができます。

実際に簡単な『CSS』を追加してみると、先ほどの『HTML』だけで作成したサイトが、下記のように見やすいビジュアルに。


▼HTML&CSS▼


このように、HTMLとCSSは組みあわせて学んでいくイメージです。


ちなみに『HTML&CSS』講座を学んで、このサイトを作成できるようになるまでに、大体1週間程しかかかっていません。


平日は1~2時間、休日3~5時間くらいですね。


仕組みさえわかれば、おじさんでも意外とわかりやすい言語でした。


プログラミングと聞くと、すごく難しいイメージを持ってしまいがちですが、簡単に出来ることから成功体験を作ってもらえると、続けるモチベーションにもつながりますね:)


プログラミングで何かを作ってみる楽しさを体験出来たら、あとは、色々なサイトを模写したり、不明点をググって自分の知識を肉付けしていきながら、自力でコンテンツ作成ができる力を養っていければと思います。


ということで、今回は『HTML&CSS』を学んでみた体験談をご紹介してみました!


引き続き、学習内容や自作コンテンツをこちらで発信してまいります!


プログラミングを初めてみようという方は是非参考にしてみてください!


ではでは!


※↓SkillHacksの詳細はこちらから↓※

-Skill Hacks- 動画で学ぶWebアプリ開発講座