2020年のやりたいことリストにも書いていた通り、今年はweb デザインを重点的に学んでいこうと思っています。まず第一目標は、Free Code CampでResponsive Web Designのcertificateを取ること！
今回、無事に取得できたので、どういった内容を学んだのか、記録しておこうと思います。
Free Code Campとは？
無料・オンラインでプログラミングを学べるウェブサイト。各コースを終了すると、証明としてcertificateを取得できます。
Free Code Camp のサイト：https://www.freecodecamp.org/learn
- Responsive Web Design Certificate
- Javascript Algorithms and Data Structures Certification
- Front End Libraries Certification
- Data Visualization Certification
- APIs and Microservices Certification
- Information Security and Quality Assurance Certification
- Coding Interview Prep
Interview prep 以外は、各コース３００時間が修了目安となっています。Front End engineer を目指す人にはぴったりのカリキュラムではないでしょうか。しかもこれが無料とは！！（＊運営は寄付で成り立っています。）
このサイトで学んでいる人がたくさんいるので、上手くいかなくてもググれば大抵解決策が見つかる！というのも挫折せずに進めるポイントです。
作ってみた
では実際に、作ったものを載せていきます。今回は一番初めのコース、Responsive Web Designを学びました。細かいカリキュラムは割愛しますが、htmlとcssの総復習です。コースを学んだ後、５つの課題をといて提出します。
各課題には、User Storyがついていて、そのstoryに沿うページを作っていきます。
各Code Penをクリックすると、code pen自体のサイトに飛んで大画面でみられるので、良かったらそこでレスポンシブの様子を見てみてくださいね♫
Tribute Page
See the Pen FCC:Tribute Page by Amy_Sh (@shufuengineer) on CodePen.
意識したこと
白黒写真を使用するものの、ページ全体は明るい雰囲気にする。
要素は全て中央寄せにして、どのメディアで見ても形が崩れないようにする。
学んだこと
- html、cssの基本的な記述の仕方
- Flickerによる画像の挿入方法
- グラデーションによる背景画像設定
- 要素を中央寄せする方法
Survey Page
See the Pen FCC:survey page by Amy_Sh (@shufuengineer) on CodePen.
意識したこと
toyの購入者に向けたsurvey pageを作成した。（購入するのは大人だけど）子ども向けということでカラフルに、元気に！を意識。
一度試してみたかった、画像の上に文章を載せるという形式にチャレンジ。画像→グラデ→グレー（survey 本体）。
学んだこと
- before afterの記述の仕方
- :root の記述の仕方
- 画像の上に色を載せる方法
- label、inputの記述の仕方とcssによる見た目の調整方法
各ボタンをcss で細かく設定するというのは今までやったことがなかったので、ちょっとずつ微調整するのが以外と大変だった。
Product Landing Page
See the Pen FCC: Product landing page by Amy_Sh (@shufuengineer) on CodePen.
意識したこと
Balumudaの商品イメージに合うように、デザインはシンプルに。
使用するカラーは４つに限定。
物足りなく見えないように文字と画像などmarginを細かく指定。とにかく文字の大きさと余白を整えて、すっきりとしたデザインになるように心がけた。
今回から、mobile firstにすることにして、media queryは徐々に大画面で見る設定にした。（今まではPCで見た目を整えてからmobileにしていた）
学んだこと
- Flex boxの使い方
- media query によってデザインを細かく調整（nav-barなど）
- 動画をresponsive にする方法
- Code Penでの画像の入れ方。（この方の記事を参考にしました）
- Font Awsome の使い方
- transitionの使い方
Technical Documentation Page
See the Pen FCC: Technical Documentation by Amy_Sh (@shufuengineer) on CodePen.
意識したこと
今回はいつもとちょっと毛色が違うdocumentation。技術系のサイトということで、今まで見てきた中で見やすいと思ったこちらのnode.jsのサイトを参考に配色・フォントを決定。１つ前のものと同じく、割とシンプルなサイトになりそうなので、文字の大きさや行間、空白を細かく設定した。
documentationはPCから見る人が多いだろうと予測して、今回はPCサイズ→mobileサイズにメディアクエリを設定。
文書・配色が初めから決まっていたので、今までで一番早くできあがり。やはり、作りながら考えるよりも、先にしっかり決めてから作る方が作りやすいなと思いました。
学んだこと
- pre、codeのhtmlの書き方。
- overflowではみ出た部分をスクロールさせる
- before、afterの使い方
- 目次を左側固定にする
- （jsだけど）ボダンクリックで名前を登録できるようにする
Personal Portfolio
See the Pen FCC: Personal Portfolio by Amy_Sh (@shufuengineer) on CodePen.
意識したこと
実は初めてつくるポートフォリオ。安定のピンク！笑
上記２つと同様に、フォントと余白を綺麗にみせるよう意識しました。文字が少ないので、フォントは１種類に限定しましたが、可愛いフォントなのでまた使ってみたい。文字の白抜きは今回試してみたかったので使えて良かったです。他にもtex-shadowは使い方色々。（参考サイト）
welcome page（トップ）では100vh指定。画像を使用することも考えましたが、あえて文字＋アニメーショでシンプルに。アニメーションを加えるだけでかなり印象が変わって華やかになったので、自分でも作ってみたいな〜と思いました。
projectsの画像以外は、フォントのサイズのみを変更し、レスポンシブデザインに。便利！
CSS gridは、まだ基本を使い始めたばかり。今回はprojectsの配置にのみ、しかも基本的な並べ方に落ち着きましたが、もうちょっと攻めた配置にも挑戦していきたいな。
学んだこと
感想
やっぱりサイトを作る（デザインして何かを作る）って楽しいな！
と改めて思いました。
User Story に沿ってそれに当てはまるページを作るというのは仕事をしていく上で必要なスキルになっていくと思うので、それが経験できて良かったです。
今回、free code campと並行してデザイン関連の本も読んでいたので、３つ目くらいから本の内容も取り入れながらサイトを作りました。デザインは難しいけど、色の組み合わせやちょっとしたフォントのサイズで「さっきより良くなった！」というのが確かめられて楽しかったです。
でも、何が大変って、各ページに記載する文章を英語で書かなくてはいけないということ…！この辺りは、まだまだ英語の勉強が足りてないな〜と思います。