← Websites
📰
Blog Homepage with Reading Time
Build a card-grid blog homepage that calculates each post's reading time automatically.
🟢 EasyDifficulty
2-3 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A blog homepage that renders a grid of article cards from a JavaScript array of posts, complete with category tags, a featured post banner, category filtering, and an automatically calculated 'X min read' badge on every card computed from the actual word count.
What you'll unlock 🔓
You'll need
- Basic HTML
- Basic CSS
- Basic JavaScript
🗺️ Build roadmap
01 Set up the page and post data
→
02 Render the card grid
→
03 Calculate reading time
→
04 Add a featured post banner
→
05 Add category filtering
→
06 Style and polish
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free