Try Something New

この世界の秘密を見つけ出すために、どんなことでもやってみて、いろんなことを考えます。

初心者でもHTMLやCSSが無料で学べるProgateがおすすめ!

(2017.04.12更新)

サイトの作り直しがしたい、HTMLやCSSをいじれるようになりたい! と思い、勉強できる楽しげなサイトを発見しました。

Progate

「ど」初心者な私には、こういう進研ゼミみたいな、最初から流れが組まれているお勉強方法で、かつ楽しくゲーム感覚でできるものが嬉しいです。

f:id:utautan:20151105220006p:plain

Progateは無料のプログラミング学習サービス! 

スライドで勉強して、実際に書いてみて、見本通りの形を作ってみることでプログラミングを勉強することができます。

アカウント登録

アカウントは新しく作ることもできますし、FacebookやTwitterと連携することもできます。私はTwitterと連携して作りました。

スタート時はLv.1です。早速始めてみましょう。

f:id:utautan:20151105220019p:plain

お勉強開始

f:id:utautan:20151105220038p:plain

まず、見た目が可愛くて読む気になりますね!!! 

 

「パソコン1台で世界は変えられる。」

 

なんて夢のある言葉でしょうか。

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

こういう言われ方をすると新しい出会いがあるような楽しげな気持ちになってあっという間にやる気が出ます。そう、単純なんです。

f:id:utautan:20151105220048p:plain

ここから、HTMLに関する説明が始まります。

文章は端的で、実践にうつるまでのスライドも少ない枚数にまとめられています。

f:id:utautan:20151105220101p:plain

スライドを読み、実際にぽちぽち打ち込んでみると・・・。

 

どうやら、正解のようです!! 

そして、レベルが上がりました! 嬉しい!w 

f:id:utautan:20151105220257p:plain

引き続き、CSSにうつります。

f:id:utautan:20151105220305p:plain

HTMLとCSSの違いなんてさっぱり意味が分からなかったんですが、HTMLは枠組み、CSSは装飾というふうに考えればいいみたいです。

例えば・・・。

レゴブロックで恐竜を作るとする。

その恐竜の形を思い浮かべ、必要になるパーツを先に手元に集める。←HTML

手元にかき集めたパーツを元に、恐竜の形にしていく。←CSS

こんな感じ?! 

 

引き続きレベルアップを目指して頑張っていこうと思います!!!!

prog-8.com

お金を払ってでも早くに技術を習得したいという方にはスクールがおすすめです。Webcampというプログラミングスクールには、1ヶ月で即戦力になれるプログラムもあります。