暇だからコード書きたいなでも、お題ないなって時の味方。
数年前にちょっとやったままだったので、サブスクリプション再開した。
Frontend Mentor
https://www.frontendmentor.io/
実践的なコーディングスキルを学べるプラットフォーム。ユーザーは取り組みたいプロジェクトをリストから選択して開発。公開したリポジトリやデプロイ先のリンクをフォームから送信することでプラットフォーム内で共有され、他のユーザーからコメントついたり、レビューもらえたりする。（体感そこまでアクティブにレビューされるわけではないかつ、難易度が低いプロジェクトがたくさんやられている印象。難しいプロジェクトに対するレビューとかはまだみたことがない。てかやってる人があまりいなそう）
プロジェクトは、HTML、CSSだけで完結するものから、Reactなどのフレームワークを使いながらモダンなアプリを開発するものまでさまざま。プロジェクト詳細ページからスターターキット、仕様、デザイン（Figma or Sketch）がダウンロードできるようになっていて、実際のコーディング案件に近いような印象。
Single price grid component
project
repo
site preview
数年前にやったけど、デザインに忠実にやれてないとこあったので、久々だしやり直した。
素のHTML、CSS書いてきてないから、初め結構冗長にCSS書いてしまってたが、他に投稿されている同じプロジェクトのリポジトリをみに行って、セレクタの指定とか参考にした。
学び
grid-template-areas
grid-areas を初めて使った。最初は flexbox で書こうと思ってたけど grid 不慣れだったしおあつらえ向きのデザインではあるので、grid でやってみた。適切なのかはわからないが、こういう書き方ができるのを知って、実践できた。と、grid-template... プロパティは grid（格子状のコンテナ）つくって grid item をどうそこにあてはめるかなんだなっていう認識ができてちょっと grid に対する解像度が増した。
ref.
https://css-tricks.com/snippets/css/complete-guide-grid/
@media screen and (width < 767px) { ... }
最初は旧来の @media screen and (max-width: 767px) { ... } で書いてたけどそういえばもっとリーダブルな書き方できるようになったよなと思って調べた。
圧倒的に読みやすい。
ref.
https://css-tricks.com/the-new-css-media-query-range-syntax/
:root
文字通りで、ドキュメントの頭の要素に対するセレクタ。なのでグローバルなCSS変数とかはここに指定する。
ref.
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
感想
サンドバッグかなと思ってたけど、意外と知らなかったこと知れたし、使ったことないやつ試せた。同じプロジェクトをやってる人たちのリポジトリも覗けるので参考になってよい。とはいえ、もうちょっと難易度の高いものやりたいので Guru っていうレベルのフレームワーク使ったり、モデリング必要だったり、外部システムとの連携が必要だったりするようなものをやっていきたい。