NEW Tailwind CSS projects. Build Instagram and Tesla Clones using Tailwind CSS 3.0. Real Tailwind project for your portfolio
Welcome to the best course for learning Tailwind CSS through the design of real-world websites.
This is a project-based course that includes hands-on projects such as Instagram and Tesla clones. We are going to use the best practices of Tailwind CSS to design and build beautiful and responsive websites. So far, two projects have been created for this course, including Instagram, and Tesla clones, and more projects are being added each month. You can check the preview of each project in the course curriculum.
In this brand new course, you will learn core concepts such as Utility-First Fundamentals, Responsive Design, Reusing Styles, and Adding Custom Styles. You will learn about Layout, Flexbox & Grid, Spacing, sizing, Typography, Effects, Transitions & Animation and many more. This course also teaches you how to use tailwindcss official plugins such as scrollbar and form. You are going to be able to build amazing responsive websites with Tailwind CSS latest version.
My name is Sahand, and I have over 15 years of programming experience.
I will be your instructor and answer any questions you may have in the Q&A section. I hope to see you on the course and begin working on the projects with you.
Project 1: Tesla UI Clone: In this project, we are going to create a Tesla UI clone using tailwind css. We have two parts in the home page including the header and the main section. The header includes the tesla logo, the products and the main menus. These items in the menu have a hovering effect with changing in background colour. The header is responsive in a way that when we have a smaller screen, we can not see the products menu anymore. We are going to achieve this using tailwind css hidden and inline classes. The header and main section of the home page have a background image which is the image of the Model 3. We are going to learn how to change the background image using tailwind css bg class. Under the header we have the car title and touchless delivery link. This link has an underline which gets thicker when we hover over it. We are going to learn how to do that using tailwind css decoration classes. We also have 2 buttons here. The buttons are also responsive. When we have a smaller screen, they are on top of each other, but in a bigger screen, they are next to each other and smaller. At the bottom of the page, we have an arrow which is bouncing. This icon is coming from hero-icons website which has the same owner of the tailwind css. And the bounding effect is added using tailwind css animate class. In the 2 other pages, we have Model Y and accessories and finally at the end we have the footer of the page which is responsive as well. All the website is styled using only tailwind css version 3.0. The entire source code is available in a github repository which you can find inside the resource section.
Project 2: Instagram UI Clone: In this project, we are going to create An Instagram UI clone using tailwind css. We have two parts in the home page including the header and the feed section. The header includes the instagram logo, the search bar and also the menu with the user image. These icons are animated using the scale() CSS function. The header is responsive in a way that when we have a smaller screen, the instagram logo is different and we can not see the home icon anymore. Under the header, in the feed section, we have the stories section which is scrollable firstly and has transition effects for the users as well. We also have 2 posts in the feed section. Each post has a header, an image, buttons, caption, comments and the input box. The number of likes is shown in the second post. Also, in this post, the heart and bookmark icons are filled with a colour. All the website is styled using only tailwind css version 3.0. Also, all the icons of the website are from hero-icons which has the same owner of the tailwind css. The entire source code is available in a github repository which you can find inside the resource section.
