遊びは終わりだ。

おっさんが自由気ままに更新します。

そろそろ人生の遊びは終わりだ…

超初心者のHTML & CSSのLearning story Part.1

どうも、Yoshiです。

 

私、通勤にはバイクを使用しているのですが、まだ朝晩は少し肌寒さを感じております。もう6月半ばですが、半袖で気持ちよく風を切るのはお預けのようです。

 

ってか、オイル交換いかないと。

 

さて、ちょっとバタバタしましたが、前回お話したように、「超初心者のHTML & CSSのLearning story」始まりました。

”超”が付くほどの初心者である私が一からwebデザインを学んでいこうという内容になっております。

前回の記事はこちらよりご覧ください。

 

to-many-hopes.hatenablog.jp

 

という訳で今回より私の学習過程を書いていきたいと思います。

 

「Progate」の使い方

「Progate」へのログインとHTML初級編

 ネットで学習できるサービスとして、「Progete」さんにお世話になりたいと思います。この方が色々と都合がいいという部分もありますのでね。

 

前回はログインしてマイページまで進めました。

f:id:to-many-hopes:20170617123241j:plain

これがログイン画面。僕は「Facebookで登録」にてログインしました。

 

ログイン後の画面がこちら。

f:id:to-many-hopes:20170617141644j:plain

 

これがマイページのトップ画面になります。

早速「レッスンを始める」をクリックして進みます。

 

スライドでわかりやすく解説してくれる!

f:id:to-many-hopes:20170617145527j:plain

するとスライドに切り替わってこんな画面に。

何ともシンプルですが見やすくてとてもいい感じです。

一番右下にある矢印をクリックすると、次のページへ

f:id:to-many-hopes:20170617145802j:plain

「プログラミングの世界へようこそ」

ということで、「HTML」と「CSS」を学ぶだけでトップページのような見た目のサイトが作れるようになると。

こんなページがいきなり作れるのか…というほどのクオリティ。

凄く難しそうなイメージがしますが、作れるというのですから頑張ってみたいと思います。

f:id:to-many-hopes:20170617150004j:plain

さらにスライドを進めると、「HTMLの仕組み」へ。

こんな感じで左側にコードが表示され、そのコードの結果が右側になります。

という感じでとても親切でわかりやすい解説になってます。

内容を読んで、今回学習することを把握しスライドを進めていくと早速演習に入ります。

 

スライドで今回の学習テーマをチェックしたら、いざ演習へ!

f:id:to-many-hopes:20170617150402j:plain

 

 「演習に進む(Enter)」をクリックすると実際にエディタの画面に!

f:id:to-many-hopes:20170617150436j:plain

 

 こんな感じで、Progateは別でエディタの必要がなく、完全にネット上だけで学習ができてしまうんです。

左側には「今回やること」が表示されてます。

今回のチャプターでいうとここになります。

 

f:id:to-many-hopes:20170617150758j:plain

 今回学習することは、エディタに記入してある「Hello World」というテキストを開始タグ<h1>、終了タグの</h1>で囲みましょう。という内容。

これを真ん中のエディタに記入していくという流れになります。

もし、わからない場合は、「スライドで確認」をクリックすれば、またスライドを見て確認することができるというもの。

いやーホントに便利。

 

 

実際に使ってみた感想

これだとつまずかずに勉強できるかも!?と思わせるサービスが盛りだくさん!

こんな感じでまず始めに「このチャプターでは〇〇を学びます」ということをチェックしてから、実際にコードを打ち込んでみる。という流れで学習していくことができるwebサービスなんですね。

もし、僕と同じように完全初心者からwebデザイナーとかプログラマーになりたいと思っている方がおられたらぜひ一緒に進めていけたら僕としても嬉しいです。

 

コーディングが正解すれば、経験値がもらえてレベルが上がる!

一つ一つの工程に経験値があって、経験値が貯まるとこんな感じでレベルが上がる仕組み。

f:id:to-many-hopes:20170617151425j:plain

 

 これがなんともテンションが上がるんですよね。

僕は基本的にゲームしないんですけど、やっぱりレベルが上がるってなんか嬉しいですよね。モチベーションにもつながりますしね。

しかも、こんな感じでTwitterFacebookにもシェアできるようになってて、みんなに伝えることができるんです。

もちろんレベル2って恥ずかしいですけど、ここは恥ずかしがらず逆に強気で行きたいと思います(笑)。

 

lesson 1 初級編1-1 「HTMLに触れてみよう!」をクリア

今回は、まずレベル1のみやってみました。

ホントに第一回ということもあって、ここまで丁寧に記事にしましたが、次回からはある程度進めていきながら、こんなことを学びましたというスタイルにしようと思います。(このやり方だと時間がかかり過ぎて、メインの勉強の時間が大幅にカットされてしまう可能性がありますので…)

 

記事にはしませんが、学習してクリアしたレッスンについてはFacebookTwitterに挙げていこうと思ってますので、もしよければ僕のSNSもチェックしてくれたら嬉しいです。

 

また、超初心者なので、経験者の方や現役のwebデザイナーの方、プログラマーの方などアドバイスやこういうやり方がいいよなどがあれば、教えていただけたら嬉しいです。

かなり昔ですが、かじったことがあったので、初級編は何とか理解しながら進めていけそうな感じがしますが、今後はどうなることか!

新しいものを知るということは本当にドキドキとワクワクで楽しいです。

 

 

ではまた!

 

 

© 2017 to-many-hopes.blog