Course
Skills Expanded
Responsive In-Browser Web Page Design with HTML and CSS
In this HTML and CSS tutorial, we'll learn how to create a responsive site from scratch by prototyping directly in the browser.
What you'll learn
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.
Table of contents
Introduction and Project Overview
1min
Responsive In-Browser Web Page Design with HTML and CSS
201mins
- Analyzing Our Responsive Boilerplate Code 9m
- Wireframing Our Responsive Site 11m
- Mocking up Our Team Page with Inline-block Grids 9m
- Adding Responsive Images and Full-bleed Background Sections 10m
- Form Styling Including Required Fields and Error States 10m
- Wireframing Our Featured Page and CSS Gradients 10m
- Mocking up Our Contact Page and Responsive Google Map Embeds 9m
- Wireframing Our Overview Page and Responsive iFrame Video Embeds 11m
- Flexbox and CSS Animations on Scroll 10m
- Building Responsive Tables and Lightboxes 9m
- Wireframing Our Home Page and Custom Google Fonts 11m
- Typography and Production Styling for Our Team Page 12m
- Wireframing Our Featured Page and CSS Transforms 11m
- Refining Our Button, Form, and Form Validation Styles 12m
- Styling Notifications and Font-icons 11m
- Using SVGs in Responsive Design 11m
- Adding Off-canvas Menu Navigation 12m
- Home Page Animation with CSS Transforms and Transitions 11m
- Wrapping up Styling Our Responsive Site 12m
