【HTML編】プログラミング独学日記：2日目

08/11/2020 08/14/2020

こんにちは、アーノ君です！

今日の日記では実際に僕が書いたコーディングもシェアするよ。プログラミング独学中の初心者エンジニアの方はぜひ一緒に学んでいこうね。

この独学日記では、

ドットインストールでの学び・成果の報告
NoCodeの学び・成果の報告
gitHubに公開した学習プロセスのシェア

この3つを紹介していくよ。

僕はスキル0の初心者ザウルスだから、しばらくはドットインストールでの学びをシェアしていくね。

■ドットインストール：はじめてのHTML (全14回)
■GitHub：アーノ君のポートフォリオサイト
■ツイッター：アーノ君＠プログラミング・ザウルス🦖

スポンサードサーチ

【プログラミング独学】今日の学び

今日はドットインストールから以下を学んだよ。

HTML/CSSの概要を理解しよう

はじめてのHTML（全14回）

昨日の今日でプログラミングのコードを書いていくなんて、びっくりして少し火を吹いちゃったよ。

初心者ザウルスの僕には難しいかと思ったんだけど、全然そんなことなかったよ。
とてもシンプルにわかりやすく解説してくれるから、2回見返しただけで簡単にコーディングができたんだ。

プログラミング独学の成果【2日目】

以下は僕が実際に書いた（真似した）プログラミングのコードだよ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>アーノ君のポートフォリオサイト</title>
    <link rel="icon" href="favicon.ico">
    <meta name="description" content="アーノ君のポートフォリオサイトです。">
  </head>
  <body>
    <header>
      <img src="img/taro.png" width="120" height="120" alt="プロフ写真です">
      <h1>アーノ君</h1>
       <p>プログラミングを独学で勉強中のアーノ君です！</p>
        <ul>
          <li>
            <a href="https://www.noahnohakoblog.com" target="_blank">
             <img src="img/blog.png" width="20" height="20" alt="ブログサイトへのリンク画像です。">
            </a>
          </li>

          <li>
            <a href="https://www.instagram.com/j_s_noah/" target="_blank">
              <img src="img/photos.png" width="20" height="20" alt="写真サイトへのリンク画像です。">
            </a>
          </li>
        </ul>
    </header>

    <section>
      <!-- 作品紹介 -->
      <h1>WORKS</h1>
  
      <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>
    </section>

       <footer>
         <p>©︎ J.S.Luciano All Rights Resereved.</p>
       </footer>
  </body>
</html>

そして下のサイトが、このプログラミングで出来上がるウェブサイトだよ。

■GitHub：アーノ君のポートフォリオサイト

20年前のウェブサイトって感じで、決してかっこいいサイトとは呼べないね。

でも安心して。これから学んでいく”CSS”というプログラミング言語を使って、装飾を加えていくみたい。

ワクワクするね！

ちなみに誰かのコードを真似して書くことを『写経』と呼ぶみたいで、実際にこれで一人前エンジニア、プログラマーになったよって人がたくさんいるんだ。

だから僕もたくさんの人の真似をして、早く一人前を目指すよ！

アーノ君の所見

今日の詳しい学びはこちらだよ。

HTMLファイルの作成
コーディングアプリでコードを写経

タグについて
文字コードについて
ページのソースについて

今回の動画は全部で30分くらいで、初心者の僕にとっては少し盛りだくさんだった印象を受けたよ。

ワクワクのせいで14個の動画を一気に進めちゃったけど、僕の中で消化しきれていない感じがする。

だから、次からは2回、3回に分けて、ゆっくり学んでいくよ。

自分のペースで進められるのは、独学でプログラミングを勉強するメリットでもあるね！

次回予告

次回はついにCSSのチャプターに進んで学んでいくよ！
そっけないサイトに色味や装飾を付けてくれるみたいで、とても楽しみ。

ところで、HTMLやCSSは”マークアップ言語”といって、プログラミング言語とはまた少し違うみたい。

恐竜界じゃみんな同じに見えるけど、人間はたくさん区別できて賢いなー。

✅今日のおさらい