Build and Deploy a Responsive Professional Landing Page Using Astro & Tailwind CSS | Frontend Mentor
Whatsup guys, Welcome to a step-by-step guide tutorial on how to build a stunning landing page from Frontend Mentor using Astro and Tailwind CSS! 🚀
In this video, we'll cover everything you need to know to create a professional, responsive landing page from scratch and deploy it live.
Whether you want to improve your skills, this tutorial has got you covered.
Source code
https://github.com/dev-lawrence/fylo-...
Frontend mentor challenge:
https://www.frontendmentor.io/challen...
Astro Docs:
https://docs.astro.build/en/getting-s...
Timestamps:
0:00 - Intro
1:49 - Astro overview
6:09 - Creating the Astro project
9:42 - Files and folders overview
12:47 - Installing the Astro Extension
13:40 - Image assets
14:16 - Adding tailwind css
15:27 - Installing Astro tailwind prettier
20:48 - Fonts
21:49 - Making the title dynamic
25:36 - Hide Astro dev tools
26:46 - Creating Layouts
30:00 - Header section
40:31 - Hero section
55:04 - Feature section
1:12:45 - Productive section
1:28:45 - Testimonial section
1:44:20 - Newsletter section
2:01:34 - Footer section
2:31:17 - Client-side validation
2:49:58 - Creating Api Endpoint
2:53:55 - Creating DB
2:59:05 - Inserting Email to DB
3:07:15 - Create Astro studio
3:11:29 - Check Existing Email
3:15:10 - Deploy to Netlify
3:29:09 - Outro
---
Website: http://devlawrence.netlify.app/
Blog: https://dev.to/devlawrence
Github: https://github.com/dev-lawrence
---
🌎 Follow me on social media
Twitter: / lawrence_sticks
LinkedIn: / lawrence-amrasakpare
Instagram: / dev_lawrence1
---
💼 Business Inquiries:
E-mail: [email protected]
#Astro #TailwindCSS #WebDevelopment #FrontendMentor #LandingPage #netlify #howto #deployment #html #css