<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Basic HTML5 document structure:
<h1>Main Heading</h1>
<p>Paragraph text</p>
<span>Inline text</span>
<div>Block container</div>
.class-name { property: value; }
#id-name { property: value; }
element { property: value; }
element.class { property: value; }
parent > child { property: value; }
.box {
margin: 10px;
border: 1px solid black;
padding: 15px;
width: 200px;
height: 100px;
}
Box model from outside to inside:
<form action="/submit" method="POST">
<input type="text" pattern="[A-Za-z]{3,}" required>
<input type="email" placeholder="Enter email">
<input type="number" min="0" max="100">
<input type="date" min="2024-01-01">
<select multiple>
<option value="1">Option 1</option>
</select>
<textarea rows="4" cols="50"></textarea>
</form>
Advanced form features:
<header>Site header</header>
<nav>Navigation menu</nav>
<main>
<article>
<section>Article section</section>
</article>
<aside>Sidebar content</aside>
</main>
<footer>Site footer</footer>
<video controls width="400">
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="captions.vtt">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 300px;
/* grow shrink basis */
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
grid-auto-rows: minmax(100px, auto);
}
.grid-item {
grid-column: span 2;
grid-row: span 2;
}
@keyframes slide-in {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.animated {
animation: slide-in 0.5s ease-out;
transition: all 0.3s ease;
}
.animated:hover {
transform: scale(1.1);
}
:root {
--primary-color: #3498db;
--spacing-unit: 8px;
--max-width: 1200px;
}
.element {
color: var(--primary-color);
padding: calc(var(--spacing-unit) * 2);
max-width: var(--max-width);
}
/* Mobile First */
@media screen and (min-width: 768px) {
/* Tablet styles */
}
@media screen and (min-width: 1024px) {
/* Desktop styles */
}
/* Print styles */
@media print {
.no-print {
display: none;
}
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
.element {
transform: perspective(1000px) rotateY(45deg);
transform-style: preserve-3d;
backface-visibility: hidden;
}
.card-flip {
transform: rotateX(180deg);
transition: transform 0.6s;
}
.image-effects {
filter: brightness(1.2) contrast(1.1) saturate(1.2);
}
.blur-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
color: transparent;
}
.holy-grail {
display: grid;
grid-template:
"header header header" auto
"nav main aside" 1fr
"footer footer footer" auto
/ auto 1fr auto;
min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(min(100%, 300px), 1fr));
gap: clamp(1rem, 3vw, 2rem);
padding: max(2vw, 1rem);
}
.card {
aspect-ratio: 3/4;
object-fit: cover;
}
.scroll-reveal {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
}
.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Modern approach */
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(20px);
}
}
.animate-on-scroll {
view-timeline: --reveal-timeline block;
animation: fade-up linear both;
animation-timeline: --reveal-timeline;
animation-range: entry 20% cover 50%;
}
@property --progress {
syntax: '';
initial-value: 0;
inherits: false;
}
.progress-circle {
--progress: 0;
background: conic-gradient(
from 0deg,
hsl(calc(var(--progress) * 120), 70%, 50%)
calc(var(--progress) * 360deg),
#eee 0
);
transition: --progress 0.5s;
}
.progress-circle:hover {
--progress: 1;
}
<button
role="tab"
aria-selected="true"
aria-controls="panel-1"
>Tab 1</button>
<div
role="tabpanel"
id="panel-1"
aria-labelledby="tab-1"
hidden
>Content</div>
<div role="alert" aria-live="polite">
Status update
</div>
<article itemscope itemtype="http://schema.org/BlogPosting">
<h1 itemprop="headline">Title</h1>
<meta itemprop="datePublished" content="2024-01-20">
<div itemprop="articleBody">
Content
</div>
</article>
<meta name="description" content="Page description">
<link rel="canonical" href="https://example.com/page">
<div class="container wrapper dark-theme">
<div class="card shadow rounded">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
</div>
</div>
/* Multiple classes */
.card.shadow.rounded {
/* Styles applied when all classes present */
}
/* Descendant selectors */
.card .card-header {
/* Styles for nested elements */
}
.advanced-container {
/* Glass effect */
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
/* Modern shadow */
box-shadow:
0 4px 6px -1px rgba(0,0,0,0.1),
0 2px 4px -1px rgba(0,0,0,0.06);
/* Gradient border */
border-image: linear-gradient(45deg,
#ff6b6b, #4ecdc4) 1;
}
/* BEM Methodology */
.block {}
.block__element {}
.block--modifier {}
/* Utility Classes */
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.p-4 { padding: 1rem; }
/* State Classes */
.is-active {}
.has-error {}
.--disabled {}