ドットインストールが評判通り難しい理由【はじめてのHTML】

TECH

ここではドットインストールが評判通り難しい理由を解説します。評判口コミや体験談で評価の高いドットインストールですが体験者によるとプログラミング初心者には難しく感じるようです。まずは【はじめてのHTML】編です。

 

この記事を読むと以下の疑問が解決します。

 

  • なぜ評判通りドットインストールは難しく感じるのか?
  • 逆に考えればドットインストールは簡単です
  • ドットインストール【はじめてのHTML】編の回答
  • ドットインストール【はじめてのHTML】の感想

 

それでは見ていきましょう。

スポンサーリンク

なぜ評判通りドットインストールは難しく感じるのか?

タグの説明が不足している

結論から言うと、難しく感じる理由は動画を見ながらコードを書くときに、一つ一つのタグの説明が随分と、はしょられているからです。

 

これはドットインストールのコンセプトが3分クッキングみたいなものなので、仕方がないのですが、初心者にはわかりにくいです。

 

タグのそれぞれの意味がわからないのに、次々と動画は進んでしまい、いつの間にかウェブサイトが完成している状態です。

 

初心者にはタグのそれぞれの意味がわからないため難しく感じます。

 

これを解決するには、タグを Google で検索してみましょう。

 

初心者は自力で画面崩れやエラーを解決できない

初心者にとっては画面崩れやエラーがでると、どこが間違っているのかがわかりません。

 

ブラウザの開発者ツールで画面崩れを解決する方法も説明されていましたが、これだけで解決できる初心者はなかなかいないでしょう。

 

最終的には解決能力も必要になりますが、どうしても解決できない初心者には完成したコードも教えてあげて、それと見比べて、どこが間違っているのかが分かる仕組みになっていると親切だと感じました。

 

そのため、以下の二点がドットインストールが難しく感じる理由です。

 

  • タグの説明が不足している
  • 初心者は自力で画面崩れやエラーを解決できない

 

逆に考えればドットインストールは簡単です

言い換えれば、動画を見てコピペをするだけなので簡単と言えば簡単です。

 

動画に出てくるタグを毎回間違えずに完コピすれば動作します。

 

たまに打ち込んだタグが間違ってますが、無料の動画を見た限りでは「補足情報一覧 」で修正していることが多いです。

 

そのため、ドットインストールに向いているユーザーは完コピができるひとです。

 

全く意味がわからなくても、完コピさえできればコードは動作します。

 

ドットインストール【はじめてのHTML】編の回答

この回答を VScode に張り付けて、あなたの打ち込んだ文字列と比較してみてください。

 

パラパラ漫画みたいに2枚を並べてページを切り替えると、どこが違っているのか分かりやすいです。

 

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charaset="utf-8">
  <title>タロウのポートフォリオサイト</title>
  <link rel="icon" href="favicon.ico">
  <meta name="description" content="太郎のポートフォリオサイトです。">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  
  <header>
    <nav>
      <ul>
        <li class="current">
          <a href="index.html">
          HOME
          <a/>
        </li>
        <li>
          <a href="about.html">
          ABOUT
          <a/>
        </li>
      </ul>
    </nav>
  </header>

  <section>
    <img src="img/taro.png" width="140" height="140" alt="タロウのアイコン" class="icon">
    <h1>山田太郎</h1>
    <p>UI/UXデザイナー見習いです</p>

    <div class="works">
        <section>
        <img src="img/work1.png" width="400" height="260" alt="勇者ゲーム">
        <h1>勇者ゲーム</h1>
        <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
          楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
        </section>

        <section>
          <img src="img/work2.png" width="400" height="260" alt="宝探しゲーム">
          <h1>宝探しゲーム</h1>
          <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
            楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
        </section>

        <section>
            <img src="img/work3.png" width="400" height="260" alt="神経衰弱ゲーム">
            <h1>神経衰弱ゲーム</h1>
            <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
              楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p>
       </section>
      </div>
  </section>

<footer>
  <ul>
    <li>
       <a href="mailto:exclaim21@hotmail.com" target="_blank">
       <img src="img/mail.png" width="20" height="20" alt="メール送信">
       </a>
    </li>
    <li>
       <a href="https://xn--u8ji8cwimisenhof.com/" target="_blank">
       <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ">
       </a>
    </li>
    <li>
       <a href="https://xn--u8ji8cwimisenhof.com/" target="_blank">
       <img src="img/photos.png" width="20" height="20" alt="写真サイトへ">
       </a>
    </li>
  </ul>
  <p>(c) Taro Yamada</p>
  </footer>

</body>
</html>

 

about.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charaset="utf-8">
  <title>山田太郎について</title>
  <link rel="icon" href="favicon.ico">
  <meta name="description" content="山田太郎について">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header>
    <nav>
      <ul>
        <li>
          <a href="index.html">
          HOME
          <a/>
        </li>
        <li class="current">
          <a href="about.html">
          ABOUT
          <a/>
        </li>
      </ul>
    </nav>
  </header>

  <section class="about">
    <img src="img/taro.png" width="140" height="140" alt="タロウのアイコン" class="icon">
    <h1>山田太郎</h1>
    <p>山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。山田太郎の紹介です。</p>
  </section>

<footer>
  <ul>
    <li>
       <a href="mailto:exclaim21@hotmail.com" target="_blank">
       <img src="img/mail.png" width="20" height="20" alt="メール送信">
       </a>
    </li>
    <li>
       <a href="https://xn--u8ji8cwimisenhof.com/" target="_blank">
       <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ">
       </a>
    </li>
    <li>
       <a href="https://xn--u8ji8cwimisenhof.com/" target="_blank">
       <img src="img/photos.png" width="20" height="20" alt="写真サイトへ">
       </a>
    </li>
  </ul>
  <p>(c) Taro Yamada</p>
  </footer>
  
</body>
</html>

 

/css/style.css

body {
  color: #333;
  font-family: Verdana, sans-serif;
  margin: 0px
}

header {
  text-align: right;
  padding: 10px;
  background-image:
  url(../img/header.png);
  height: 240px;
  background-size: cover;
  background-position: 50% 50%;
  margin-bottom: 60px;
}

header ul {
  margin: 0px;
  list-style-type: none;
  padding-left: 0;
}

header li {
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
}

header li > a {
  text-decoration: none;
  color: inherit;
}

header li > a:hover {
  color: royalblue;
}

.current {
  border-bottom: 4px solid royalblue;
}

section {
  text-align: center;
}

section h1 {
  font-weight: normal;
  margin-bottom: 8px;
}

section p {
  margin-top: 0;
  font-size: 14px;
}

.icon {
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 0 0 5px gray;
}

.works {
  width: 400px;
  margin: 60px auto;
  border-bottom: 1px solid gray;
}

.works > section {
  margin-bottom: 40px;
}

.works h1,
.works p {
  text-align: left;
}

footer {
  width: 400px;
  margin: 0 auto 60px;
}

footer ul {
  margin: 0px;
  list-style-type: none;
  padding-left: 0;
  float: left;
}

footer li {
  display: inline-block;
}

footer li > a:hover {
  opacity: 0.6;
}

footer p {
  color: lightgray;
  font-size: 14px;
  text-align: right;
}

.about {
  width: 400px;
  margin: 0 auto 60px;
}

.about p {
  text-align: left;
}

 

以上、ドットインストール【はじめてのHTML】編でした。

 

ドットインストール【はじめてのHTML】の感想

わたし個人的には、こんな短い時間でよくしっかりとまとめてあると感じました。

 

分かりやすいし、動画の声のトーンもいいし、字幕まで付いてるし、特に改善が必要な点もないのでは?と感じています。

 

あえて言うなら、月額をもっと安くしてほしいくらいです。

 

無料の講座に関しては、タグを組み立てていく工程や、出来上がった作品が面白くないので、月額 1000円はちょっと高いと感じました。

 

ドットインストール【はじめてのHTML】一覧

#01 プロフィールサイトを作ってみよう (01:35)
#02 ブラウザに名前を表示しよう (01:37)
#03 タグでマークアップしてみよう (02:12)
#04 imgタグで画像を表示しよう (02:18)
#05 全角文字に気をつけよう (01:58)
#06 文書全体につけるタグを見ていこう (01:55)
#07 文書に関する情報を設定しよう (02:48)
#08 文書の本文を書き込んでいこう (03:03)
#09 コメントタグを使ってみよう (02:18)
#10 header、footerタグを使ってみよう (01:38)
#11 sectionタグを使ってみよう (01:51)
#12 ulタグでリストを表現してみよう (02:52)
#13 外部サイトへのリンクを設定しよう (01:54)
#14 HTMLの仕様を確認してみよう (02:13)

 

それにしても、ドットインストール講師の声はダンディーで好きだけど、ドットインストールの無料講座で教えてくれる講師の英語の発音がけっこう間違っていると感じるのはわたしだけ?カタカナ読みよりもっとひどくね?バッサリ

 

人気記事 【無料含む】プログラミングスクールおすすめは3社【断言します】

人気記事 【WordPress】ブログの始め方【初心者でも簡単です】

コメント