Web Layout with CSS Grid, Flexbox and other Modern Techniques

A course by Javier Usobiaga Ferrer
Web designer. Barcelona, Spain.
On Domestika since 04/10/2015
, Web designer

Discover the new grids and other ways of designing a website with CSS Shapes, variables and parallax effects

  • Spanish with subtitles in English
  • 99% Positive reviews (99)
  • 1812 students
Web Layout with CSS Grid, Flexbox and other Modern Techniques

Discover the new grids and other ways of designing a website with CSS Shapes, variables and parallax effects


Spanish with subtitles in English
  • 99% Positive reviews (99)
  • 1812 students
  • Online and at your own pace
  • Audio: Spanish
  • Level: Advanced
  • 25 Lessons (2h 16m)
  • Available from the app
  • Spanish, English, Portuguese, German
  • Unlimited access forever

The web lives in a constant change and with the arrival of CSS Grid and Flexbox, the rules of the game changed again. Javier Usobiaga -web designer, FrontEnd developer and co-founder of the Swwweet studio- has 13 years of experience creating various projects for clients such as Barcelona City Council, and with his extensive experience, invites you to discover the most modern techniques and tools that are revolutionizing the sector.

Yes in the course of Introduction to Responsive Web Development with HTML and CSS , since you started in the world of responsive web, in this you will learn various advanced techniques with tools such as CSS Grid, Flexbox, CSS Shapes, viewport units, CSS variables, 3D transformations or parallax type effects .

About this course

Course table of contents

  • U1
    U1. Introduction
  • U2
    U2. Shaping the layout
  • U3
    U3. Layout in one dimension with flexbox
  • U4
    U4. Two-dimensional layout with CSS grid
  • U5
    U5. Advanced grid CSS
  • U6
    U6. The third dimension: depth and effects in scroll
  • FP
    FP Final project
View details

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.

What is this course's project?

You will perform a free exercise with one or more of the techniques learned. Javier will make an informative page about the conquest of the South Pole, you can choose the theme and the project you want.

Projects by course students

Who is it for?

To anyone with an interest in the design and modern techniques of layout with CSS Grid, Flexbox and other modern techniques.

What you need

To carry out this course it is necessary to have a solid knowledge of HTML and CSS, a computer and a code editor.


Reviews

1812 Students
99 Reviews
99% Positive ratings

Javier Usobiaga Ferrer

TeacherPro
Web designer

Javier Usobiaga is web designer and FrontEnd developer, for more than 10 years and co-founder with Marta Armada Swwweet studio, specialized in designing responsive webs from the initial conception to the front-end development.

He also enjoys a lot in his facet as professor of Web Design in renowned workshops and schools like Elisava, IDEP.

Usobiaga understands the web as a whole, not only how beautiful it can be on the computer screen, but its usability in different devices and circumstances.

In his words, "I think that as important as the aesthetic is how fast it is charged or how well it responds, and I think that in our industry we often forget about it."


Contents

  • U1

    Introduction

    • Presentation
    • Influences
  • U2

    Shaping the layout

    • The viewport units
    • Images with object-fit
    • CSS columns
    • CSS shapes
    • CSS variables
  • U3

    Layout in one dimension with flexbox

    • Introduction to flexbox
    • Container properties
    • Content properties
    • Alignments on main shaft and cross shaft
    • Advanced alignments
    • Advanced layouts with flexbox
  • U4

    Two-dimensional layout with CSS grid

    • Introduction to CSS grid
    • Reticle functions
    • Distribution and size
    • Automatic responsive grid
  • U5

    Advanced grid CSS

    • Areas in the grid
    • Alignment and order
    • Nesting
    • Grid (and flexbox) in practice
  • U6

    The third dimension: depth and effects in scroll

    • Introduction to 3D transformations
    • Fixed headers
    • Animations synchronized with scroll
    • Inspiration and resources
  • FP

    Final project

    • Web layout techniques

This Is What Domestika Courses Are Like

  • Learn at Your Own Pace

    Enjoy learning from home without a set schedule. You set your own timetable.

  • Learn From the Best

    Learn valuable methods and techniques explained by top experts in the creative sector.

  • Expert Instructors

    Each instructor teaches only what she/he does best, conveying true passion and excellence in every lesson.

  • Certificate Pro

    Demonstrate your course attendance with a certificate signed by the teacher. Get it with your Domestika PRO subscription

  • Front Row Seats

    Videos of the highest quality ensure that you don't miss a single detail. With unlimited access, you can watch them over and over.

  • Share Knowledge

    Ask questions, request feedback, offer solutions. Share learning with other students in the community.

  • Creative Community

    More than 1M creatives and growing. Domestika is the place to share and learn what you love.

  • Professionally Developed Courses

    We selected top creatives and a team of experts to develop the courses. The result? You'll feel like you're working side by side with leading professionals.


Frequently Asked Questions

  • Domestika's courses are online classes that provide you with the tools and skills you need for completing a specific final project. Every step of the project combines video lessons with complementary instructional material, so you can learn by doing. Domestika's courses also allow you to share your own projects with the instructor and other users, thus creating a dynamic course community.

  • The course is 100% online, so once they are published, courses start and finish whenever you want. You set the pace of the class. You can go back to review what interests you most and skip what you already know, ask questions, answer questions, share your projects, and more.

  • The courses are divided into different units, each one includes lessons, informational texts, tasks and practice exercises to carry out your project step by step, with additional complementary resources and downloads. You will also have access to an exclusive forum where you can interact with the instructor and other students, and share your work and your course project, thus creating a community around the course itself.

  • You can now redeem the course you received, just access redeeming page to enter your gift code and redeem it.

Web Layout with CSS Grid, Flexbox and other Modern Techniques. A Design, and Technology course by Javier Usobiaga Ferrer

Web Layout with CSS Grid, Flexbox and other Modern Techniques

A course by Javier Usobiaga Ferrer
Web designer. Barcelona, Spain.
On Domestika since 04/10/2015
  • 99% Positive reviews (99)
  • 1812 students