MERN Tutorial: Ep 12 - Styling
Welcome back to our MERN Full Stack Web Dev course! In this episode, we’ll take care of the styling aspect of our site. We'll use shadcn and Tailwind to make our site look much prettier than the default. Styling your site to look professional may take hours, but in this video we'll just cover the basics necessary for you to get started!
Steps Covered:
How to add shadcn to your project
How to add Tailwind to your project (included with shadcn)
How to style a navbar with Tailwind
How to style individual React pages
Key Topics:
Full Stack Development
Frontend development
CSS
Tailwind
shadcn
Styling React pages
🔗 Resources:
React Docs: https://react.dev/
shadcn Docs: https://ui.shadcn.com/
TailwindCSS: https://tailwindcss.com/
🔔 Don’t forget to like, comment, and subscribe for more full stack development tutorials! Hit the bell icon to get notified when we upload new videos.
#FullStackDevelopment #ReactJS #Vite #MongoDB #NodeJS #WebDevelopment #CodingTutorial #JavaScript #mernstack
Timestamps:
0:00 - Shadcn/Tailwind Setup
6:33 - Landing page
13:59 - Navbar
19:00 - BlogCard
22:29 - Home Page
23:41 - ReadBlog Page
29:38 - CreateBlog Page
35:23 - About/Contact Page
40:45 - Profile Page
45:40 - Styling Overview