Responsive In-Browser Web Page Design with HTML and CSS

Visit Tutorial Page ( Report)
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.
  • Introduction and Project Overview
    00:01:06
    • Introduction and Project Overview
      00:01:06
  • Responsive In-Browser Web Page Design with HTML and CSS
    03:21:00
    • Analyzing Our Responsive Boilerplate Code
      00:09:03
    • Wireframing Our Responsive Site
      00:10:58
    • Mocking up Our Team Page with Inline-block Grids
      00:08:37
    • Adding Responsive Images and Full-bleed Background Sections
      00:10:09
    • Form Styling Including Required Fields and Error States
      00:10:21
    • Wireframing Our Featured Page and CSS Gradients
      00:10:04
    • Mocking up Our Contact Page and Responsive Google Map Embeds
      00:09:22
    • Wireframing Our Overview Page and Responsive iFrame Video Embeds
      00:10:43
    • Flexbox and CSS Animations on Scroll
      00:10:17
    • Building Responsive Tables and Lightboxes
      00:09:14
    • Wireframing Our Home Page and Custom Google Fonts
      00:11:14
    • Typography and Production Styling for Our Team Page
      00:11:47
    • Wireframing Our Featured Page and CSS Transforms
      00:10:33
    • Refining Our Button, Form, and Form Validation Styles
      00:12:08
    • Styling Notifications and Font-icons
      00:10:56
    • Using SVGs in Responsive Design
      00:11:12
    • Adding Off-canvas Menu Navigation
      00:11:35
    • Home Page Animation with CSS Transforms and Transitions
      00:11:23
    • Wrapping up Styling Our Responsive Site
      00:12:05
Write Your Review

Reviews

atieh mokhtari
atieh mokhtari

it gave me a really good sight for web designing. understandable and very clear description of Ms Menezes, I really liked it.

1 0 (Report)