WEB系転職 スキルアップ ドットインストール プログラミング ホームページ制作・WordPress

【勉強ノート】ドットインストール①「HTML /CSSの学習環境を整えよう」学習で、できる事、調べた事 まとめ

異業種からITエンジニア、ブロガー転換を目指す40歳おじさんの勉強ノート。

スキル書き溜めとして、簡潔まとめ。

レッスン内容

Chromeブラウザを導入しよう

VS Codeエディタを用意しよう

プログラミング用フォントを導入しよう

ファイルの拡張子を表示させよう

ドットインストール HTML/CSSの学習環境を整えよう より

身につくスキル(これが出来る)

  • ブラウザのインストールが終わる
  • テキストエディタの基本設定が終わる
  • ソースコードが見易くなる
  • 拡張子表示でファイルの種類が一目で分かる

勉強になったこと

① テキストエディタ:VS Code

マイクロソフトが無料で提供しているテキストエディタ

良いところ:次のレッスン「はじめてのHTML」で実践しながら学べる。

> 過去の反省点

  • ドットインストールを知らなかった頃の自分はMacのAppStoreから無料エディタを探し回った
  • 自分で見つけたテキストエディタはVS Codeではなかった
  • 探し回る時間や他のエディタの使い方を覚える時間がムダだった

② プログラミング用フォント:Ricty Diminished

  • プログラミング用フォントの1つ
  • 全角スペースが可視化される
  • スペースが全角か半角か、見分けがつく
  • 全角スペースの混入はバグの要因!

説明不足と思ったこと、調べたこと

① Ricty Diminishedの良さ

  • 混同しがちな文字や記号 が見やすいフォントデザイン
  • 半角と全角の大きさが1:2
  • 文字の縦並びが揃って見やすくなる(等幅フォント)

② テキストエディタ、ソースコードとブラウザ自体の説明がない

> テキストエディタ

  • プログラミング言語で「何を」「どのように」表示するのかをソースコードとしてテキストエディタに書き込む
  • ソースコードをファイルとして保存する

> ブラウザ

  • ソースコードを記述したファイルを読み込む
  • ソースコードの指示に従って、ブラウザ上に内容を表示する

WEBページが表示される仕組み よく分からない人は

イメージとして予備知識があった方がいいと思います。

Amazonで試し読みで勉強できるのでリンクを貼っておきます。

  • WEBページが表示される仕組み
  • HTMLとCSSの役割
いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 「いちばんやさしい教本」シリーズ

-WEB系転職, スキルアップ, ドットインストール, プログラミング, ホームページ制作・WordPress

© 2020 中堅サラリーマン・コツコツ頑張るブログ