| name | Static Web Development |
| description | Expert knowledge in HTML, CSS, responsive design, CSS Grid, Flexbox, modern layout techniques, and semantic markup. Triggers on keywords like "html", "css", "layout", "responsive", "grid", "flexbox", "semantic", "accessibility markup", "forms". |
| version | 1.0.0 |
Static Web Development
Master modern HTML, CSS, and layout techniques for building accessible, responsive, and performant static web pages.
When to Use This Skill
Activate when working on:
- HTML structure and semantic markup
- CSS layouts (Grid, Flexbox, positioning)
- Responsive design and media queries
- Form design and validation
- CSS animations and transitions
- Typography and spacing systems
- Print stylesheets
- Static site generation
Modern HTML
Semantic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SkyyRose - Where Love Meets Luxury">
<title>SkyyRose | Luxury Fashion Jewelry</title>
<meta property="og:title" content="SkyyRose Luxury Jewelry">
<meta property="og:description" content="Handcrafted luxury fashion jewelry">
<meta property="og:image" content="https://skyyrose.co/og-image.jpg">
<meta property="og:type" content="website">
<link rel="preload" as="font" type="font/woff2" href="/assets/fonts/archivo-latin.woff2" crossorigin>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header role="banner">
<nav role="navigation" aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/collections">Collections</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main role="main">
<article>
<header>
<h1>Signature Collection</h1>
<time datetime="2026-02-06">February 6, 2026</time>
</header>
<section>
<h2>Product Details</h2>
<p>Handcrafted with precision...</p>
</section>
</article>
</main>
<aside role="complementary">
<h2>Related Products</h2>
</aside>
<footer role="contentinfo">
<p>© 2026 SkyyRose LLC. All rights reserved.</p>
</footer>
</body>
</html>
Accessible Forms
<form action="/checkout" method="post" novalidate>
<fieldset>
<legend>Shipping Information</legend>
<div class="form-group">
<label for="full-name">
Full Name <span aria-label="required">*</span>
</label>
<input
type="text"
id="full-name"
name="full_name"
required
aria-required="true"
aria-describedby="name-error"
autocomplete="name"
>
<span id="name-error" class="error" aria-live="polite"></span>
</div>
<div class="form-group">
<label for="email">Email Address <span aria-label="required">*</span></label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
aria-describedby="email-error email-hint"
autocomplete="email"
inputmode="email"
>
<span id="email-hint" class="hint">We'll never share your email</span>
<span id="email-error" class="error" aria-live="polite"></span>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input
type="tel"
id="phone"
name="phone"
autocomplete="tel"
inputmode="tel"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="555-555-5555"
>
</div>
</fieldset>
<button type="submit">Place Order</button>
</form>
Modern CSS
CSS Custom Properties (Variables)
:root {
--color-primary: #B76E79;
--color-primary-hover: #A65E69;
--color-secondary: #2C2C2C;
--color-accent: #E8C5A5;
--font-heading: 'Archivo', system-ui, sans-serif;
--font-body: 'Inter', sans-serif;
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 2rem;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--transition-fast: 150ms ease-out;
--transition-base: 300ms ease-in-out;
--transition-slow: 600ms cubic-bezier(0.43, 0.13, 0.23, 0.96);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--border-radius-sm: 0.25rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 1rem;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #C98090;
--color-secondary: #F5F5F5;
}
}
CSS Grid Layouts
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--spacing-xl);
padding: var(--spacing-xl);
}
@media (min-width: 768px) {
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
}
.collection-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: var(--spacing-xl);
}
.collection-header { grid-area: header; }
.collection-sidebar { grid-area: sidebar; }
.collection-content { grid-area: content; }
.collection-footer { grid-area: footer; }
@media (max-width: 768px) {
.collection-layout {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
Flexbox Patterns
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-lg);
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.vertical-stack {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.sidebar {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.sidebar > :last-child {
flex-grow: 1;
}
Responsive Design
.hero {
padding: var(--spacing-lg);
font-size: var(--font-size-base);
}
@media (min-width: 768px) {
.hero {
padding: var(--spacing-xl);
font-size: var(--font-size-lg);
}
}
@media (min-width: 1024px) {
.hero {
padding: var(--spacing-2xl);
font-size: var(--font-size-xl);
}
}
@media (min-width: 1440px) {
.hero {
max-width: 1400px;
margin: 0 auto;
font-size: var(--font-size-2xl);
}
}
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}
CSS Animations
.product-card {
transition: transform var(--transition-base);
}
.product-card:hover {
transform: translateY(-8px);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn var(--transition-slow) ease-out;
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.skeleton {
background: linear-gradient(
90deg,
#f0f0f0 25%,
#e0e0e0 50%,
#f0f0f0 75%
);
background-size: 2000px 100%;
animation: shimmer 2s linear infinite;
}
.rose-gold-shimmer {
background: linear-gradient(
90deg,
#B76E79 0%,
#E8C5A5 50%,
#B76E79 100%
);
background-size: 200% 100%;
animation: shimmer 3s linear infinite;
}
Typography
html {
font-size: 16px;
}
@media (min-width: 768px) {
html {
font-size: 18px;
}
}
@media (min-width: 1024px) {
html {
font-size: 20px;
}
}
h1 {
font-size: clamp(2rem, 5vw + 1rem, 4rem);
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
p {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-secondary);
max-width: 65ch;
}
.luxury-heading {
font-family: var(--font-heading);
font-weight: 400;
font-style: italic;
color: var(--color-primary);
letter-spacing: 0.05em;
}
Performance
Critical CSS
<head>
<style>
body { margin: 0; font-family: system-ui; }
.hero { min-height: 100vh; display: flex; }
</style>
<link rel="preload" href="/assets/fonts/archivo-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/style.css" media="print" onload="this.media='all'">
</head>
Modern Image Formats
<picture>
<source srcset="product.avif" type="image/avif">
<source srcset="product.webp" type="image/webp">
<img
src="product.jpg"
alt="SkyyRose Signature Necklace"
width="800"
height="600"
loading="lazy"
decoding="async"
>
</picture>
Print Stylesheets
@media print {
header, footer, nav, .sidebar, .ads {
display: none;
}
body {
font-size: 12pt;
line-height: 1.5;
color: #000;
background: #fff;
}
.product-card, figure, blockquote {
page-break-inside: avoid;
}
a[href]::after {
content: " (" attr(href) ")";
}
img {
max-width: 100% !important;
}
}
SkyyRose-Specific Patterns
Luxury Card Design
.luxury-product-card {
background: #fff;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: all var(--transition-base);
}
.luxury-product-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.luxury-product-card__image {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
}
.luxury-product-card__content {
padding: var(--spacing-lg);
}
.luxury-product-card__title {
font-family: var(--font-heading);
font-size: var(--font-size-xl);
color: var(--color-primary);
margin-bottom: var(--spacing-sm);
}
.luxury-product-card__price {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-secondary);
}
Rose Gold Accents
.rose-gold-accent {
border-left: 4px solid var(--color-primary);
padding-left: var(--spacing-md);
}
.rose-gold-underline {
position: relative;
display: inline-block;
}
.rose-gold-underline::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
Accessibility
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.skip-to-main {
position: absolute;
top: -40px;
left: 0;
background: var(--color-primary);
color: white;
padding: 8px;
z-index: 100;
}
.skip-to-main:focus {
top: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
@media (prefers-contrast: high) {
.product-card {
border: 2px solid currentColor;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
References
See references/ for detailed guides:
css-grid-guide.md - Complete CSS Grid referenceflexbox-patterns.md - Common Flexbox layoutsresponsive-design.md - Mobile-first techniquestypography-system.md - Typographic scales and rhythmaccessibility-checklist.md - HTML/CSS accessibility
Examples
See examples/ for working implementations:
product-grid.html - CSS Grid product layoutluxury-card.html - SkyyRose card designresponsive-nav.html - Mobile-friendly navigationaccessible-form.html - Complete accessible formprint-styles.html - Print-optimized page
