HOT
blank

Professional CSS (Flexbox & Grid & Animations & More)

Development

Rating4.6
Enroll Now

Professional CSS (Flexbox & Grid & Animations & More), available at $89.99, has an average rating of 4.63, with 30 lectures, based on 174 reviews, and has 896 subscribers.

You will learn about How to code CSS in 2024 by building realistic projects from scratch and seeing how it all fits together Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy Implement simple-to-complex layouts with Flexbox & CSS Grid Crucial best practices in 2024 that every CSS-coder should know (e.g. use rem instead of px) Implement awesome CSS animations + transitions Implement Responsive Web Design (RWD) for mobile, tablet, laptop & desktop with media queries (@media) Use the most popular CSS pre-processor (Sass/SCSS) and the value it adds Why people use BEM and differences with coding CSS in React/Vue/Angular Implement a simple build process for CSS (add vendor prefixes and minify CSS file) Stop struggling with CSS — it becomes fun once you have mastered things like Flexbox (trust me) Master all critical concepts for a front-end developer Tons of easy design tricks you can use to drastically improve the look of your projects BONUS: By going through the course you'll naturally improve design and HTML too This course is ideal for individuals who are Front-end developers who want to finally master CSS or Developers who want to learn critical concepts like Flexbox, CSS Grid, Animations & Transitions, and more or Developers who want to know how to build modern websites & web apps with modern CSS or Anyone interacting with CSS — creating/updating their own website, designers who have to touch CSS, etc. It is particularly useful for Front-end developers who want to finally master CSS or Developers who want to learn critical concepts like Flexbox, CSS Grid, Animations & Transitions, and more or Developers who want to know how to build modern websites & web apps with modern CSS or Anyone interacting with CSS — creating/updating their own website, designers who have to touch CSS, etc.

Enroll now: Professional CSS (Flexbox & Grid & Animations & More)

Summary

Title: Professional CSS (Flexbox & Grid & Animations & More)

Price: $89.99

Average Rating: 4.63

Number of Lectures: 30

Number of Published Lectures: 30

Number of Curriculum Items: 30

Number of Published Curriculum Objects: 30

Original Price: $89.99

Quality Status: approved

Status: Live

What You Will Learn

  • How to code CSS in 2024 by building realistic projects from scratch and seeing how it all fits together
  • Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy
  • Implement simple-to-complex layouts with Flexbox & CSS Grid
  • Crucial best practices in 2024 that every CSS-coder should know (e.g. use rem instead of px)
  • Implement awesome CSS animations + transitions
  • Implement Responsive Web Design (RWD) for mobile, tablet, laptop & desktop with media queries (@media)
  • Use the most popular CSS pre-processor (Sass/SCSS) and the value it adds
  • Why people use BEM and differences with coding CSS in React/Vue/Angular
  • Implement a simple build process for CSS (add vendor prefixes and minify CSS file)
  • Stop struggling with CSS — it becomes fun once you have mastered things like Flexbox (trust me)
  • Master all critical concepts for a front-end developer
  • Tons of easy design tricks you can use to drastically improve the look of your projects
  • BONUS: By going through the course you'll naturally improve design and HTML too

Who Should Attend

  • Front-end developers who want to finally master CSS
  • Developers who want to learn critical concepts like Flexbox, CSS Grid, Animations & Transitions, and more
  • Developers who want to know how to build modern websites & web apps with modern CSS
  • Anyone interacting with CSS — creating/updating their own website, designers who have to touch CSS, etc.

Target Audiences

  • Front-end developers who want to finally master CSS
  • Developers who want to learn critical concepts like Flexbox, CSS Grid, Animations & Transitions, and more
  • Developers who want to know how to build modern websites & web apps with modern CSS
  • Anyone interacting with CSS — creating/updating their own website, designers who have to touch CSS, etc.

This is the #1 resource to master modern CSS!

Take your CSS to an advanced, professional level by building 2 beautiful, real-world projects from scratch. Other courses start from outdated concepts first (like floats) — we will use modern concepts right from the start (like Flexbox).

Course Projects

2 Top-tier, real-world projects. Expertly engineered to help you code modern websites & web apps with the latest best practices.

SocialEditor: Build a slick graphic design editor for social media posts (layouts with Flexbox).

BetterPhotos: Build a stylish homepage for a photography community (layouts with Flexbox & Grid).

Reviews from elsewhere

”Until recently,I’ve never sat down and learned CSS properly. I know JavaScript and React, but the CSS part of any project would be a chore. I’ve tried doing various CSS course to complete my CSS knowledge, pretty much all the popular ones on Udemy. However, I would lose interest because they were either too basic or too long winded. I highly recommend the ByteGrad CSS course by Wesley”

”Hi Wesley, I would like to say hello and the most important –THANK YOU for the fantastic CSS course you created. Let me say it’s been really (one of) the best I’ve ever went through. I am at first a backend developer and my frontend experiences are usable but somewhat limited but now I feel much better about it, really, not just talking.”

”As Albert Einstein said: ‘Example isn’t another way to teach, it is the only way to teach.’ Thank you ByteGrad for saving my time by creating the CSS program.After watching many chaotic courses on Lynda and YouTube, finally I can follow some logic here at your school.Thank you!”

”Hi Wesley, For me your CSS course is great andI am really thankful that you actually show the strategy for real world scenario in a concise way, while explaining the context with examples what not to do and why. It’s exactly the point I always struggle with, when learning new technology on those beginners silly ‘happy day scenarios’. Personally I also appreciate you don’t insert unnecessary ‘entertainments’, which I find in usual IT books and which break the reading flow, adding so much extra work.”

What You’ll Learn

1) How to code CSS in 2023 by building realistic projects from scratch and seeing how it all fits together

2) Avoid hundreds of beginner mistakes so the people who have to interact with your code have it easy

3) Implement simple-to-complex layouts with Flexbox & CSS Grid

4) Crucial best practices that every CSS-coder should know (e.g. use rem instead of px)

5) Implement simple-to-complex CSS animations & transitions

6) Implement Responsive Web Design (RWD) for mobile, tablet, laptop & desktop with media queries (media)

7) Use the most popular CSS pre-processor (Sass/SCSS) and the value it adds

8) Why people use BEM and differences with coding CSS in React/Vue/Angular

9) Implement a simple build process for CSS (add vendor prefixes and minify CSS file)

10) Tons of easy design tricks you can use to drastically improve the look of your projects

11) BONUS: By going through the course you’ll naturally improve your design and HTML skills too

Avoid struggling with CSS for years to come. Hope to see you in the course!

Course Curriculum

Chapter 1: Welcome!

Lecture 1: Welcome to the Most Loved CSS Course!

Lecture 2: READ BEFORE STARTING: Project resources (e.g. image URLs)

Chapter 2: SocialEditor (Project 1)

Lecture 1: Project Introduction – Build a Modern Project with Flexbox & Animations & More!

Lecture 2: Setup & Basics (HTML & CSS Fundamentals)

Lecture 3: Build a Modern Header (Flexbox Layout & CSS Reset & Transitions & :hover/:focus)

Lecture 4: VS Code Extension: Live-Server

Lecture 5: Header Animation – WOW (Animation WIth @keyframes)

Lecture 6: Learn Flexbox (Most Important Concept in CSS)

Lecture 7: Build the Overall Structure of Project (Flexbox Layout & 'flex' & Design Tips)

Lecture 8: Build the Sidebar (Flexbox Layout & 'transform' Property& ::before/::after)

Lecture 9: BEM: How to Name Your Classes (Value Of BEM & Specificity & !important)

Lecture 10: Build the Panel (Flexbox Layout & 'box-sizing' & Animations & Transitions)

Lecture 11: Build the Info-Bar (Flexbox Layout)

Lecture 12: Build the Editing Component (Flexbox & Animations & Transitions & 'transform')

Lecture 13: Make the Project Responsive for Mobile (@media, Responsive Flexbox Layout)

Chapter 3: BetterPhotos (Project 2)

Lecture 1: Project Introduction – Build a Modern Project With Flexbox & CSS Grid & More!

Lecture 2: Setup (HTML & CSS Base Styles & Multiple Background-Images)

Lecture 3: Build the App Structure (CSS Grid Layout)

Lecture 4: Learn CSS Grid for Layouts (Alternative to Flexbox)

Lecture 5: Build a Slick Header (Flexbox Layout & ::placeholder & 'outline' & Transitions)

Lecture 6: Sass / SCSS Syntax (Value Of Sass & Node.js & NPM)

Lecture 7: Build the Intro Section (Variables & Text Styling Tips & Utility Classes)

Lecture 8: Build the Upload Section (Flexbox Layout & :hover & ::before & 'overflow')

Lecture 9: Build the Footer (Solidifying Various Concepts)

Lecture 10: Build the Gallery – WOW (CSS Grid Layout & Animations)

Lecture 11: Build the Steps Section (Solidifying Various Concepts & Flexbox Layout)

Lecture 12: Responsiveness: Making It Look Good on Mobile, Tablet, Laptop, Desktop, etc.!

Lecture 13: Simple Build Process: Optimize the CSS File (Minification, Vendor Prefixes)

Chapter 4: Loose Ends

Lecture 1: CSS Variables & PX vs REM/EM & CSS in React/Angular/Vue

Chapter 5: Closing

Lecture 1: Congratulations! (BONUS Lecture)

Instructors

Rating Distribution

  • 1 stars: 2 votes
  • 2 stars: 0 votes
  • 3 stars: 4 votes
  • 4 stars: 41 votes
  • 5 stars: 127 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!

You may also like

Top 10 Ethical AI Courses to Learn in November 2024

Top 10 Game Development Courses to Learn in November 2024

Top 10 Software Testing Courses to Learn in November 2024