プログラミング学習 はじめの100日間の道のり - ままぷろぐ

プログラミング学習 はじめの100日間の道のり

プログラミング学習

プログラミング学習最初の100日間

皆さんこんにちは

PCの電源のつけ方も分からなかった超初心者だった中高年ままぷろです。

パソコンを買ってプログラミング学習を始めて3か月が経ちました。

今は模写コーティングというお手本を見ながら画面を作る所まで辿りつけました。

今日は中高年・超初心者のつまづきながら進んできた道のりをご紹介していきます。

特に動画授業を終えてから悩んでいる方の少しでもお助けになればと思います。

プログラミング学習何から始める?

ままぷろ
ままぷろ

プログラミング学習を始めるには何からやれば?

やっぱり本を買うことからかな?

息子<br>
息子

最初はドットインストールの動画授業がお勧めだよ

本だと動きも分かりずらいし何より画面が違うとき

自分とお手本を比べる機能があるのが便利!

まずは無料動画を見たら?

という訳でまずは「ドットインストール」の無料動画を見てみました。

htmlとcssの無料動画を全部見てなぜか「これなら出来そう」と謎の自信がわいてきて早速パソコンを買ってプレミアム会員に申し込みました。

最初は環境構築(ファイルの新規作成)が分からず苦労しましたが分からないときに質問できるシステムがあるので助かりました。

プログラミング学習の順番

  1. ドットインストールの動画授業HTML
  2. ドットインストールの動画授業CSS
  3. Codestepの模写コーティング 入門編「プロフィール」
  4. Dawnの模写コーティング 「macaron」
  5. Codestepの模写コーティング 入門編「フォトサイト」
  6. Codestepの模写コーティング 入門編「レシピサイト」
  7. 「HTML&CSSとWebデザインが一冊できちんと身につく本」の模写コーティング
  8. Codestepの模写コーティング 中級編「ブログサイト」

これが3か月今まで取り組んできた学習経過です。

いまだに自分一人では画面を作ることは出来ないレベルではありますが何とかそれなりにお手本通りになってきています。

これまでで一番困ったのはある程度動画授業で学習を終えた後何をすればよいのか?でした。

ままぷろ
ままぷろ

インプットばかりではいつまで経っても画面できないし…

何かを見ながら画面を作るアプリはあるのかな?

何から調べれば良いのか分からない…

そこはぐぐりです。(動画授業の時にググる事を覚えました!)

YouTubeを見たり模写コーティングで調べて「Codestep」を見つけました。

Codestep 入門編

この画面がどの様に構成されているかが写真で分かるレイアウト・環境構築のためのファイルの並べ方(ディレクトリ)の表示・入力のための見本が書いてあるのでまずは入門編から取り掛かりました。

もうこの時期はただ英文字を打ち込んできちんと画面になるかの確認だけでしたが、それでも思い通りにならなかったらどこが間違っているのか?を探すだけでもとても勉強になりました。

この時期の課題は環境構築=画像が出ないでした。

Dawn 入門編 

そんな時TwitterでDawnというサイトを知りました。

プログラミング学習についての解説が最初から書いてあり模写コーティングも出来るので早速やってみることに。

これも又ひたすら間違わないように文字を打ち込む、それだけです。

ままぷろ
ままぷろ

あれ?画像出ない

同じように入力しているつもりなんだけどなぁ

間違っている所が分からない…

画像は出たもののやはり同じ様にならない。

原因は多分無駄に出来ているライン。

ただどうやって消したら良いのかが分からないまま二日が過ぎて色々調べてやっと消せました。

この時期の課題は間違っている所が分からないです。

「HTML&CSSとWebデザインが一冊できちんと身につく本」

Twitterは有益な情報が溢れています。

プログラミング学習初学者に一番お勧めする本としてこの本が紹介されていたのを見て早速購入しました。

DAWNの模写コーティングも何とか形になったのでこの本に沿って取り組むことにしました。

私はアナログ人間なのでやはり紙でじっくりやるのがしっくり来ます。

ただここに来るまでに何個か模写コーティングに取り組んできたお陰で少し理解力が上がってました。

ままぷろ
ままぷろ

書いてあることが分かってきた~

そして今回で偶然じゃなく画像を出せるようになった!

そうです!あんなに苦労していた新規ファイルの作成・画像のダウンロードが出来る様になっていました。

何回もファイルを作っては違うと思って消したり、画像のダウンロード(ZIPの解凍)をして環境構築をするも画像を出せず又やり直したりを繰り返していました。

そんなある日VSCodeの便利な機能に気付きました。画像の最初の1文字を打ち込むと間違っていなければ次の候補である正しい語句が出てそこを又押すと次押す候補が出る。次々正しい語句の候補が出てきちんと画像がでる様に仕上がるんです。

これに気付くまで3か月かかりました。

これで少しPCと仲良くなれた気がしました。

ただ画像が出せて、間違っている所が分かりつつあってもまだどうやったら正解になるかが分かりません。これにはしばらく時間がかかりそうです。

現在の課題は間違っている所の直し方が分からないです。

プログラミング初心者中級編に挑む

本もまだ途中ではありますがある程度終了したので又「Codestep」に戻り今度は中級編に挑戦しました。

見本を見て今までやっていたものが中級編に近いと思ったからです。

まだ丸写しではありますが意味を考えながら少しづつ入力することが出来ました。

画面が思い通りにならない時にレイアウトを確認してどこが違うのかを見つけることができる様にもなってきました。

ままぷろ
ままぷろ

1文字でも違うとホントに違ってくるんだなぁ

一番最初のドットインストールの授業で先生が

言ってたっけ

最後に

こんなプログラミング学習の超初心者である中高年でも毎日コツコツ諦めず試行錯誤しながら取り組んだ結果見ながらではありますが画面の作成まで出来る様になりました。

PCにもだいぶ慣れてきました。

本当は3か月位で仕事に結びつくほど習得できるかもと夢のような事を考えていましたがそんなに簡単に出来たら皆すぐ億万長者になりますよね。

わが身を振り返り又コツコツ精進していこうと思います。

最後まで読んでいただきありがとうございました。

コメント

Verified by MonsterInsights
タイトルとURLをコピーしました