English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 11h 30m | 3.58 GB
Work through real-world projects and learn how to create modern, responsive websites using CSS Grid and Flexbox
If you want to learn how to create modern real-world websites using pure CSS, then this is the right course for you.
The course starts by covering CSS essentials. You will then move on to advanced CSS concepts such as transform, backgrounds, transitions, animations, and shadows. After this, you’ll learn how to create a layout of your web page using CSS Flexbox. In the next section, you will build your first project – Grand Hotel. It will be a real-world, intuitive web page about hotels created using CSS Flexbox. Later, you will move on to exploring CSS Grid, before finally building another project based on CSS Grid. Each project built throughout the course will be fully compatible across all screen devices.
Learn
- Understand how to create the layout of your web page using CSS Flexbox
- Align elements using modern CSS Flexbox and CSS Grid modules
- Build fully responsive websites that work across different screen devices
Table of Contents
Welcome
1 Introduction
2 Setup
CSS Basics
3 What is CSS
4 How to write CSS
5 HTML Elements Tree
6 CSS Selectors
7 CSS Combinators
8 CSS Colors
9 Inheritance
10 Text Formatting – Part 1
11 Text Formatting – Part 2
12 Box Model
13 Pseudo Classes – Part 1
14 Pseudo Classes – Part 2
15 Pseudo Elements
16 Measurement Units – Part 1
17 Measurement Units – Part 2
18 Positions – Part 1
19 Positions – Part 2
20 Overflow
21 Floats
Advanced CSS
22 Backgrounds – Part 1
23 Backgrounds – Part 2
24 Gradients
25 Shadows
26 Transitions
27 Transforms – Part 1
28 Transforms – Part 2
29 Animations – Part 1
30 Animations – Part 2
Flexbox
31 What Is Flexbox
32 Flex Container Properties
33 Flex Items Properties
Project 1 – Grand Hotel (Based on Flexbox)
34 Grand Hotel – Project Preview
35 Sidebar – Markup
36 Sidebar – Style
37 Navigation – Markup
38 Navigation – Style – Part 1
39 Navigation – Style – Part 2
40 Create Click Event
41 Create markup for Header
42 Header – Style
43 About Us Section – Markup
44 About Us Section – Style – Part 1
45 About Us Section – Style – Part 2
46 Rooms Section – Markup
47 Rooms Section – Style
48 Customers Section – Markup
49 Customers Section – Style
50 Footer – Markup
51 Footer – Style
Responsive Web Design
52 Make ‘Grand Hotel’ Project Responsive – Part 1
53 Make ‘Grand Hotel’ Project Responsive – Part 2
54 Make ‘Grand Hotel’ Project Responsive – Part 3
CSS Grid
55 CSS Grid Introduction
56 Setup
57 How to Create Grid
58 Fractional Units
59 Positioning and Spanning Grid Items
60 Naming Grid Items – Part 1
61 Naming Grid Items – Part 2
62 Naming Grid areas
63 Explicit and Implicit Grid
64 Aligning Grid items
65 Aligning Grid tracks
66 max-content, min-content, minmax()
67 auto-fill, auto-fit
Project 2 – Furniture Store (Based on CSS Grid)
68 Furniture Store – Project Preview
69 Navbar – Part 1 – Markup
70 Navbar – Part 1 – Style
71 Navbar – Search Form
72 Navbar – Part 2 – Markup
73 Navbar – Part 2 – Style
74 Navbar – Part 2 – Dropdown
75 Banner – Markup
76 Banner – Style
77 Banner Slideshow – Part 1
78 Banner Slideshow – Part 2
79 Day Offer Section
80 Bestselling Furniture – Markup
81 Bestselling Furniture – Style
82 Gallery
83 Contact Section and Footer
84 Modal box – Markup
85 Modal Box – Style – Part 1
86 Modal Box – Style – Part 2
87 Make Project Responsive
Resolve the captcha to access the links!