見出し画像

Web制作学習010【はじめての模写は早めに】2021.06.04~

Web制作学習11週目には、
はじめての模写コーディングにチャレンジしました。

基礎学習を2割ほど残してのタイミングなので、
ふつうはまだやらないと思います。

でも早めにやると、
モチベーションのアップにつながります。


教材をみつけたのは、たまたま【Twitterのタイムラインに流れてきた】

画像1

この時期は、

ドットインストールで
レスポンシブウェブデザインの学習を終え、

自分のポートフォリオサイトを
レスポンシブ化したころでした。

基礎学習の2割ほどが残っていたものの、
その2割にいまいち興味が持てず、

たまたまTwitterのタイムラインに流れてきた
学習サイトを発見しました。

それがこちら。

まだ開設してから1年くらいの新しいサイトのようです。

入門編では、
当時のぼくでもなんとかなりそうな課題が載っていました。

しかもデザインもよい。


基礎学習と制作とのギャップを埋めてくれた

画像2

基礎学習をして、
自分なりにコードを書いてみたものの、

「こういうときふつうはどう書くの?」
みたいな部分はなかなか学べずにいました。

また、
コーディングをはじめるときの手順もよくわからず、

とりあえずできるところから進めていく
という感じでやっていました。

でもこちらのサイトでは、
その手順を丁寧に解説してくれていました。

このページを丁寧に読んで、
実際に課題の一つに取り組んでみました。

このサイトには、
デモサイトや模範のコードも用意されていて、

自分で書いたコードと見比べることができるので、
とても勉強になります。

興味がわくWebページであれば、
自分のレベル感と多少ずれていても、

挑戦してみればよいと思います。

すべて理解できる必要はないので、
その時期に学べるところを学び、

また時間をおいて理解しきれなかった部分に戻ればよいかなと思います。


自分のポートフォリオの一つに加えられた

画像3

上に書いた手順解説のページを参考に、
自力でコーディングしていきました。

画像は自分で用意したものに差し替えて、
わが家の自転車を紹介するページになりました。

出来上がったものの満足度が高く、
やる気がわきました。

また、多様なレベルの教材があり、
次の学習課題とセットにして学ぶことも可能でした。

ドットインストールで
グリッドレイアウトの学習のモチベーションがわかなかったのですが、

「グリッドレイアウトが学べば、こんなサイトも作れそう」
と思うと、やる気につながりました。

実際にこれにも取り組み、
写真を差し替えてこちらのページを作りました。


まとめ

画像4

今日は
学習開始11週目で、

はじめて模写コーデディングに取り組んだお話でした。

学習の継続には、
たのしく学習できることが大切で、

そのために模写コーディングはとてもよい学習方法でした。


おまけ

画像5

今日のおまけはデスクで使っている照明。

明るさや角度調整ができて便利です。

昼間は明るめに、
寝る前は少し暗めに。

広めのデスクでも角度を変えて
必要なところをちゃんと照らすことができます。


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