Build 8+ Modern Websites: TailwindCSS, React, Motion, Nextjs

Did you ever wanted to create a website, but after finishing the navbar and two paragraphs on the landing page, it started to get a bit tough, and wasn’t as fun anymore as imagining the finished website in your mind?

Do you have some ideas for websites to create, but when you start writing the code, it’s a much bigger hassle than you thought it would be?

Are you sometimes browsing websites and thinking that you could have done it better, but then you start writing code and realize it’s not that easy?

I will help you to not just rely on ChatGPT outputs or copy-paste code—you’ll be building on your own. You’ll be able to recreate websites you see or bring your own ideas to life, directly with code. You will enjoy the process.

Some time ago, I was sitting in front of my PC, IDE opened, website idea in my mind, and writing some lines of code to start creating. Well, it wasn’t that enjoyable after some time, when I was fighting for my life to make that position a bit more to the left, align that element exactly where I wanted it to be, and wondering why the page looked like spaghetti when I tried to change the size to a mobile screen. Texting my fellow developer friends, asking if my approach was fine or if they could help me refactor my code.

I knew that there must be a way to have way more fun, learning to create websites in a way that is an enjoyable process, and then I started working with TailwindCSS. I started to recreate my HTML & CSS websites in React & Tailwind. I started to create components that I could reuse in my other projects, adding animations, thinking about how I could make that navbar better, how that section could be improved, which animation would be the best one to add to this layout, and how to create interactive sections so the user enjoys being on the website. Now, every time I open my IDE, I know I can create whatever I want. And you can do it too!

We will go through basic, advanced, and animated portfolio websites created with React & TailwindCSS, a reusable component section (creating navbars, contact, portfolio sections, etc.) where we will build building blocks that you can reuse in other projects. Why portfolios? Because, in the end, we will go through multiple layouts and sections that can also be reused for different types of websites, so whether we create a portfolio or a landing page for a SaaS, the adjustments won’t be that different. And of course, you can then keep the portfolio websites—for your portfolio, as part of your own portfolio website, or save them as website templates for future projects.

I will explain, how to animate your website. As I mentioned earlier, we will use Motion, aka Framer Motion, for adding smooth and engaging interactions. Curious about how to make an element appear on the page with a bit of delay and then smoothly transition into its position? Or how to make another one float up and down?

And after all of this, not showing our website to the world? Absolutely not! We will go through how to deploy the website and fix common bugs in case anything goes wrong.

See you in the lessons!