フリーランスまでの道のり

ド素人がWebデザインの勉強をし始めて2ヶ月目の結果報告

この記事では、ド素人が1からWebデザインの勉強をした、2ヶ月目の様子を紹介します。

ちなみに私の目標は、ド素人からWebデザイナーになる事です。

らいおん丸
らいおん丸
カッコイイWebページをデザインして、魅力的なWebページを作りたいんやけど

こう思っても、ド素人は何から勉強し始めたらよいのかわからないですよね。

CSSに手を付けてみたり、JavaScriptに手を出してみたり…

でもそれは、勉強する順番が間違っていただけかもしれません。

この記事の結果報告を読む事によって以下のメリットがあります。

  • ド素人がWebデザインの勉強をして、成功&失敗した経験
  • 失敗例から効果的な勉強方法を選択できる
  • Webデザインの勉強を始める順序

結論を先に言ってしまうと、Webデザインの勉強2ヶ月目で、プロゲートを始めて本当によかったと思います。

プロゲートはド素人がWebデザインの勉強を始める最適のツールでした。

では、そんな私のWebデザインの勉強2ヶ月目をご覧ください。

あわせて読みたい
ド素人がWebデザインの勉強を始めてから1ヶ月目の結果報告7月から素人だった私が、Webデザインの勉強を始めて1ヶ月経ちました。 ヒューマンアカデミーでのオンライン授業がメインです。 ...

ド素人がJQueryに手を出す

私は7月から、ヒューマンアカデミーの『Webクリエイターブートキャンプ講座』というコースで、動画と教本を中心に勉強しています。

あわせて読みたい
横断歩道を渡るサラリーマンの群れ
脱サラして、ド素人がWebデザイナーを目指すために、ヒューマンアカデミーへ行ってきた『全くのド素人がWebデザイナーなんてなれるかな』と諦めていませんか? 私はこれから、脱サラしてヒューマンアカデミーというオンライ...

一応、そのコースでも勉強の順番があり、それを基に2ヶ月目も勉強しようと思っていました。

そう、次はJQuery。

教本を開いた瞬間に閉じたくなるようなコード。

らいおん丸
らいおん丸
ま、動画見ながらなら理解できるだろ

そんな甘い考えで、JQueryの勉強をスタート。

白鳥先生
白鳥先生
JQueryを使えば、HTML/CSSを簡単に変更できますよー

なんて先生は話しを進め、課題が出る。

HTML/CSSの教程では、課題が出ても達成する事ができたが、このJQueryの最初の教程の課題すらわけがわからない。

課題解説を確認しても、わからない。

HTML/CSSの教程では味わった事のない???が私を襲ってくる。

そもそも、JQueryを使うメリットすらわかっていないド素人なので、この教程についていけないという焦りが募った教程だった。

【Webデザイン、勉強】でググったプロゲートと出会う

正直、JQueryがわからな過ぎて、勉強2ヶ月目前半は落ち込んでました。

本を読んでもわからないし、動画で繰り返し勉強してもわからない。

そんな時、Googleで検索してみたんです。【Webデザイン 勉強】と。

そこで、プロゲートというオンラインサービスを発見しました。

無料でプログラミングやコーディングの勉強ができるみたいなので、早速トライ。

-プロゲートとは-

  • インターネット上で、プログラミングを無料で学べるオンラインサービス
  • 有料版もあり、月々\980で全てのレッスンが受けれる
  • 無料版でもある程度勉強できるが、本格的に身に着けたいなら有料版
  • コードを書いて、全てをブラウザ上で完結できる為、他のソフトなどは一切ダウンロードしなくてよい

プロゲート公式サイトはコチラ

らいおん丸
らいおん丸
めっちゃおもしろいやないか!!

こんな感じで最初はスライドを読んで勉強。

次は実際に自分でコードを書いてみる。

わからなければ、スライドで確認したりヒントも見れる。

ド素人からしたらすごい優しい内容で、ゲーム感覚で勉強できるのがうれしいポイント!

JQueryの事なんて置いといて、プロゲートというゲームにハマってしまいましたw

プロゲートでHTML/CSSの復習をする

白鳥先生
白鳥先生
あの…JQueryの勉強は…?
らいおん丸
らいおん丸
いやープロゲートおもしろいわー。HTML/CSSの復習しよ

そんなノリで、わけがわからないJQueryは一旦置いといて、プロゲートでHTML/CSSの復習に没頭する。

わかるわかると思っていたHTML/CSSも、実際にプロゲートで道場コースをやってみるとぜんぜんわかっていない事に気付く。

-プロゲートの道場コース(HTML/CSS)とは-

  • 与えられた仕様書を見て、実際にWebページを1から作るコース
  • わからなければヒントやスライドで確認できる
  • 自分のコーディングスキルがどの程度なのかわかる

何がわかっていなかったかという事は、下記にまとめました。

-ド素人の私が、HTML/CSSにおいてよくわかっていなかった事-

  • <div class=””></div>がきちんと使えていなく、CSSで与えたい内容がうまく表示できない
  • class属性に名前が2つ以上与えられる事
  • paddingとmarginの違い

ヒューマンアカデミーのHTML/CSSコースでも、何となくしかわかっていない部分が浮き彫りになった。

たのまな

JQueryがわからないのでJavaScriptを勉強し始める

HTML/CSSの復習も一段落ついた、勉強2ヶ月目後半。

わけがわからないJQueryをプロゲートで勉強してみようと思いつく。

そしてJQueryページを開くと以下の文章が表れる。

このレッスンで使われるJavaScriptのバージョンはES5です。

jQueryレッスンを受講する前に、「 ES5(旧版) 」を受講することをおすすめします。

それならES5をやろうとリンクをクリックすると、JavaScriptレッスンに飛ばされる。

らいおん丸
らいおん丸
いや、JavaScriptじゃなくてjQueryの勉強したいんだけど…

そんな事を思いつつもJavaScriptレッスンのページには以下の文章が表示される。

ES6とES5の違いはJavaScriptのバージョンです。

初めてJavaScriptを学習される方は、最新バージョンのES6レッスンを受講することをおすすめします。

そして私は気づく。

『もしかして、jQueryってJavaScriptのツールか何か?!』

その予想はあながち間違っていはいなく、JavaScriptのライブラリだった…。

だーかーらーいきなりjQueryやってもわけがわからなかったのか!

ここでド素人が1からWebデザインの勉強をするってのは大変なんだなーって事を再確認する。

プロゲートでJavaScriptの勉強を始めてみる

謎も解けたことで、さっそくJavaScriptの勉強スタート。

らいおん丸
らいおん丸
なるほど~console.log();で表示されるんやな
白鳥先生
白鳥先生
最初は簡単ですよ

初めはさくさく進んでいったが、真偽値や条件分岐で頭から煙が出てくる。

比較演算子の『a<bやa<=b』なんて、中卒の私には違う意味でハードルが高い。

ただ何回も何回も繰り返しやる事で、少しずつわかるようになってきました。

やりたい事はWebページ制作なのかシステム開発なのか

2ヶ月HTML/CSS、JavaScriptを勉強して少し考えた事があります。

先人達は『何を作りたいかというゴールを決めてから言語を勉強しなさい』と言います。

いろいろ勉強していると、あれもやってみたい、これもやってみたいっていう好奇心は生まれてきます。

しかし私の中では、ゲームを作りたいとか便利なシステムを作りたいっていうところまでは、結びつかないんですよね。

【シンプルだけど魅力的なWebサイトを作りたい】

これが今のところ、Webデザインを勉強してきての将来のVISIONになっています。

その為には、いろいろな言語に手を出さないで、HTML/CSSとJavaScriptを極めるのが最短なのかなって考えました。

まとめ

ド素人がWebデザインの勉強を始めてから、2ヶ月目で言いたかった事は以下の通りです。

  • HTML/CSSはひたすら復習あるのみ
  • ヒューマンアカデミー+プロゲートの組み合わせが最強の勉強ツール
  • JavaScript(jQuery)は次の難関

同じような境遇で、Webの道を歩もうと思っている人は参考にしてみてください!

次は3ヶ月目、JavaScriptを徹底的に勉強していきたいと思います。

では、あでゅ~

たのまな たのまな