Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids

Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 1h 56m | 453 MB

This course will teach you how to implement multiple column layouts using standard divisions, Flexbox, and CSS Grids. You’ll also examine CSS shapes for interesting text wrapping.

At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, and SASS. In this course, Hands-on Responsive Web Design 3: Columns, Flexbox, and Grids, you’ll learn the skills you need to layout a page using standard divisions and CSS, as well as newer technologies like Flexbox and CSS Grids. First, you’ll discover how to automate this process by leveraging the power of SASS operators. Next, you’ll explore how to use CSS shapes to create text wrapping. Finally, you’ll delve into using CSS Grids for the overall page layout. By the end of this course, you’ll have a mobile music player app project that adapts to vertical or horizontal orientation of mobile screens.

Table of Contents

01 – Course Overview
02 – Introduction
03 – Overview
04 – Sprites
05 – Progressive Enhancement
06 – SASS Operations
07 – Project – Social Icons
08 – Project – Columns Part 1
09 – Project – Columns Part 2
10 – Overview
11 – Use Font Awesome for Social Icons
12 – Use Clip-path to Crop a Square Image
13 – Use Shape-outside to Wrap Text
14 – Testing
15 – Overview
16 – Navigation Using Flexbox
17 – SASS Mixin for a Gradient
18 – Flexbox for Text
19 – Flexbox for an Image Gallery
20 – Testing Flexbox
21 – Overview of CSS Grid
22 – Text Blocks in CSS Grid
23 – Image Gallery in CSS Grid
24 – Microsoft Prefixes for CSS Grid
25 – Complete Page Layout Using CSS Grid
26 – Testing
27 – Introduction to Player App Interface
28 – Building the Template
29 – Building the Album Page
30 – Building the Artist Page
31 – Building the Player Page
32 – Testing