Astro Crash Course - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Web Development Traversy Media Video: Astro Crash Course.
Astro is an amazing static site generator that allows you to build really fast websites with little to no production JavaScript. You can use Astro components as we all have components from other frameworks such as React, Vue and Svelte.

TIP: I forgot to mention there is a VS Code extension called "Astro". Use it for syntax highlighting.

💻 Github Repo:
https://github.com/bradtraversy/astro-crash-course

⭐ All Courses
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro / What Is Astro?
3:20 - Project Demo
6:20 - Create A New Astro Project
7:50 - Folder Structure
10:19 - Run Dev Server & Prepare
11:18 - Astro Components
16:00 - Making a Request - Top Level Async
17:13 - Create A Layout
20:29 - Passing Props
23:17 - Start Project / Global Styling
26:53 - Header Component
31:38 - React Integration
37:10 - Showcase Component
43:18 - Features & Card Components
49:34 - Dynamic Classes - Dark Card
51:40 - Page Content & Tabs Component
1:03:28 - Footer Component
1:05:19 - About Page
1:08:37 - Refactor Card Component
1:10:53 - Blog Page & Markdown Files
1:18:44 - Fetching Markdown FIles
1:20:57 - Blog Showcase Component
1:22:50 - Single Post Page / getStaticPaths()
1:29:35 - Build Static Assets
1:30:40 - Deploy To Netlify

Published: Sunday, September 25, 2022 11:08 AM
Category: Web Development Traversy Media

32 Views

Related Videos

Popular
PDO Crash Course (PHP)

by Best Webhosting Added 6 years ago 120 Views / 0 Likes

In this video we will go over the basics of PDO (PHP Data Objects) which is a secure and consistent way to connect to a database via PHP. It is an alternative to mysqli. We will go over connection, PDO::Query and CRUD operations through prepared statements OOP PHP MVC Udemy Course $10 Promo: https://www.udemy.com/object-oriented-php-mvc/?couponCode=TRAVERSY010 CODE: All code is in this GitHub Gist https://gist.github.com/bradtraversy/147443539b7e1afaf
Popular
NPM Crash Course

by Best Webhosting Added 6 years ago 153 Views / 0 Likes

This is a beginner-friendly crash course and tutorial on NPM or the Node Package Manager. Some of what you will learn..... Install and remove modules Update modules All about package.json Set init defaults Local & global modules Dependencies & dev dependencies Listing modules Semantic Versioning NPM Scripts COMMANDS: https://gist.github.com/bradtraversy/09177818de0f43a6e74e2cd05d1fe596 BECOME A PATRON: Show support & get perks! http://www.patreon.com/
Popular
Node.js Crash Course

by Best Webhosting Added 6 years ago 130 Views / 0 Likes

In this crash course we will explore Node.js fundamentals including modules such as path, url, fs, events and we will create an HTTP server from scratch without Express and deploy to Heroku. Watch Next: Express Crash Course: https://www.youtube.com/watch?v=L72fhGm1tfE Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code: https://github.com/bradtraversy/node_crash_course • Become a Patron: Show support & get perks! http://www.patreon.com/traversyme
Markdown Crash Course

by Best Webhosting Added 6 years ago 100 Views / 0 Likes

In this video we will discuss what Markdown is, what it is used for and we will jump into VSCode and learn the entire syntax in around 10 minutes. We will also push to a Github repo to see what it looks like there. Sponsor: Coding Dojo http://www.codingdojo.com/l/yt/tr Cheat Sheet Gist: https://gist.github.com/bradtraversy/547a7bbf35ffba1561706e161a50b05a • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy
Popular
Flutter Crash Course

by Best Webhosting Added 6 years ago 132 Views / 0 Likes

In this crash course we will look at Flutter for building native mobile apps. We will look at what Flutter is, how to get setup, built in widgets, stateless and stateful widgets, routing and more Sponsor: Linode Hosting https://linode.com/traversy Flutter Setup Gist: https://gist.github.com/bradtraversy/f1af78251962bb210c2ebe5b4f9a5c35 Code: https://github.com/bradtraversy/wordpair_generator Docs Tutorial: https://flutter.dev/docs/get-started/codelab
Popular
Gulp JS Crash Course

by Best Webhosting Added 6 years ago 112 Views / 0 Likes

In this video we will work with the Gulp.js task runner and toolkit. We will talk about how it works as well as create an example app with the following tasks and plugins... Moving/Copying Files Concatenate JavaScript Files Minify / Uglify JavaScript Files Compile Sass/scss Files Optimize Images with Imagemin Code: Code for this video https://github.com/bradtraversy/gulpexapp EDUONIX COURSES: Please use affiliate links from website below http://www.tr
Popular
Canvas Crash Course

by Best Webhosting Added 6 years ago 124 Views / 0 Likes

In this video we will look at the HTML5 Canvas element and JavaScript API to draw shapes, paths and do some basic animation Sponsor: Linode Hosting https://linode.com/traversy Code: https://codepen.io/bradtraversy/details/YzPeNxg • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia htt
Sass Crash Course

by Best Webhosting Added 6 years ago 100 Views / 0 Likes

In this video we will talk about what Sass is and look at its features as well as create a landing page header to display things like variables, nesting, mixins, etc Code: https://codepen.io/bradtraversy/pen/ExjmGdY?editors=1100 • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.c
Web Components Crash Course

by Best Webhosting Added 6 years ago 95 Views / 0 Likes

This is an introductory crash course on web components including custom elements, shadow DOM and HTML templates. Code: https://codepen.io/bradtraversy/pen/wvaXKoK • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia
Deno Crash Course

by Best Webhosting Added 5 years ago 98 Views / 0 Likes

In this Deno crash course we will talk about what Deno is and look at some of the basics as well as create a full REST API which starts at 21:54 REST API Code: https://github.com/bradtraversy/deno-rest-api • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https:
Popular
C++ Crash Course For Beginners

by Best Webhosting Added 5 years ago 102 Views / 0 Likes

In this beginner crash course, you will learn the fundamentals of C++ CodeBeauty YouTube Channel (Saldina Nurak): https://www.youtube.com/channel/UCl5-BV9aRaeDVohpE4sqJiQ Saldina Nurak Social Media Links: Instagram: https://www.instagram.com/truecodebeauty/ Twitter: https://twitter.com/TrueCodeBeauty Facebook: (Saldina Nurak) https://www.facebook.com/truecodebeauty LinkedIn: (Saldina Nurak) https://www.linkedin.com/in/codebeauty/ • Become a Patron: Sh
Popular
Nuxt JS Crash Course

by Best Webhosting Added 6 years ago 113 Views / 0 Likes

In this video we will look at Vue.js server side rendering with Nuxt.js. We will build a dadjokes app. This requires at least minimal Vue.js experience. Sponsor: Freelancer Bundle (Use "brad25" for 25% off) https://studywebdevelopment.com/freelancing.html Code: https://github.com/bradtraversy/nuxt_dadjokes • Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Trave