Modern Web Design With Tailwind Css And Javascript Course.

Master modern web design techniques and create stunning websites with Tailwind CSS and JavaScript

What you'll learn

How To Get Started With Tailwind CSS

Design a product landing page

Design for mobile

Design a grid social media website

Requirements

You should know the basics of CSS

Description

The course is designed to teach students how to create modern, responsive, and visually appealing websites using Tailwind CSS and JavaScript.The course will start with an introduction to the basics of web design, including HTML and CSS, to provide a foundation for students who may be new to web development. Once the basics are covered, the course will move on to teaching students how to use Tailwind CSS, a popular CSS framework, to create beautiful and responsive web designs quickly and efficiently.Students will learn how to use Tailwind's utility classes to style HTML elements, as well as how to customize and extend Tailwind's default styles. They will also learn how to use Tailwind's responsive design features to create websites that look great on any screen size.The course will also cover JavaScript, which is an essential language for creating dynamic and interactive websites. Students will learn how to use JavaScript to add interactivity to their websites, such as creating dropdown menus, modals, and sliders. They will also learn how to use JavaScript to fetch data from APIs and display it on their websites.Throughout the course, students will work on several hands-on projects, such as building a responsive landing page, creating a responsive navigation menu, and adding interactive features to a website. By the end of the course, students should be able to create stunning and responsive websites using Tailwind CSS and JavaScript.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 01 02 Introduction Of The Instructor

Lecture 3 01 03 What Is Tailwind Css

Lecture 4 Files

Section 2: How To Get Started

Lecture 5 02.01 How To Get Started With Tailwind CSS

Section 3: 03. Design a product landing page

Lecture 6 03 01 Project Preview

Lecture 7 03 02 Set Up Project

Lecture 8 03 03 Design A Header Section

Lecture 9 03 04 Design A Main Section

Lecture 10 03 05 Design A Footer

Lecture 11 03 06 Design A Testimonials Section

Lecture 12 03 07 Build An Email Subscribe Card

Lecture 13 03 08 Build Pricing Grids

Lecture 14 03 09 Build A Product Modal

Lecture 15 03 10 .Build An Image Gallery

Lecture 16 03 Source Files

Section 4: 04. Design for mobile

Lecture 17 04 01 Project Preview

Lecture 18 04 02 Design A Hamburger Button And Animation

Lecture 19 04 03 Design A Mobile Menu

Lecture 20 04 04 Implement Responsivity

Lecture 21 04 05 Design Smooth Scroll

Lecture 22 04. Source Files

Section 5: 05. Implement dark mode

Lecture 23 05 01 Project Preview

Lecture 24 05 02 Design A Dark Mode Button

Lecture 25 05 03 Set Color Mode With Javascript

Lecture 26 05 Source Files

Section 6: 06. Design a form

Lecture 27 06.01 Project Preview

Lecture 28 06.02 Design A Form

Lecture 29 06.03 Javascript Link Validation

Lecture 30 06 Source Files

Section 7: 07. Design a grid social media website

Lecture 31 07.01 Project Preview

Lecture 32 07.02 Set Up Project

Lecture 33 07.03 Design The First Box In The Grid

Lecture 34 07.04 Design Remaining Boxes

Lecture 35 07.05 Build Grid Classes

Lecture 36 07 Source files

Section 8: 08. Design a portfolio web app

Lecture 37 08.01 Project Preview

Lecture 38 08.02 Set Up Project

Lecture 39 08.03 Design A Navigation Menu

Lecture 40 08.04 Design Header

Lecture 41 08.05 Design Main Content

Lecture 42 08.06 Design Footer

Lecture 43 08.07 Design More Sections

Lecture 44 08.08 Implement Responsivity

Lecture 45 08 source code

Section 9: 09. Design a mobile first ecommerce website

Lecture 46 09.01 Project Preview

Lecture 47 09.02 Set Up Project

Lecture 48 09.03 Design Header

Lecture 49 09.04 Design Main Content

Lecture 50 09.05 Design Footer

Lecture 51 09.06 Design A Login Modal

Lecture 52 09.07 Design A Cart Modal

Lecture 53 09.08 Design More Sections

Lecture 54 09.09 Implement Responsivity

Lecture 55 09. source code

Beginners or experienced web designers.