Lessons

Explore all newline lessons

Tags
Author
Pricing
Sort By
Video
Most Recent
Most Popular
Highest Rated
Reset
JavaScript vs Java

lesson

JavaScript vs JavaAdvanced JavaScript Unleashed

Overview of the relationship between JavaScript and Java

Avatar Image
History of JavaScript

lesson

History of JavaScriptAdvanced JavaScript Unleashed

Overview of history of the JavaScript language

Avatar Image
Other Layout Techniques

lesson

Other Layout TechniquesMastering CSS Layout

Other layout techniques complimentary to the design patterns discussed.

CSS Grid vs CSS Flexbox

lesson

CSS Grid vs CSS FlexboxMastering CSS Layout

We will consolidate the two spreadsheets into a single spreadsheet with what I consider the optimal versions of each design pattern while acknowledging the good and bad of each version.

The Column Drop Design Pattern in Flexbox

lesson

The Column Drop Design Pattern in FlexboxMastering CSS Layout

The grid pattern is impossible using Flexbox, but the column drop is available and achieved using a flex-wrap, justify-center, and, flex-grow.

The Center Design Pattern in Flexbox

lesson

The Center Design Pattern in FlexboxMastering CSS Layout

The center pattern sets the same margin properties, but the children is implemented using flex properties instead of grid.

The Cover Design Pattern in Flexbox

lesson

The Cover Design Pattern in FlexboxMastering CSS Layout

he cover pattern is almost identical to the grid implementation, but just uses flexbox properties.

The Responsive Split Design Pattern in Flexbox

lesson

The Responsive Split Design Pattern in FlexboxMastering CSS Layout

The split can be made even more responsive by adding the minItemWidth and switchAt.

The Split Design Pattern in Flexbox

lesson

The Split Design Pattern in FlexboxMastering CSS Layout

The Split pattern using flex box can seem complicated, but is a very powerful when all the fractions are setup.

The Inline-Cluster Design Pattern in Flexbox

lesson

The Inline-Cluster Design Pattern in FlexboxMastering CSS Layout

The inline-cluster pattern is accomplished using the wrap and align-items center.