下記の無料コーディング練習所の「【初級編】企業サイト」に取り組みました。
https://webdesigner-go.com/coding-practice/beginner/
- Googleフォント使用
- 欧文「Roboto」
- 日本語「Noto Sans JP」
- ロゴはSVG
- 「ニュース」の日付はtimeタグ
- 「サービス」のアイコンはMaterial icon
- CSS設計はBEM
- スマホの時はグローバルナビはハンバーガメニュー
- favicon画像はXDから反映
CSS設計はBEMを指定されていますが、このコーディング課題に取り組んだ目的がFlocssのアレンジバージョンであるPDFLOCSSを使ってみることだったため、CSS設計はPDFLOCSSでコーディングしています。
PDFLOCSSについては下記を参考にしています。
https://zenn.dev/wagashi_osushi/books/94efd21a66ccaa/viewer
コーディング環境は、Webpackとnpm scriptsでFLOCSSのSCSSをコンパイルする下記の自作環境を使用しています。