During this video series, we’re going to do a full design-to-code landing page.

We’ll start by hand-designing everything in Figma and then code out the page using a new static site generator called Astro. To style the site, we’ll write modern CSS and tack on a few superpowers using Open Props, a brand new framework made entirely from css variables. And for a bit of extra fun, we’ll hook our styling up with Post CSS and Open Props’ just-in-time engine to keep our compiled stylesheet lightweight and speedy, only including props we use and our manually-typed CSS.

🔗 Key Links 🔗

• Live code: https://codinginpublic.dev/projects/desgn-landing-page/
• YouTube series: https://www.youtube.com/watch?v=jyjScZWgzIg&list=PL4cUxeGkcC9hZm9NYpd4G-jhoeEk0ls--

🔗 Additional Links 🔗

• Figma
• NodeJS
• Astro Docs
• Astro Icon
• PostCSS Docs
• PostCSS autoprefixer Plugin
• Open Props
• PostCSS Plugin for JIT Open Props

🌐 Connect With Me 🌐

• Website: https://www.codinginpublic.dev
• Blog: https://www.chrispennington.blog
• Twitter: https://twitter.com/cpenned