I'm happy to be among people that take these amaze course. I love the way the instructor each line of code one after the other.
Tailwind CSS projects: 2 TailwindCSS projects (Instagram,..)
Tailwind CSS projects. Build Instagram and Tesla Clones using Tailwind CSS 3.0. Real Tailwind project for your portfolio
Updated on Sep, 2023
Language - English
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.
Who this course is for:
- Developers who want to learn Tailwind CSS and build their portfolio with real projects
What will you learn in this course:
Best practices of Tailwind CSS 3.0
Build responsive websites
Create Tesla and Instagram clones
Learn core concepts such as Utility-First Fundamentals, Responsive Design, Reusing Styles, and Adding Custom Styles
Learn about Layout, Flexbox & Grid, Spacing, sizing, Typography, Effects, Transitions & Animation and many more
Learn how to use Tailwind CSS official plugins such as scrollbar and form
What are the prerequisites for this course?
Be familiar with CSS basics
Check out the detailed breakdown of what’s inside the course
- Introduction 01:35 01:35
Tesla UI Clone
Instagram UI Clone
Sahand Ghavidel Jirsaraie
Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from the Faculty of Engineering and IT, University of Technology Sydney.
Sahand has researched for more than 10 years about artificial algorithms and optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended many international conferences.
The number of people using and citing Sahand's publications is significantly high which is more than 1600 citations, according to google scholar (April, 2021). He was also awarded the outstanding reviewer in the international journal called "International Journal of Electrical Power & Energy Systems" with a CiteScore of 5.79 in recognition of his contributions added to the quality of the journal.
User your certification to make a career change or to advance in your current career. Salaries are among the highest in the world.
Our students work
with the Best
Related Video CoursesView More
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video CoursesSubscribe now
Master prominent technologies at full length and become a valued certified professional.Explore Now