勉強メモ:ProgateのHTML&CSS初級編

 

ProgateのHTML&CSS初級編をやっと修了しました。

 

最初は初級編ってどんな内容なのかなぁ。と思っていましたが、

内容は充実しており、今までにHTMLとCSSについてインプットしていたため、

個人的にはとても良い復習の場になりました。

 

Progateは各単元ごとに「お気に入り」をつけられる機能がついてます。(すごく便利!)

左上の旗?の星を押すだけ★

f:id:yutttt31:20180311145936j:plain

なので、自分が苦手だと思っているところや、今後忘れないようにしたいなと

思う項目に「お気に入り」をその都度つけていきました。

 

初級編でお気に入りをつけたところは以下の部分です。

①「ブロック要素・インライン要素」

これは、独学で彼からプログラミングを教えてもらっている時に最初に

教わったものですが、なかなか覚えられず、、

<div>はブロック要素?インライン要素?どっち?

と聞かれて、「う〜ん(´*ω*`)」となることが多かったです...

なので、今回改めてprogateで復習することでイメージがつけたかな。と思います。

 

②「paddingとmargin」「ボックスモデル」

これも独学時代に悩まされました、、

独学の時はあるLPデザインをコーディングしながら勉強していたのですが、

デザインを見て、

「ここは...paddingか?いや、marginか?ん?どうやってこの幅を作ればいいかな(-ω-;)ウーン?」

と頭の中がはてなだらけになっていました。

このpaddingとmarginの考え方は今後実践の場でその都度振り返ることがあると思ったので、即お気に入りボタンを押しました(笑)

 

③「お問い合わせフォームを作ろう」

これは、独学の時にやらなかった項目だったので、お気に入りに入れました。(そんだけ)

 

④「全体のレイアウト」

全体のレイアウトって、基本中の基本ですが、

とっっても大事だと思うんです!(誰さま)

例えば、LPデザインをコーディングしていくにあたって、

まずは全体像や構造をパッと考えることからスタートするのではないかと思っていて、(というか、某彼氏に言われました)

全体の構造と、それぞれの中身の構造まで考えた上でコーディングしていくと早いし綺麗にかけるとのこと。

なので、この「全体のレイアウト」が頭に入っていることは大事だなと思います。

このProgateの全体レイアウトのイラストはわかりやすかったので、お気に入り登録しました★

 

以上がProgate HTML&CSS初級編の振り返りです。

中級編もさささっと終わらせたいな!

 

引き続き頑張ります(●ゝω・)ゞ