虹の子育てblog

2児の女の子のパパです。子育ての事、お出かけのお役立ち情報など書いています。

プログラミング学習始めて3ヶ月半。模写始めました。

f:id:gharuto:20191126234501j:plain

プログラミング学習始めて3ヶ月半経ちました。

 

現在の進捗状況。

現在の進捗状況はこんな感じです。

  • HTML CSSは基礎学習終了(本一冊、プロゲート上級まで終了)。
  • jQuelyはプロゲート上級まで終了。
  • 模写コーディングを始める。

大きな変化と言えば、jQuelyのプロゲートが終わり模写コーディングを始めたことです。

 

jQuelyプロゲートの感想。

いやー、やっとjQuelyプロゲートが終了しました。

上級編は難関でしたね。そして長い…。

1つ1つ理解するのに時間がかかるので、まさに牛歩です。

約1ヶ月かかっちゃいました。

特にif文とか関数が出てくると訳わからなくなります。

 

jQuely基礎学習を終えて思ったのは、HTML CSSと違い、なんとなく仕組みだけを理解すればいいかなということです。

どういう事かというと、jQuelyって、要はアコーディオンやスライド、モーダルを作るためのものであって、それには型があるんですよね。

だから実際作るときにはそのコードを真似して(コピペして?)書けばいいだけであって、覚える必要はないんです。

ただ、少し手直しする際に仕組みの理解が必要です。

 

たぶん、一から自分で考えてアコーディオンやスライドを作る人っていないんじゃないでしょうか?

いるとしたらかなりの上級者だと思います。

 

jQuely学習に本は必要?

jQuely学習はぶっちゃけ本は必要なく、プロゲートだけでいいと思います。

私は本を買いましたがほとんど読みませんでした。

なぜなら、本は実践的ではないからです。

 

私が買った本は一応jQuely学習本の中ではやさしいと言われているやつです。

 

それでも難しかった。

セレクタがバーっと書いてあり、メソッドがバーっと書いてあり、イベントがバーっと書いてあり、

覚えきれないよって感じです。

 

jQuelyって全てを覚える必要はなく、アコーディオンやスライドなど、よく使うもののコードだけ学習すればいいと思いました。

その方が実践的です。

 

それにはプロゲートがピッタリです。

 

jQuely学習する前にJavaScript学習は必要?

これもjQuely学習を始める人にとってはぶち当たる疑問だと思います。

私もぶち当たりました。

 

これについてjQuely上級編まで終えてみて思ったことは、

JavaScript学習しなくても大丈夫だが、プロゲート初級編くらいはやっといた方がいいということです。

 

jQuely上級編までで、JavaScriptの知識が出てきたのは、if文、変数、関数くらいです。

これらはJavaScriptプロゲート初級編で出てくる内容です。

私はあらかじめJavaScriptプロゲート初級編を学習していたので割りとスムーズに入っていけました。

 

if文、変数、関数は型をおぼえてしまえばいいだけなので、必ずしもJavaScriptを学習する必要はないですが、

私的には事前にJavaScriptプロゲート初級編をやっておくことをおすすめします。

そんなに時間はかからないので。

 

模写コーディング始めました。

HTML、CSS、jQuelyの基礎学習を一応終えたので、模写コーディングを始めました。

いや~難しいですね。

勉強するのと実際作ってみるのとでは天と地程の差があります。

 

模写を始めるまでも、やり方調べたりエディタを準備したり結構手間がかかります。

 

模写するサイトはこちら↓

あなたの不動産、今いくら?|東急リバブル

 

画像のダウンロードはimage downloaderを使いました。

サイト中の画像を一括保存してくれるので便利です。

 

エディタはVScodeを使ってます。

使い方はドットインストールで勉強しました。

 

つまずいた点。

まだ、ヘッダーとトップを作った程度ですが、ここまででつまずいた点を以下に書いていきます。

 

ricty diminishedがVScodeに反映されない!

プログラミングには、コードが見やすいようにプログラミング用フォントというものがあるのですが、

VScodeにもプログラミング用フォント「ricty diminished」というものを設定していきます。

 

私はドットインストールの通りに設定していったのですが………なぜか反映されません!

何度試してもダメです。

「なんだよこれー、いきなりつまずくか!」

と思いながらググってみると、パソコン再起動すると反映されるっぽいです。

再起動してみると、反映されました!

 

いきなりこんな感じじゃあ先が思いやられます。

なんでスムーズにいかないかな~。

 

謎の余白!

模写を始めたのですが、ヘッダー上部等(サイト回り)に謎の余白が出来てしまいます。

わずかな余白なのですが、見本サイトにはないので取り除かなければ模写とは言えません。

 

headerにmargin:0を指定するも消えず、デベロッパーツールで調べますがなんの余白か分かりません。

 

ググってみると、ブラウザにデフォルトでbody{margin:8;}が指定してあるそうです。

デベロッパーツールで調べてみると、確かにデフォルトCSSにbody{margin:8;}が指定してありました。

たく、なんでこんな余計なことするかな~。

 

そこでbodyにmargin:0を指定すると…消えました!

 

これでサイト通りです。

 

このように、模写は少し進むとすぐに壁にぶち当たります。

1つ1つググって乗り越えて行くしかありません。

 

今後の予定。

今度は模写をいつくかやってから実際受注してみようと思いますが、

模写が思ったより難しく時間がかかりそうなので、受注はまだまだ先になりそうです。

 

別に急ぎではないのでじっくりと模写をやろうと思います。