Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
This guide is meant to teach you how to fix bugs in your CSS code. If you are not sure if your error is in your HTML, we recommend reading: What is debugging and how to master it.
CSS is a very tricky technology to debug, probably among the most difficult ones; it took me years to master it. I don't say this to scare you, but you need to take it seriously. My goal is to give you a concise guide and tools to quickly become good at it.
Your coding editor has syntax highlighting that will help you recognize syntax errors like missing semicolons, curly brackets, etc.
Shows the HTML tag in your website and which selectors it has. You can look at the class or ID attributes on each tag.
Stylestab within the
If you click on one of the tags, the
Styles tab will show which styles are being applied to it.
These are some of the most difficult errors to debug:
Do you remember any time in your developer history when you tried applying a style to one element but nothing was happening? No matter what you did, the element stayed the same.
This can happen for several reasons:
Styletab, which shows the styles applied to the element.
🔥 Important: We must remember that many styles are being applied to elements simultaneously; the browser combines all the rules inherited from all the selectors you have created.
Use the developer tools Elements tab and look for the tag you want to review. Click on the tag and check the styles being applied to it.
If you don't see your CSS Style, it's probably because of a misspelling or a flawed selector logic. Here is an example in the image below:
Note: The class
bluewas misspelled with
bluee, so the styles were not being applied.
When using the Elements tab on the developer tools, click on any element, and the Styles tab will show all the styles being applied.
If one style is being overridden by another, they will both show, but one will be crossed over with a line.
Note: In the image above, the
colorCSS rule is being overridden twice.
CSS has some hard-to-understand topics that can follow you for years and create a lot of bugs, so please beware and take the time to understand them well.
Do not use the position property for layouts, use
display: flex; instead.
I use the position rule for little things like attaching a notification bubble to an icon. Here is a 10 min video on how absolute vs relative position work.
The most powerful tool for building layouts is flexbox. Here is a 5 min video on how it works.
Please take some time to master the basic and advanced CSS selectors. Here are some resources: