Introduction to Building Website Layouts
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.
What you'll learn
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.
Table of contents
- Analyzing Layouts 7m
- Analyzing UI Patterns 9m
- Website Plan and Analyzing Patterns 8m
- The Fluid Nature of the Web 8m
- Progressive Enhancement and Hierarchy 10m
- HTML5 Sectioning Elements 8m
- Using HTML5 Sectioning Elements 8m
- HTML5 Sectioning Elements Continued 4m
- Building Navigation 4m
- Adding Images 7m
- Adding External Fonts 6m
- CSS Resets 4m
- Typographic Scales and Vertical Rhythm 11m
- Global Styles 6m
- Links 7m
- Understanding the Cascade: Source Order 11m
- Understanding the Cascade: Importance 7m
- Understanding the Cascade: Inheritance 8m
- Classes and IDs 7m
- Understanding the Cascade: Specificity 10m
- Understanding Classes and IDs 11m
- Adding a Page Wrapper 9m
- Global Logo Styles 9m
- Styling the Navigation 14m
- Navigation Continued 6m
- Home Page Styles 8m
- Styling Featured Sections 5m
- Styling the Buttons 10m
- Styling the Menu Page 8m
- Styling the Location and Hours Page 3m
- Media Queries 10m
- Creating Responsive Navigation 10m
- Styling Landing Text and Responsive Type 8m
- Media Queries for Featured Sections 7m
- Media Queries for Featured Sections Continued 7m
- Styling the Gallery 9m
- Creating a Sidebar 8m
- Testing: Validation, Contrast, and Cross-browser 10m
- Final Notes on CSS Architecture 4m
About the author
Susan is a web design tutor for Pluralsight. Growing up, Susan was both a passionate artist as well as a computer tech aficionado. When she discovered the world of web development, she found that she could meld those two passions together into something amazing. Soon after, Susan began devoting herself to building beautiful and functional web content for businesses and nonprofits. It was through those experiences Susan developed a fluency for web coding languages. Since then, Susan has develo... more