見出し画像

デイトラ 初級編DAY1〜DAY4 で学んだこと

まさ

デイトラの初級編DAY1〜DAY4で学んだことを簡単にまとめてみる。

DAY1

まずはデイトラ内のお作法を学ぶ回。
大きく以下を学んだ。

  1. Slack加入（ここでメンターに質問が可能）

  2. Slack内での質問の仕方（プログラマーの思考法）

  3. Google Chromeをインストール（さすがに元々使ってる笑）

  4. エディタ「VS Code」をインストール（これ便利）

  5. Hello Worldの表示（いつの時代も最初はこれだな）

  6. ウェブサイトが表示される仕組み（HTMLとCSSについて）

大学時代にやったことを思い出しながらやったのでサクサク完了。

「VS Code」ってエディタは今回始めて触ったが、めちゃくちゃ便利。

DAY4で「VS Code」の環境構築をするのですが、この機能性・軽さ・拡張性はやばい。
私の2020年のMacBook Air（intelコア）でも問題なくサクサク動く。


DAY2

HTMLの超基礎を学ぶ回。
大きくは以下を学んだ。

  1. タグの書き方

  2. 見出しと段落（hタグとpタグ）

  3. リンクの付け方（aタグ）

  4. 画像の表示（imgタグ）

  5. リストを表示（ul・liタグとol・liタグ）

  6. コメントを入れる（<!-- -->によるコメントアウト）

  7. グループにして整理する（divタグによるグループ化）

  8. タグに属性をつける（特にid、class、src、href属性）

  9. 【まとめ】HTMLの書き方基本（アルパカさんの記事）

特に今後HTMLを組んでいく際に重要になるのは

  • divによるグループ化

  • タグの属性設定

だと思う。
多分。

まだあまりに初級編過ぎて特に書くことがない。笑

HTMLの書き方基礎で紹介されているアルパカさん（@engineeraru）の記事は超分かりやすい。
こういう記事書かないとな。


DAY3

CSSの超基礎を学ぶ回。
大きくは以下を学んだ。

  1. CSSを書くための基本設定

  2. CSSの基本ルール①：セレクタ・プロパティ・バリュー

  3. CSSの基本ルール②：名前（class）で指定する

  4. CSSの基本ルール③：子孫要素を指定する

  5. CSSの基本ルール④：ボックスレイアウトとは

  6. 主要なCSSプロパティを実際に使ってみよう！

  7. 【まとめ】CSSの基本

CSSって私が大学時代にHTML触ってた時にはメジャーじゃなかったよな、と思い調べるとやはり2000年代半ばくらいに広まったみたいだ。

CSS　＝　Webページの見栄えを整える部分を外部リソースとするもの

Javaのオブジェクト思考みたいなもんか。
もうほとんどJava覚えてないけど…。

CSSは相対パス指定が基本。
クラスでの指定。

この辺は大丈夫。

個人的な注意事項は子孫要素の中で、直属の子孫要素だけを指定する時！
これは長いコードを書き始めたら絶対見ミスるポイントだろうな。

そしてボックスレイアウトについて。
これも混乱しそうだなー。
思ったとおりに文字や画像が表示されない未来が目に浮かぶ…。笑

主なCSSプロパティ、こんなにあるんかよ…。
やってたら絶対覚えるとは思うけども。
おじさんの記憶力だとツラい…。
ググりまくるしかないな、こりゃ。

CSSのまとめが秀逸。

  • セレクタ・プロパティ・バリューの三つの要素がある

  • セレクタの指定方法は大きく分けて三つ！「要素で指定」「classで指定」「子孫を指定」の３パターン

  • Webサイトはボックスで敷き詰められている（ボックスレイアウト）

  • ボックスはコンテンツエリア・padding・border・marginでできている

最後に紹介されているまたまたアルパカさん（@engineeraru）の記事が秀逸。

いつもありがとうございます。笑


DAY4

コーディングの為の環境構築をする回。
大きくは以下を学んだ。

  1. VS Codeのプラグインをインストールしよう！

  2. ファイルを自動保存するようVS Codeの設定を変えよう

  3. Live Serverの使い方

  4. 演習でLive Serverの威力を実感しよう！

  5. Chromeの検証を使うことに慣れよう！

  6. Emmetを理解しよう！

  7. 振り返りに役立つ学習記事紹介【HTML/CSS基礎編】

各種VS Codeのプラグインをインストール。
流石にコンテンツの内容に触れるので一覧の記載は辞めますが、こんなに拡張機能あるのか。

もうこのプラグイン使いこなしたら、爆速コーダーになるにはあとは自分のスキルのみじゃないですか！
嬉しいけど言い訳できんね、こりゃ。
ここまで面倒みてくれるデイトラさん、凄いわ。

Live Serverヤバい。
これマジで便利。
リアルタイムで修正が見れる。
良い時代になったもんだ。笑

クロームの検証も便利。
特にChromeの検証で変更したソースコードはそのままファイルに保存することができる機能はヤバい。
これ開発にめちゃ便利だと思う。

Emmet便利だけど、手が覚えるまで時間かかりそう。
でも覚えたら書き間違い減るし、何よりコーディングスピードが圧倒的に上がりそう。

そして大好きアルパカさん（@engineeraru）のデイトラの学習記事。
いや学習記事もレベル高いな。笑


DAY1〜DAY4はこんな感じ。
一気に書いたから一つ一つが薄くなってしまった。

次からはもうちょっとこまめに書こう。

この記事が気に入ったらサポートをしてみませんか？