【30DAYSトライアル1st】デイトラDAY1 & DAY2の忘備録-ProgateのHTML & CSS初級編

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


こんにちは。

ごりぱちです。(@3Bgoripachi)

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

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

旅の最中から気になっていた「30DAYSトライアル(デイトラ)」に挑戦しています。

▶︎30DAYSトライアルの概要はこちらから!

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

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

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

では、レッツゴー!!!

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

 

⬇︎30DAYSトライアルのDAY3 & DAY4について知りたい方はこちらから。

デイトラDAY1 & DAY2で学ぶこと

僕が初めに実施しているのは、30DAYSトライアル1st【コーディング基礎学習〜環境設定編】です。

デイトラDAY1 & DAY2では、"Progate HTML & CSS 初級編"を学びます。

▶︎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コマンドを覚えていくことをオススメします。

デイトラDAY1 & DAY2の忘備録

デイトラDAY1 & DAY2では、"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要素など、新しい概念が出てきます。

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

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

デイトラDAY1 & DAY2のまとめ

デイトラDAY1 & DAY2を通じて、

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

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

 

では、今回はここまで!

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

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

 

⬇︎30DAYSトライアルのDAY3 & DAY4について知りたい方はこちらから。

 

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

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

世界一周を考えている方必見!

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

世界一周YouTube始めました!

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

カテゴリー

アーカイブ

PAGE TOP