🧪 The scientific method
- Make a prediction
- Test your prediction
- Update your model
🎩 Our formal language
- What I did
- What I expected
- What actually happened
🤦🏽♀️🤦🏿♂️🤦🏻 Important: These problems are not meant to trick you or upset you
...But they may feel frustrating at first! You are not expected to know the answers to all these problems. That's why we chose them. They were chosen so that everyone can have (at least one, hopefully more) question you don't know the answer to. This workshop is on how to ask developer questions as part of problem solving.
The questions stored in the bank are all common blockers. These all expose common, wrong, mental models of HTML and CSS. These are simplified versions of problems that CYF trainees get stuck on for hours (or days) in coursework. Instead of getting frustrated and stuck on your own, let's encounter these collectively and use these blockers to develop our skills in:
- Breaking down problems
- Describing problems to others clearly
- Using a systematic method of inquiry
Instead of flailing about, randomly trying stuff, attempting to memorise the internet, watching zillions of unrelated tutorials, getting frustrated and quitting coding...or any of the other totally normal, human responses we naturally have to being confounded.
Problem Bank
Use Devtools and look at the code to help you.
-
If you delete all the CSS from the styles.css in the Sources panel, what styles will be applied to this page?
-
This text has the ruleset
ul li.problem:nth-child(2) p { color: red; }Why isn't this paragraph red? -
What colour is this text?
-
There's a transition on this text. Why isn't it working?
-
Why isn't this paragraph a grid item?
-
Before running Lighthouse, write down the errors it will give you on this page. Now validate the HTML.
-
This text is 100% width. 100% of what?
-
If you add the rule
!importantto line 8 of styles.css, what colour will this text be? Why?