まっすぶっちの美忘録

自分を記録する。ツイッターしてます。 https://twitter.com/yoshixj

〜簡単なHPを作ってみよう〜 初めてプログラミングをしてみる人向け。HTML,CSS学習フローチャート。

僕がプログラミングを始めたのは約一年前です。(1年の夏休み終わり頃。)

 

もともと、ITに興味はありましたが特にスキルはなくて。

何かスキルをと思い、ちょっとできる人の話を聞きに行きました。(以下Xさん)

 

 

で、Xさんに話を聞くとエンジニアになれば好きな場所でお金を稼いで、自由で楽しい生活が送れるらしい。。。。

 

じゃあ、やるか!

って感じではじめました。笑

 

 

今、現在はHPの制作会社でアルバイトしてますが、バイト中でもお菓子食べれるし、コーヒー飲めるし、スキルは上がるしでバイトとしては申し分ないです。

 

 

また、ここ最近はプログラミングの素晴らしさにようやく気付き、趣味みたいな感じでコードを書いてることが多いです。笑

 

 

そんな僕が、ほぼほぼ独学でそのアルバイトをするまでの学習フローを書きたいと思います。

 

 

 

1. プログラミングで何ができ、それを為すにはどの言語を学べばいいのかをの調べる

 

一口にプログラミングといってもできることは様々あります。

ゲーム、HP、サービス、webアプリケーション、mobileアプリケーション、システム設計 etc,,,。

現在のブームで言うとVRだったり人口知能だったり。

 

 

僕は、XさんからWEB上でサービスを作るための言語(HTML,CSS,JavaScript,Ruby)をやればすぐ稼げるようになるよ!

 

って聞いたのでそれを安易に受け止めやり始めました。

 

 

さすがに働いてお金を稼ぐまで行くにはそんな安い気持ちじゃ、道のりは険しいものでしたが。。。。

 

 

 

今回は簡単なHPを作ることが目的なので、HTML,CSS という言語を学ぶこととします。

 

 

(この2言語はプログラミングを知る上で一番簡単なのでもっぱらプログラミング学習導入の定番です)

 

 

もし他の言語なども気になるようだったら、この辺参考にするなりで。

 

www.sejuku.net

 

 

 

 

2. ドットインストールを使ってプログラミングの概要を知る。

 

 

http://dotinstall.com/

 

 

今の時代は便利なもので、インターネットを回れば無料、安価で学習することができます。今回紹介するドットインストールはプログラミングを学ぶ人に知らない人はいないってくらいの、超有名初心者向けプログラミング動画学習サイトなんで、ブックマークしておいてね。

 

 

⬇︎はレッスン一覧ページのurlを張ってます。ここのHTML入門、CSS入門ていうをやりましょう。学習方法としては、動画に習ってやっていくというのがベストだと思いますが、抵抗があるなら最初は見てるだけでもいいと思います。重要なのは二つの言語の大枠を知ることです。

 

http://dotinstall.com/lessons

 

 

あと、このサイト毎月1000円で有料登録することができます。

 

個人的に思う、有料会員になるメリットは

 

 

①コードがコピペできる。

②音声が男性のみだったのが女性の音声でも聞けるようになる。

 

 

です。①はもしエラーが出てしまった時に助かります。②は眠くなった時に効きます。何かと男性の低い声は眠くなります。笑

 

 

3.Progateを使って実際にタイピングしてみる

 

 

prog-8.com

 

 

これもまた、プログラミングを学ぶ人に知らない人はいないという今や超有名サービス。東大生が起業して作りあげたらしい。最近、学べる言語の数が増えてきて注目を浴びてます。これももちろんHTML、CSSをやりましょう。

 

 

このサービスの素晴らしいところは、実際にコードを書いて学習することができるという点です。

プログラミングの上達の近道は実際に手を動かすことです。パソコンカタカタしましょう。

 

 

あと、学習した量によってレベルも出ます。ちなみに僕はこんな感じです。笑

 

f:id:yoshixj:20160928015824p:plain

 

 

今少し覗いてみると、自分が学習していた時と比べて前は無料だったところが、若干有料になってるみたいです。余裕があれば有料登録してみてもいいかもです。

 

 

 

4.実際にHPを作ってみる!

 

 

ここまできたら後は実際にプロダクトを作るのみです。

 

感のいい人はここから、ググったりするだけである程度のプロダクトは作れると思いますが、まだきついなーって人は書籍を購入することをお勧めします。

 

この底の技術書は3000円前後が相場なんで、学生にとって安くはないです。実際に書店でみるなり、amazonでレビューをみるなりして自分に合いそう、自分が作りたいものが載ってる書籍を選ぶといいと思います。

 

個人的な話ですが、技術書は重かったり、厚かったりとかさばるので、自分は電子書籍で最近は購入しています。電子書籍はPCでも開けるので、何かと便利です。

 

 

⬇︎実際に僕が使っていいなって思った書籍です。

この書籍はタイトル通り、モダンなページが作れる、説明がしつこくない、そこまで厚くないってところが良かったと思います。

 

 

 

 

5.オリジナル作品を作って公開してみよう!

 

今回のゴールです。

 

1〜4で学んだことをフルに使って、オリジナルプロダクトを作りましょう。

 

ここで作るプロダクトは実績であり、仕事にもつながります。

 

 

⬇︎僕がこのフェーズで作ったやつです。

cam-colle.main.jp

 

 

上の自分が勧めている書籍を使って学んだ人はわかると思いますが、ほとんどその本のノウハウを使って作りました。classとか変えてません。笑

 

 

 

以上、僕の学習フローチャートでした!

 

 

 

自分で何かを生産できるって楽しく、それを仕事にできるというのは幸せなことなので、興味ある人は参考にしてみてね!!

 

 

質問等あれば、気軽にメッセしてください!

 

 facebook

https://www.facebook.com/massuu.yoshi.9