CSS Layouts Masterclass Build ResponsiveAdaptive Websites

CSS Layouts Masterclass Build ResponsiveAdaptive Websites

What you’ll 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

Requirements

No prior knowledge of HTML and CSS is required
I start from the very beginning and cover everything you will ever need to master creating real-world responsive and adaptive desktop-first and mobile-first websites
Just have a computer and leave the rest to me 🙂

Description

Welcome to the CSS Layouts MasterclassI 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 Features10 Layouts for CSS Flexbox10 Layouts for CSS Grid10 Exercises for CSS Flexbox10 Exercises for CSS Grid2 Complete Real-World Responsive Websites1 Complete Real-World Adaptive WebsiteModern Sass WorkflowMasterclass DescriptionI 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 GridFirstly, 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 GridAfter 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 GridThere 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 ProjectsBut, 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 WorkflowThroughout 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 ProjectThe 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 ProjectThe 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 FeaturesThe 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 DesignIn 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 DesignAdaptive 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

Overview

Section 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 Let’s take a look at a real-world example of HTML and CSS

Lecture 8 LET’S GET STARTED

Section 2: Beginner Learning Path

Lecture 9 Overview

Section 3: Setup

Lecture 10 Installing Visual Studio Code (VS Code)

Lecture 11 Opening a Folder

Lecture 12 Creating a File

Lecture 13 Installing Useful Extensions

Lecture 14 Opening the Browser

Section 4: HTML Essentials

Lecture 15 Section Introduction

Lecture 16 Creating Your First Webpage

Lecture 17 Hello World

Lecture 18 Creating Content

Lecture 19 Links

Lecture 20 Images

Lecture 21 Inputs

Lecture 22 Semantics

Lecture 23 Block vs Inline

Lecture 24 Container vs Contained

Lecture 25 Exercise – Code the Phoxul Webpage (Solution Included)

Section 5: CSS Essentials

Lecture 26 Section Introduction

Lecture 27 Linking CSS to HTML

Lecture 28 Understanding CSS

Lecture 29 Applying a Basic Styling

Lecture 30 CSS Classes

Lecture 31 CSS Borders

Lecture 32 CSS Backgrounds

Lecture 33 CSS Simple Selectors

Lecture 34 CSS Font Properties

Lecture 35 CSS Height and Width

Lecture 36 CSS Units

Lecture 37 CSS Text Properties

Lecture 38 CSS Pseudo-Class Selectors

Lecture 39 CSS Positions

Lecture 40 CSS Padding

Lecture 41 CSS Margin

Lecture 42 CSS Box Model

Lecture 43 CSS Pseudo-Element Selectors

Lecture 44 CSS Specificity

Lecture 45 CSS Attribute Selectors

Lecture 46 CSS Display Properties

Lecture 47 Exercise 1 – Style an Anchor Element

Lecture 48 Exercise 2 – Style an Image

Section 6: Intermediate Learning Path

Lecture 49 Overview

Section 7: CSS Flexbox – Whiteboarding & Coding CSS Layouts

Lecture 50 Section Introduction

Lecture 51 Layout 1 – Whiteboarding Blog Posts Side by Side

Lecture 52 Layout 1 – Coding Blog Posts Side by Side

Lecture 53 Layout 2 – Whiteboarding Spaced out Navigation Links

Lecture 54 Layout 2 – Coding Spaced out Navigation Links

Lecture 55 Layout 3 – Whiteboarding Personal Info Card

Lecture 56 Layout 3 – Coding Personal Info Card

Lecture 57 Layout 4 – Whiteboarding Sign in Page

Lecture 58 Layout 4 – Coding Sign in Page

Lecture 59 Layout 5 – Whiteboarding Responsive Gallery

Lecture 60 Layout 5 – Coding Responsive Gallery

Lecture 61 Layout 6 – Whiteboarding Newsletter Form

Lecture 62 Layout 6 – Coding Newsletter Form

Lecture 63 Layout 7– Whiteboarding To-do Schedule

Lecture 64 Layout 7 – Coding To-do Schedule

Lecture 65 Layout 8 – Whiteboarding a Modal

Lecture 66 Layout 8 – Coding a Modal

Lecture 67 Layout 9 – Whiteboarding Responsive Navigation

Lecture 68 Layout 9 – Coding Responsive Navigation

Lecture 69 Layout 10 – Whiteboarding Product Card

Lecture 70 Layout 10 – Coding Product Card

Lecture 71 Layout 11 – Whiteboarding Services

Lecture 72 Layout 11 – Coding Services

Section 8: CSS Grid –Whiteboarding & Coding CSS Layouts

Lecture 73 Section Introduction

Lecture 74 Layout 1 – Whiteboarding Full-Width Gallery

Lecture 75 Layout 1 – Coding Full-Width Gallery

Lecture 76 Layout 2 – Whiteboarding Sticky Footer

Lecture 77 Layout 2 – Coding Sticky Footer

Lecture 78 Layout 3 – Whiteboarding Blog Posts

Lecture 79 Layout 3 – Coding Blog Posts

Lecture 80 Layout 4 – Whiteboarding Pricing Tables

Lecture 81 Layout 4 – Coding Pricing Tables

Lecture 82 Layout 5 – Whiteboarding A Pricing Component

Lecture 83 Layout 5 – Coding A Pricing Component

Lecture 84 Layout 6 – Whiteboarding Gallery Grid

Lecture 85 Layout 6 – Coding Gallery Grid

Lecture 86 Layout 7 – Whiteboarding Responsive Product Grid

Lecture 87 Layout 7 – Coding Responsive Product Grid – Part 1

Lecture 88 Layout 7 – Coding Responsive Product Grid – Part 2

Lecture 89 Layout 8 – Whiteboarding Sign Up Page

Lecture 90 Layout 8 – Coding Sign Up Page

Lecture 91 Layout 9 – Whiteboarding Featured Products

Lecture 92 Layout 9 – Coding Featured Products

Lecture 93 Layout 10 – Whiteboarding About Section

Lecture 94 Layout 10 – Coding About Section

Section 9: Coding the UI of the Phoxul Website

Lecture 95 Organizing The Header Section HTML Code

Lecture 96 Organizing The Hero Section HTML Code

Lecture 97 Organizing The Personal Info Section HTML Code

Lecture 98 Organizing The Services Section HTML Code

Lecture 99 Organizing The News Section HTML Code

Lecture 100 Organizing The Works Section HTML Code

Lecture 101 Organizing The Contact Section HTML Code

Lecture 102 Organizing The Clients Section HTML Code

Lecture 103 Organizing The Footer Section HTML Code

Lecture 104 Setup – External Resources

Lecture 105 Setup – Creating General Styles Part 1

Lecture 106 Setup – Creating General Styles Part 2

Lecture 107 Setup – Creating General Styles Part 3

Lecture 108 Setup – Creating Utility Classes

Lecture 109 Setup – Creating Overall Layout

Lecture 110 Styling The Header Section

Lecture 111 Styling The Hero Section

Lecture 112 Styling The Personal Info Section

Lecture 113 Styling The Services Section

Lecture 114 Styling The News Section

Lecture 115 Styling The Works Section

Lecture 116 Styling The Contact Section

Lecture 117 Styling The Clients Section

Lecture 118 Styling The Footer Section

Section 10: Making the Phoxul Website Responsive

Lecture 119 Section Introduction

Lecture 120 Making The Header Section Responsive

Lecture 121 Making The Hero Section Responsive

Lecture 122 Making The Personal Info Section Responsive

Lecture 123 Making The Services Section Responsive

Lecture 124 Making The News Section Responsive

Lecture 125 Making The Works Section Responsive

Lecture 126 Making The Contact Section Responsive

Lecture 127 Making The Footer Section Responsive

Section 11: CSS Flexbox Exercises – Common Layouts & Components

Lecture 128 Section Introduction

Lecture 129 Checkout Page

Lecture 130 Navbar Section

Lecture 131 Header Section

Lecture 132 Footer Section

Lecture 133 Customer Reviews

Lecture 134 Product Carousel

Lecture 135 Order Summary

Lecture 136 Product Details

Lecture 137 Product Portfolio

Lecture 138 Teams Section

Section 12: CSS Grid Exercises – Common Layouts & Components

Lecture 139 Section Introduction

Lecture 140 Call to Action Section

Lecture 141 Team Section

Lecture 142 Contact Section

Lecture 143 Navbar Section

Lecture 144 Header Section

Lecture 145 Product Carousel

Lecture 146 Shopping Cart

Lecture 147 Footer Section

Lecture 148 Sign Up Form

Lecture 149 Responsive Gallery

Section 13: Advanced Learning Path

Lecture 150 Overview

Section 14: EventGrids Project – Building a Responsive Website (Including Sass)

Lecture 151 Section Introduction

Lecture 152 Getting Started with Sass

Lecture 153 Project Introduction

Lecture 154 Project Workflow Part 1 – Organization

Lecture 155 Project Workflow Part 2 – Sass Partials

Lecture 156 Project Workflow Part 3 – Element Styles

Lecture 157 Project Workflow Part 4 – Color Variables

Lecture 158 Project Workflow Part 5 – Gradient Variables

Lecture 159 Project Workflow Part 6 – Padding Variables

Lecture 160 Project Workflow Part 7 – Typography Variables

Lecture 161 Project Workflow Part 8 – Overall Layout + Reset

Lecture 162 Coding the Header Section

Lecture 163 Styling the Header Section – Part 1

Lecture 164 Styling the Header Section – Part 2

Lecture 165 Styling the Header Section – Part 3

Lecture 166 Making the Header Section Responsive Part 1

Lecture 167 Making the Header Section Responsive Part 2

Lecture 168 Coding the Countdown Section

Lecture 169 Styling the Countdown Section

Lecture 170 Making the Countdown Section Responsive

Lecture 171 Coding the Features Section

Lecture 172 Styling the Features Section Part 1

Lecture 173 Styling the Features Section Part 2

Lecture 174 Coding the About Section

Lecture 175 Styling the About Section

Lecture 176 Making the About Section Responsive

Lecture 177 Coding the Speakers Section

Lecture 178 Styling the Speakers Section

Lecture 179 Coding the Events Section

Lecture 180 Styling the Events Section

Lecture 181 Making the Events Section Responsive

Lecture 182 Coding the Pricing Section

Lecture 183 Styling the Pricing Section

Lecture 184 Coding the Testimonials Section

Lecture 185 Styling the Testimonials Section

Lecture 186 Coding the Blogs Section

Lecture 187 Styling the Blogs Section

Lecture 188 Coding the CTA Section

Lecture 189 Styling the CTA Section

Lecture 190 Coding the Footer Section

Lecture 191 Styling the Footer Section

Lecture 192 Making the Footer Section Responsive

Lecture 193 Coding the Gallery Page

Lecture 194 Styling the Gallery Page

Lecture 195 Arranging the Pricing Page

Lecture 196 Arranging the Schedule Page

Lecture 197 Arranging the Speakers Page

Lecture 198 Coding the Blog Page

Lecture 199 Styling the Blog Page

Lecture 200 Making the Blog Page Responsive

Lecture 201 Coding the Contact Page

Lecture 202 Styling the Contact Page

Lecture 203 Making the Contact Page Responsive

Section 15: Mobile First Design Project – Building an Adaptive Website (Including Sass)

Lecture 204 Section Introduction

Lecture 205 Project Introduction

Lecture 206 Project Workflow Part 1 – Organization

Lecture 207 Project Workflow Part 2 – Custom Variables

Lecture 208 Coding the Header Section

Lecture 209 Styling the Header Section

Lecture 210 Making the Header Section Adaptive

Lecture 211 Coding the Hero Section

Lecture 212 Styling the Hero Section

Lecture 213 Making the Hero Section Adaptive

Lecture 214 Coding the Trainer Section

Lecture 215 Styling the Trainer Section

Lecture 216 Making the Trainer Section Adaptive

Lecture 217 Coding the Features Section

Lecture 218 Styling the Features Section

Lecture 219 Making the Features Section Adaptive

Lecture 220 Coding the About Section

Lecture 221 Styling the About Section

Lecture 222 Making the About Section Adaptive

Lecture 223 Coding the Gallery Section

Lecture 224 Styling the Gallery Section

Lecture 225 Making the Gallery Section Adaptive

Lecture 226 Coding the Pricing Section

Lecture 227 Styling the Pricing Section

Lecture 228 Making the Pricing Section Adaptive

Lecture 229 Coding the Testimonial Section

Lecture 230 Styling the Testimonial Section

Lecture 231 Making the Testimonial Section Adaptive

Lecture 232 Coding the Contact Section

Lecture 233 Styling the Contact Section

Lecture 234 Making the Contact Section Adaptive

Lecture 235 Coding the Footer Section

Lecture 236 Styling the Footer Section

Lecture 237 Making the Footer Section Adaptive

Lecture 238 Deployment

Section 16: Wrap Up

Lecture 239 Wrap Up + Next Steps

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

Course Information:

Udemy | English | 49h 27m | 37.80 GB
Created by: Muslim Helalee

You Can See More Courses in the Developer >> Greetings from CourseDown.com