プログラミング学習始めて3ヶ月半経ちました。
現在の進捗状況。
現在の進捗状況はこんな感じです。
- HTML CSSは基礎学習終了(本一冊、プロゲート上級まで終了)。
- jQueryはプロゲート上級まで終了。
- 模写コーディングを始める。
大きな変化と言えば、jQueryのプロゲートが終わり模写コーディングを始めたことです。
jQueryプロゲートの感想。
いやー、やっとjQueryプロゲートが終了しました。
上級編は難関でしたね。そして長い…。
１つ１つ理解するのに時間がかかるので、まさに牛歩です。
約１ヶ月かかっちゃいました。
特にif文とか関数が出てくると訳わからなくなります。
jQuery基礎学習を終えて思ったのは、HTML CSSと違い、なんとなく仕組みだけを理解すればいいかなということです。
どういう事かというと、jQueryって、要はアコーディオンやスライド、モーダルを作るためのものであって、それには型があるんですよね。
だから実際作るときにはそのコードを真似して(コピペして？)書けばいいだけであって、覚える必要はないんです。
ただ、少し手直しする際に仕組みの理解が必要です。
たぶん、一から自分で考えてアコーディオンやスライドを作る人っていないんじゃないでしょうか？
いるとしたらかなりの上級者だと思います。
jQuery学習に本は必要？
jQuery学習はぶっちゃけ本は必要なく、プロゲートだけでいいと思います。
私は本を買いましたがほとんど読みませんでした。
なぜなら、本は実践的ではないからです。
私が買った本は一応jQuery学習本の中ではやさしいと言われているやつです。
それでも難しかった。
セレクタがバーっと書いてあり、メソッドがバーっと書いてあり、イベントがバーっと書いてあり、
覚えきれないよって感じです。
jQueryって全てを覚える必要はなく、アコーディオンやスライドなど、よく使うもののコードだけ学習すればいいと思いました。
その方が実践的です。
それにはプロゲートがピッタリです。
jQuery学習する前にJavaScript学習は必要？
これもjQuery学習を始める人にとってはぶつかる疑問だと思います。
私もぶつかりました。
これについてjQuery上級編まで終えてみて思ったことは、
JavaScript学習しなくても大丈夫だが、プロゲート無料版くらいはやっといた方がいいということです。
jQuery上級編までで、JavaScriptの知識が出てきたのは、if文、変数、関数くらいです。
このうち、if文、変数はJavaScriptプロゲート無料版で出てくる内容です。
私はあらかじめJavaScriptプロゲート無料版を学習していたので割りとスムーズに入っていけました。
if文、変数、関数は型をおぼえてしまえばいいだけなので、必ずしもJavaScriptを学習する必要はないですが、
私的には事前にJavaScriptプロゲート無料版をやっておくことをおすすめします。
そんなに時間はかからないので。
模写コーディング始めました。
HTML、CSS、jQuelyの基礎学習を一応終えたので、模写コーディングを始めました。
いや～難しいですね。
勉強するのと実際作ってみるのとでは天と地程の差があります。
模写を始めるまでも、やり方調べたりエディタを準備したり結構手間がかかります。
模写するサイトはこちら↓
画像のダウンロードはImage Downloaderを使いました。
サイト中の画像を一括保存してくれるので便利です。
エディタはVS Codeを使ってます。
使い方はドットインストールで勉強しました。
つまずいた点。
まだ、ヘッダーとトップを作った程度ですが、ここまででつまずいた点を以下に書いていきます。
ricty diminishedがVS Codeに反映されない！
プログラミングには、コードが見やすいようにプログラミング用フォントというものがあるのですが、
VS Codeにもプログラミング用フォント「ricty diminished」というものを設定していきます。
私はドットインストールの通りに設定していったのですが………なぜか反映されません！
何度試してもダメです。
「なんだよこれー、いきなりつまずくか！」
と思いながらググってみると、パソコン再起動すると反映されるっぽいです。
再起動してみると、反映されました！
いきなりこんな感じじゃあ先が思いやられます。
なんでスムーズにいかないかな～。
謎の余白！
模写を始めたのですが、ヘッダー上部等(サイト回り)に謎の余白が出来てしまいます。
わずかな余白なのですが、見本サイトにはないので取り除かなければ模写とは言えません。
headerにmargin:0を指定するも消えず、デベロッパーツールで調べますがなんの余白か分かりません。
ググってみると、ブラウザにデフォルトでbody{margin:8;｝が指定してあるそうです。
デベロッパーツールで調べてみると、確かにデフォルトCSSにbody{margin:8;｝が指定してありました。
たく、なんでこんな余計なことするかな～。
そこでbodyにmargin:0を指定すると…消えました！
これでサイト通りです。
このように、模写は少し進むとすぐに壁にぶち当たります。
１つ１つググって乗り越えて行くしかありません。
今後の予定。
今後は模写をいつくかやってから実際受注してみようと思いますが、
模写が思ったより難しく時間がかかりそうなので、受注はまだまだ先になりそうです。
別に急ぎではないのでじっくりと模写をやろうと思います。
コメント