How to Build a Responsive URL Shortener with React | Frontend Mentor Challenge
Whatsup guys, So in today's video, we're going to build and deploy a responsive URL shortening API landing page. This is a Frontend Mentor challenge,
and I'll show you step-by-step how to create this project using React, vanilla CSS and Using the Many Apis to shorten the URL.
Source code
https://github.com/dev-lawrence/url-s...
Manyapis
https://manyapis.com/
Manyapis Docs
https://docs.manyapis.com/#manyapis-c...
Frontendmentor challenge
https://www.frontendmentor.io/challen...
Timestamps:
0:00 - Intro
3:12 - Creating the project with vite
8:04 - Header component
19:45 - Add base styles
22:54 - Add utility class
31:17 - Style the header component
49:52 - Hero component
53:45 - Style the hero component
59:52 - Shorten component
1:06:52 - Style the shorten component
1:24:42 - Statistics component
1:27:52 - Statistics Card
1:34:32 - Style the statistics component
1:47:47 - Boost component
1:49:24 - Style the boost component
1:52:51 - Footer component
2:00:09 - Style the footer component
2:11:53 - Client side validation
2:21:40 - Server side validation
2:46:42 - Display the data
3:03:02 - Add local storage
3:07:10 - Create repo
3:09:28 - Deploy to netlify
3:12:41 - 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]
#react #css #WebDevelopment #LandingPage #netlify #howto #deployment #html #CodingTips #howto