Education

[VIP] DesignCourse: CSS

You're going to rock at making layouts. Learn how to build beautiful layouts with CSS in our new Interactive Course taught by Gary Simon. Learn to code with AI ChatGPT Integration Makes Learning CSS Easy.

Jun 7, 2023 - 11:24

Jun 7, 2023 - 11:22

0 370

Learn to code with AI

ChatGPT Integration Makes Learning CSS Easy.

Harness the power of OpenAI’s ChatGPT inside of our web-based, interactive code editor. No OpenAI account needed.

It’s better learning CSS by building things that look good.

Every component, layout & project you create in this course has an associated Figma file designed by your instructor, Gary Simon.

When you build something with HTML & CSS that looks great in the browser, it makes learning so much funner.

Video

8 hours worth of video instructional by Gary Simon

Code Tests

Interactive code tests are a fun way to CSS properties

Challenges

Challenge yourself by tackling layouts designed in Figma.

The new CSS course by Gary Simon is awesome.

Love the coding games that have been put through out the course. Gary has done an fantastic job at explaining concepts like flexbox through small projects.

Code in the browser with our interactive tests.

There are dozens of interactive tests that will challenge your CSS knowledge.

Our custom in-browser coding engine provides you with tasks, and your goal is to utilize your knowledge of CSS to complete the layout challenge.

CSS Basics

Rem vs Em Units
Absolute vs Relative
Figma to CSS Conversions

Flexbox & Projects

Flexbox Basics
Article Listings
Search Game Stats
Social Sharing
User Avatar
Navigations
Drum Module
Timeline
Chat Messages

Responsive Flexbox Projects

Responsive Gallery
News Listings
Telecom Service
Anxiety App
Web Stats
Responsive Nav
Signup Form
Cards
Animal Tours

Grid

Grid Basics
Simple Grid Gallery
Toolbar
More projects to come

Responsive Grid

Applying Grid in Media Queries

Full Projects

Dozens of Component Projects
Recall - Full Layout Project
Designalytics - Full Layout Project
Couply - Full Project Challenge

Download