文系営業が初めてワードプレススキルを身につける11〜15時間目

スキル習得

progateという用意されたぬるま湯から野に放たれました。

前回の学習では、この先どういう風に学んで行けばいいのか、と迷いが出ましたがプロゲート最高!ということで5時間かけて html & css の学習を一通り終わらせました。

前回の記事はこちらから

この先、HTML・CSS・Javascript・jQuery・PHP辺りを学ばないとそれなりのWeb ページが作れないとは理解しました。まずはフロントエンドの

  • HTML
  • CSS
  • Javascript
  • jQuery

はひととおりプロゲートで学んで行きたいと考えてます。

プロゲートが終わったら何をすればよいか

20時間で「スキル」を得るというのが目的なのでHTML & CSSに絞ったほうがいいと思い、プロゲートは一旦終了します。

プロゲートが面白く進められるサイトなので 思わず1時間javascriptを学んでしまいましたが。

progateでhtml & CSSの勉強が終わったら何をしようかなぁと並行して考えて、色々リサーチしていました。

こちらのサイトを参照

htmlの勉強は何時間?プログラミング初心者こそ1週間にすべき理由【稼げない】
プログラミングはかっこいいし、手に職が持てるし、人手不足で、お金も稼げるというイメージでプログラミングを勉強する人がものすごく増えてきています。 この記事を読んでくれているあなたもよっし!自分も変わろ

書籍をベースに自分の環境でページを作るのがよい、という記事を見て残された時間をそれに充てようと考えました。

今回参考にする書籍はこちら

まずは環境設定~最低限やったほうがいい2つのこと~

プロゲートが本当にユーザーフレンドリーだと思うのは、自分のエディターがなくてもコードさえ入力すれば、どう反映されるか分かる環境をブラウザひとつで与えてくれるという点です。

ハードルが非常に低い反面、いざ自分の環境でコードを打ってみよう!となった時、え?何をどうすればいいの?といきなりなります。自分自身びっくりしました。

まずはエディタなるものをダウンロードする必要があるみたいなのでATOMをダウンロードしました。

Atomはprogateがおすすめしてましたのでその流れで使っています。UIも悪くないと思います!ほかを知らないですが。

学習を進めていて最低限やったほうが良い設定だと思ったのは2つ。

インストールと日本語化

【すぐわかる!】Atomエディタのインストールと日本語化、便利な使い方
Atomとは、使いやすいテキストエディタのひとつだ。プログラミングをするのに便利でエンジニアから絶大な支持を得ている高性能エディタになっている。このページでは、Atomをはじめて使う方にインストール方法、日本語化、簡単な使い方についてまとめてご紹介した。参考にしていただければと思う。

インストール方法と日本語パッチの当て方がわかりやすく載ってるので参考にしました。

HTMLのプレビュー画面確認方法

Atomテキストエディタでhtmlをプレビュー画面で確認できるパッケージatom-html-previewのインストール方法・使い方
Atomテキストエディタでブラウザーに切り替えないで、編集中のhtmlをプレビュー画面で確認できたらすごく便利なのに……と思いませんか? ホームページ作成においてchromeなどのブラウザーに切り替える作業は負荷がかかるので、できれば避けたいところですよね。実はAtomには、ブラウザーに切り替えないでプレビュー画面確認

HTMLのプレビューが見られる設定はマストです。

これがないとブラウザ立ち上げていちいち更新して確認しないと行けないので、スペースも手間も取ってしまいます。

参考書籍をひたすら写経して進む!

20時間でスキルを得るために15時間はすでに時間を割いている状況。なので後はひたすらに手を動かして行きたいため、参考書籍にしたがって進めて行きます。

いきなり詰まる

デザインブックで最初にボックスの考え方を教えてくれます。本来与えられたCSSファイルを読み込んでBOXと入れるだけで下記のようなイメージになるようにしてくれていたと思うのですが、これが全然反映されなくて2時間ほど無駄にしました。

進めていくとこれは別にわかりやすくするためのギミックに過ぎないので無視してもよかったのですが、前回わからないなりに進めた結果、完全にわからなくなった、という過ちを犯しているので本当は解決して進めて行きたかったです。

現在の成果

ともあれ、流しながら進めていくとプロゲートでやって得た知識とかなりシンクロする部分も多く、取り急ぎ下記のようなサイトのトップページを作成することはできました。

まとめ

Progate→HTML5&CSS3デザインブックの流れは本当に素晴らしいです。

デザインブックを先にやってもナンノコッチャだと思います。この流れで出来たからこそ、15時間しかまだ勉強してないですが、そこそこ知識とノウハウが溜まってきている気がしています。

今後のスキル獲得でも活かせそうなことではありますが、学習のステップというのは非常に重要だと感じました。

このステップが適切でないと学習が止まってしまい、意欲がかなり削がれるからです。

このスキルに関しては引き続きデザインブックを進めて行きますが、今後のスキル習得に関しては入門編をやった後の次をどうするか、というのを意識してリサーチして行くことを肝に命じて行きます。