What you will learn in this Course

A summary of what you'll learn in this course.

So, this is where I’m supposed to convince you that this course will automagically solve all your CSS woes 😜 Haha, no one can promise that.

While I can’t convince you, or make you do anything, I hope this lesson shows you the immense value this course provides and gets you excited to get started.

I make a bold claim that if you dont learn CSS properly with this course, you won’t be able to learn it well anywhere else 😜😜

This is arguably the most beginner friendly and interactive CSS introduction you’ll find anywhere on the internet.

Alright, let’s see what you’ll learn.


1. You will get to understand the fundamentals deeply

Do you know why CSS is frustrating?

It is because nobody takes the time to learn it.

“Oh, CSS is so easy”, they say. And then it kicks them right in the a** everytime. Instead of them to take a step back and learn CSS properly, then go on Twitter and rant about how dumb CSS is. Haha 😂

Whose fault?

Please don’t be like these developers.

widget

This course will improve your understanding of the essentials of CSS, especially in areas where many developers are lacking.

The essential CSS concepts you will learn include some of the most confusing (or rather misinterpreted) concepts in CSS. A quick run through the course’s table of contents proves this.


2. You will be creating beautiful apps in no time

Do you think your web apps are so functional but lack the angel’s beauty? C’mon, the web would be so ugly without CSS.

In this course, you will learn about effective ways to select, manipulate and transform html documents into a solid work of beauty and design.

Everyone can create beautiful web pages. Everyone, including you.


3. You will learn to be more productive with CSS

While I haven’t discussed every tool there is, I made sure to show certain tools and tricks that professional frontend developers use to make their work easier, faster and better.

Productivity is to the developer what banana is to the monkey!

You should be writing beautiful apps, doing so faster, and with ease.

From color tools, to where to source SVG icons, to awesome CSS resources, I’ve got you covered on this one.

You don’t want to spend hours tweaking and figuring what color that button should be. Do you? 😂


4. You will learn to build real-world projects

In addition to all the points stated above, you will learn to apply the knowledge gained to build real-world projects.

One of such projects is the startup sign-up page below:

See how ugly that is…errr 😖

Using the power of CSS, we will transform the ugly design above into this:

widget

In addition, you will also learn to build a movie order page.


5. I’ll literally hold you by the hand.

Most importantly, you will not just build things, but be walked through the exact thought process behind the projects.

Below is an example:

widget

And there’s plenty of this.


5. You will learn visually with over 100 Illustrations that drive home the concepts being taught.

This course has over 100 illustrations! How so?

I was a graphics designer before I started to code. So, I have a knack for design.

More importantly, I think most people are visual, and where possible, visual learning aids should be provided.

Below are a few examples:

widget

Everyone says they understand margin and padding. Do they? How do the padding and margin shorthands work? How do you explain the concept of collapsed margins in CSS?

Why exactly does the property name for declaring gradients in CSS read, background-image?

widget

6. You will learn Flexbox

Flexbox is the CSS game changer. It appears I have mastered Flexbox, and would love to teach it to you.

You will learn the fundamentals of how Flexbox works in this course. Flexbox has changed how layouts are being handled in CSS. I don’t think you should be left behind.

This course will hold you by the hand and introduce Flexbox to you, in the most reasonable fashion. No complexities - at least I tried not to include any. I explained this so simply, a child could read it.

7. Learn by Doing, with Carefully Crafted Exercises

This course will NOT only give you strategic guidance on how to develop and style beautiful web pages but will also equip you with challenges and exercises to enforce the knowledge gained.

Research has shown that we learn better by doing. I made sure to incorporate challenges and exercises to get you on the ‘doing’ part.

There are so many exercises and challenges, you may hate me for this 😂


8. I Just Want a Job?

The information in this course will launch you into a successful front end career.

Guess what differentiates really good developers from the pool of the millions of developers in the world?

It is the understanding of how things work under the hood. The willingness and curiosity to understand the workings of code, rather than copying and pasting off of stackoverflow.

That is what this course will do for you.

The concepts you will learn in this course will make you a part of the few who truly understand the essentials of CSS.

The next time you see a bunch of CSS codes, you will no longer be confused.


9. Learn Responsive Design like a Pro

Responsive design can be so difficult to grasp.
Responsive design can be so difficult to grasp.

Do you struggle with responsive design? Do you want to be able to build apps that look good on multiple devices? Do you want to know how to deal with scalable images accross different device resolutions?

If you answered yes to any of that, then this course has got you covered. Really. 😃

Let me teach you the tricks of the trade, plus how to deal with responsive images. I will show you the standard way to deal with responsive images, including substituting different image qualities on different devices.

I hope this excites you as much as it excites me!


10. Build a Portfolio of Beautifully Styled Apps

Need some interesting projects to show off to friends? Well, I’ve got lots for you.

Here are the beauties we will build in this course 😂:

We will build a Shopping cart, Startup signup page, Call to action (CTA) landing page, movie order page, A CSS only Netflix video carousel, Twitter card, Facebook Post, and the infamous Pinterest moving background.

That is 8 beautifully styled apps.


11. Did I mention CSS Animations and Transitions?

Haha 😎😎 This one is interesting.

CSS Animations and transitions provide a very performant way to animate content on the web.

In this course, I will be your tour guide into the beautiful world of animations and transitions on the web.


12 Making Sense of SVG - plus Animating it Like a Pro!

Scalable vector graphics (SVG) is the single most powerful tool there is for animation on the web, and responsive design.

In this course, I will introduce you to SVG, how it works, and how you can start building with it today.

A lot of people shy away from SVG because ‘they can’t draw’.
No worries. I will show you many tools for which you can get free SVG to go about your daily job - without hassles.




Finally,

Can we get started, please? 😃😃