progateも初級が終わり、次は中級にいこうかというところ。
でも、実際どこで学ぶのがいいんだろ？
ということで、Twitterでイケメンのお兄さんに紹介してもらった「ドットインストール」にも並行して挑戦。
まずはprogateと同じく無料分だけやってみて、udemy・progate・ドットインストールの使いやすいものを有料版にして進めていこうかなあ。
スポンサードサーチ
さくっと登録して開始
登録作業
引用：ドットインストール公式HP Copyright © 2011-2020 dotinstall.com. All Rights Reserved.
ちょっとprogateと雰囲気が似てる。シンプル＆スタイリッシュな感じ。
ユーザー名・パスワード・メールアドレスだけで登録完了。
プログラミングの前準備
まさかのchrome導入からのスタート。
でもこのくらい丁寧なほうが初心者としては安心だね！
progateと違って、完了・未完了の切り替えは手動。
元から準備が整っている項目はどんどん完了にしてすすめていこう。
動画中心だからわかりやすい
優しそうなお兄さんの声ですすめられる1分～2分くらいの短い動画。
かなり細かく区切ってあって、設定などは動画で一緒に進められるのでかなり親切。
～～いきま しょうー。とう独特のアクセントがちょっと癖になる。
初心者に優しい補足機能
それでもつまずきポイントがある場合は、コメントがでる安心設計。
画像でいうと左上に「この動画には1件の補足情報があります」と書いてあるのがそれ。
これは、動画通りにやった場合でも、環境によってはできない場合があるときにでるみたい。
ちょっとみえないけど、この動画の下に補足情報が書いてあるので、うまくいかない場合にはそこを参考に。
今回の動画では、フォントの導入失敗？がある場合があるので、その場合はVScodeを再起動してね という補足が書いてあった。
初心者がつまずきそうなポイントを、先回りして補足いれてくれるのは本当に助かるね。
ものすごい気になる音声切り替え
そして気になったのは有料版の音声切り替え機能！
有料版にすればやさしいお姉さんに教えてもらえるのかな・・・
なかなかすごいところで差別化を図ってくるなドットインストール。侮れない。
はじめてのHTMLに突入
ここからが本番。ＨＴＭＬを勉強していこう。
レッスン内容はこんな感じ。
#01 プロフィールサイトを作ってみよう (01:34)
- 完成版の確認
- 開発ツールの確認
- 画像素材の確認
#02 ブラウザに名前を表示しよう (01:37)
- フォルダの設定
- index.htmlの作成
- ファイルの編集
- ブラウザで確認
#03 タグでマークアップしてみよう (02:11)
- タグ
- マークアップ
- 打ち間違えたときの挙動
#04 imgタグで画像を表示しよう (02:19)
- imgタグ
- 属性
#05 全角文字に気をつけよう (01:58)
- 全角文字に関する注意
- 全角空白に関する注意
#06 文書全体につけるタグを見ていこう (01:55)
- DOCTYPE
- html
- head
- body
- 字下げ
#07 文書に関する情報を設定しよう (02:47)
- 文字コード
- title
- favicon
- description
#08 文書の本文を書き込んでいこう (02:58)
- body
- 要素の確認
#09 コメントタグを使ってみよう (02:18)
- フッターの記述
- コメントタグ
- ページのソースを表示
#10 header､footerタグを使ってみよう (01:39)
- header
- footer
#11 sectionタグを使ってみよう (01:51)
- section
#12 ulタグでリストを表現してみよう (02:51)
- ol
- ul
- li
#13 外部サイトへのリンクを設定しよう (01:54)
- a
- target属性
#14 HTMLの仕様を確認してみよう (02:13)
- MDN
- HTMLの仕様確認
引用：ドットインストール Copyright © 2011-2020 dotinstall.com. All Rights Reserved.
動画と一緒に進むのでつまずくことはないが・・・
ひとまず半分ほど進んだ。
動画とリアルタイムで同時に進んでみようとおもったが、流石にお兄さん速い！
無理せず止めながら進もう。
用語のチェックは必要かも
しかしやっていく中で思ったのは、用語などへの言及は少な目かな？という感想。
前のステップでprogateをやっていたので、お兄さんに
「widthはいくつでheightはいくつにしましょうー」
といわれてもなんとか対応できたものの、もしここが最初だった場合は少し混乱するかもしれない。
これに関しては調べながら進めばいいのかもしれないが、例えば有料会員には「この動画で使用した用語一覧と説明」とか見れる機能あれば有料会員になりたくなる気がする。
ただ、動画で一緒に進んでいるので、意味は分からなくともつまずくことはない。
ショートカットも個性？
ショートカットに関しては、監修しているプログラマーさんが好きなショートカットが紹介されるのかな？
progateでもドットインストールでも、違ったショートカットを紹介して多用していた。
タグはたくさん書くから、今のところtabでタグを補填してくれるやつとコメント切り替えのctrl+/が多用しそうで便利だけどどこでも使えるのかなー？
shift+alt+矢印のやつは便利なんだけど、忘れてしまいそう！
とりあえずHTML初級完走
動画時間的には30分くらいだったけど、いろいろと調べたり止めたりしながら進めたから大体1時間半くらいかかった。
サイトによっていろいろ違う
気になった点は<div>と<section>の違い。
調べてみたら、<div>は意味合いは持たせないただのくくりとして使い、<section>は意味合いの異なる「章や段落」としてわけるときに使うらしい。
ドットインストールでは<section>を多用、progateでは<div>を多用していた。
見比べてみると、そういったところも違うからなんか面白い。
SEO的にはどっちが正解？
あと一つ<h1>タグについて。
ドットインストールでは<section>ごとに<h1>を指定して使っていた。
でも、SEOを色々調べていた時には、<h1>の使い過ぎはよくないと書いてあったし、実際ドットインストールでも<section>で囲う前は<h2><h3>と続いていた。
<section>を使うことで、<h1>の多用ができるようになるんだろうか？
これはもうちょっとレベルが上がらないとよくわからない。
次回はドットインストールの初めてのCSSに挑戦しよう。
それでは、また。
