【WEB制作入門】学習記録Week2【使用サイトリンク付】
はじめに
（prog8のような学習サイトで基礎学習は終わったけど模写コーディングできねぇ！って人は良かったら参考にしてください）
WEEK2は主に模写コーディングの動画で学習。
目的は模写コーディングをやるステップへ進むためのトレーニング。
動画学習はレベル別で次のように学習方法が分けられる。
レベル0：見よう見まねでコーディング
レベル1：予想立てる（声に出すとか）→動画で答えチェック＆真似する
レベル2：予想立てる（手を動かす）→動画で答えチェック＆修正する
共通：気になったところはググる
レベル２で修正量が少ないほど自走で模写コーディングを進めやすいということ。最初は予想も立てられずレベル0だったが、慣れてくるとレベル１～2で進めていけるようになった。
この手法のメリットは、①「挫折しない」②「短時間で多くのWEBページに触れられる」。逆にデメリットは「レベル0で進めてしまうと経験値が溜まりにくい」といったところ。
学習履歴（8日目～14日目）
■8日目：動画でコーディング練習（玉袋浩二さんの動画）
玉袋さんの動画3本でヘッダー → 検索窓 → トップ画面、フッターという流れで作成。
今更ながらpaddingとmarginの使い分けについて調べた。
CSSのボックスモデルの概念を知っておかないとどっち使えばいいの？ってなる。下のサイトで勉強させていただきました。超分かりやすい神記事です。
一言で雑にまとめると「paddingは要素の範囲を広げたい時や子要素を内側に寄せたい時に、marginは別要素と距離を取りたい時に使う」
■9日目：動画でコーディング練習続き（玉袋浩二さんの動画）
参考ページ：http://demo.themegraphy.com/write-ja/
↓完成ページ（例）
↑のフッターぐらいは何も見ずに作れた。
■10日目：動画でコーディング練習（武田一真さんの動画）
別の解説動画を見つけたのでこれで練習した。VSCodeの便利な使い方も真似して習得できちゃうのも魅力的。
■11~13日目：動画でコーディング練習（武田一真さんの動画）
レスポンシブ対応含む内容で大変勉強になる。
■14日目：動画でコーディング練習（武田一真さんの動画）
続き
おまけ
■小ネタ1：集中するための工夫
ポモドーロテクニックと呼ばれる「25分集中→5分休憩」のサイクルを繰り返す方法をやってみたところ意外と集中できた。プログラミングは暗記するもんじゃないけど、ワーキングメモリを多用するので5分間歩いて頭をスッキリさせるのはありなんじゃないかなーと思う。（ポモドーロのタイマーアプリを使うと便利）
■小ネタ2：デザインの四大原則
「近接・整列・強弱・反復」の4つの原則を守ると良いデザインに仕上がるのだそうな。下のツイートで分かりやすく説明されているので引用させていただく。
［デザインが苦手なあなたへ］
— カトウヒカル@1on1レッスン (@design_hikaru) January 6, 2020
デザインの四大原則で、あなたの制作物はもっ〜と良くなる。
➀近接 → 仲間ごとにグルーピング
➁整列 → 透明な線に揃える
➂強弱 → メリハリを付ける
➃反復 → 見やすい統一感
デザインで迷子になったら四大原則を思い出して、基本に立ち戻ろう！！ pic.twitter.com/VMQbAVdeiT
参考：「ノンデザイナーズ・デザインブック」
感想
「挫折せずに量をこなす」ことを意識して課題設定をしたところ、一問一答感覚で進めていける動画での学習に行き着いた。
有料スクールとか色々目に入ってきたけど手段は何であれ結局は自分次第だよなーとか思った。教材探しに時間かけたくない人はスクールに通うのが良いだろう。自分はYouTubeにアップされてる動画を楽しめてるので多分このまま独学で進めると思う。
この記事が気に入ったらサポートをしてみませんか？