生涯、学習していきたい

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

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

こんにちは、なんでも初めてのぽんきちさんです。

 

今日から、「progate」というサイトで

プログラミングについて学びたいと思います。

f:id:ponnkichi:20171222213745j:plain

[フリー画像素材] 人物, 子供, 赤ちゃん, PC / パソコン, 家電製品 ID:201309162000 - GATAG|フリー画像・写真素材集 4.0

progateのサイトはこちらです。

progate.com

 

 

実は、かつて「progate」でhtmlを学んだことがあるので、

厳密には「初挑戦」ではありません。

でも…

f:id:ponnkichi:20171215094103p:plain「途中で挫折しているから、ほとんど初挑戦と言っていい」

(こじつけ)

ではさっそく、今回学びたいhtmlとcssに挑戦してみましょう♪

 

ログイン

ログイン画面が出てきます。

f:id:ponnkichi:20171217221231p:plain

facebooktwitterでもアカウントが作られるみたいですね。

私は、以前に取り組んだことがあるはずなのでemailからログインします。

f:id:ponnkichi:20171215094103p:plain「パスワードどこだっけ」

パスワードをどこに控えていたかを忘れ、

紙に書いておいたのを発見するまでに数十分を費やしました。

 

…パスワードの保管について考え直さなくては。。

 

ログインしてみると、どうやらHTMLとcssに関しては初級編を卒業していたようです。

f:id:ponnkichi:20171217221511p:plain

まるで記憶にないのでやり直すこととします。

 

HTML&CSS 初級編

まずは基本

f:id:ponnkichi:20171218215318p:plain

最初はこのような画像が出てきます。

まずは学んでから、コードを自分で書いていくというスタイルです。

ちなみに、progateの推奨ブラウザはGoogle Chromeだそうです。

Safariを使っていてすみません)

 

f:id:ponnkichi:20171218215522p:plain

最初は、タグの使い方のレッスンからでした。

解説を読んだら、実践編です。

f:id:ponnkichi:20171218215706p:plain

レッスン1は、

「Hello World」をh1タグで囲むことから始まりました。

f:id:ponnkichi:20171218215805p:plain

h1タグで囲めたので無事合格!

 

 

f:id:ponnkichi:20171215094103p:plain「ワクワクが止まりません♪」

私は全くプログラミングがわからない人ですが、

最初はこのような感じから始まるので

非常にわかりやすいです。

f:id:ponnkichi:20171218220525p:plain

リストを作成したり、

f:id:ponnkichi:20171218220957p:plain

cssの書き方も丁寧に教えてくれます。

htmlの全体構造

リンクのはりかたや画像の入れ方、

簡単なcssの設定の仕方を学んだら、

いよいよ全体構造です。

f:id:ponnkichi:20171218221623p:plain

f:id:ponnkichi:20171215094103p:plain「…。」

 

は!いかんいかん!寝るところだった!

さっきまで簡単だったので、いきなり難しくなった気にもなるというものですが

これはまだ初級編の入り口です。ここで寝るわけにはいきません。

気をとりなおして説明を読んでいきます。

f:id:ponnkichi:20171218222106p:plain

head要素の中身を学び…

f:id:ponnkichi:20171218222336p:plain

レイアウトを学び…

 

htmlとcssを書きます。

f:id:ponnkichi:20171218223156p:plain

f:id:ponnkichi:20171218223300p:plain

今回やるべきことは、

コメントがかれているので、非常にわかりやすいです。

f:id:ponnkichi:20171218223300p:plain

cssもわかりやすい!

 

 

復習のはずだったのですが、

きれいさっぱりと忘れていたので

これを機会にまた学び直そうと思いました。

f:id:ponnkichi:20171215094103p:plain「ここまでやっただけでも、

はてなブログのカスタマイズの意味がわかってくる感じですよね」

 

初級編は全て無料で、中級編は途中まで無料で学ぶことができます。

まだまだ初級編も終わりそうにないので、がんばってみたいと思います。

 

progate.com