Course Content
01 – Welcome and First Steps
0/6
001 Course Structure and Projects.mp4
05:34
003 A High-Level Overview of Web Development.mp4
11:01
004 Setting Up Our Code Editor.mp4
08:52
005 Your Very First Webpage!.mp4
09:55
006 Downloading Course Material.mp4
04:21
007 Watch Before You Start!.mp4
05:44
02 – HTML Fundamentals
0/12
001 Section Intro.mp4
00:40
002 Introduction to HTML.mp4
04:18
003 HTML Document Structure.mp4
11:46
004 Text Elements.mp4
16:19
005 More Text Elements Lists.mp4
10:59
006 Images and Attributes.mp4
12:45
007 Hyperlinks.mp4
14:49
008 Structuring our Page.mp4
10:56
009 A Note on Semantic HTML.mp4
06:27
010 Installing Additional VS Code Extensions.mp4
07:14
011 CHALLENGE #1.mp4
11:50
012 CHALLENGE #2.mp4
17:11
03 – CSS Fundamentals
0/24
013 CHALLENGE #1.mp4
17:40
024 CHALLENGE #3.mp4
19:37
023 Developer Skill #2 Debugging and Asking Questions.mp4
22:15
022 Developer Skill #1 Googling and Reading Documentation.mp4
12:15
021 Pseudo-elements.mp4
16:51
020 CSS Theory #5 Absolute Positioning.mp4
16:04
019 CSS Theory #4 Types of Boxes.mp4
22:19
018 CHALLENGE #2.mp4
10:59
017 Centering our Page.mp4
07:56
016 Adding Dimensions.mp4
08:03
015 Using Margins and Paddings.mp4
22:07
014 CSS Theory #3 The CSS Box Model.mp4
08:05
001 Section Intro.mp4
00:56
012 CSS Theory #2 Inheritance and the Universal Selector.mp4
14:36
011 CSS Theory #1 Conflicts Between Selectors.mp4
17:23
010 Using Chrome DevTools.mp4
08:04
009 Styling Hyperlinks.mp4
09:43
008 Pseudo-classes.mp4
10:00
007 Working With Colors.mp4
24:07
006 Class and ID Selectors.mp4
15:23
005 Combining Selectors.mp4
09:12
004 Styling Text.mp4
15:31
003 Inline, Internal and External CSS.mp4
12:12
002 Introduction to CSS.mp4
04:06
04 – Layouts Floats, Flexbox, and CSS Grid Fundamentals
0/21
011 The flex Property.mp4
11:34
021 CHALLENGE #3.mp4
07:47
020 Building a Simple CSS Grid Layout.mp4
15:46
019 Aligning Grid Items and Tracks.mp4
13:46
018 Placing and Spanning Grid Items.mp4
13:00
017 Sizing Grid Columns and Rows.mp4
13:54
016 A CSS Grid Overview.mp4
09:39
015 Introduction to CSS Grid.mp4
10:57
014 CHALLENGE #2.mp4
14:13
013 Building a Simple Flexbox Layout.mp4
12:15
012 Adding Flexbox to Our Project.mp4
19:57
001 Section Intro.mp4
01:18
010 Spacing and Aligning Flex Items.mp4
10:51
009 A Flexbox Overview.mp4
07:35
008 Introduction to Flexbox.mp4
09:43
007 CHALLENGE #1.mp4
20:14
006 box-sizing border-box.mp4
11:12
005 Building a Simple Float Layout.mp4
08:45
004 Clearing Floats.mp4
07:22
003 Using Floats.mp4
17:22
002 The 3 Ways of Building Layouts.mp4
05:18
05 – Web Design Rules and Framework
0/20
011 Web Design Rules #5 Shadows.mp4
13:04
020 The Missing Piece Steal Like An Artist!.mp4
10:26
019 The Website-Personalities-Framework.mp4
30:59
018 Web Design Rules #9 User Experience (UX).mp4
20:37
017 Implementing Whitespace and Visual Hierarchy.mp4
15:43
016 Web Design Rules #8 Visual Hierarchy.mp4
22:58
015 Web Design Rules #7 Whitespace.mp4
13:10
014 Implementing Border-radius.mp4
06:40
013 Web Design Rules #6 Border-radius.mp4
04:54
012 Implementing Shadows.mp4
12:08
001 Section Intro.mp4
02:18
010 Implementing Icons.mp4
21:33
009 Web Design Rules #4 Icons.mp4
12:59
008 Web Design Rules #3 Images and Illustrations.mp4
14:57
007 Implementing Colors.mp4
18:12
006 Web Design Rules #2 Colors.mp4
13:40
005 Implementing Typography.mp4
23:23
004 Web Design Rules #1 Typography.mp4
16:17
003 Overview of Web Design and Website Personalities.mp4
12:36
002 Project Overview.mp4
06:13
06 – Components and Layout Patterns
0/14
001 Section Intro.mp4
01:00
002 Web Design Rules #10 – Part 1 Elements and Components.mp4
27:48
003 Building an Accordion Component – Part 1.mp4
25:30
004 Building an Accordion Component – Part 2.mp4
19:24
005 Building a Carousel Component – Part 1.mp4
21:25
006 Building a Carousel Component – Part 2.mp4
29:41
007 Building a Table Component – Part 1.mp4
10:04
008 Building a Table Component – Part 2.mp4
13:16
009 CHALLENGE #1 Building a Pagination Component.mp4
24:19
010 Web Design Rules #10 – Part 2 Layout Patterns.mp4
21:52
011 Building a Hero Section – Part 1.mp4
22:11
012 Building a Hero Section – Part 2.mp4
21:21
013 Building a Web Application Layout – Part 1.mp4
15:12
014 Building a Web Application Layout – Part 2.mp4
15:56
07 – Omnifood Project – Setup and Desktop Version
0/29
015 Building the How-It-Works Section – Part 2.mp4
35:12
029 Building the Footer – Part 2.mp4
27:58
028 Building the Footer – Part 1.mp4
19:15
027 Building the Call-To-Action Section – Part 3.mp4
29:09
026 Building the Call-To-Action Section – Part 2.mp4
24:45
025 Building the Call-To-Action Section – Part 1.mp4
26:12
024 Building the Features Part.mp4
19:06
023 Building the Pricing Section – Part 2.mp4
25:57
022 Building the Pricing Section – Part 1.mp4
24:00
021 Building the Testimonials Section – Part 2.mp4
24:38
020 Building the Testimonials Section – Part 1.mp4
18:14
019 Building the Meals Section – Part 3.mp4
29:42
018 Building the Meals Section – Part 2.mp4
21:01
017 Building the Meals Section – Part 1.mp4
26:35
016 Building the Featured-In Section.mp4
19:45
001 Section Intro.mp4
01:02
014 Building the How-It-Works Section – Part 1.mp4
29:16
013 Setting Up a Reusable Grid.mp4
21:23
012 Building the Navigation.mp4
15:55
011 Building the Header.mp4
15:15
010 Building the Hero – Part 3.mp4
23:57
009 Building the Hero – Part 2.mp4
29:26
008 Building the Hero – Part 1.mp4
16:11
007 How rem and max-width Work.mp4
16:06
006 Responsive Design Principles.mp4
08:37
005 First Design and Development Steps (Step 4).mp4
15:21
004 Sketching Initial Layout Ideas (Step 3).mp4
07:36
003 Defining and Planning the Project (Steps 1 and 2).mp4
24:36
002 The 7 Steps to a Great Website.mp4
20:29
08 – Omnifood Project – Responsive Web Design
0/9
001 Section Intro.mp4
00:47
002 How Media Queries Work.mp4
14:23
003 How to Select Breakpoints.mp4
04:47
004 Responding to Small Laptops.mp4
15:33
005 Responding to Landscape Tablets.mp4
19:24
006 Responding to Tablets.mp4
25:24
007 Building the Mobile Navigation.mp4
37:58
008 Responding to Smaller Tablets.mp4
18:56
009 Responding to Phones.mp4
26:42
09 – Omnifood Project – Effects, Optimizations and Deployment
0/11
001 Section Intro.mp4
00:50
002 A Short Introduction to JavaScript.mp4
18:48
003 Making the Mobile Navigation Work.mp4
08:31
004 Implementing Smooth Scrolling.mp4
29:23
005 Implementing a Sticky Navigation Bar.mp4
28:02
006 Browser Support and Fixing Flexbox Gap in Safari.mp4
19:06
007 Testing Performance With Lighthouse.mp4
08:45
008 Adding Favicon and Meta Description.mp4
12:24
009 Image Optimizations.mp4
18:26
010 Deployment to Netlify.mp4
08:20
011 Making the Form Work With Netlify Forms.mp4
07:49
10 – The End!
0/1
001 Where to Go from Here.mp4
04:32
[Last updated 11/2024] Build Responsive Real-World Websites with HTML and CSS (Udemy – Vietsub)
Previous
Next
0% Complete