プログラミング学習記録②
こんにちは！ちこりです。
アラフォー女子（一児の母）の私が、完全ド素人から独学で学習を始めて約半年。
早くもモチベーションが下がりかけた時期もありました...。
そんな時こそnoteに記録をつけて、振り返ることで、勉強を継続していきたいと思います。
私はこちらのブログを指針に学習を進めています。
0. 前回までのあらすじ
・Manaさんの書籍『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』で基礎学習
・ドットインストールの無料の講座のみ受講
・模写コーディング → 撃沈...(_ _;)
▼
Progateの有料講座を受けることを決意する。
1. Progate HTML&CSSコースを受講
【2020年7月】
ドットインストールもとても良かったのですが、私はまだProgateは未経験で興味がありました。
HTML&CSSコースを、初級編から全て受講。
そして前回、模写コーディングに失敗した理由がよく分かりました。
私は設計図を描かずに、建物を建てようとしていたのだ！
Progateの道場コースでは、まずサイト全体のレイアウトがどのようになっているかを確認。
その上でHTMLのタグを当てていくプロセスを丁寧に教えてくれました。（他にもいろいろ）
2. 模写コーディング復讐（じゃなくて復習）
【2020年7月】
やっと模写を始められるレベルまで、基礎を学べたかな？
前回うまくできなかった、しょーごさんの課題に再チャレンジです。↓
こないだはただ無計画に、コードを打ち始めましたが。
今回は先に全体のレイアウトを、ノートに書き出すことから始めました。
↑こんなイメージです。
そして出来上がったのがこちら↓
何とか見本どおり完成したのではないでしょうか！？\\٩( 'ω' )و //
前回あきらめた、「写真の上に文字が乗っている」レイアウトもうまくいきました。
これは写真に直接乗せるのではなく、内側に「枠」を一つ追加することで解決。
よく見るとボタンとかちょっとズレてますかね...(^^;
でもとりあえず良しとして、次の課題に進みます！
3. 模写コーディング、さらに2つ
【2020年7月】
次も初心者向けの課題をダウンロードして取り組みました。
WEBデザイナーのちづみさんが作られたデザインカンプです。
Progate終了後の初心者にちょうど良いレベル感で、かつ可愛らしいデザインのサイトが作れちゃいます。
1〜4までまとめ買い。やるで〜o(^0^)o
＜ちづみさんの「コーディングの練習をしよう！その1」＞
この課題は、先日のリニューアルでデザインが一新されていました。
とはいえ基本的なレイアウトはそのままみたいですね。
可愛いシマエナガちゃんバージョンのまま載せちゃいます。
しょーごさんの課題の前に、こちらをやった方が良かったみたい。
サクサク作れちゃいました！
＜ちづみさんの「コーディングの練習をしよう！その2」＞
シマエナガから一気にレベルアップ(><)
こちらも先日リニューアルされて、ワンちゃんバージョンになっていましたが、どちらも可愛いですね。
むずかしかった部分
・「CAT1」セクション・・・写真を交互に左右振り分ける
・「CAT2」セクション・・・背景画像は画面幅いっぱいにし、高さは決まった縦横比になるよう上下をカット。画面幅に合わせて可変するように指定。文字は中央から右側に配置。ここがめちゃむずかしかった...！
・<table>タグの使い方が学べた。
実際に手を動かしてサイトを作ってみるのは一番いい学習法ですね。
たぶんピクセルパーフェクトではないと思いますが、模写コーディング初級編はこのへんで修了。
次の段階に進むことで見えてくるモノもあると思うので！
＜ロードマップ＞
progate(またはドットインストール)
▼
書籍『1冊ですべて身につくHTML&CSSとWebデザイン入門講座』
▼
模写コーディング（簡単なもの3つ）
▼
jQuery 、Saas の学習
▼
（つづく..）
次回はjQueryとSaasの学習・・・らしい。（なにそれ？笑）
（つづく）