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