Introduction to Building Website Layouts
Pluralsight
Course Summary
In this course, we will learn how to go from basic HTML and CSS knowledge to creating a responsive website from the ground up using a mobile-first approach. Software required: Brackets Text Editor, Google Chrome.
-
+
Course Description
In this course, we will learn how to go from basic HTML and CSS knowledge to creating a responsive website from the ground up using a mobile-first approach. We will learn how to think of website layouts in terms of common web design patterns, and how to design in the browser. We will learn step by step how to correctly mark up content with semantic HTML, how to think about progressive enhancement and HTML hierarchy, and how and when to correctly use HTML5 sectioning elements. We'll learn about important CSS theory, like how to use classes and IDs, inheritance and specificity, and how to start thinking about CSS architecture to improve maintainability and scalability of code. Software required: Brackets Text Editor, Google Chrome.
-
+
Course Syllabus
Introduction and Project Overview- 0m 48s
—Introduction and Project Overview 0m 48sIntroduction to Building Website Layouts in HTML and CSS- 5h 3m
—Analyzing Layouts 6m 56s
—Analyzing UI Patterns 9m 2s
—Website Plan and Analyzing Patterns 8m 7s
—The Fluid Nature of the Web 7m 48s
—Progressive Enhancement and Hierarchy 9m 47s
—HTML5 Sectioning Elements 7m 38s
—Using HTML5 Sectioning Elements 8m 14s
—HTML5 Sectioning Elements Continued 3m 52s
—Building Navigation 4m 1s
—Adding Images 7m 10s
—Adding External Fonts 6m 18s
—CSS Resets 4m 20s
—Typographic Scales and Vertical Rhythm 10m 31s
—Global Styles 5m 56s
—Links 7m 3s
—Understanding the Cascade: Source Order 10m 40s
—Understanding the Cascade: Importance 7m 6s
—Understanding the Cascade: Inheritance 7m 40s
—Classes and IDs 6m 46s
—Understanding the Cascade: Specificity 9m 43s
—Understanding Classes and IDs 10m 46s
—Adding a Page Wrapper 8m 47s
—Global Logo Styles 9m 20s
—Styling the Navigation 13m 37s
—Navigation Continued 6m 9s
—Home Page Styles 7m 51s
—Styling Featured Sections 5m 10s
—Styling the Buttons 9m 38s
—Styling the Menu Page 8m 16s
—Styling the Location and Hours Page 2m 39s
—Media Queries 10m 23s
—Creating Responsive Navigation 10m 16s
—Styling Landing Text and Responsive Type 7m 43s
—Media Queries for Featured Sections 6m 44s
—Media Queries for Featured Sections Continued 7m 11s
—Styling the Gallery 8m 46s
—Creating a Sidebar 7m 40s
—Testing: Validation, Contrast, and Cross-browser 9m 49s
—Final Notes on CSS Architecture 4m 13s
