Modern Web Design with Tailwind CSS and JavaScript course

Modern Web Design with Tailwind CSS and JavaScript course

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 55 lectures (6h 7m) | 4.36 GB

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

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.

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
Table of Contents

Introduction
1 Introduction
2 Introduction Of The Instructor
3 What Is Tailwind Css
4 Files

How To Get Started
5 How To Get Started With Tailwind CSS

Design a product landing page
6 Project Preview
7 Set Up Project
8 Design A Header Section
9 Design A Main Section
10 Design A Footer
11 Design A Testimonials Section
12 Build An Email Subscribe Card
13 Build Pricing Grids
14 Build A Product Modal
15 Build An Image Gallery
16 Source Files

Design for mobile
17 Project Preview
18 Design A Hamburger Button And Animation
19 Design A Mobile Menu
20 Implement Responsivity
21 Design Smooth Scroll
22 Source Files

Implement dark mode
23 Project Preview
24 Design A Dark Mode Button
25 Set Color Mode With Javascript
26 Source Files

Design a form
27 Project Preview
28 Design A Form
29 Javascript Link Validation
30 Source Files

Design a grid social media website
31 Project Preview
32 Set Up Project
33 Design The First Box In The Grid
34 Design Remaining Boxes
35 Build Grid Classes
36 Source files

Design a portfolio web app
37 Project Preview
38 Set Up Project
39 Design A Navigation Menu
40 Design Header
41 Design Main Content
42 Design Footer
43 Design More Sections
44 Implement Responsivity
45 source code

Design a mobile first ecommerce website
46 Project Preview
47 Set Up Project
48 Design Header
49 Design Main Content
50 Design Footer
51 Design A Login Modal
52 Design A Cart Modal
53 Design More Sections
54 Implement Responsivity
55 source code

Homepage