Gain insights into advanced CSS concepts, delve into responsive design, explore animations, learn practical projects, and discover powerful tools. Perfect for backend engineers and budding developers.

My Goal is to take you from a beginner (or intermediate) CSS user to becoming one of the best CSS devs you know! 


👉🏻 COURSE CONTENT?
1. A detailed look at CSS Fundamentals
2. Practical SVG for today
3. A Sane Guide to Responsive Design
4. Creating sleek Interfaces with CSS Animations and Transitions
5. Writing Maintainable CSS and tips for CSS at Scale
6. Learn the CSS Grid by Building ... wait for it! 😉
7. Get a Private slack Invite where you can ask me anything
8. Gain a Solid Understanding of CSS Fundamentals 
9. Build Practical Projects
10. Flexbox, Variables, Gradients, Backgrounds, Responsive Images, Handy pro tools, and many more! 

👉🏻 WHAT ARE THE REQUIREMENTS?
The course assumes no previous knowledge of CSS

👉🏻 WHAT'S THE TARGET AUDIENCE?
1. Backend Engineers looking to level up their frontend design skills 
2. Budding developers looking to create beautiful applications 
3. Generally, engineers who want to stand out by truly understanding the internals of CSS

Ready to upgrade?

The Complete Advanced Guide to CSS

Welcome to this challenge. What are you supposed to do?

Pretty simple. 

Consider the markup below: 


<head>
 <title>.</title>
</head>
<body>
<div>
 <h1>Hello World!</h1>
 Ah, Learning CSS has been more fun than I thought It would.
 I am certainly having a great time with the tips, lessons, and all.
 Thanks, <a href="https://www.educative.io" target="_blank">Educative.io!</a> You Rock. 
 
 
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
 
 
 Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!
 
 CENTER:netur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at! Ask Google, <a href="https://www.google.com" target="_blank">www.google.com</a>
 
 JUSTIFY:Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptatasperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptatasperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptatrem at neque slow slow slowly ... despacito quos facere sequi unde optio aliquam!

 Just to reiterate, Learning CSS has been more fun than I thought It would. Lots of fun to come in the later lessons. Can't wait!
 
 
 Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?
 
 Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio? See <a href="https://www.kudi.ai" target="_blank">www.kudi.ai</a>
 
 The End
 </div> 
</body>

codemirror

Don't worry if nothing above makes sense to you. The bit to concern yourself with the most is the exercise below.

Below is a list of exercises. You should solve them (or at least attempt them) before checking the solution in the next lesson. 

Here they are: 

 ### Challenges
 
 1. Underline the h1 heading.
  2. Remove the large gap between the header element and the following paragraph
  3. Target the `.highlight` class and Highlight the text. Give it a yellow highlight.
  4. Target the `.justify` class and justify the text i.e make the text flush with both margins - left and right.
  5. Target the `.center` class and center the text.
  6. Target the `.caps` class and make the text appear in capital letters ONLY!
  7. Target the `.indent` class and indent the text.
  8. Target the `.drop-cap` class and give it a drop cap effect. 
  9. Target every link in the document, and give them a color of `darkblue` with a bold weight, EXCEPT the link in the paragraph, `.no-link`. Give that a color of red
 10. When hovered upon, change the color of the links to `teal`
 
 
 Below is the playgroud to write your solution.

Introduction

Getting started with CSS

Oh My Selectors!

CSS Fundamentals Everyone Should Know

Colors, colors, colors!

We all Need Units

Typography in CSS

The Box Model

Challenge: Hands-on Practice with Texts, Margin, Padding and Borders

Getting creative with Backgrounds

Project: Build a Movie Order Page

Making Sense of CSS Gradients

Hands-on Practice with Gradients

Project: Build a Sign Up Page for a Startup

{New} Teach Me Positioning Like I'm Five

{New} A Detailed Look at CSS Variables ( a.k.a Custom Properties )

{New} CSS Variables Real World Applications

{New} Long Live the CSS Grid

Final Words

The Problem

Challenges