【WEBデザイン学習日記-96】 ポートフォリオのコーディングついに完成！
12/29（金）～の学習日記です。ポートフォリオのコーディングもほぼ完成に近づいてきました。aタグにリンクや画像の説明テキストをつけたり、TOPページのハンバーガーメニューのコードを各下層ページにコピペする作業をしています。
☆★☆ ☆★☆ ☆★☆
2023年12月29日（金） レスポンシブコーディング：4時間
冷蔵庫の野菜がなくなってきたので、年末年始に家でまったり時間を満喫するため午前中買い出しに行ってきました。スーパーは買い物客でごった返していました💦
近所に野菜直売所があるのですが、新鮮で安いのでいつも多くの人で賑わっています。私もいつもここで週に１回野菜や果物をまとめ買いしています。半年以上前でしょうか、このお店に初めて行く前にウェブサイトを覗いてみたことがあったのですが、１ページ完結型のとてもシンプルもので、掲載されているのは連絡先、営業時間、数枚の写真でした。
その時思ったことは、「農家の方が丹精込めて作った新鮮な野菜や大豆製品、乳製品、地元の特産品、美味しそうなスィーツまでが並ぶ魅力的なお店なのに、もっとウェブサイトで魅力を伝えられるのに勿体ないな」という気持ちでした。ある程度自分自身ウェブサイト制作に慣れてきたら、自分からサイトデザインリニューアルを提案するため声をかけてみようかなと密かに考えています。自分だったら一眼レフで店内の写真を写真を沢山撮らせていただき、ここはいい！と思うアピールポイントを沢山の人に伝えるサイトにしたいな。
ところで今日もレスポンシブコーディングの続き。
aタグにリンクや画像名をつけたり（アクセシビリティ）、TOPページで作成したハンバーガーメニューとスマホメニューのコードを下層ページにコピペするという地味な作業をしています。かなり根を詰めて腰が痛い・・・・TOPを含め５ページ分行いました。SP画面になったときに左側のナビが上部に切り替わるのですが、しばらく苦戦した末に上部のナビゲーションバーもpositionで固定できました。
＜先日の質問会で先生に指摘されて気づいたコーディングミス＞
・１ページにh1が４つもあった →chromeの拡張機能の"HeadingsMap"で段落の構成を修正
・aタグの中になぜか不要＆無意味なpタグを入れていた →pタグを削除
・pタグの文章で改行を多めに入れるためにbrを２個使いしていた →区切りたいところをpタグで細かく囲い、余白をとりたいところはmarginで
アクセシビリティを考慮し、aタグに画像読み上げのための入力漏れがないかチェックできるAlt&Meta ViewerというChromeの拡張機能を見つけました。これを使って各画像への入力漏れを見ることができます。拡張機能は便利なものが色々ありますね。
↓ 最近コーディングしながらこれを聴いています。すごくはかどります。
☆★☆ ☆★☆ ☆★☆
2023年12月30日（土） レスポンシブコーディング：4時間
今年も残すところあと2日。今日もポートフォリオのコーディングの修正作業をしていました。全ページを１個ずつ収縮させておかしいところがないかのチェック＆微調整、ナビの部分のタイトルにカーソルをのせた時のHoverアニメーションをつけたり（下線をつける）、今開いているページだと分かるようにナビの部分のタイトルの色を変えたりと色々細かい作業。
細切れではありましたが約2ヶ月に渡るポートフォリオの作成作業完了しました！！特にコーディングに関しては初めてのレスポンシブ対応、新しく学べたコードも沢山あり大変勉強になりました。こうやって沢山サイトを自分でデザイン、コーディングすることで自分の資産になり、案件につながっていくんだなと以前校長先生からいただいた言葉を思い出しました。
今年掲げた「年内にポートフォリオの完成させ公開をする」、「年内にそのポートフォリオを使ってWEBデザイン案件を１つでも取得する！」という２つの目標。案件はもう時間が限られているので厳しいかも知れませんが、目標達成に少しでも近づけるため明日中には公開できる状態にして案件を複数応募してみたいと思います。
今、公開をするためのサーバーレンタルとドメイン取得について学習中・・・
☆★☆ ☆★☆ ☆★☆
＜12/24（日）～12/31（日）の学習目標＞
・レスポンシブ対応全て完成させる →完成！
・ポートフォリオの公開
・WEBデザインの副業案件に応募する
＜今後の目標＞
★ 2023年12月末までにポートフォリオを完成させ、WEBデザインでの副業案件を１つ取る！
★ 2024年3月までに今までの経験を活かし、今後にもつなげられる仕事に転職する
★ WEBデザインの学習と制作活動は地道に続けながら少しずつ実績を積む
★ １月28日のTOIEC試験で800点以上を取る
#転職
#海外
#オンライン
#Webデザイン
#主婦
#制作
#Photoshop
#未経験
#学習日記
#クリエーターズファクトリー
#デザイン
#Figma
#初心者
#コーディング
#ポートフォリオ
この記事が気に入ったらサポートをしてみませんか？