Read the code, fix the mistake, improve it
Programmers read code like detectives. In a code clinic you look for the mistake before anything else. Four common ones: a missing semicolon at the end of a line, a colour name written with a space, a missing closing brace, and a class name that does not match. In the pictures, the first rule writes dark blue with a space, so the colour is not understood. The second forgets the semicolon after white, so the next line may stop working. In the third, the HTML says container but the CSS says contanier, so the rule never reaches the box. Once the code is correct, you can predict: if width changes from 80% to 60%, the box becomes narrower; if darkblue becomes darkgreen, the bar becomes green. Remember Week 9: one change in the style file changes every page.
| Mistake | Fix |
|---|---|
| colour with a space: dark blue | write it as darkblue |
| missing semicolon after white | add the semicolon |
| missing closing brace | add the closing brace |
| class name does not match | use the same name in HTML and CSS |
1header { 2 background-color: dark blue; 3 color: white; 4}
1.contanier { 2 width: 80%; 3}
Write a code clinic of your own: invent a rule with one deliberate mistake and swap it with a classmate to find it. Then change two values in a correct rule and write what the page will look like after each change. No device is needed.