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:

🔔 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

[elicohuang]

Hi, I really appreciated this course and I would be glad if you could make a tutorial on how to actually deploy to the public these projects.

[antonchigurh]

Randomly found you yesterday. Great tutorial. Subbed!