• Post category:StudyBullet-3
  • Reading time:7 mins read


Building A TESLA, APPLE And A Personal Portfolio Tailwind Website With Tailwind CSS & HTML 5 – Cool Tailwind UI Designs.

What you will learn

Tailwind CSS

Tailwind UI

Tailwind classes and styles

Tailwind background customisation

Tailwind border customisation

Tailwind flexbox and grid systems


Get Instant Notification of New Courses on our Telegram channel.


HTML5 for screen content structure

Designing beautiful layouts effortlessly using Tailwind CSS

Description

This course will rapidly guide you to become a Tailwind UI designer. This course is friendly to those who know nothing about Tailwind CSS, as we start by teaching the basic concepts and style elements. We will first thoroughly explain the essential topics and concepts and go through the necessary Tailwind CSS documentation in order to teach you the fundamentals. We will then dive into designing more complex beautiful web UIs. We will design an elegant Apple UI from scratch to show you how to design stunning professional Websites in a rapid and efficient manner. We will also teach you how to make your own portfolio website, which you can then personally customise and use. We will also teach you how to build a beautiful landing page, as we demonstrate this through a Tesla landing page example.

This course will enhance your front end design skills and you will appreciate how awesome Tailwind Css actually is. After completing this Tailwind CSS examples that we teach, you will be able to rapidly and efficiently design beautiful user interfaces.

This course will first cover the essential topics such as:

  • Typography and Font styles
  • Responsive styling (styles for specific screen sizes)
  • State variants (for when hovering and focusing on elements)
  • User Interface Layouts
  • Sizing elements
  • Backgrounds class groups
  • Border class groups

After covering the fundamentals, we will then go through some awesome tailwind examples:

  • Apple website:
    • Responsive header and navigation bar
    • Front Page promotional section
    • Ipad section
    • Macbook section
    • Company Team Members section
    • Contact Form section
    • Footer section
  • Portfolio website:
    • Front page
    • Self introduction/promotion section
    • Services section
    • Portfolio/work section
    • Contact section
  • Tesla Landing page:
    • Front page
    • Navigation bar
    • Footer section
English
language

Content

Covering The Tailwind CSS Documentation
1 – Background class group
2 – Border class group
3 – Flexbox and grid class group
4 – Layout class group
5 – Sizing class group
6 – Spacing class group
7 – Typography group class
Project 1 – Building An Apple UI
1-Tools and resources
2-Installing tailwind css and setting up the project
3-Project overview
4-Getting started with the navigation bar
5-Implementing the hamburger icon
6-Completing the navigation bar
7 – Implementing the home section
8 – Front page promotional products
9 – Implementing the ipad section
10 – Implementing the macbook section
11- Implementing the Team section
12- Implementing the contact form section
13- Implementing the footer section
Project 2 – Building A Tesla Landing Page
Disclaimer
1- Project overview and background styling
2-Implementing the navigation bar
3- Implementing the front page content
4- Implementing the front page footer
Project 3 – Building A Personal Portfolio Website
1-Project overview
2- Structuring the FrontPage
3- Implementing the self promotion section
4- Implementing the services section
5- Implementing the portfolio work section
6- Implementing the contact section