会社員がコード初心者を脱するために実践した独学学習法
2017/10/29
こんにちは。ノブ(@nobu0810)です。
あれこれいろんなものに手を出しては辞めてを繰り返してきたのですが、今はWebデザインについて真剣に取り組んでいます。
せっかくブログ持ってるんだし、勉強の記録を残したいなって思ったので記事に起こすことにしました。
このブログを始めてから2年以上が経過しました。
ブログを運営していると、htmlというサイトの土台になる部分はなんとなくわかってきて、”h2タグ”や”aタグ”などについての知識はついてきます。
どうせなら見やすいデザインがいいな。って思ってて他の人のサイトを見たりするんだけど、「これどうなってるの？真似したい！でもわからない。」ということが何百回とありました。
それなら「勉強して自分でいじれるようになってしまおう！」ってなったのが本気で勉強しようと思った最初のきっかけです。
知識は少しはついたと言っても、ほぼ初心者レベルの知識。
IT関係の仕事をしている方々からは、「プログラミング言語を勉強するのであれば、まずはhtmlとcssを勉強しよう！」と言われたので、htmlとcssから始めることにしました。
今は本当に便利な時代になっていて、検索をかければ色んな情報で溢れています。htmlとcssも例外ではありません。
無料でコードの導入編を勉強できるサイトがたくさんあります。
取り込み始めてから約１ヶ月。どのようなサイトを利用したのか。どのような本を参考にしているのか。といった点を中心にして１ヶ月を振り返っていきます。
スポンサーリンク
CONTENT
コード初心者を脱するために実践した独学学習法
①Progate(プロゲート)
まず私が利用したのは、Progateというプログラミングのサイトでした。
Progateの１番の特徴は、「初心者にもわかりやすい」という点ではないでしょうか。
数ページ分の学習をしたあとに、力試しとして学習したコードを実際に入力して、サイトをデザインしていきます。
もし間違っていれば間違っている箇所を教えてくれるし、力試しをしている時に、学習ページに戻ってわからないところを再確認してから再び力試しに戻ることができます。
私はまずこのツールを使って、「html編・css編」を勉強しました。繰り返しやると書く場所や書くべきコードがわかってきて、本編を一周する時間も短くなって自分自身の成長を実感できる点に好感を持ちました。
あえて欠点をあげるとすれば、コードを書く位置まで教えてくれるので、書くことに慣れてきた方だとちょっと簡単なレベルかもしれません。
コードを書くことをまったくやったことのない方や、さわりの部分を勉強するには最適なサイトだと思います。
中級編や上級編が有料で受けられるのですが、無料でできる他のサイトを探してみることにしました。
②Dotinstall(ドットインストール)
Progateでhtmlとcssに慣れたあとは、dotinstall(ドットインストール)で練習をしました。
Dotinstallは１つの動画が3分以内にまとまっているので、自分が苦手なトピックを取り上げて勉強することもできます。
DotinstallはProgateと違い、実際に自分自身でコードを打つことになるので、解説を理解できないで手を動かしても、どうしてそのコードを打つ必要があるのか？という点の理解が難しくなります。なのでProgateよりは理解するのに難易度が高いと感じました。
html編とcss編が終わった後には実践編も用意されていて、動画をみながら平行してサイト作成をすることもできるので、サイト作りの練習をするにはもってこいです。
③HTML5&CSS3レッスンブック
Progateとdotinstallでなんとなーくhtmlとcssの全体像が見えてきた時点で参考書を購入することにしました。
どうしてかというと、ネット上で無料で勉強できる時代には本当に感謝しても感謝しきれないのですが、わからないところをすぐに検索することができる参考書を１冊持っておくことが勉強をする上では必要だと思っているからです。
わからないことがあるたびにネットを開いて、キーワード打って…の繰り返しというその手間があまり好きではないんですよね。
それに何か調べものをしたい時にすぐに調べられる環境を作っておきたいんです。
外でオフライン環境でも学ぶことができますし。
そんなことを思いながら購入した本が、HTML5&CSS3レッスンブックです。
この本はネット上での評価が高かったのと、購入前に一読したのですが、段階を踏みながらサイト作成ができる点で魅力を感じました。勉強する上で最高の効率的な勉強法は実際にやりながらトライアンドエラーを繰り返していくことだと思っているから。
本見ながら書けたからokじゃなくって、「これを違うところに書いたらどうなるんだろう？」とか「値を変えてみたらどう変わるかな？」とかあれこれいじりながら進めていきました。
この参考書のデザインは複雑なコードを書くことがないので、直したい部分のコードを見つけてそこを直せば、直ってしまうんです。
「自分で入力したのがそのまま反映されて面白い！！」というワクワクを与えてくれましたが、学習を進めていくにつれて「もうちょっと複雑な表現も学んでみたい。」
って思うようになりました。ダサいデザインや色使いとかも全然なっていない、いわゆう「形」と言われるものは作れるようになったと思うんだけど。
④サルワカ
まだまだ表現の幅が狭いからもうちょっと表現の幅について学べるものはないかな？って思っている時に出会ったのが、サルワカさんが運営するサイトのCSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選という記事でした。
この記事では実際の見出し(h2タグ)を載せながらcssコードを載せてくれているという親切心しか感じないサイトです。
このサイトで提案している見出しでは、「position」や「疑似要素」はもちろん、Progateやdotinstallで勉強したことを復習しながら見出しの作る練習ができるので本当に参考になります。
まったく知らなかったcssコードもたくさん使われています。
しかも、この記事だけじゃなくって、サイト自体がオシャレだし説明も丁寧だし、プログラミングやってる人ならみんな知ってるのかも？ぐらい素晴らしいサイトでした。
このサイトでいいデザインを学ぶことができたのですが、決定的に理解できていないことがあります。
それはウェブ全体をイメージすることです。classやdivの分類を使用することは理解ができるだけど、全然使い方がわかっていません。
ウェブのデザインをするときって、全体を観なければいけないし、見やすいコードをかかないといけない。だってコードを書くのは自分だけじゃないから。
divやclassなどの分類も沢山登場するし、これらのことはどうやって割り振れば良いの？どうやってカテゴライズするの？と実践のレベルにはまだまだ達していないと思っています。
「基礎の基礎は身につけることができたから、基礎に少しずつアレンジを加えていって、ウェブサイトを構築できるようになりたい。」というレベルまでいったかな？というのが１ヶ月目を終えての感想です。
⑤html5/css3モダンコーディング
「もう一つレベルを上げたい！ちょっと複雑なサイトを見ながらコードを書く練習できるのってないのかな？」って思っていた時に出会った本が「html5/css3モダンコーディング」という本でした。
パラパラっとめくってみた感想は、「ちょっと今の自分にはレベルが高そうなデザイン。難しい表現がチラホラ……」
と思ったけど、いずれはやらなければいけないことだし、学ぶことに対するモチベーションが高くって覚えたい！って思えるから、チャレンジしてみます。
これからこの本を読み込んでいきます。
まとめ
参考にしたサイト
①Progate(Progate)→URLはこちら。
②Dotinstall(ドットインストール)→URLはこちら。
③サルワカ→URLはこちら。
参考書
①HTML5&CSS3レッスンブック
②html5/css3モダンコーディング
直近の目標は、「html5 css3モダンコーディング」のサンプルサイトが作れるようになって、自分のポートフォリオを作れるようになること。」
実際にやってみてどうだったかやその他の進展状況はまた期間を空けて発表しようと思う。
毎日少しでも触れて、少しでもレベルアップしていきたい。
【2017年8月26日追記】
勉強を開始して２ヶ月。仕事をいただくことができました。
→コーディング初心者が初仕事を獲得するまでに意識して取り込んだこと。
関連記事
-
-
コーディング勉強中の発信を続けたメリット。環境は少しずついい方に動いている。
こんにちは。ノブ(@nobu0810)です。 ２ヶ月前に「コーディング初心者が初 …
-
-
Web制作会社でWebエンジニアとして働いて2年経ってのまとめ
こんにちは。のぶ(@n0bu0810)です。 未経験から受託のWeb制作会社に入 …
-
-
コーディング初心者が初仕事を獲得するまでに意識して取り込んだこと。
こんにちは。ノブ(@nobu0810)です。 コーディングの勉強を始めて2ヶ月目 …