Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS AWS Certified Developer - Associate
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation Emotional Intelligence Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Modeling Data Analysis Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Blogging Freelancing Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-05 05:09:55
30-Day Money-Back Guarantee
Development Web Development CSS

Advanced CSS & SASS: Framework, FlexBox, Grid, Animations

Create your own CSS Framework with reusable components using SASS. Advanced & Modern CSS Flexbox, Grid & Animations
Rating: 3.6 out of 53.6 (21 ratings)
136 students
Created by Norbert B. Menyhart
Last updated 11/2020
English
English [Auto]
30-Day Money-Back Guarantee

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

Course content

25 sections • 203 lectures • 25h 55m total length

  • Preview04:53
  • Setting up the Developer Environment
    02:03
  • Developer environment Resources
    00:07
  • Preview06:29

  • Preview01:29
  • Preview00:01
  • Preview14:25
  • Menu Bar
    11:04
  • Main
    13:01
  • Footer
    09:17
  • Responsiveness on Mobile Platforms
    11:26
  • Sass Basic Setup
    04:57
  • Partials and Config
    06:56
  • Partial file Variables
    07:44
  • Partial file for the Navigation
    08:31
  • Partial file for the Main
    09:00
  • Partial file for the Footer
    06:34
  • Partial file for Responsiveness
    14:20
  • Conclusion
    01:28

  • SASS Syntax Starter Files
    00:02
  • SASS Syntax
    20:24
  • SASS Variables Starter Files
    00:01
  • SASS Variables
    08:55
  • SASS Default Value
    10:58
  • SASS Scope
    04:36
  • SASS Shadowing
    07:29
  • SASS Flow Control
    10:28
  • SASS Advance Variable Functions
    08:18
  • SASS Deta Types
    00:58
  • SASS Data Types - Numbers
    08:18
  • SASS Data Types - Strings
    10:12
  • SASS Data Types - Colors
    06:28
  • SASS Data Types - Lists
    08:35
  • SASS Data Types - Maps
    09:30
  • SASS Data Types - Boolean
    05:49
  • SASS Data Types - Null
    06:54
  • SASS Operators
    05:04
  • SASS Functions
    31:09
  • SASS Mixin
    27:23
  • SASS Flow Control
    01:10
  • SASS Flow Control @if and @else
    33:51
  • SASS Flow Control @each
    12:29
  • SASS Flow Control @for
    05:33
  • SASS Flow Control @while
    04:21

  • Desktop Tablet Mobile
    24:38

  • Intro
    01:49
  • Starter Files
    02:36
  • Display Flex & Flex Direction
    03:23
  • Flex Wrap
    01:32
  • Justify Content
    02:53
  • Align Items
    03:28
  • Align Content
    02:23
  • Flex Order
    03:49
  • Flex Grow
    02:22
  • Flex Shrink
    02:07

  • Preview02:37
  • Starter Files
    03:04
  • Basic Configuration
    14:54
  • Navigation
    10:39
  • Main
    13:59
  • About
    03:38
  • Footer
    15:38
  • Responsiveness
    23:56

  • Intro
    01:56
  • Starter Files
    04:30
  • Display Grid - Grid Template Column & Row
    08:46
  • Grid Template Area
    06:59
  • Grid Template
    03:41
  • Grid Gap
    02:25
  • Align Items
    00:59
  • Justify Items
    01:47
  • Justify Content
    02:57
  • Align Content
    02:08
  • Grid Auto Columns & Rows
    04:16
  • Grid Auto Flow
    04:29
  • Children Properties
    02:32

  • Preview02:25
  • Photo Template Starter Files
    04:30
  • Photo Template Config Partial
    13:03
  • Photo Template Text Component
    06:55
  • Photo Template Grid Layout
    12:50
  • Photo Template Navigation
    07:17
  • Photo Template Header
    04:01
  • Photo Template Main
    07:32
  • Photo Template Aside
    03:44
  • Photo Template Section
    15:55
  • Photo Template Form
    20:42
  • Photo Template Footer
    06:36
  • Photo Template Responsiveness
    12:20

  • Introduction to the section
    00:59
  • Starter Files
    01:33
  • CSS What is a transition?
    02:40
  • CSS Transition Timing-Function Property
    04:34
  • CSS transition-delay
    01:43
  • CSS Transition Transform
    02:07
  • CSS Transition Shorthand
    02:36

  • Introduction to the section
    00:49
  • Starter Files
    01:18
  • @keyframes
    04:11
  • Animations using Colors
    03:16
  • Animations Directions
    05:29
  • Animation Speed Curve
    07:11
  • Animations Fill Mode
    06:08
  • Animations Short Hand
    05:35

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 layouts

  • CSS Transitions

  • CSS Animations with @keyframes

  • Advanced Responsive Design: media queries @media, em and rem units, etc.

  • Using Variables in CSS.

  • Complete SASS technology and SCSS to CSS compiler.

  • SASS Syntax

  • SASS Variables

  • SASS Scope

  • SASS Shadowing

  • SASS Data Types: Numbers, String, Colors, Lists, Maps, Boolean and Null.

  • SASS Operators

  • SASS Functions

  • SASS Mixin

  • SASS 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 :

  • Flexbox

  • CSS Grid

  • Animations

  • Transition

  • Sass and Scss

  • Responsive webdesign

  • Your Own CSS Framework with reusable Components

  • Multiple 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!

Who this course is for:

  • 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

Instructor

Norbert B. Menyhart
"Knowledge is Power" Acquire Knowledge by Learning!
Norbert B. Menyhart
  • 3.9 Instructor Rating
  • 121 Reviews
  • 5,892 Students
  • 5 Courses

Hi I am a Self-taught Web Developer and I am on a constant journey for knowledge which I hope will never end. On my journey I let myself be guided by 3 basic principles: "Be like Water", "A Healthy Mind in a Healthy Body" and "Knowledge is Power".

* "Be like Water " = Adapt to your Environment.

* "A Healthy Mind in a Healthy Body " = Stay both  mentally and physical fit.

* "Knowledge is Power " = Never stop learning new things. New stop being curios. always ask questions. And Apply the knowledge you gathered.

Join me on this journey and constantly evolve yourself. Enrich your Knowledge with the foundations of Web Development by learning HTMNL5, CSS3 and JavaScript and Applying them through Building from Easy to progressively more complex Responsive Web Pages.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.