Progate-HTML & CSS初級編を学んでみた感想と忘備録

公開日:2020年4月12日
     
 プログラミング,フリーランス,30daysトライアル,デイトラ,アイキャッチ画像  
   


こんにちは。

ごりぱちです。

2020年3月に世界一周から帰国したはいいものの、コロナウイルスの影響で、

「自主的に自宅待機+仕事・住居探しに時間がかかる」ということで時間を持て余したので、

ProgateでHTML & CSSを学んでみました!

この記事では、プログラミング初心者の僕が、Progateを通じて学んだことを忘備録としてまとめています。

"これからプログラミングを学ぼうと考えている方"、"Progateを通じてどんな変化があるのか気になる方"は、

是非とも記事を読んでみてください。

では、レッツゴー!!!

*ちなみに僕の作業環境はMac Book Airです。

⬇︎Progate HTML& CSSの中級編について知りたい方はこちらから。

⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。

Progate HTML & CSS初級編学ぶこと

"Progate HTML & CSS 初級編"を通じて、文字通りwebデザインの基礎の基礎を学んでいきます。

▶︎ProgteのHPはこちら!

▶︎Progate HTML & CSS 初級編で学ぶこと一覧

"Progate HTML & CSS 初級編"は、無料で学ぶことができるので、

「プログラミング学習が継続できるか不安だな。。。」という方でも、気軽に取り掛かることができます。

お試し感覚で、是非トライしてみてください!

Progateの感想

「Progateって使いやすいの?」と心配される方もいると思うので、

まずは僕の主観での「Progateを使ってみた感想」をお伝えします。

Progate、めっちゃ使いやすいです!

僕は過去に、いくつかプログラミング学習サービスを使っていたのですが、その際に最も面倒くさかったのが、

Emmetのようなコーディングの省略機能が使えず、コーディング時間が無駄に長くなってしまうことです。

Emmetとは、独自の省略記法でHTML・CSSのコーディングの効率化をサポートしてくれるプラグイン。

by GRANFAIRS

しかし、Progateであれば、基本的なEmmet機能が使えるので、すごく楽にコーディングをすることが可能です。

例えば、<div></div>を作成する際、div+tabで、<div></div>が一瞬で作成されます。

⬇︎Emmetの具体的な使い方を知りたい方へ、オススメの記事です。

▶︎「はじめて」でも簡単!Emmetの使い方とよく使うパターン集

*Progateで、上記の記事内全てのEmmetコマンドが使えるわけではありません。

実際にProgateを触りながら、Progateで使えるEmmetコマンドを覚えていくことをオススメします。

Progate HTML & CSS初級編の忘備録

▶︎Progate HTML & CSS 初級編で学ぶこと一覧

ここでは、僕が実際に初級編の中で理解に詰まったところ、それを解決するために参考にした情報をセットにして紹介していきます。

サルワカさんや、ちづみさんが分かりやすくて、本当に助かりました。。。

HTMLとCSSの役割について

「そもそもHTMLとCSSって何?どこがどう違うの?役割って何?」

という、絶望的なまでにチンプンカンプンだった僕は、まずHTMLとCSSについて調べました。

HTMLで使用されるタグや、CSSの記述方法など、詳しく知ることができるので、

Progateで理解できないところがあれば、こちらの記事を読むことをオススメします!

▶︎初心者向けHTML入門:書き方の基本とタグの使い方

▶︎初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!

floatについて

僕は特に、floatで子要素を横並びにした際に、親要素高さを保てなくなり、うまいことデザインができなくなってしまい、

かなり悩んだのですが、その時参考にしたのがこちらのtwitterです。

親要素を保つ方法が、分かりやすく解説されています。

margin ・ paddingについて

「marginとpaddingって、要素同士の間隔をあけるもの?性質の違いは何?分からん!」

と、かなり混乱していましたが、何回も繰り返し解説記事を読むことで理解が深まりました。

▶︎CSSのmarginとは?paddingとは?余白の指定方法まとめ

理解が深まった後は、再度Progateを復習する際に、勝手にmarginやpaddingの数字をいじってみると、非常に分かりやすいです。

その後も、日常生活で四角を見ると、その度に「margin・padding」をイメージしていました。

テレビ・窓・ipad・iphone・ノートなど、身の回りの四角いものは、全てイメトレに活用しました。笑

問い合わせフォームについて

お問い合わせフォームを作る際、input要素・textarea要素・form要素など、新しい概念が出てきます。

正直、それらがどんな役割で、どんな機能を果たしているのか分からなかったので、それぞれの役割を調べてみました。

▶︎基本的なフォームの作り方

Progate HTML & CSS初級編のまとめ

Proagte HTML & CSS初級編を通じて、

「HTMLとCSSって何?どうやってサイトって作るの?」という状態から、

「HTMLとCSSの基本的な使い方、サイトの構成について理解することができた!」となりました。

では、今回はここまで!

これからも、Progateで学んだこと、気になったところをまとめていきます。

プログラミング学習に興味を持っている人、Progateをやってみようと考えている方へ、少しでも参考になると嬉しいです。

⬇︎Progate HTML& CSSの中級編について知りたい方はこちらから。

⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。

最後まで読んでいただき本当にありがとうございました。

また次回お会いしましょう!

タイ,チェンマイ,グルメ,レストラン,タイ料理チェンマイのオススメレストラン4選!地元で人気のグルメを味わい尽くせ!前のページ

Progate-HTML & CSS中級編を学んでみた感想と忘備録次のページプログラミング,フリーランス,30daysトライアル,デイトラ,アイキャッチ画像

夫婦で世界一周-出国前の準備編-

世界一周,夫婦,アイキャッチ,準備,費用,お金

夫婦で世界一周-帰国後の手続き編-

世界一周,手続き,帰国

夫婦で世界一周 -旅の記録-

youtube,世界一周,夫婦,海外旅行,旅

カテゴリー

アーカイブ

PAGE TOP
人生を変える本気の180日間!プログラマーへの第一歩。
実践型プログラマー育成スクールの無料面談はコチラ
人生を変える本気の180日間!プログラマーへの第一歩。
プログラマー育成スクールの無料面談はコチラ