DEV Community

Cover image for How I Built My First Website Using React & TailwindCSS
Dhrubaraj Pati
Dhrubaraj Pati

Posted on

How I Built My First Website Using React & TailwindCSS

#beginners #react #tutorial #tailwindcss

The best way to learn web development is to build something real.

Hey everyone 👋
In this post, I’ll share how I built my very first website using React and TailwindCSS from setup to deployment. If you’re a beginner wondering where to start, this guide will help you get there faster.

Why I Chose React + TailwindCSS

When I started learning web development, I wanted something modern, fast, and flexible.
After trying out plain HTML/CSS and Bootstrap, I switched to React for dynamic components and TailwindCSS for utility-first styling.

React helped me organize my project into reusable components, and Tailwind gave me full design control — without writing tons of CSS.

Step 1: Setting Up the Project

I started with Vite, a fast build tool for React projects.

npm create vite@latest my-portfolio --template react
cd my-portfolio
npm install
Enter fullscreen mode Exit fullscreen mode

Then I installed TailwindCSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Added this to tailwind.config.js:

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
],
Enter fullscreen mode Exit fullscreen mode

And finally, imported Tailwind into my index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

The setup was done!

Step 2: Designing the Layout

I wanted a clean and responsive layout with:

  • A beautiful navbar
  • A hero section with my introduction
  • A projects section
  • A contact form

Using Tailwind, I could easily style everything like this:

<div className="bg-gray-900 text-white min-h-screen">
  <nav className="p-6 flex justify-between items-center">
    <h1 className="text-2xl font-bold text-cyan-400">My Portfolio</h1>
    <ul className="flex space-x-6">
      <li>Home</li>
      <li>Projects</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>
Enter fullscreen mode Exit fullscreen mode

No custom CSS, just clean utility classes

Step 3: Adding Components

I split the site into reusable components:

  • Navbar.jsx
  • Hero.jsx
  • Projects.jsx
  • Contact.jsx
  • Footer.jsx

Each component was small and easy to manage.
Example: my Hero section used a simple animation with Framer Motion to make it lively.

Step 4: Deploying to Netlify

Deployment was super easy:

  1. Pushed the code to GitHub
  2. Logged into Netlify
  3. Linked my repo
  4. Done 🎉

My site was live in seconds!

What I Learned

  • How components work in React
  • How to use Tailwind’s utility classes effectively
  • How to structure a responsive website
  • How easy it is to deploy with Netlify

Most importantly, I learned that you don’t need to know everything before starting.
Just start building and you’ll figure things out along the way.

Key Takeaways

  • Start small — one page at a time
  • Learn by building, not by watching tutorials endlessly
  • Use modern tools (Vite, Tailwind, Netlify) to save time
  • Keep improving your UI — small tweaks make a big difference

Final Thoughts

Building my first website was one of the most rewarding experiences.
Now, every new project feels easier because I know the workflow.

If you’re thinking of starting — don’t wait.
Clone a starter template, tweak it, break it, rebuild it — and you’ll learn faster than you think.

Top comments (0)