【DAY1】30DAYSトライアルに挑戦〜今日から再スタート【東京フリーランス】

【DAY1】30DAYSトライアルに挑戦〜今日から再スタート【東京フリーランス】

東京フリーランスの30DAYSトライアル(通称デイトラ)に挑戦中です。プログラミング学習初学者の私が自学自習でどこまでできるか挑戦します。自分のモチベーション維持と忘備録を兼ねてログを残しつつ、リアルな感想やつまづき、疑問点などをレポートします。

【DAY1】今日のお題『Progate HTML & CSS 初級編(4章まで)』をやりきろう!

東京フリーランスの30DAYSトライアル(通称デイトラ)今日から再スタートです。プログラミングの独学は挫折しがちなのが問題点とよく聞きますが、私もノロノロスピードの学習ではありますが継続していきたいと思います。

東京フリーランスの@showheyohtakiさんのツイートを見て、またプログラミング学習を再開しました。30DAYSトライアルの2期目がはじまるということで、リアルタイムで他のみなさんと一緒にがんばってみたいと思います。

ちっとも頭に入ってこなかったりもしますが、やっぱりマスターしたいんですよね。こんな私でも。

並行してブログでどこまでレポートも出来るか未知数ですが、ともかく課題だけは、こなしていきたいと思います。

頑張るー!!

 

 

今日は2時間でProgate(プロゲイト)のHTMLとCSS初級編1〜4章までをやりきるのが目標です。

初日ですから、さすがに大丈夫なはず…。忘備録として、私が間違えたポイントなども記録しておきます。

 

Progate初級編はこちらから

『第1章HTMLに触れてみよう!』の内容

  • HTMLに触れてみよう!
  • 見出しと段落の種類と指定
  • リンクの設定の仕方
  • 画像の貼り方
  • リストの表示方法

HTMLの文章の型から入るのではなく、その中に入る最低要素の中身から解説があります。

分かりやすい単純な要素から入り口になっているので、全くの初心者でも入りやすいです。

href属性は””(ダブルコーテーション)忘れない!

『第2章CSSに触れてみよう!』の内容

文字の色

文字の大きさと種類

高さと幅と背景の色

タグに名前をつける

見た目を変えるために必要なCSS。最低限のルールは頭に入れておきたいです。

タグとかクラスとか新しい言葉も出てくるので、作業しながら覚えます。

 

class名でCSSを指定する場合は先頭に「.」(ドット)を付ける。タグの場合はいらない。結構忘れがちだから注意。

半角スペースにも注意。

『font family』じゃない『font-family』だ!『font size』じゃない『font-size』だ!

フォント名に半角スペースが空く時は””で囲むのを忘れない

『r』アールと『l』エルのスペルミス多すぎ!

幅高さ。widthは読み方はワイズ?ウィズ?未だに謎。heightはハイト。

『第3章レイアウトを作ろう!』の内容

  • HTMLの全体構造
  • HTMLの全体構造(2)
  • 全体のレイアウト

ようやく文書宣言などが出てきて、いわゆるページの体裁になりはじめます。

形になって画面に表示されるとうれしいですよね。

 

<>に注意。もしかして、全角になってない?

「div」は「division」の略。divisionは分割のこと。

『第4章ヘッダーを作ろう!』の内容

  • ヘッダーの構造
  • ヘッダーのレイアウト
  • ヘッダーの余白

 

1から3章は4章のためにあるって後からわかるので頑張ってやろう

リストは縦並びだけじゃない。横にも並べることが出来る。

リストの行頭の・は消すことが出来る。

余白はpaddingを使う。padding-top、padding-bottom、padding-left、padding-rightと方向を表す言葉をつけると、その方向のみに余白が追加される。

もっと簡単な書き方は、padding :30px 40px 50px 60px;のようにまとめて書く書き方。数値はそれぞれ上、右、下、左の順で余白の数値を表している。

【感想】30DAYSトライアル1日目を終えて

progate-day1

所要時間:2時間程度(スキマ時間に学習)

Progateは画面が見やすい

Progateは初体験でした。説明が小分けになっていて、読んだらすぐに問題を解いて、答えあわせもその場で出来て、わからなかったらすぐにもどってもう一度説明のスライドを読むことが出来るのが自習にはぴったりな感じです。

一度に読む説明の量は少なめで、ビジュアルもスッキリときれいなので画面が見やすいです。

リアルタイムで自分で打ったコードが右側に反映して見られるのも、わかりやすくていいと思います。

すでに地味なミス多発

主にタイプミスや、全角のまま記号を打つなど地味な間違いが多いです。でも小さなミスでもエラーになるのがプログラミング。

エラーが出たときに、なぜエラーが出たのかじっくり考えることが学びにつながります。自力で解決出来たときはうれしいものです。

また、もうギブアップ!と思って答えを見たくなりますが、

答えを見ますか?
※ 答えを見る前に、まずはスライドやヒントなどを確認してみましょう。

と一言あるので、もう少し粘ってみよう。って思えるところも地味にいいと思います。

今まで基礎の基礎の部分ばかりを色々な教材で繰り返すような学習になっていました。

この先の山をぜひ超えたいと思っています。

今日はまだ楽しんで勉強する余裕がありました。でも、初日にも関わらずノーミス合格はなしでした。結構つまらないタイプミスが多いです。でも、気がつかないと「あれ?表示されない」ってなりますので、丁寧に作業しないといけませんね。

この記事を書くときに一部分はテキストモードにして書いてみました。いつもよりブログを書くのに時間がかかりました。

少しづつでも、体に馴染んでいくように課題を解くだけでなく、少しづつでも実際に使ってみたいと思います。

ドットインストールとの違い

Progateの1日目の課題は、ゆったりに感じました。お手本も解説も十分にあり、いわば答えがある形の学習なので当然かもしれませんが、自分なら今日学んだことを生かして何をしたいか。ということは常に頭に入れて勉強した方がいいと思いました。

Progateとドットインストールをくらべて感じたのが、『音』の存在です。ドットインストールはナレーション付きの動画なので、耳から入る情報が意外と頭に残ることに気がつきました。その点、Progateは音がないので自分で音読してもいいかも。

小学生の宿題の定番に音読ってあると思うんですが、脳科学的に意味があるからやらせるんですよね。大人も同じかも。Progateの方がインターフェースが綺麗で使いやすいと思いましたが、何となく少し物足りなく感じるのは『音』の存在じゃないかなと思いました。

【DAY1】できるようになったこと

リストで文字を表示

画像の配置とリンク

文字のサイズと色と書体の指定

基本的なHTMLの構造の理解

30DAYSトライアル挑戦してみる?

記事を読んで興味をもった方はこちらの東京フリーランスのサイトに30DAYSトライアルについて詳しく書いてあります。

 

【DAY2】の記事はこちら

デイトラカテゴリの最新記事