Start here Book
Related Tools
Designs Book
Code Book
Launch Book
Optimize Book
Join 250,000+ women at SheCodes and start building real projects with AI.
Colors, typography, layouts, animations, and everything visual — make your AI-built apps look great.
Design ideas, AI design tools, and trends to make your site look amazing.
40+ components — buttons, modals, breadcrumbs, FABs, and more.
Hex, RGBA, HSL, palettes, gradients, and color converter.
Font sizes, weights, line height, Google Fonts, and pairing.
The 4px grid, padding vs margin, recipes, and max-widths.
Lucide, Heroicons, stock photos, illustrations, backgrounds.
Landing pages, dashboards, blogs, e-commerce, portfolios.
30+ website section variations: heroes, features, CTAs, footers.
Padding, margin, fonts, colors, layout — explained visually.
Breakpoints, mobile-first, patterns, navigation strategies.
Make your site usable by everyone. Semantic HTML, ARIA, contrast.
Study a site you love, describe it to AI, and recreate it.
Take a Figma design and describe it to your AI coding tool.
Headlines, CTAs, and descriptions that make your site professional.
CSS transitions, Tailwind animations, Framer Motion.
Implement light/dark theme toggle with Tailwind and next-themes.
