Want to build unique, custom websites?
It starts with CSS.

Enroll in the course and learn the CSS basics through our hands-on exercises

Free 30min consultation included!

online css course for designers interactive exercise interface

Enroll in Our Course CSS Basics for Designers and Non-Coders and Create Unique Websites, Save Time on Edits, and Break Free from Builder Limitations

Learning how to code is daunting...
Message received!

Through this course, you will get the basic knowledge of CSS through a series of short exercises and videos.

Without complicated language and hours of endless theory. Just the essentials and the most used and useful features.

CSS is intuitive and fun. And you don’t need ANY prior coding knowledge to learn it.

Learn CSS from a designer, not a coder.

This course, as well as this free sample exercise are intended to be taken on computer screens, not mobile. You can watch the video lessons on mobile, but remember you will need a computer with a keyboard to solve the exercises!

On average, a web designer who knows CSS charges 1.5x to 2x more than one who doesn’t.

Don’t rely anymore on themes, templates, block builders or pricey developers.

Why you should learn CSS?

Build unique, custom websites without coding

Build professional websites without knowing how to write HTML. Simply learn some basic CSS to style your website and use webpage builders like Elementor to do the building and development for you. Take the best of both worlds.

Create beautiful, custom designs

With custom CSS, you can change the appearance of your eShop or WooCommerce store, your theme, create custom designs from scratch and so much more. No more template based websites that all look the same.

Save time on website updates and changes

Oh, the joy when the client decides they like blue buttons instead of green. Or decides to animate them on hover. Or says ‘Can we increase the spacing everywhere a bit? It’s just one click, right?’ Well, with CSS, it actually is that simple.

Charge more for less time

Just use the words "CSS coding" when you talk to your client. It will immediately increase your value. Even if they don’t know what CSS means. If it contains the word ‘coding’, you are jumping a few steps ahead of your competition.

Tired of theory?

Learn CSS through fun and unique approach using custom interactive exercises designed for complete beginners.

Keep on reading to learn more or try it for free!

This course, as well as this free sample exercise are intended to be taken on computer screens, not mobile. You can watch the video lessons on mobile, but remember you will need a computer with a keyboard to solve the exercises!

What's included in the course?

Videos and exercises

5 basic and 2 advanced modules covering the basics and practical tips and selected chapters. Video lessons with visual explanations, demonstrations of the code and 50+ hands-on exercises.

Online support

We are there for you. Ask questions at any time when you are stuck with the course. Use the email address to seek help with the code, lessons or simply when you run into a technical issue.

1-to-1 consultation

The course package includes a free 30min video or screen sharing call. Schedule it whenever needed - at the beginning or during the course. Ask a specific question or get a short individual lesson.

Money-back guarantee

Not happy with the course? Just write us within 7 days after purchasing the course and you will get your money back. No conditions and no questions asked.

Schedule your free 30min 1-to-1 lesson

Break it down in several short sessions or use it all at once as a video call or a screen sharing. Use your time with the tutor to ask anything – specific questions, solve a practical problem in CSS or get a short individual lesson or a consultation on something you are struggling with. Just reach out and use it right at the beginning or at any point during the course.

And don’t worry, we won’t charge you if you are 5min over time!

Course highlights


Interactive learning

Unique, interactive exercises and solutions included, not just the theory and videos.


No coding experience needed

No prior HTML or CSS knowledge? No problem. Built for beginners and non-coders.


Free 30min individual lesson included

Feel how it is to work 1-to-1 and get private 30min tutoring on any question you might have.


Designer-friendly

Taught and designed by designers, FOR designers.


ONLY the basics without the overwhelm

Skip complex coding and unnecessary features that you will use 1% of the time. Or maybe never.


Simple language, clear explanations

No complicated technical jargon.


Short, bite-sized lessons

An average lesson is 10-15min long.


Friendly interface

See the solution code, what you are making and type your own code all on the same screen.

No tech talk.
Just simple explanations and fun exercises.

5 basic modules

Covering the introduction to CSS and working with text, images, icons and layout. Each module consists of video lessons including the code demonstration, and exercises.

2 extra modules

Optional modules are covering selected chapters like working with advanced list styling, as well as tips and tricks for even faster and more efficient CSS workflow.

50+ exercises

Practice makes perfect! Custom exercises, pre-made for complete beginners where you can practice everything you learned in the lessons.

tips and tricks

Two optional modules are including tips and tricks gained through years of web building. No. 1 tip can save you literally half the time spent on edits.

6h+ of lessons

Compact, condensed lessons focusing only on the essentials. Designer-friendly approach without using complex words and language. Short and simple explanations.

theory + practice

Learn CSS through practice. Watch the lesson first, understand the theoretical part, see how it's done in practice and then go ahead and try it yourself with the exercises.

How to know if this course is for me?

If you are a web designer using drag-and-drop builders like Elementor…

And don’t get us wrong – we are one of these as well.

But do you feel like you are compromising the design because you don’t know how to build custom solutions?

You designed a beautiful web page only to realize that you can’t build it just with templates and options that webpage builders offer?

Or you are spending hours tweaking and changing every page, one by one?

Then it’s time to upgrade your skills.

If you are a starting coder with some (or none) HTML experience…

Step up your coding game without the overwhelm. Step by step.

CSS Made Simple teaches you practical CSS techniques in a simplified way to style your websites quickly.

You don’t need to spend months on tutorials or learning complex coding languages. Just short, yet focused, bite-sized exercises.

If you want to learn CSS but don’t know where to start…

We get it, it can be overwhelming. You are learning how to CODE after all.

Where do you start? How long it will take? And how to continue and master all that complicated syntax, the colons and semi-colons? 

It doesn’t have to be that difficult or time consuming!

This course WON'T teach you everything about CSS. Instead, it will teach you the BASICS and focus on PRACTICAL usage. You will then be equipped to continue learning on your own.

How does the course look like?

online css course for designers simple explanation from a video lesson

Watch the videos

An online course consisting of a series of short video lessons that you can even binge watch in one weekend.

The videos are designed to include visual explanations and simple, easy to digest structure.

online css course for designers and non-coders solving interactive exercise

Solve the exercises

Then, get your keyboard ready and solve the short interactive exercises designed for complete beginners to get you started with practical CSS.

The HTML is already built and given to you. See your code in action immediately, directly in your browser. As you are typing, from the very first exercise.

solving interactive exercise with a hint and solved code in an online css course for designers

Get hints

Each of the exercises is targeting a specific topic. If you get stuck, simply reveal the code as a solution and study it to see where you went wrong.

You can examine the code to find the parts that are troubling you, or even copy the whole solution, paste it in your exercise and see the result you are supposed to get.

Making the code less scary.

This course is designed to empower web designers and starting coders with the skills needed to create professional websites, without the complexities of traditional coding methods.

This course, as well as this free sample exercise are intended to be taken on computer screens, not mobile. You can watch the video lessons on mobile, but remember you will need a computer with a keyboard to solve the exercises!

Go from charging $500 for a website to $5k, $10k or more

You can’t do that using only templates without custom design. Or relying only on webpage builders to build a full website.

Well, if you have great sales capabilities, you can.

Webpage builders are great. BUT…

Let’s face it. CSS allows you to create custom and professional websites and save your time. AND position you higher in the market.

When I discuss a website project, even if I am using website builders, I tell the client that I also use custom CSS coding. In those exact words.

It immediately changes their impression that they are not paying for someone who just discovered Wix and got excited about landing their first web design project.

Transform client projects into professional, unique creations that command higher fees.

All without becoming a CSS expert and spending months or years on coding.

Course Overview:

What is CSS, the difference between CSS and HTML. When CSS is used and useful. Basic terminology in CSS. How CSS looks like and basic rules on writing CSS.

3 lessons, 26min watch time

Different text selectors (paragraphs, link, headings and lists). Introduction to spans. Text properties like fonts, text size, text spacing etc. Working with columns, styling the links and basic working with lists. Turning text into buttons.

7 lessons, 76min watch time, 8 exercises

Basics of image styling – border, rounded corners, effects and fitting. Using images as backgrounds. Background color and gradient image masks.

4 lessons, 56min watch time, 8 exercises

Display properties, block, inline, inline-block, grid and flex. Margins and paddings. Visibility and overflow. Positioning of the elements: relative, absolute, fixed and sticky. Elaborating on pseudoelements (before and after, using pseudoelements for color overlays etc)

6 lessons, 91min watch time, 11 exercises

Using svg (vector) icons and fill property. More complex icons within an image tag. Social media icons and FontAwesome.

3 lessons, 15min watch time, 6 exercises

Introduction to nth-childs (examples in lists, icon boxes, navigation menu etc). Further examples on pseudoelements. Custom bullet lists and custom icons as bullets. Customizing ordered lists. Background image advanced styling with opacity.

6 lessons, 58min watch time, 15 exercises

Root variables, relative values (em), advanced custom  lists. Using calc, margin: auto, tricks with pseudoelements, !important, grid spans and responsive text sizes.

5 lessons, 66min watch time, 5 exercises

More complex exercises with a little bit larger scope combining everything from the previous exercises to test what you have learned. This module has no video lessons.

5 exercises

FAQ
Frequently Asked Questions

This is a CSS Basics for designers and non-coders course, primarily designed for web designers using Elementor and similar website builders, who want to enhance their skills in CSS. For those who don’t know how to code and don’t want to learn how to code or build in HTML. Just to create more custom looking and professional websites, and to drastically improve their efficiency and workflow and save time using CSS.

This course can also be used by beginner coders, who want to get started with CSS basics and already have some coding experience with HTML (or none whatsoever).

Yes! While the course is tailored for web designers, anyone interested in learning basic CSS techniques to enhance their web design skills can benefit from enrolling.

Whether you are a beginner coder, graphic designer or an entrepreneur building their own e-shop, portfolio or a website for their business. Or if you simply want to bump up your skill set and learn something new in 1 or 2 weeks with little to no effort. As a hobby or as a favor to your CV.

You will learn basic CSS techniques to create custom designs, streamline your workflow with time-saving tips, and elevate your web design capabilities without relying on drag-and-drop builders.

Don’t get us wrong. Web page builders are great. They do all the heavy lifting for you so that you don’t have to build anything by coding.

However, they ARE limiting your options when it comes to design, functionality and efficiency.

And that’s where CSS comes in handy.

In short, you can combine the best of both worlds by using a builder to BUILD the website and CSS to STYLE it.

It’s like a compromise between having a website built from scratch that takes longer time and coding knowledge to develop, and a template based website that relies only on what web builders can offer.

Each of the 5 modules includes video lessons covering a little bit of theory and practical demonstrations on how to write the CSS code to style the given HTML.

Each module is then followed by a series of short interactive exercises where you can practice what you learned in the video lessons.

It is recommended that you complete each module with video lessons, move on to the exercises for that module and then proceed to the video lessons of the following module.

CSS Made Simple is designed to be completed in 2-3 weeks.

You get immediate access and you can learn at your own pace – make it 15min a day or 2h a day. Even though the lessons are made in a particular order, you don’t need to complete one to go to the next one. And you can always go back to the previous one.

There are 3-7 short video lessons in each module totaling in around 6h of training materials.

We spoon feed you with information that’s easy to digest and understand. It is condensed so that you only learn the most practical and essential aspects of that particular topic.

After each module, you should complete a series of short exercises before proceeding to the next module. Exercises can take anywhere from a few minutes to an hour to complete, depending on your progress.

Not at all! No prior CSS experience or HTML knowledge is required to begin the course. It is helpful to know how to read basic HTML in order to solve the exercises, but it is absolutely not necessary. In fact, it is quite intuitive, so all you need to do is basically to know how to read. The rest we will cover in the course.

Absolutely! We love getting in touch with our students, so feel free to reach out if you have any questions or issues, or simply want to leave some feedback.

Yes, the principles and techniques taught in CSS Made Simple are mainly aimed at content management systems, including WordPress.

Upon enrollment, you’ll receive instant access to the course materials online.  When you complete the purchase, you will be automatically redirected to the course interface and logged in with your credentials. We will also send you these credentials to your email, so that you can log in any time, so make sure to check your spam folder! 

You just need an internet connection and your laptop to take the course. While you can view the lessons on any device, the course is meant to be viewed and exercises are meant to be solved on your laptop or computer using a keyboard and a bit larger screen as opposed to your phone.

Yes, we offer a 7-day money-back guarantee. If you’re not satisfied with the course, simply contact our support team within 7 days of purchase for a full refund.

If you get stuck during the course, reach out!

We are a friendly bunch and would love to hear from you.

Have a pre sale question?

General Instructions

Step One: What I will be making

First click on the green ‘What I will be making’ button. This is how your end result should look like.

Step Two: What I need

Next, click on the ‘What I need’ button to get some basic parameters to use in the code. Such as the font family, colors, image URLs etc. These are just recommendations. Use your own judgement for the rest of the values, such as paddings, margins, spacing and size.

Step Three: Read the given HTML code

You don’t need to know how to write HTML for these exercises. However, you WILL need to take a look at the ‘HTML’ code in the exercise. You can switch from HTML to CSS tab in the Codepen screen. Then read the built HTML code for each exercise to understand the structure and find the classes that are defined for the elements that you will be editing. Use those predefined classes to style them in CSS.

Step Four: Click on the ‘CSS’ tab and start coding

Click on the ‘CSS’ tab in the Codepen screen and start typing your CSS code here, just below the ‘Write CSS code here’ comment. You can also delete this comment if you wish.

For example, if a ‘div’ has a class “text-content” in HTML, you can then style this class in CSS tab. Just don’t forget to add a dot before calling a class out (.text-content)

You should see a live preview of the CSS code that you are editing in the ‘Result’ tab to the right of the Codepen screen.

Step Five: Check the solution with the CSS code

If you are stuck, click on the ‘Show me the code’ button. This will reveal the code that you can also completely copy and paste in the CSS tab of the exercise to see the result.

Or you can just go back to the lessons and watch them again.

Have fun and feel free to reach out!