コーディング練習と今後の学習予定

 コーダーを目指し学習中のあーやといいます。

久々の更新ですが、黙々と学習は続けておりました!

・Udemy講座「ちゃんと学ぶ、HTML/CSS&JavaScript」にて基礎を学習

・CodeStepにて練習

この二つをメインの学習方法として、隙間時間に本でも学習しました。

 そこで、今回は以下の内容でお話していきたいと思います。

  • CodeStepにて練習をして、方法を学んだこと
  • JavaScriptをモノにするために、しっかり学びたい。今後の学習方法

CodeStepにてコーディング練習

 最初はプチパニックで、何からまず始めればいいのか?と勉強したことをテストになると思い出せない、そんな感覚になりました。

 しかし、CodeStepサイト上で、進め方が書いてあり、その通りに進めていくと慣れていきました。

 特に、始める際の以下のことは初心者にとってとても重要だと思います。

  • 模写のルールを決める
  • 模写するサイトをじっくり見る
  • レイアウト構成のメモ

 カラーや余白なども重要なのですが、初心者はそこでつまづくと時間が足りなくなります。

微調整をしていると気が付けばその日の学習は終わっていることもあります(-_-;)

 細かいことは気にせず、慣れることを目的に進めていきました!

すると、完成までの時間が早く、達成感があります。そして楽しいので学習が続きます。

作成の流れがつかめたり、例えばCSSグリッドやフレックスボックスなどの使い方にも慣れていきました!

 

 また、模写するサイトはレイアウトなどしっかりと確認します。レスポンシブ対応についてももしっかり確認します。

 大まかな構成は最初のうちに決めておかないと後々苦労するからです。

あとで「やはりここを変えよう」となっても、全体が崩れてしまったり、どこをミスしたのか

わからなくなります(-_-;)

 枠組みは必ず最初にしっかりと確認、決めていきましょう。

 

 私は、最初は手書きで進めています。

図のように大まかに決めた後、そこに矢印で付け加え、どんどん細かく決めていきます。

ここはCSSグリッド?フレックスボックス?などと迷うところもメモとして書いていきます。

レスポンシブ対応も含め書き終えて、これでうまくできそうだと思うところまで書いていきます。

それからコードを入力していきます。

 あとは、メモに書いた順で、大まかな枠組み入力したら確認します。

 その次はサイトの上から順に細かく入力し、まずヘッダーのタイトル部分ができたら確認。

 その次はナビ部分を仕上げ、確認…

入力→確認を細かく繰り返します。

 この確認を怠ると、どこでミスしたのかわからなくなるので、初心者は絶対に細かすぎるんでない?位確認しましょう!

JavaScriptをモノにするために、しっかり学びたい。今後の学習方法

 JavaScript、jQueryについて学習し、JavaScriptの記述は長く、難しいと感じました。

しかし、動的サイトもしっかり学びたいので、なんとか学習方法はないか…と探しました。

 こちらのサイトが初心者にもわかりやすく、学習方法も導入しやすそうなので、参考にさせていただき、学習を進めたいと思います。

  Progateは、JavaScriptは終わらせたのですが、jQueryは中途半端でした。

jQueryを初級からやり直し、一通り学習しようと思います。学習ペース次第ではsassなども学習したいと思います。

 jQuery→JavaScriptの順で学習し、CodeStepなども参考にして、進めていきます!

 しばらくはまた学習に専念し、練習(HTML/CSS)、jQueryをProgateにて学習していきます。

 落ち着いてきたらブログを更新しようと思います。

 最後までお読みいただきありがとうございました!