Blog Layout Prototype 📝

A multi-page blog site built with HTML and CSS — no frameworks, no JavaScript. The most complete static site in this series, featuring a home page, individual blog posts with a sticky table of contents, an about page, and a contact form. Built to push HTML/CSS fundamentals as far as they can go before moving to JavaScript frameworks.

🔗 Live Demo

Pages

• Home (index.html) — blog listing with cover image and article cards
• Blog posts (blogs/) — three full articles with a sticky sidebar table of contents
  • Understanding Semantic HTML
  • Why CSS Spacing Matters More Than You Think
  • Building Layouts Without Frameworks
• About (about.html) — blog background and writing philosophy
• Contact (contact.html) — contact details and styled form

Key CSS Concepts Practiced

• CSS custom properties — --text, --background, --primary used consistently across all pages from a single stylesheet
• Google Fonts integration — Merriweather loaded via preconnect for performance
• Multi-page architecture — single shared stylesheet driving a consistent design system across 6 HTML files
• CSS Grid + Flexbox combination — blog post layout uses flex-direction: row-reverse to place the TOC on the right with flex: 3 for proportional column sizing
• Sticky table of contents — position: sticky with align-self: flex-start so the TOC tracks alongside scrolling article content
• Smooth scroll + scroll-margin-top — section anchors offset correctly behind the sticky header
• BEM-like naming — card__image, card__content, nav__link, toc__link, button--primary throughout
• Animated underline on nav links — ::after pseudo-element with width: 0 expanding to 100% on hover via transition
• Responsive images — aspect-ratio: 16/9, object-fit: cover, and loading="lazy" on all card images
• color-mix(in oklch, ...) — used for tinting, darkening, and transparency across multiple components
• Focus-visible states — keyboard-accessible outlines on all interactive elements (links, inputs, buttons)
• Form interaction states — hover and focus-visible both trigger the same outline on form elements
• Micro-interactions — translateY(-1px) on hover, scale(0.98) on active, transition: none on active to prevent jank
• calc() for layout — min-height: calc(100vh - 6rem) to account for the sticky header height
• min-width: 0 on flex children — prevents flex items from overflowing their container in the blog layout

Project Structure

blog-layout-prototype/
├── index.html
├── about.html
├── contact.html
├── blogs/
│   ├── understandingSemanticHTML.html
│   ├── whyCSSSpacingMatters.html
│   └── buildingLayoutsWithoutFrameworks.html
├── css/
│   └── style.css
├── images/
│   ├── sincerely-media-vcF5y2Edm6A-unsplash.jpg
│   ├── 0_xZPih1t_mIXAtd3C.jpg
│   ├── DKNteyUQ.jpg
│   └── hal-gatewood-weRQAu9TA-A-unsplash.jpg
└── README.md

How to View Locally

No build tools needed — just open index.html in your browser.

git clone https://github.com/rishiverma12031/blog-layout-prototype.git
cd blog-layout-prototype
# Open index.html in your browser

---

Part of my self-taught frontend development journey. See more projects at github.com/rishiverma12031