（すべて1冊で身につくJavaScript）ローディング画面を作る

お疲れ様です。

今回もタイトルにあります通り、「すべて1冊で身につくJavaScript入門講座」の内容を勉強し、実践してみたものです。
JavaScriptのanimateプロパティを使ったものですが、指定できるプロパティ1つ1つの意味を理解すれば、こんなこともできるんだなーと感じた次第です

転職目指して勉強をしているのですが、最近はアニメーションばかりな気がします…
とはいえ、他の教材を使ってみる前に、この参考書を1冊やり通してから考えようと思います！
qiita内でもたまに探しているのですが、初心者用でおすすめの勉強法がありましたら、お教えいただけますと助かります
やはりコードを書きまくることが最短でしょうか…

See the Pen Untitled by mtzkmy (@mtzkmy) on CodePen.

話が逸れましたが、参考書を元に作ったものが上に表示されているものです。
今回はcssの一括指定プロパティが初見でしたので、inset, place-items を調べるところから始まりました

調べて、使ってみての感想ですが、とても便利ですね！
place-items は今回画像を貼っていないため関係ないのでしょうが、insetはmarginの一括指定というもの魅力的だなと思いましたが、

inset: 0;
position: fixed;

の組み合わせで、画面いっぱいに広げられるという知識も学べました

そして一括指定ではありませんが、object-fit を使えば、画面がどんな大きさであっても表示領域にうまく合わせてくれるプロパティと知り、画像を貼りつける時は必須だなと思いました。

ローディング画面を実装すれば、配色次第でなんだかゲーム画面みたいでかっこいいページができそうです