プログラマー化計画

Progateの「HTML&CSS学習コース初級編」を3周して得たスキルや感想

どうも、こんにちは。脱サラ実践中のジッキー(@jikky_bongjing)です。

先日下記のようなツイートをしました。


今「Progate」というプログラミング学習ができるサイトでプログラマーとしてのスキルを30代から磨いていこうという企画をやってまして、ガチで勉強しています。経緯は下の記事です。

30代から目指すプログラマーへの道【プログラミング始めました】どうも、こんちゃん!ジッキー(@jikky_bongjing)ですーーーーー!! 今回からまた新しいシリーズ始めます! ...

で、「Progate」の「HTML&CSSの初級編」を3週やって見ましたので、学べたことやはまったところ、そして感想を書いていきたいと思います。

ProgateのHTML&CSS学習コース初級編で学べたこと

初級編で学べたこと

箇条書きにしますが、学べたことは下記の通りです。

学んだこと
  • HTMLとCSSの仕組み
  • HTMLとCSSを連携させる書き方がわかる
  • HTMLの全体構造がわかる
  • HTMLで文字や箇条書き(リスト)をかけるようになる
  • HTMLでリンクを作れるようになる
  • HTMLで画像を挿入できるようになる
  • CSSで文字の大きさやフォントを変えられるようになる
  • CSSで文字や画像の位置を調整できるようになる
  • td・trの表はまだ扱わない

細かくは他にもありますけど、ざっとこんな感じですね。

ワードプレスのテキストエディターに書かれているタグや文字の意味はだいたい理解できるようになりますので、ブロガーアフィリエイターは最低限おさえておいても良い知識だと思いますね。

で、ワードプレスのカスタマイズに特に必要なCSSの基礎知識も身に付けることができます。

まだまだ、一からおしゃれにカスタマイズできる知識はないのですが、HTMLとCSSの連携のさせ方が理解できるので、既存のCSSのどこをいじればいいのかってことは理解できるようになります。

CSSで指定しているのはわかるけど、どこをいじればいいのやら・・・って言うのはプログラミング知識を持たないサイト運営者あるあるですからね。

僕もそこで苦しんでいたので、なんともったいない時間を過ごしたんだろう・・って思いました。

勘の良い人であれば、CSS初級編の知識だけでもかなりカスタマイズできるようになると思いますよ。

ワードプレスのテキストエディターの記述の意味がだいたいわかるようになる。

カスタマイズの際、CSSのどこをいじればいいかわかるようになる。

ProgateのHTML&CSS学習コース初級編でハマったこと

ワカラーーン

ハマった部分は、CSSの「margin」と「padding」の違いの理解に時間かかりましたね。

両方とも位置を指定するので混乱しました。

四角のボックスをイメージして、「ボックスの枠の外側の要素」と「枠」の幅を指定するのが「margin」で、「ボックスの枠の内側にある要素」と「枠」の幅を指定するのが「padding」ですね。

つまりボックスをどこに置くかを「margin」で指定して、ボックスの中のものをボックス内のどこに置くかをpaddingで指定するってことかと。(たぶんw)

まだまだ実戦で使うとなるとしばらく混乱しそうですが・・・まぁおいおい慣れてくるでしょう。

あとは、、、、「float」がもしかしたら今後ハマるかもです。

初級編ではハマる要素がないのですが、自分で使うとなるとちょっとややこしそうだなって印象。

あとは、ある程度すんなり頭に入りました。

もちろん言語に慣れていないので3周はしましたが、3周くらいすると慣れてきたって感じですね。

ProgateのHTML&CSS学習コース初級編を学んだ感想

ProgateのHTML&CSS学習コース初級編を学んだ感想

新しいことを学ぶのは楽しい!

そして、マジで先にやっとけばよかったと思った。

だって、これまでいろんなサイト見て、コピペでワードプレスのデザインのカスタマイズしようとして、結果どこをいじればいいのかの試行錯誤に時間を取られるってことがとても多かったんですよ。

今は、CSSのどこをいじればいいのかくらいは割とすぐわかります。

3周するのにかかった勉強時間は多分6時間くらいですから、先に6時間かけておくだけで全然効率が違ったんだなって思いましたね。

プログラミング学習は「やらず嫌い」が多いのかも。やると楽しいし、ルール理解するだけだからわかるんだけど、「なんとなくやりたくない」みたいな部類に入ってるんじゃないですかね。

いやー30代からでも始めてよかった!

あと、Progateが凄すぎます。

やったらわかると思いますが、画面上で、HTMLとCSSのインプットとアウトプットを繰り返しながら、自分がサイトを作る感覚も味わいながら、学習を楽しく進めることができます。

本当にこれで無料かよってクオリティー。

イヤーーーほんとありがとうございます!

無料で簡単に学習できて、ワードプレスのカスタマイズが捗るようになるんだったら、最高ですね。

ちなみに、僕はこれを書いている今、すでに有料コース申し込みました。

中級編以上は有料ですね。ただそれでも月980円なので、安すぎです。

1ミリのためらいもなく課金しました。

ProgateのHTML&CSS学習コース初級編のオススメの勉強の仕方

オススメの勉強法

僕が今回やった勉強の手順はいいなと思ったので、そちらも共有しておきますね。

なんてことはないのですが、以下のような感じです。

スマホ版で1周→PC版で2周

最初はスマホ版の方がいいと思います。

スクショとかは載せない方がいいと思うので載せませんが、スマホ版はコードを書く必要がなく、表示されるコードから正しいものを選んでタップしていく感じで進めます。

だから、ゲームみたいな感じですね。

最初プログラミング言語に馴染みがなく、書くこと自体が嫌になってくる人もいると思うので、プログラミング言語に馴染むまではスマホでぽちぽち隙間時間にやって、大枠理解しちゃった方がいいですね。

そのあと、「PC版」で実際に言語を書きながら進めて行くとすんなり頭に入ると思います。

ういう新しく始めることって、最初の入りが大事です。

最初入っちゃえば、あとは継続するだけなのですが、最初入るところにすごくハードルがあるので、できるだけそのハードルは下げた方がいいですね。

そのためにも、PCを用意して、勉強環境を作って・・・ではなく、隙間時間にスマホの簡易版でやってみることをオススメしますよ。

学ぶ内容は同じなので。

というわけで今回は以上です。

もう中級編も1周終わってるので、また報告します!では!

【お知らせ】副業ブログ歴4年間の失敗を詰め込んだnoteを作りました。

ブログを始めて4年。センスなしで凡人な僕でも、2020年3月にアフィリエイト収益で月30万円以上の収益を達成しました。

ここに来るまで、たくさんの失敗をやらかしましたが、今の僕があるのは、それらの失敗から学んだ教訓があるおかげです。

そして、今確信していることがあります。

「僕の4年間の失敗を避ければ、みんな僕よりうんと早く6桁に到達できる」

というわけで、4年間で積み上げた失敗を詰め込んだnoteを作りました。

  • 初心者が絶対にマネしてはならない失敗
  • マヌケな失敗
  • 本当は晒したくない黒歴史
  • 今でも後悔するような失敗
  • 稼げなかった時と稼げるようになった時の考え方の差 など

約3万文字程度に詰め込みました。このnoteを読めば、初心者ブロガーにありがちな失敗を避けて時短することが可能です。

失敗40個中10個まで無料で公開中です。

>>ブログ副業歴4年で30万円稼げるようになった僕が後悔している「40の失敗」と学んだ教訓を公開