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

タキのデイトラ学習記録

こんにちは、タキ(@engineeraru)です。

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

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

デイトラ公式サイト

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

デイトラは

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

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

 

【DAY1】はじめに

POINT
道具を理解する

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

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

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

 

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

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

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

 

【DAY2】HTMLのタグを書く

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

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

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

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

 

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

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

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

 

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

 

【DAY3】CSSを書く

POINT
CSSの書き方を理解する

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

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

 

CSSでは

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

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

 

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

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

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

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

 

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

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

 

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

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

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

 

【DAY4】環境構築をする

POINT
VSCodeを使いこなす

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

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

 

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

 

あとEmmetも重要。

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

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

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

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

 

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

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

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

 

デイトラ Web制作コース初級編『HTML/CSS基礎編』まとめ

自分の手で「Webページ」の中身やデザインを変えられるだけでも大きな進歩でしたね!

 

ちなみに、ブログ記事・個人の体験記も便利なのですが、公式ドキュメントを見る癖も付けておくと良いですよ!。

HTMLなら、以下のサイトが一番信頼できます(英語や硬い文章には徐々に慣れてきます)

 

他にも、下記の学習教材も見ておくと理解が深まって良いと思います!

 

以上、タキ(@engineeraru)でした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です