Responsive In-Browser Web Page Design with HTML and CSS
Pluralsight
Course Summary
In this HTML and CSS tutorial, we'll learn how to create a responsive site from scratch by prototyping directly in the browser.
-
+
Course Description
In this HTML and CSS tutorial, we'll learn how to create a responsive site from scratch by prototyping directly in the browser. We'll start with some boilerplate code and build on it with responsive images, videos, icons, maps, videos and off-canvas menus. By the end of this HTML and CSS training, you'll understand the in-browser responsive design creation process, from planning, to wireframing and prototyping, to the final product.
-
+
Course Syllabus
Introduction and Project Overview- 1m 6s
—Introduction and Project Overview 1m 6sResponsive In-Browser Web Page Design with HTML and CSS- 3h 21m
—Analyzing Our Responsive Boilerplate Code 9m 3s
—Wireframing Our Responsive Site 10m 58s
—Mocking up Our Team Page with Inline-block Grids 8m 37s
—Adding Responsive Images and Full-bleed Background Sections 10m 9s
—Form Styling Including Required Fields and Error States 10m 21s
—Wireframing Our Featured Page and CSS Gradients 10m 4s
—Mocking up Our Contact Page and Responsive Google Map Embeds 9m 22s
—Wireframing Our Overview Page and Responsive iFrame Video Embeds 10m 43s
—Flexbox and CSS Animations on Scroll 10m 17s
—Building Responsive Tables and Lightboxes 9m 14s
—Wireframing Our Home Page and Custom Google Fonts 11m 14s
—Typography and Production Styling for Our Team Page 11m 47s
—Wireframing Our Featured Page and CSS Transforms 10m 33s
—Refining Our Button, Form, and Form Validation Styles 12m 8s
—Styling Notifications and Font-icons 10m 56s
—Using SVGs in Responsive Design 11m 12s
—Adding Off-canvas Menu Navigation 11m 35s
—Home Page Animation with CSS Transforms and Transitions 11m 23s
—Wrapping up Styling Our Responsive Site 12m 5s