Web Layout with CSS Grid, Flexbox and other Modern Techniques

The first thing you will do is meet Javier Usobiaga, his professional career and his most outstanding projects.

You will start by learning to shape the layout with the units related to the viewport units, the property of object-fit and how to distribute text in columns with CSS columns. You will see how the shapes of the web can stop being rectangular with clip-path and CSS Shapes and also, you will learn to optimize your code with the native variables custom properties.

You will discover the revolution that Flexbox has meant in the world of web layout . Javier will teach you all the possibilities of element alignment. To do this, it will explain the properties of the container and the content, and the alignments capabilities with a main axis, a crossed one and alternative axes.

You will continue discovering the new rules of the game with CSS Grid completely changing the way you structure your code and pose the layout . You will learn some grid functions, the distribution and size properties and how you can create a grid that adapts to different screen sizes with the repeat and minmax .

Javier will explain more advanced techniques with CSS Grid on the grid areas, the alignment and order, nesting and by means of an example, you will see how you can use Grid and Flexbox in a combined way in a project.

You will briefly know the 3D transformations with a practical example of depth and effects in scroll to finally see projects, examples and resources selected by Javier to serve as inspiration.