CSS Layouts Masterclass- Build Responsive-Adaptive Websites

CSS Layouts Masterclass: Build Responsive-Adaptive Websites, available at $69.99, has an average rating of 4.38, with 239 lectures, based on 320 reviews, and has 2572 subscribers.

You will learn about The go-to resource for everyone who want to learn the best practices of creating real-world layouts and websites with the most up-to-date techniques A real-world problem-based learning approach to learning CSS Flexbox and CSS Grid to create responsive and adaptive websites How to utilize problem-based learning to stimulate and enhance your problem-solving skills Learn the best practices of creating modern and sophisticated responsive and adaptive layouts How to come up with a real-world project workflow or developer setup for creating amazing responsive and adaptive websites How to utilize cutting-edge Sass to create scalable and maintainable websites You will become a master of creating Layouts with CSS Flexbox and CSS Grid You will create 2 desktop-first responsive websites You will create 1 mobile-first adaptive website Crucial HTML and CSS Concepts that lay the foundation of web development Taking your HTML and CSS skills to the next level How to create any kind of layout with CSS Flexbox and CSS Grid How to draft layouts with CSS Flexbox and CSS Grid Learning how to draw layouts with CSS Flexbox and CSS Grid You will create 20 layouts with CSS Flexbox and CSS Grid You will solve 20 layouts with CSS Flexbox and CSS Grid exercises How to optimize websites to load faster How deploy websites to the internet for free This course is ideal for individuals who are Everyone who want to become a true master of creating responsive and adaptive websites or Beginners who want to get started with HTML and CSS as fast as possible and gain a real-world production ready blueprint on how to create responsive and adaptive websites or Intermediate HTML and CSS developers who want to create stunning modern layouts with You will create 20 layouts with CSS Flexbox and CSS Grid or Advanced HTML and CSS developers who want to take their skills to the next level and create responsive and adaptive websites or Everyone wanting to learn CSS Flexbox and CSS Grid in a real-world context or Everyone wanting to enhance their problem-solving skills or Everyone wanting to learn all the best practices of creating modern production ready websites and layouts It is particularly useful for Everyone who want to become a true master of creating responsive and adaptive websites or Beginners who want to get started with HTML and CSS as fast as possible and gain a real-world production ready blueprint on how to create responsive and adaptive websites or Intermediate HTML and CSS developers who want to create stunning modern layouts with You will create 20 layouts with CSS Flexbox and CSS Grid or Advanced HTML and CSS developers who want to take their skills to the next level and create responsive and adaptive websites or Everyone wanting to learn CSS Flexbox and CSS Grid in a real-world context or Everyone wanting to enhance their problem-solving skills or Everyone wanting to learn all the best practices of creating modern production ready websites and layouts.

Enroll now: CSS Layouts Masterclass: Build Responsive-Adaptive Websites

Summary

Title: CSS Layouts Masterclass: Build Responsive-Adaptive Websites

Price: $69.99

Average Rating: 4.38

Number of Lectures: 239

Number of Published Lectures: 239

Number of Curriculum Items: 239

Number of Published Curriculum Objects: 239

Original Price: $119.99

Quality Status: approved

Status: Live

What You Will Learn

The go-to resource for everyone who want to learn the best practices of creating real-world layouts and websites with the most up-to-date techniques

A real-world problem-based learning approach to learning CSS Flexbox and CSS Grid to create responsive and adaptive websites

How to utilize problem-based learning to stimulate and enhance your problem-solving skills

Learn the best practices of creating modern and sophisticated responsive and adaptive layouts

How to come up with a real-world project workflow or developer setup for creating amazing responsive and adaptive websites

How to utilize cutting-edge Sass to create scalable and maintainable websites

You will become a master of creating Layouts with CSS Flexbox and CSS Grid

You will create 2 desktop-first responsive websites

You will create 1 mobile-first adaptive website

Crucial HTML and CSS Concepts that lay the foundation of web development

Taking your HTML and CSS skills to the next level

How to create any kind of layout with CSS Flexbox and CSS Grid

How to draft layouts with CSS Flexbox and CSS Grid

Learning how to draw layouts with CSS Flexbox and CSS Grid

You will create 20 layouts with CSS Flexbox and CSS Grid

You will solve 20 layouts with CSS Flexbox and CSS Grid exercises

How to optimize websites to load faster

How deploy websites to the internet for free

Who Should Attend

Everyone who want to become a true master of creating responsive and adaptive websites

Beginners who want to get started with HTML and CSS as fast as possible and gain a real-world production ready blueprint on how to create responsive and adaptive websites

Intermediate HTML and CSS developers who want to create stunning modern layouts with You will create 20 layouts with CSS Flexbox and CSS Grid

Advanced HTML and CSS developers who want to take their skills to the next level and create responsive and adaptive websites

Everyone wanting to learn CSS Flexbox and CSS Grid in a real-world context

Everyone wanting to enhance their problem-solving skills

Everyone wanting to learn all the best practices of creating modern production ready websites and layouts

Target Audiences

Everyone who want to become a true master of creating responsive and adaptive websites

Beginners who want to get started with HTML and CSS as fast as possible and gain a real-world production ready blueprint on how to create responsive and adaptive websites

Intermediate HTML and CSS developers who want to create stunning modern layouts with You will create 20 layouts with CSS Flexbox and CSS Grid

Advanced HTML and CSS developers who want to take their skills to the next level and create responsive and adaptive websites

Everyone wanting to learn CSS Flexbox and CSS Grid in a real-world context

Everyone wanting to enhance their problem-solving skills

Everyone wanting to learn all the best practices of creating modern production ready websites and layouts

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 Gridare technologies that help us create stunning websites. In this masterclass, you will learn Flexbox and Gridby solving and coding layouts. I do not follow a boring approach of just going over the Flexbox and Gridwithout 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 Gridto the next level. To make the challenges worth your while, I have included screenshots of all the exercises for Flexbox and Gridand 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 Gridand 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 Gridanymoreas 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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Masterclass Introduction

Lecture 2: Masterclass overview

Lecture 3: How to make the best of this Masterclass

Lecture 4: Masterclass Projects Overview

Lecture 5: Masterclass Layouts Overview

Lecture 6: Masterclass Exercises Overview

Lecture 7: Lets take a look at a real-world example of HTML and CSS

Lecture 8: LET’S GET STARTED

Chapter 2: Beginner Learning Path

Lecture 1: Overview

Chapter 3: Setup

Lecture 1: Installing Visual Studio Code (VS Code)

Lecture 2: Opening a Folder

Lecture 3: Creating a File

Lecture 4: Installing Useful Extensions

Lecture 5: Opening the Browser

Chapter 4: HTML Essentials

Lecture 1: Section Introduction

Lecture 2: Creating Your First Webpage

Lecture 3: Hello World

Lecture 4: Creating Content

Lecture 5: Links

Lecture 6: Images

Lecture 7: Inputs

Lecture 8: Semantics

Lecture 9: Block vs Inline

Lecture 10: Container vs Contained

Lecture 11: Exercise – Code the Phoxul Webpage (Solution Included)

Chapter 5: CSS Essentials

Lecture 1: Section Introduction

Lecture 2: Linking CSS to HTML

Lecture 3: Understanding CSS

Lecture 4: Applying a Basic Styling

Lecture 5: CSS Classes

Lecture 6: CSS Borders

Lecture 7: CSS Backgrounds

Lecture 8: CSS Simple Selectors

Lecture 9: CSS Font Properties

Lecture 10: CSS Height and Width

Lecture 11: CSS Units

Lecture 12: CSS Text Properties

Lecture 13: CSS Pseudo-Class Selectors

Lecture 14: CSS Positions

Lecture 15: CSS Padding

Lecture 16: CSS Margin

Lecture 17: CSS Box Model

Lecture 18: CSS Pseudo-Element Selectors

Lecture 19: CSS Specificity

Lecture 20: CSS Attribute Selectors

Lecture 21: CSS Display Properties

Lecture 22: Exercise 1 – Style an Anchor Element

Lecture 23: Exercise 2 – Style an Image

Chapter 6: Intermediate Learning Path

Lecture 1: Overview

Chapter 7: CSS Flexbox – Whiteboarding & Coding CSS Layouts

Lecture 1: Section Introduction

Lecture 2: Layout 1 – Whiteboarding Blog Posts Side by Side

Lecture 3: Layout 1 – Coding Blog Posts Side by Side

Lecture 4: Layout 2 – Whiteboarding Spaced out Navigation Links

Lecture 5: Layout 2 – Coding Spaced out Navigation Links

Lecture 6: Layout 3 – Whiteboarding Personal Info Card

Lecture 7: Layout 3 – Coding Personal Info Card

Lecture 8: Layout 4 – Whiteboarding Sign in Page

Lecture 9: Layout 4 – Coding Sign in Page

Lecture 10: Layout 5 – Whiteboarding Responsive Gallery

Lecture 11: Layout 5 – Coding Responsive Gallery

Lecture 12: Layout 6 – Whiteboarding Newsletter Form

Lecture 13: Layout 6 – Coding Newsletter Form

Lecture 14: Layout 7– Whiteboarding To-do Schedule

Lecture 15: Layout 7 – Coding To-do Schedule

Lecture 16: Layout 8 – Whiteboarding a Modal

Lecture 17: Layout 8 – Coding a Modal

Lecture 18: Layout 9 – Whiteboarding Responsive Navigation

Lecture 19: Layout 9 – Coding Responsive Navigation

Lecture 20: Layout 10 – Whiteboarding Product Card

Lecture 21: Layout 10 – Coding Product Card

Lecture 22: Layout 11 – Whiteboarding Services

Lecture 23: Layout 11 – Coding Services

Chapter 8: CSS Grid –Whiteboarding & Coding CSS Layouts

Lecture 1: Section Introduction

Lecture 2: Layout 1 – Whiteboarding Full-Width Gallery

Lecture 3: Layout 1 – Coding Full-Width Gallery

Lecture 4: Layout 2 – Whiteboarding Sticky Footer

Lecture 5: Layout 2 – Coding Sticky Footer

Lecture 6: Layout 3 – Whiteboarding Blog Posts

Lecture 7: Layout 3 – Coding Blog Posts

Lecture 8: Layout 4 – Whiteboarding Pricing Tables

Lecture 9: Layout 4 – Coding Pricing Tables

Lecture 10: Layout 5 – Whiteboarding A Pricing Component

Lecture 11: Layout 5 – Coding A Pricing Component

Lecture 12: Layout 6 – Whiteboarding Gallery Grid

Lecture 13: Layout 6 – Coding Gallery Grid

Lecture 14: Layout 7 – Whiteboarding Responsive Product Grid

Lecture 15: Layout 7 – Coding Responsive Product Grid – Part 1

Lecture 16: Layout 7 – Coding Responsive Product Grid – Part 2

Lecture 17: Layout 8 – Whiteboarding Sign Up Page

Lecture 18: Layout 8 – Coding Sign Up Page

Lecture 19: Layout 9 – Whiteboarding Featured Products

Lecture 20: Layout 9 – Coding Featured Products

Instructors

Muslim Helalee
Full Stack Web Developer and Instructor

Rating Distribution

1 stars: 4 votes

2 stars: 1 votes

3 stars: 25 votes

4 stars: 76 votes

5 stars: 214 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!