【DAY1】プログラミング自習室〜HTMLの基礎【ドットインストール】

【DAY1】プログラミング自習室〜HTMLの基礎【ドットインストール】

ドットインストールでプログラミングを学びはじめました。ノートをとる代わりにブログに記録します。同じように学習をはじめた方や、はじめたい方の参考に。また、初心者に教えている方の参考にもなるかもしれないリアルな学習ログです。

【DAY1】学習環境を整えてHTMLの基礎を学ぼう!

HTML/CSSの学習環境を整えよう [Windows編] [macOS編] (全5回)

ドットインストールでは、Visual Studio Codeというマイクロソフトの無料エディタで学習します。以前はATOMというエディタを使っていたので、ATOM環境で説明された動画も多いです。動画と同じ環境で学習したいならATOM環境もあった方がいいかも知れません。

ソフトのインストールや環境設定から丁寧に説明があります。ここが全くのゼロスタートからでも学習がはじめられる点です。

動画を見終わったら完了済ボタンを押しましょう。自分の習得状況がグラフになって表示されるので、達成感がありますよ。ちょっとしたことですが、結構うれしいものです。

HTMLの概要を理解しよう〜はじめてのHTML (全15回)

まずは、プロフィールサイトを作ってみようという課題をベースに学習を進めます。15本の動画が用意されています。1本の動画はおよそ2〜3分。

課題に必要な素材も用意されていてダウンロードができるのですぐに学習に取りかかれるのも便利です。

動画に沿って同じように次々と作業を進めましょう。

プレミアム会員の方はソースコードも見られるので、一度自力でコードを書いてみて、うまく表示されないときに正しいコードを確認することが出来ます。一回は、どこがま違えているのか悩んでから答えは見た方がいいと思いますが、何時間も悩んでしまうよりなら、答えを見て納得出来たらもう一度自分で書いてみる方が、頭に残ると思います。

また練習で一度課題通りにサイトを作ったら、復習でオリジナルでページを作ってみるのもいいですね。

初心者のミスあるある

半角と全角に気をつける。うっかり混ざっている全角の記号やスペースのせいで画像が表示されないなんてことも。

プログラミングに便利なフォントがある

Ricty Diminished はドットインストールで学習をはじめる際に環境設定で推奨されているフォントです。インストールした状態で全角スペースをエディタに入力すると目で見てわかるように表示されるので、ミスに早く気がつくことができるのがいいところです。

他にも調べると色々なフォントがあるようです。ポイントは可読性が高いこと。アルファベットのオーと数字のゼロなど読み間違い安い文字が区別しやすいように設計されたフォントがプログラミングの世界では人気のようです。

ショートカットも覚えたい

どんなソフトにも言えますが、ショートカットを覚えて無意識レベルで使えるようになると作業のスピードが上がるので、覚えて使えるようにしたいです。

 

【DAY1】今日覚えたこと

favicon(ファビコン)の作り方

32ピクセル✕32ピクセルの画像をpng等で作成してicoに変換してくれるサイトを活用して変換する。

 

コード内にコメントを残す方法 

<!– –> で囲むと画面には表示されないコメント(メモ書き)をコード内に残せる。

⌘(コマンド)+/で文字列をコメントに変換することができる。

 

リストタグ ulとolの違い

ol は (o)rdered (l)ist の略。連番付きリスト

ul は (u)nordered (l)ist の略。箇条書きリストのこと。

 

HTML の仕様を確認する方法

Mozilla Developer Network(MDN)で確認。

課題で作ったサイトはこんな感じです

サーバーにアップしていないので、画像になります。まだCSSで見た目の指定をしていないので、ただ要素が並んでいる状態です。内容は確認できますが、これではつまらないですよね。次回はCSSを学んで、見た目を整えていきます。どうなるのかな。楽しみです。

ドットインストールはじめてみる?

私もドットインストールでも自習しています。現在、完了数は200ちょっとです。まだまだ、これからです。

自分のペースで学習できます。初級講座は無料です。ちょっとでも興味があったらはじめてみませんか?

 

ドットインストールのサイトはこちらから

ドットインストールカテゴリの最新記事