Free 30min consultation included!
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.
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!
Don’t rely anymore on themes, templates, block builders or pricey developers.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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!
Unique, interactive exercises and solutions included, not just the theory and videos.
No prior HTML or CSS knowledge? No problem. Built for beginners and non-coders.
Feel how it is to work 1-to-1 and get private 30min tutoring on any question you might have.
Taught and designed by designers, FOR designers.
Skip complex coding and unnecessary features that you will use 1% of the time. Or maybe never.
No complicated technical jargon.
An average lesson is 10-15min long.
See the solution code, what you are making and type your own code all on the same screen.
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.
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.
Practice makes perfect! Custom exercises, pre-made for complete beginners where you can practice everything you learned in the lessons.
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.
Compact, condensed lessons focusing only on the essentials. Designer-friendly approach without using complex words and language. Short and simple explanations.
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.
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.
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.
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!
The videos are designed to include visual explanations and simple, easy to digest structure.
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.
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.
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!
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.
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.
All without becoming a CSS expert and spending months or years on coding.
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.
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.
Basics of image styling – border, rounded corners, effects and fitting. Using images as backgrounds. Background color and gradient image masks.
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)
Using svg (vector) icons and fill property. More complex icons within an image tag. Social media icons and FontAwesome.
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.
Root variables, relative values (em), advanced custom lists. Using calc, margin: auto, tricks with pseudoelements, !important, grid spans and responsive text sizes.
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.
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.
Have a pre sale question?
First click on the green ‘What I will be making’ button. This is how your end result should look like.
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.
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.
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.
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!