For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Full-Stack Software Developer
Data Science and Machine Learning - 16 wks
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
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
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, y 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. The Developer Tool: It has two sections that you need to learn and use pretty well:
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 kept the same.
This can happen for several reasons:
Open the developer tools
Click on the HTML tag you want to inspect.
Look at the
style tab, which shows the styles applied to the element.
Check if your selector and rules are on the list of styles applied to the tag.
If your selector shows up, you have successfully applied the styles, but other styles may conflict.
🔥 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 5 min video on how absolute vs relative work.
The most powerful tool for building layouts is the 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: