生涯、学習していきたい

2018年はプログラミング学習に凝っています。

progateでhtmlとcssについて学ぼう中級編1

こんにちは、初めてのことがいっぱいだと毎日が新鮮。

ぽんきちさんです。

今日は、progateというサイトでhtmlとcssについて学ぼうと思います。

f:id:ponnkichi:20171222215922j:plain

[フリー画像素材] 家電製品, PC / パソコン, ノートパソコン ID:201410032100 - GATAG|フリー画像・写真素材集 4.0

progate.com

 道場コースもおすすめ

 

初級編を学んだあとは、

自力でプログラミングしていく「道場編」というものがあります。

押忍!

f:id:ponnkichi:20171221101629p:plain

これ、できる気がしない。。

これは、ひっそりと涙をぬぐいながら一人でやろうと思います。

 

というわけで、今日からはhtml&css 中級編にチャレンジしたいと思います!

 

中級編 目標物を確認する

最初は、「こんなデザインにするよ」ということを確認します。

f:id:ponnkichi:20171223082339p:plain

なにこれかっこいい!

こんな画面を作ることができるようになるの?

さすが…中級編…。

中級編 全体のレイアウト

そして終了のお知らせ

f:id:ponnkichi:20171223082450p:plain

全体のレイアウトはこのように作ります。

初級編のところでは「main」のところが3つの「wrapper」で区切られています。

f:id:ponnkichi:20171219214742p:plain「…ラッパー?」

別のものが頭に浮かんできますが、きっと間違っているはずです。

進みましょう。

f:id:ponnkichi:20171223082705p:plain

初級編で<div class~"header"></div>と習ったタグは

<header></header>と書くといいよ、と教えられます。

ヘッダー、フッターという専用タグがあるらしいです。

書くのが楽になったとほっとする反面、

「なんでも専用のタグにできるの?」という疑問がわいてきます。

top-wrapperはタグになっていないですよね。なんでもというわけではないのでしょうね。

f:id:ponnkichi:20171223083106p:plain

さっそくhtmlを書いていきます。

できた!と思ったらバツ印が。何かと思ったら=が〜になっていました。

ほかにも、ハイフン(-)でつないでいないとか、

message のeがaになっていたりとかとにかくミスタッチが多い。

これをゼロから書いていくってどんだけ大変なんや!

プログラマー様たちを尊敬します。

f:id:ponnkichi:20171223083357p:plain

ワクワク進めていたら、

残念ながらここから先は有料会員限定ということでした。

 

無料の範囲は勉強内容を公開させていただきましたが、

さすがに有料部分を公開するわけにはいきません。

というわけで、中級編はここまでになります。

 

f:id:ponnkichi:20171219214742p:plain「え、もう終わるの?」

他のレッスンをざっくりご紹介

f:id:ponnkichi:20171223083622p:plain

html&cssのほかにも、いろんな言語の勉強ができます。

f:id:ponnkichi:20171223083700p:plain

すごい!たくさんあるなあ。

 

次に学ぶとしたらどれだろう…。

そもそも自分に何が必要なのかよくわかりません。

「逃げ恥」の平匡さんはphpをしていたよ、という証言を友人からいただいておりますので

名前を知っているものから学ぶというのもアリかもしれませんね。

 

不完全燃焼な感じは否めませんが

今日はここで終了いたします(白目)。