CSS Layouts Masterclass: Build Responsive-Adaptive Websites

Learn & Master Responsive, Adaptive & Mobile-First Layouts to Build Real-World Websites with Flexbox, Grid & Sass

Welcome to the CSS Layouts Masterclass

I am really excited to present to you this comprehensive and real-world oriented masterclass. This masterclass is a product of years of research and experience that will teach you all the ins and outs, all the secrets and tips of becoming a true HTML and CSS master. You will also learn how to create a modern developer workflow using Sass, a CSS pre-processor.

Prominent Masterclass Features

• 10 Layouts for CSS Flexbox

• 10 Layouts for CSS Grid

• 10 Exercises for CSS Flexbox

• 10 Exercises for CSS Grid

• 2 Complete Real-World Responsive Websites

• 1 Complete Real-World Adaptive Website

• Modern Sass Workflow

Masterclass Description

I start this masterclass off with the essentials of HTML and CSS. Rather than a boring and theoretical approach, I will teach you all the essentials of HTML and CSS by creating our very first portfolio website. There are also exercises at the end of the HTML essentials and CSS essentials sections to reinforce the concepts and get you involved as well.

Afterwards, you will learn to create 20 layouts with CSS Flexbox and CSS Grid in a problem-based and practical manner. Not only that, you will also have 20 exercises to solve using Flexbox and Grid.

Flexbox and Grid are technologies that help us create stunning websites. In this masterclass, you will learn Flexbox and Grid by solving and coding layouts. I do not follow a boring approach of just going over the Flexbox and Grid without any practical aspect to them. Instead, I am going to teach you every layout in two ways.

*-*-*-*-*-*-* White-boarding Layouts with Flexbox and Grid

Firstly, you will watch me come up with the ideation of the layout in a white-boarding lecture where it is just me and a whiteboard, no computer and no vs code. I will teach you how to come up with the HTML structure for your layouts and how to differentiate among the elements to come up with strategic elements that play vital roles in the context of either Flexbox or Grid. Then, I will write the CSS code on the whiteboard and teach you how to solve that specific layout using either Flexbox or Grid.

*-*-*-*-*-*-* Coding Layouts with Flexbox and Grid

After the white-boarding lecture is done, I am going to jump into vs code and teach you all the HTML and CSS code for that layout as well. As a result, you will learn the thought process of coming up with layouts’ ideas in the white-boarding lectures and you will learn how to code them in the coding lectures.

Now that you have learned your way around Flexbox and Grid, we will code the UI of the portfolio website I taught you in the essentials sections of HTML and CSS. I will also teach you all the secrets and shortcuts to making a website look incredibly awesome and accessible on all kind of devices, big and small.

*-*-*-*-*-*-* Exercises for Flexbox and Grid

There is still something missing, and that is giving you more time to practice and hone your Flexbox and Grid layout creating skills.

You will have 20 unique and mainly e-commerce layouts to exercise for Flexbox and Grid.

Throughout the exercises’ sections, you will have a real-world opportunity to take your Flexbox and Grid to the next level. To make the challenges worth your while, I have included screenshots of all the exercises for Flexbox and Grid and there is no need for you to play any videos. Just download the resource files and work your way through the exercises. There is also one video solution for every exercise layout for you to refer to in case you get stuck.

At this point in the masterclass, you might think that you are done, you learned to create layouts with Flexbox and Grid and you know how to create a responsive website and you have also had a ton of practice and exercises.

*-*-*-*-*-*-* More Projects

But, to take your skills to the absolute MONSTER level, I have two more projects in mind. Our focus will not be on learning Flexbox and Grid anymore as you have already mastered these technologies, rather on more real-world oriented skill sets.

I will teach the thought process of a responsive website and an adaptive website. Yes, you read that right, an adaptive website. Chances are this is the first time you read about an adaptive website, because there is very limited content about it online.

*-*-*-*-*-*-* Modern Developer Workflow

Throughout the second and the third projects, you will learn how to initiate a modern developer workflow and when it comes to project maintainability and scalability. I will teach you project organization, custom properties and variables, functions, utility classes and prepossessing your CSS with Sass.

*-*-*-*-*-*-* Second Project

The second project of this masterclass is to create the UI of a multi-page, real-world and a truly fully-fledged website that is just one step away from becoming a Full-Stack App. This project is called EventGrids and is a responsive, desktop-first project in which the creation and design process of the website start off from a large screen and, consequently the screen size shrinks down. It is the largest website of the masterclass in which you will not only learn a lot of new techniques, but also take your responsive skills to the absolute MONSTER level.

*-*-*-*-*-*-* Third Project

The third project of this masterclass is an adaptive website called ZeaL. It is a single page, mobile-first adaptive website. Throughout this project, I will teach you how to design a website starting from a small screen. This approach is called a mobile-first design approach and is sought out by companies as well. The reason that this skill is high in demand is because, the process of making a website look readable and accessible on all devices becomes easier and more strategic when started from a mobile screen size. Since most of the users visit websites on their smart phones, the demand for this skill has already skyrocketed.

*-*-*-*-*-*-* Third Project Features

The ZeaL project is not done yet when it comes to teaching you cutting-edge skills. By designing and coding this project, you will also learn the adaptive design as well. Adaptive design is often confused or mixed with responsive design. But, these two techniques could not be more different.

*-*-*-*-*-*-* Responsive Design

In a responsive design, the unit values are dynamic. They are constantly changing as the viewport units are shrinking or expanding. That makes the initiation of responsive design extremely difficult.

*-*-*-*-*-*-* Adaptive Design

Adaptive design on the other hand, does not contain any dynamic unit values. It is all about static unit values. The advantage of static units over dynamic units is that static units do not change in regard to viewport dimensions.

This is a very broad topic to which I have dedicated 3 projects. By completing these projects, you will not only understand the differences between responsive and adaptive designs, but also master the design process for any kind of layout and website.

I am sure you will learn a ton of new and real-world skills that will turn into the next generation of web developers.

So, come with me and let me teach you all the cool stuff HTML and CSS can do.

Can't wait to see you in the masterclass