見出し画像

【WEB制作入門】プログラミング学習記録Week1【学習サイトリンク付】

前提(自己紹介)

■私の状況
 理系の大学院を出て画像処理エンジニアとして企業で働く
→組織に守られすぎていることに気付き、状況を変えたいと思う
個人で稼ぐ力を身に着けたいと思い別の副業を始める
→残業や休日出勤が増えてきたときに限界を感じる
→入社して約三年で退職
→フリーランスをやってみることにした
→今まで培った中途半端なプログラミングスキルを本気で伸ばしたい思いもありWEB制作に興味を持つ
(稼げるか分からんけど、試してみるか。プログラミングに対してはいつも前向きな姿勢をとってきた。)

■習得言語・資格
・C(大学の講義や研究室で使用)
・C++、C#(会社でアプリ開発を少し)
・応用情報技術者

学習履歴(1日目~7日目)

■1日目:HTML学習(ドットインストール)
 先ずはドットインストール (要環境構築)

 実務でも使えるエディタ「VSCode」を使い始められるのがprog8スタートよりも良い所。デフォルトで搭載されているエディタの入力補完機能が便利。
例えば、「a.test」と入力して「Tab」押すだけで以下のように補完してくれる。

<a href="" class="test"></a>

早く全体像を掴みたい&早く進めたいと思って動画内でショートカットが使われてたらマネするようにした。(実務だと先輩の仕事がなぜ速いのかを観察して学ぶのに似てると思う)

■2日目:CSS学習(ドットインストール)

 CSSは
 「どこの(セレクタ)」
 「なにを(プロパティ)」
 「どうする(バリュー)」
 って形式で、ページの見た目が整えられるんだー!ぐらいに理解すればいいと思って進めた。まだ細かい記述を完璧に覚えなくても大丈夫。

■3日目:模写コーディング準備、Bootstrap概要理解

 模写のやり方を調べたり、Flexbox、Bootstrapの概要を理解するつもりで進めた。


■4日目:ディベロッパーツール使用方法調査、ヘッダー模写挫折

■5日目:模写実践動画見ながらコーディング(WEBの神様さん)
 手順からとても丁寧に説明されていておすすめ

■6日目:模写実践動画見ながらコーディング(玉袋浩二さんの動画)
 こちらの方が易しいのでWEBの神様さんの動画より先の方が良いかも。 
 DAY1から見ても勉強になる。後おもしろい。

■7日目:模写実践動画見ながらコーディング続き(玉袋浩二さん動画)
 (~DAY24)
 練習後出来上がったページ↓(素材は別サイトから拝借した)

画像1


おまけ

■小ネタ1:目が疲れにくくなる工夫

①ディスプレイ設定で輝度を下げる&夜間モード設定
 長時間やるときはブルーライトカットしないと頭痛がするんです^^;

画像2


②エディタの設定でフォントサイズをでかくする

画像3


■小ネタ2:独学だと疎かになりがちな「フォルダ構成」の話
 サイトメンテナンスの効率に大きくかかわるから大事
 ↓初心者にもわかりやすく解説してくれるサイトがありました!


感想

 最初は全体像を掴むことを意識した。次週もできるだけ実践に近い形で量をこなしていくことを重視したい。
 基礎を飛ばし過ぎて模写で躓いたが、実況動画のおかげで救われた。無料で様々な情報が手に入る今の時代、独学のハードルはかなり低くなっているはず。(先人達に感謝してます。本当にありがとうございます。m(_ _)m)


補足

■学習時間:平日5~8時間、休日3~5時間
(午前中は進める習慣が定着している。午後は家事、趣味に回すこともある。寝る前は簡単に復習する。)

この記事が気に入ったらサポートをしてみませんか?