Advanced Css & Sass: Framework, Flexbox, Grid, Animations

Create your own CSS Framework with reusable components using SASS. Advanced & Modern CSS Flexbox, Grid & Animations

What you'll learn

CSS

Flexbox layouts: build multiple real-world Templates with flexbox

CSS Grid layouts: build multiple real-world Templates with CSS Grid

Advanced CSS animations with @keyframes, Animations

Advanced CSS Transitions

SASS

SCSS

Structuring Web Pages

Advanced responsive design: media queries, em and rem units, etc.

Using Sass in real-world projects: managing media queries, global variables, CSS animations, etc.

Responsive images

Create your own CSS Framework

Create you own reusable Variables Component for Colors, Screen sizes and Typography and implement them in web pages

Create you own reusable Buttons Components and implement them in web pages

Create you own reusable Cards Components and implement them in web pages

Create you own reusable Navigation Components and implement them in web pages

Create you own reusable Form Components and implement them in web pages

Web Development essentials

Get friendly and fast support in the course Q&A

Requirements

HTML

Basic CSS

PC or MAC

Description

Got your basics done? html hello world, style  color red, good, it's time to create amazing web sites. We are going to start up slowly and create a simple landing page, then we will go through modern CSS technology like CSS flexbox, CSS Grid, animations, transition, then start creating our own reusable sass components and apply then trough classes in our own website templates.Who is this course for:NOT for Absolute Beginners!Beginner CSS developers who want to up there CSS game. CSS developers who want to have a deeper understanding on how CSS Works.Freelancers who want to have basic Web-page Templates for client presentations. CSS developers who want to expand their tool-set to animations, Flexbox, CSS Grid, Sass, and much more.Front-end developers who want to finally understand how CSS works behind the scenes.In general: anyone who wants to truly master CSS!In a nutshell, this course is for those of you who got your basics done in HTML,CSS and want to go to the next level.What is the next level?Now we get in to what YOU actually will learn in this course:From Beginner to Advance CSS Web Pages Structuring.Using Pseudo Elements and Classes.Flexbox layouts.Grid layoutsCSS TransitionsCSS Animations with @keyframesAdvanced Responsive Design: media queries @media, em and rem units, etc.Using Variables in CSS.Complete SASS technology and SCSS to CSS compiler. SASS SyntaxSASS VariablesSASS ScopeSASS ShadowingSASS Data Types: Numbers, String, Colors, Lists, Maps, Boolean and Null.SASS OperatorsSASS FunctionsSASS MixinSASS Flow Control with: @if,  @else @if, @else, @each, @for, @while.Creating Reusable Variables Components.Creating Reusable Typography Components.Creating Reusable Buttons Components.Creating Reusable Cards Components.Creating Reusable Navigation Components.Creating Reusable Form Components.Why SASS ?If your CSS to cluttered up!? And You want to create some clarity in your Project. Then You need to get more organized in order to become a more efficient Developer !The best way to get organized and up your productivity is to slice everything up in to easy to control pieces.How?The main Focus of this Course is to Reverse Engineer the creation process, thus resulting in a more deeper understanding of CSS by using SASS Structure of  Style-sheets named Partials. Partials will help you separate your design in to small and ease to manage peaces!You will learn complex CSS Animations and Transitions, advanced responsive design techniques, Flexbox layouts, CSS Grid ,Sass, CSS architecture, fundamental CSS concepts, and so much more.After finishing this course you will have a profound understanding of :FlexboxCSS GridAnimationsTransitionSass and ScssResponsive webdesignYour Own CSS Framework with reusable ComponentsMultiple Web-page Templates.Your Own Portfolio Website. This Course contains:• Lifetime access to 20+ hours of HD quality videos. No monthly subscription. • Downloadable assets, HTML starter code for each project;• All videos are downloadable. Learn wherever you want, even without an internet connection!• Friendly and fast support in the course Q&A whenever you have questions or get stuck;• English closed captions .Just one more thing!What is the most important thing in life?If your answer was time then you are right. Either it's time whit you Family, your Spouse, your Friends, time is of essence. How can we get more time? We can't. :(Time is NOT recyclable! Wants it's gone it's gone forever. What we can do is save time. So have can we save time? By getting more efficient, how do we get more efficient, we set up systems that work for us. If I could compress this course in to one word it would be efficiency.My Name in :Menyhart B. Norbert and  I would love to welcome you as a new student in my course. I'm sure you're gonna love it!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Setting up the Developer Environment

Lecture 3 Developer environment Resources

Lecture 4 Web Browser & Code Editor

Section 2: Starter Project - Reverse Engineering

Lecture 5 Introduction

Lecture 6 Project Starter Files

Lecture 7 Laying Plans

Lecture 8 Menu Bar

Lecture 9 Main

Lecture 10 Footer

Lecture 11 Responsiveness on Mobile Platforms

Lecture 12 Sass Basic Setup

Lecture 13 Partials and Config

Lecture 14 Partial file Variables

Lecture 15 Partial file for the Navigation

Lecture 16 Partial file for the Main

Lecture 17 Partial file for the Footer

Lecture 18 Partial file for Responsiveness

Lecture 19 Conclusion

Section 3: SASS Explained

Lecture 20 SASS Syntax Starter Files

Lecture 21 SASS Syntax

Lecture 22 SASS Variables Starter Files

Lecture 23 SASS Variables

Lecture 24 SASS Default Value

Lecture 25 SASS Scope

Lecture 26 SASS Shadowing

Lecture 27 SASS Flow Control

Lecture 28 SASS Advance Variable Functions

Lecture 29 SASS Deta Types

Lecture 30 SASS Data Types - Numbers

Lecture 31 SASS Data Types - Strings

Lecture 32 SASS Data Types - Colors

Lecture 33 SASS Data Types - Lists

Lecture 34 SASS Data Types - Maps

Lecture 35 SASS Data Types - Boolean

Lecture 36 SASS Data Types - Null

Lecture 37 SASS Operators

Lecture 38 SASS Functions

Lecture 39 SASS Mixin

Lecture 40 SASS Flow Control

Lecture 41 SASS Flow Control @if and @else

Lecture 42 SASS Flow Control @each

Lecture 43 SASS Flow Control @for

Lecture 44 SASS Flow Control @while

Section 4: Responsive design @media

Lecture 45 Desktop Tablet Mobile

Section 5: Flex Box in CSS and SASS

Lecture 46 Intro

Lecture 47 Starter Files

Lecture 48 Display Flex & Flex Direction

Lecture 49 Flex Wrap

Lecture 50 Justify Content

Lecture 51 Align Items

Lecture 52 Align Content

Lecture 53 Flex Order

Lecture 54 Flex Grow

Lecture 55 Flex Shrink

Section 6: Project - Food Blog Template - Using Flex Box

Lecture 56 Intro

Lecture 57 Starter Files

Lecture 58 Basic Configuration

Lecture 59 Navigation

Lecture 60 Main

Lecture 61 About

Lecture 62 Footer

Lecture 63 Responsiveness

Section 7: Display Grid in CSS and SASS

Lecture 64 Intro

Lecture 65 Starter Files

Lecture 66 Display Grid - Grid Template Column & Row

Lecture 67 Grid Template Area

Lecture 68 Grid Template

Lecture 69 Grid Gap

Lecture 70 Align Items

Lecture 71 Justify Items

Lecture 72 Justify Content

Lecture 73 Align Content

Lecture 74 Grid Auto Columns & Rows

Lecture 75 Grid Auto Flow

Lecture 76 Children Properties

Section 8: Project - Photo Template using CSS Grid

Lecture 77 Photo Template Intro

Lecture 78 Photo Template Starter Files

Lecture 79 Photo Template Config Partial

Lecture 80 Photo Template Text Component

Lecture 81 Photo Template Grid Layout

Lecture 82 Photo Template Navigation

Lecture 83 Photo Template Header

Lecture 84 Photo Template Main

Lecture 85 Photo Template Aside

Lecture 86 Photo Template Section

Lecture 87 Photo Template Form

Lecture 88 Photo Template Footer

Lecture 89 Photo Template Responsiveness

Section 9: CSS Transitions & Rotations

Lecture 90 Introduction to the section

Lecture 91 Starter Files

Lecture 92 CSS What is a transition?

Lecture 93 CSS Transition Timing-Function Property

Lecture 94 CSS transition-delay

Lecture 95 CSS Transition Transform

Lecture 96 CSS Transition Shorthand

Section 10: CSS Animations

Lecture 97 Introduction to the section

Lecture 98 Starter Files

Lecture 99 @keyframes

Lecture 100 Animations using Colors

Lecture 101 Animations Directions

Lecture 102 Animation Speed Curve

Lecture 103 Animations Fill Mode

Lecture 104 Animations Short Hand

Section 11: Test Your CSS Might

Section 12: Project - Animated Buttons

Lecture 105 Project Overview

Lecture 106 Project Starter Files

Lecture 107 Animated Buttons using CSS

Lecture 108 Animated Buttons using SASS

Section 13: Components - First Components

Lecture 109 Intro

Lecture 110 Components - Starter Files

Lecture 111 Component - Variables

Lecture 112 Component - Typography

Section 14: Project - Simple CV Template

Lecture 113 Introduction

Lecture 114 Starter Files

Lecture 115 Config and File Structure

Lecture 116 Main Area

Lecture 117 Aside Area

Lecture 118 Aside Area - Skills

Lecture 119 Aside Area - Languages

Lecture 120 Section Area

Lecture 121 Footer Area and Switch Colors

Lecture 122 Responsiveness

Section 15: Create Sass Button Components

Lecture 123 Intro

Lecture 124 Buttons Partial Component

Lecture 125 Main Buttons Class

Lecture 126 Background Colors Class

Lecture 127 Outline Colors Class

Lecture 128 Buttons Dimension Class

Lecture 129 Checkbox and Radio Buttons

Lecture 130 Neon Buttons

Section 16: Create Sass Cards Components

Lecture 131 Starter Files

Lecture 132 Simple Cards

Lecture 133 Image Cards

Lecture 134 Background and Outline Colored Cards

Section 17: Project - Marketing Template using Buttons and Cards

Lecture 135 Introduction

Lecture 136 Starter Files

Lecture 137 Config and File Structure

Lecture 138 Header Section

Lecture 139 Main Section

Lecture 140 Plans Section

Lecture 141 Pricing Section

Lecture 142 About Section

Lecture 143 Footer Section

Lecture 144 Responsiveness

Section 18: Creating Sass Navigation Components

Lecture 145 Intro

Lecture 146 Starter Files

Lecture 147 Setup and Config

Lecture 148 Simple Navigation Bar

Lecture 149 Simple Navigation Bar with background color

Lecture 150 Navigation with Logo

Lecture 151 Navigation with Menu Button

Lecture 152 Navigation with Logo and Menu Button

Lecture 153 Navigation Item`s Position Switcher

Lecture 154 Navigation Positioning Top Right Bottom Left

Section 19: Project - Simple CV Template - With Navigation

Lecture 155 Intro

Lecture 156 Basic Setup

Lecture 157 Navigation Responsive Re-positioning

Lecture 158 Navigation Color Switcher

Section 20: Project - Profile Template

Lecture 159 Intro

Lecture 160 Starter Files

Lecture 161 Basic config and file structure

Lecture 162 Navigation Section

Lecture 163 Header section

Lecture 164 Skills section

Lecture 165 Statements section

Lecture 166 Service section

Lecture 167 Photo section

Lecture 168 Footer section

Lecture 169 Contact section

Lecture 170 Responsive section

Section 21: Creating Sass Form Components

Lecture 171 Intro

Lecture 172 Starter Files

Lecture 173 Simple Form

Lecture 174 Form Grid Layout

Section 22: Project Hotel Template with Animations

Lecture 175 Intro

Lecture 176 Starter Files

Lecture 177 Environment Setup and File Structure

Lecture 178 Basic config and Sections

Lecture 179 Navigation

Lecture 180 Header

Lecture 181 Rooms

Lecture 182 Hotels

Lecture 183 Contact and Subscription

Lecture 184 Footer

Lecture 185 Responsive

Section 23: Project - Parallax Template with Animations

Lecture 186 Intro

Lecture 187 Starter Files

Lecture 188 Environment Setup and File Structure

Lecture 189 Basic Config & Sections Settings

Lecture 190 Navigation

Lecture 191 Header Section

Lecture 192 About Section & Parallax Effect

Lecture 193 Service Section

Lecture 194 Contact & Footer Section

Lecture 195 Responsive Parallax Effect

Section 24: Project - Your portfolio

Lecture 196 Intro

Lecture 197 Starter Files

Lecture 198 Main Page

Lecture 199 Navigation

Lecture 200 Main Page Responsive

Lecture 201 Portfolio Page Part-1

Lecture 202 Portfolio Page Part-2

Section 25: Extras

Section 26: Bonus !!!!

Lecture 203 What's Next ?!

Beginner CSS,Beginner SASS,Beginner Web Developers,Advanced HTML,Beginner Front End Web Developers,Advanced Web Developers,Advanced Front End Web Developers,Advanced Back End Web Developers curious about Front End Web Developers,Freelancers