Learn effective CSS debugging techniques in this comprehensive 57-minute video tutorial. Discover step-by-step strategies for troubleshooting CSS issues, from crafting precise search engine queries to analyzing Stack Overflow answers. Master the art of systematic problem-solving by comparing CSS styles, HTML hierarchies, and parent elements. Explore advanced concepts like position absolute, display: flow-root, and block formatting contexts. Gain practical insights on using browser developer tools, organizing debugging clues, and addressing cascading bugs. Perfect your CSS debugging skills and streamline your web development workflow with real-world examples and expert tips.
Overview
Syllabus
- Intro
- Describe problem in Google/DuckDuckGo
- What makes a good Stack Overflow answer
- Try one fix at a time and recheck
- Summarize problem into questions
- Search CSS issues on MDN
- Compare CSS styles between 2 elements
- Compare the HTML hierarchy of both elements
- Compare CSS styles on parent elements
- Toggle CSS rules to see which one has an effect
- Organize clues by writing them down
- More research on position absolute
- Fixing 1 bug causes a new bug
- Compare design to actual website
- Hover over elements in dev tools to find extra space
- Researching and fixing the margin issue
- Researching display: flow-root and block formatting contexts
- Fixing the rest of the hero images
Taught by
Coder Coder
