このサイト（AURELIONブランドサイト）を題材に、HTML・CSS・JavaScriptの基礎から実践的なテクニックまでを10回に分けて解説します。実際のコードを見ながら、ウェブ制作の基礎を身につけましょう。
番号順に読むことをおすすめします
DOCTYPE宣言・<head>・<body>など、HTMLファイルの基本構造を解説。AURELIONサイトがどのような骨格で成り立っているかを読み解きます。セマンティクス（意味のあるタグ選び）についても触れます。
:rootと--変数名を使ったCSS Custom Properties。AURELIONサイトの金・黒・白のカラーパレットがどのように管理されているかを解説します。
display:flexを使ってヘッダーナビゲーションを横並びにレイアウトする方法。justify-content・align-items・gapを実例で学びます。
grid-template-columnsとgapで3カラムのウォッチカードグリッドを作る方法。repeat()やfr単位の使い方を解説します。
CSSアニメーションの仕組みをヒーローセクションの時計を例に解説。@keyframes・animation・transform-originの使い方を学びます。
linear-gradient・radial-gradient・repeating-linear-gradientでAURELIONの高級感のある背景を作る方法。重ね合わせのテクニックも解説します。
window.addEventListener('scroll')でスクロール量を取得し、ナビゲーションの見た目を動的に変更するJavaScriptの仕組みを解説します。
スクロールで要素が画面に入ったときにアニメーションを発火させるIntersectionObserver APIを解説。revealクラスの仕組みを読み解きます。
collectionsページのタブ切り替えとフィルタリングを例に、クリックイベント・classList・DOMの表示切り替えを解説します。
@media (max-width: 900px)を使ったレスポンシブデザインの仕組みを解説。PC用のグリッドをスマホでは1カラムに変える方法など実践的なテクニックを学びます。