Study site coding 01

下記の無料コーディング練習所の「【初級編】企業サイト」に取り組みました。

https://webdesigner-go.com/coding-practice/beginner/

Specification

• Googleフォント使用
  • 欧文「Roboto」
  • 日本語「Noto Sans JP」
• ロゴはSVG
• 「ニュース」の日付はtimeタグ
• 「サービス」のアイコンはMaterial icon
• CSS設計はBEM
• スマホの時はグローバルナビはハンバーガメニュー
• favicon画像はXDから反映

Note

CSS設計はBEMを指定されていますが、このコーディング課題に取り組んだ目的がFlocssのアレンジバージョンであるPDFLOCSSを使ってみることだったため、CSS設計はPDFLOCSSでコーディングしています。

PDFLOCSSについては下記を参考にしています。

https://zenn.dev/wagashi_osushi/books/94efd21a66ccaa/viewer

Coding environment

コーディング環境は、Webpackとnpm scriptsでFLOCSSのSCSSをコンパイルする下記の自作環境を使用しています。

https://github.com/oshima-daiki/webpack-starter