Creating a Flexible Astro Component
Coding in Public
@codinginpublicAbout
👋 Hi! My name is Chris Pennington 👋 I’m a relative beginner to development and enjoy teaching what I’m learning to others. I mostly teach beginner to intermediate web dev on the channel through project and component builds. Coding in public gives us all the chance to learn together. I’m a learner first and an expert never. Have a suggestion? Leave a comment! We’re all learners and we all learn better when we code together!
Latest Posts
Video Description
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
You May Also Like
Build Your Astro Project Kit Today
AI-recommended products based on this video
AS1 Mini PC, with Ryzen 5 3550H Mini Computers 16GB RAM 512GB PCIe SSD, Vega 8 Graphics Triple Display Micro PC, 2×RJ45 LAN/3×USB3.2/USB-C/HDMI/Wi-Fi 5/BT 5.0
Selore USB C Docking Station for Laptop Dual HDMI Monitor, 8 in 1 Triple 4K Docking Station 4 Monitors Adapter,VGA,100W PD,2USB A 2.0,USB C 2.0 USB C Hub for MacBook HP Dell Lenovo
USB C Hub Triple Monitor Adapters 8 in 1 USB C Docking Station with Dual HDMI Displayport VGA, USB C 100w PD,3USB2.0 Multiport Dongle for Dell XPS 17/15/13,Lenovo Lenovo Thinkpad,HP Envy,MacBook
wo-we Mini PC P6 Ryzen 5 3550H(4C/8T,up to 3.7GHz) 16GB DDR4 RAM 512GB NVMe SSD Gaming PC, Radeon Vega 8 Graphics Mini Desktop Computer, Triple 4K 60Hz Displays, USB 3.2/USB 2.0/HDMI, WiFi5 BT5.0
