【デイトラ】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)でした。

4 COMMENTS

小澤琢磨

実際に受講してみて、記事や動画の説明非常に分かりやすいなと思いました!。これなら挫折せずに続けられるかな、と思います。これからも頑張ります!

返信する
しんタン

今回、実際に受講してみて、記事や動画の説明非常に分かりやすいなと思いました!。これなら挫折せずに続けられるかな、と思います。これからも頑張ります!

返信する
OHARA KOTA

EmmetやVSCodeの力補完機能には感動しました。こんなにも効率化出来る機能がついているなんて仕事が捗ること間違いなしです。同時にミスタイプも減らすことができて、エラーの可能性を減らしてくれることもあるでしょう。この機能を使い尽くすことが爆速コーターになれる一歩目かなと思いました。

返信する
なるなる

実際にやってみると、非常に複雑で覚えることも多いということがよくわり、多少不安になりましたが、最後まで諦めずに頑張りたいと思います。
なんとしても受講料は取り戻すぞ!!

返信する

コメントを残す

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