[Last updated 11/2024] Build Responsive Real-World Websites with HTML and CSS (Udemy – Vietsub)
About Course
Views
:
What you’ll learn:
Become a modern and confident HTML and CSS developer, no prior knowledge needed!
Design and build a stunning real-world project for your portfolio from scratch
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
Modern, semantic and accessible HTML5
Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
A web design framework with easy-to-use rules and guidelines to design eye-catching websites
How to make websites work on every possible mobile device (responsive design)
How to plan, sketch, design, build, test, and optimize a professional website
How to use common components and layout patterns for professional website design and development
v.v..
Time video:
37.5 hours (149 Lessons + Documents)
Teacher:
Jonas Schmedtmann
Total weight:
25.02 GB
Original link:
https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/
Link :
Below The Post
:
Nếu không load được vui lòng báo lại cho Admin nhé!
Course Content
01 – Welcome and First Steps
-
05:34
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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!
-
001 Where to Go from Here.mp4
04:32
Student Ratings & Reviews
No Review Yet