Latest updates, new guides, and improvements to CodeBooks.
Personalized Homepage, Page Transitions, Feedback & Font Size
April 5, 2026
+Continue Learning section — personalized "pick up where you left off" cards on the homepage showing your next unread guide in each category you've started
+Smooth page transitions — subtle fade-and-slide animation when navigating between pages
+"Was this helpful?" — thumbs up/down feedback at the bottom of every guide, persisted in localStorage
+Font size toggle — A / A+ / A++ button in the breadcrumb bar to increase guide text size for accessibility, persists across sessions
+Sidebar category expand/collapse now animates smoothly with CSS grid-rows transition
+Category completion confetti — finish all guides in a category to get a celebration burst and trophy toast
+"Ask AI" floating button — select text in any guide and click "Ask AI" to open the chat with that text pre-filled for explanation
+Enhanced print styles — all UI chrome hidden, page break rules, and codebooks.ai attribution
+Guide title sizes tightened — smaller font and tighter line-height for better mobile layout
+New /progress page — reading stats dashboard with guides read, minutes spent, quiz scores, perfect scores, and per-category progress bars
+Copy button on code blocks — hover over any code block in a guide to reveal a copy button
UX Improvements — Reading Progress, Bookmarks, ToC & More
April 5, 2026
+Auto mark-as-read — guides are now marked as read when you scroll 80% (replaced old 10-second timer)
+Read indicators — teal checkmarks appear on guide cards and in the sidebar for guides you've finished
+Table of Contents — sticky sidebar on desktop (xl+) and collapsible dropdown on mobile, auto-generated from guide headings with active section highlighting
+Back to Top button — floating purple button appears when you scroll down, smooth-scrolls back to top
+Bookmark guides — save your favorite guides with the bookmark button in the breadcrumb bar, view them in the sidebar under "Saved"
+Guide completion celebration — a "Guide complete! Nice work!" toast appears when you finish reading a guide for the first time
+Resume reading — returning to a partially-read guide shows a "Continue where you left off?" banner that scrolls you back to your previous position
+Breadcrumb current page now shows in purple bold for better visibility
+Search improvements — empty search now shows "Recently viewed" and "Popular" sections instead of all pages
+Tool suggestions in search — searching for "color" suggests Palette Generator, "font" suggests Font Picker, etc.
+Sidebar category progress — each category shows a mini progress ring with read count (e.g. 3/7)
+Sidebar bookmarks section — saved guides appear at the top of the sidebar for quick access
+Copy prompt animation — "Copied!" state now has a scale-in animation
+Removed the "New here?" welcome banner
Category Pages, Shared Components & Nav Improvements
April 5, 2026
+New category overview pages at /guides/start-here, /guides/design, /guides/code, /guides/launch, /guides/optimize — each shows a sidebar and card grid for that category
+Homepage groups and color data extracted to shared data file (homepage-groups.ts) — used by both homepage and category pages
+New CategoryCardGrid component — reusable card grid shared between homepage and category pages
+Nav category buttons (Start Here, Design, Code, Launch, Optimize) now navigate to /guides/<category> on click while still opening mega dropdown on hover
+Prompt Tools nav button now opens dropdown on hover and navigates to /prompt-tools on click
+Mega dropdown panels updated with rounded pill styling to match the navbar
+GuideSidebar now shows an "Overview" link at the top of each category
+"View all guides" link moved to bottom-left of dropdown panels
+Consistent px-5 padding across all content wrappers
+UI Elements expanded from 20 to 50+ sections — now covers navbars, footers, headers, sidebars, carousels, pricing tables, testimonials, toasts, command palettes, and more
+Colors guide expanded: gradient types (linear, radial, conic), color contrast & accessibility, dark mode strategies, color psychology
+Typography guide expanded: HTML text elements (h1-h6, p, strong, em, lists), text decoration, truncation & clamping, responsive typography, web font loading, common mistakes
+Icons guide expanded: icon styles (outline/filled/duotone), sizing guide, best practices, favicons & app icons, AI image generators, video & animation resources
+CSS Design Concepts expanded with 8 new sections: CSS Grid, positioning, z-index, overflow, media queries, CSS variables (interactive!), transforms, animations
+Responsive Design guide expanded: mobile vs desktop side-by-side demos, common breakpoints, mobile-first approach, responsive images, touch vs click, testing tips
+Tool promo banners added across guides: Palette Generator & Gradient Generator on Colors, Font Picker on Typography, Icon Picker on Icons, Landing Page Planner on UI Elements & Sections Gallery
+Quick-jump category buttons added to UI Elements page for fast navigation
+Cross-links added between related guides for better discoverability
+Reading time estimates updated to reflect expanded content
+Fixed hydration error in GuideTitleIcon — removed DOM injection approach
+Migrated layout scripts to next/script to eliminate console warnings
+New guide: Git Basics — commits, branches, GitHub, undoing mistakes, .gitignore, common errors, all explained for AI coders
+New guide: State Management — useState, props, global state, server state, forms, and common mistakes in plain English
+Fuzzy search — search now matches multi-word queries and ranks results by relevance
+Progress tracking — guides you've read show a checkmark in the sidebar (auto-marks after 10 seconds)
+106 automated tests covering data integrity, search coverage, content presence, and cross-links
Getting Started Refactor, Guide Enrichment & Sidebar Search
April 4, 2026
+Getting Started guides refactored into a single dynamic route — 7 duplicate files replaced with one shared template + data file
+Every Getting Started guide now has: 'What makes this tool different' callout, 'What you'll understand' preview, and 'Common First Issues' section
+Dashboards guide enriched: chart types explained (line, bar, pie, area), real world example, FAQ
+Reading Code guide enriched: 'What to Say to AI When You See This' pattern mapping, FAQ
+Notifications guide enriched: notification vocabulary (toast vs alert vs banner), real world example, FAQ
+Social Login guide enriched: data explainer, common gotchas, FAQ
+Custom Domains guide enriched: domain name tips, expanded FAQ with structured data, real world example
+Shipping Fast guide enriched: real MVP examples (Twitter, Airbnb, Dropbox), FAQ
+Mobile Apps guide enriched: user experience walkthrough per approach, real world example
+Guide sidebar now has a search filter — type to instantly find any guide
Prompt Projects — Hidden Marketing Pages
April 4, 2026
+New "Prompt Projects" system for custom standalone pages with minimal layout chrome (no ads, breadcrumbs, or guide nav)
+Burger Celebration (/burger-celebration) — track Greg Bounce's Spotify listeners on the road to 100K with raining burger emojis and a progress bar
+Beer Celebration (/beer-celebration) — track iZem's listeners toward 150K with a beach/beer theme and ocean gradient
+Emoji Party (/emoji-party) — 440+ emojis floating across the screen with 191 country flags hidden in the chaos. Find your flag, screenshot it, and share on Instagram @shecodes.io
+Each Prompt Project includes a copy-pasteable AI prompt showing how the page was built, plus a CodeBooks CTA
+Spotify API integration for artist profile data (photo, name, genres, Spotify link)
+Emoji Party footer banner added to all pages — "Can you find your flag?"
+Share overlay with screenshot mode: hides buttons for clean Instagram stories with flag, viral hook, URL, and @shecodes.io branding
8 New Guides
April 4, 2026
+Custom Domains — buy a .com and connect it to your site step by step
+How to Read Code — understand what AI generated without writing code yourself
+Notifications & Toasts — success messages, error alerts, and user feedback
+Dashboards & Admin Panels — data tables, stat cards, charts, and admin layouts
+Social Login — add Sign in with Google, GitHub, and Apple
+Environment Variables — now integrated into the guide order with difficulty badge
+Shipping Fast — MVP mindset, what to skip, and the 1-day launch plan
+Working with Designers — take a Figma design and describe it to your AI tool
Content Improvements & New Getting Started Guides
April 4, 2026
+3 new Getting Started guides: v0, Codex, and Replit — with setup steps, starter prompts, and tips
+Common Mistakes guide expanded with Deployment Mistakes (6 new) and more AI Prompting Mistakes (2 new), plus fix-it prompts for each category
+Glossary Term tooltips — hover over technical terms (API, Backend, Middleware, etc.) for instant definitions without leaving the page
+Real World Example sections added to Forms, Search & Filtering, and API Integration guides with concrete scenarios and AI prompts
+Related Guides suggestions at the bottom of every guide page — discover related content after reading
Guide UX Improvements & Interactive Features
April 4, 2026
+Interactive color playground on the Colors guide — pick brand, background, and text colors and see them applied to a live mini-website preview
+First Project guide now uses an interactive step-by-step wizard with progress tracking and completion states
+"What you'll understand" preview cards added to Frontend, Backend, Database Design, Authentication, and Payments guides
+Difficulty badges (Beginner/Intermediate/Advanced) and reading time estimates now appear on all 50+ guide pages automatically
+FAQ section and structured data added to the Payments guide
+Prompt Tools button in the navigation is now a filled purple pill for better visibility
+Footer, SheCodes promo, guide navigation, share buttons, and breadcrumbs now match the homepage content width (1100px)
6 New Interactive Tools & Test Suite
April 3, 2026
+Database Planner — answer simple questions about your app and get a complete database plan with AI prompt
+Icon Picker — browse 200+ Lucide icons with search, categories, and one-click copy
+Deployment Checklist — 33-item interactive pre-launch checklist with AI prompts and localStorage persistence
+Meta Tag Generator — fill in your site details, get SEO & Open Graph tags with live Google/social previews
+Prompt Builder — step-by-step wizard to craft AI coding prompts for 8 task types (build, fix, design, etc.)
+Error Decoder — paste any error message, get a plain English explanation and a ready-to-paste AI fix prompt
+Pro Tools section reordered to match the beginner app-building journey: Plan → Structure → Design → Debug → Launch
+Added Vitest test suite with 66+ tests covering data integrity, search coverage, and tool page structure
FAQ Schema & Footer Cleanup
April 3, 2026
+Added FAQ structured data (JSON-LD) to 7 key guide pages for Google rich results
+New reusable FaqSchema component for easy FAQ schema on any page
+Redesigned footer — clean 4-column grid layout with SheCodes AI card
+Fixed SheCodes promo ad layout breaking on tablet-sized screens
+Footer now uses 'Built with 💜 by' SheCodes AI branding
Homepage Redesign & Color-Coded Categories
April 3, 2026
+Two-column hero with floating AI tool cloud animation
+Multiple hero badges — guide count, beginner-friendly, and free callouts
+Each category (Start Here, Design, Code, Workflow, Launch, Pro Tools) now has its own color scheme
+Guide cards lift on hover with color-matched borders and icons
+Improved SheCodes callout card in the hero
Guide Pages Rewritten in Plain English
April 3, 2026
+Accessibility, Database Design, Debugging, SEO, Project Structure, Dev Workflow, Env Variables, Images & Media, API Integration, and Authentication pages fully rewritten for beginners
+Technical jargon replaced with analogies and everyday language
+Added AI prompt boxes — copy-paste prompts to ask your AI tool
+New GuideBadges component showing difficulty level and reading time
+New GuideNav component for prev/next navigation between guides
Chat Widget Upgrade
April 3, 2026
+Fenced code block rendering with syntax-highlighted output
+Client-side rate limiting — 5 questions/hour, 20/day with friendly messaging
+Slide-in/slide-out animations instead of pop-up
+Dismissable usage nudge so users know their limits
New Components & Animations
April 3, 2026
+ToolCloud — animated floating cloud of AI tool names on the homepage
+GuideBadges — difficulty and reading time badges for guide pages
