MENU

Fun & Interesting

Creating a Flexible Astro Component

Coding in Public 13,253 2 years ago
Video Not Working? Fix It Now

Join the early access list for my course! https://learnastro.dev Astro provides tremendous helps for building robust components. We’ll explore them with a simple Astro Button component. 🔗 Key Links 🔗 - Github: https://github.com/coding-in-public/astro-component-example-btn --------------------------------------- 📹 Related Videos 📹 - Astro Crash Course: https://www.youtube.com/watch?v=zrPVTf761OI --------------------------------------- ⏲️ Timestamps ⏲️ 0:00 Introduction 1:36 Setup 3:30 Why use components? 4:45 Button Component HTML 16:22 Button CSS 27:11 CSS class scoping 30:22 Client-side JS 31:36 Adding TypeScript --------------------------------------- 🎨 VSCode Theming - Font: Cascadia Code: https://github.com/microsoft/cascadia-code - Theme: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme - Icons: https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedicons --------------------------------------- 🌐 Connect With Me 🌐 - Website: https://codinginpublic.dev - Blog: https://chrispennington.blog - Twitter: https://twitter.com/cpenned - Patreon: https://www.patreon.com/coding_in_public - Buy Me a Coffee: https://www.buymeacoffee.com/chrispennington

Comment