【デイトラ】Web制作コース初級編①『HTML/CSS基礎編』の感想と学習記録

こんにちは、アルパカ（@engineeraru）です。

デイトラのWeb制作コース初級編『HTML/CSS基礎編』を受講しました。

わたしが学習するときに役に立った参考情報をまとめたので、参考にどうぞ〜。

デイトラ公式サイト

デイトラ Web制作コース初級編『HTML/CSS基礎編』の学習記録

デイトラは

「何を学んでいいか分からない」
「知識はあるけど、実践のやり方が分からない」
「Progateの次に何をすればいいか迷う」

という人にはおすすめですね。

【DAY1】はじめに

POINT
道具を理解する

最初にSlack, Google Chrome, VSCodeなどの道具を準備しました。

テキストエディタはSublimeTextやAtomなど様々な種類があります。

ただ、圧倒的にVSCodeが使いやすいです。

デイトラは質疑応答をSlackチャットでできるのが、今っぽくて良いですね。

エンジニアになるにせよ、IT関係の副業をやるにせよ、slackはメールなみに当たり前のツールなので使えるようになっておくと良いですよ！

Slackの基本的な使い方も勉強しておきましょう〜👇

復習用に読むべき記事

Slackの使い方
そもそもWebサイトとは？

【DAY2】HTMLのタグを書く

POINT
HTMLのタグをざっくり理解する

プログラミングする時には暗記は不要です。

ただ、どんなHTMLタグがあるか、なんとなく理解するのは重要ですね。

ちなみに、Progate HTML&CSS初級編も合わせて勉強しておくことを推奨します！

HTMLで非常に分かりづらいのが、ブロック要素とインライン要素の話。

これは最初の難関かもしれません。

この記事がわかりやすいので見ておくと良いですよ！

あと手前味噌ですが、私の「Webの基本解説まとめ」も見てみると理解に役立つかも

復習用に読むべき記事

【DAY3】CSSを書く

POINT
CSSの書き方を理解する

WebページはHTMLとCSSからできています。

HTMLは「中身」で、CSSは「見た目」の担当という感じですね。

CSSでは

「どこの」
「なにを」
「どうする」

という形式で、ページの見た目が変更できるという点を理解すれば、大丈夫です。

今後、自力でググるときのために

どこの　＝　セレクタ
なにを　＝　プロパティ
どうする　＝　バリュー

という専門用語を覚えておくと良いですよ。

※この記事に一通りの情報がまとまってます

あと、ボックスレイアウトがいまいち理解しづらいポイント。

たとえば、「padding」と「margin」という2種類の余白があるのは何故？って思うはず（私は疑問でしたｗ）

おいおい理解できるはずですが、今はCSSのmarginとpaddingの記事を見て、全体像だけ理解しておくと良いですよ。

実際のコーディングをするときに、余白が2種類ある理由や便利さがわかってきますので。

あと、Progate HTML&CSS初級編もついでにやっておくと、より理解が深まります！

初心者がつまずくボックスモデル。
「そもそも何で必要なの？」…ってところを勝手に解説してみました(灬╹ω╹灬)
アルパカだけど猫も好きです🐱 pic.twitter.com/VVfpqzSQBu

— アルパカ(アルパカ）🇹🇭エンジニア (@engineeraru) 2019年5月10日

復習用に読むべき記事

【DAY4】環境構築をする

POINT
VSCodeを使いこなす

最初にインストールしたVSCodeにプラグインを追加しました。

※プラグインはテキストエディタの拡張機能のこと。

ゲームのキャラクターがスキルをたくさんGETしていくと強くなるように、VSCodeにプラグインを入れると、使いやすくなります！

あとEmmetも重要。

Progate HTML&CSS初級編は最初の理解には役立ちますが、Emmetを覚えると、全部を入力するのがバカらしくなりますｗ

プログラミングをやる時は、小さな効率化を意識したほうが良いですね。

例えば「60分でWebページを1つ作れる」人がいたとします。

Emmetを使い効率が上がり「30分でWebページを1つ作れる」ようになったら、時給が2倍ですからね…（極端ですけど）。

EmmetやVSCodeプラグインの入力補完で、コーディングのミスが減るのもありがたいですね。

Progate HTML&CSS初級編で勉強していると、1文字だけのミスで合格にならず困りましたよね…。

デイトラでは紹介されていませんが、個人的にオススメのプラグインもツイートしました👇

個人的に好きなVSCodeの拡張機能まとめ🤫

①ファイルパスの入力補完「Path Intellisense」https://t.co/B8Fes4O1PC

②インデントの階層が見える「indent-rainbow」https://t.co/nj0grVjOsT

③アイコンが見えて使いやすい「vscode-icons」https://t.co/N0BI4zcjv0

つづく pic.twitter.com/XQW1rR0Udy

— アルパカ(アルパカ）🇹🇭エンジニア (@engineeraru) 2020年5月7日

④カラーコードが見える「Color Highlight」https://t.co/9DvFw6MFAj

⑤コードフォーマットが楽になる「Prettier」https://t.co/uQjvhngZgi

⑥差分チェックしやすい「Partial Diff」https://t.co/J0qb9NntD4

⑦セミコロン打つ「Colonize」https://t.co/YSOqs5q7Ra

以上🙆‍♂️ pic.twitter.com/WPxytWLYWn

— アルパカ(アルパカ）🇹🇭エンジニア (@engineeraru) 2020年5月7日