The CSS Detective Guide: The Case of the Devilish Details
- The Crime Scene
- Follow the Evidence
- The Evidence Never Lies
- Case Closed!
From the book
From the book
You’ve made it through the rigors of your apprenticeship, and now you want to hone your training through real-world application, right? Well, my friend, say no more: your time has come! Now we are going to roll up our sleeves and get into the nitty-gritty of some classic cases of code gone wrong.
Each chapter will present you with an overview of the case, and then we will visit the crime scene by taking a look at screenshots of the intended site, and of the site with the problems. Then you’ll get to review the complete code for the page, down to the last detail. Once you see all of the evidence, we will employ the tools of the CSS detective—from validation to code elimination—to find the guilty parties and solve the case.
So pay close attention to the details and remember your training. By the end of the section, I am confident that you will be able to crack any CSS mystery that crosses your path.
In this case, we’ll see how a harried Harry Terry tarries and finds that the devil indeed is in the details.
The Crime Scene
Renée Lilldeh of FarfallaEffect Design is suffering from an embarrassment of good fortune. A blossoming in business has prompted an expanded office, a move to bigger quarters, and a website redesign. But exhausted by the demands of clients, new-business pitches, employee training, and settling into a new space, she and her staff have handed the initial website development to their newest intern, Harry Terry.
Passionate about design and front-end coding, Harry is eager to impress, but also still a little unsure of his skills. He’s come to the CSS Detective for help with a coding mystery that currently stumps him. Follow along and see if you can spot where Harry’s code went wrong.
Initial snapshots
Harry shares the original design comp of the FarfallaEffect home page with us (Figure 5.1).
)
Figure 5.1 FarfallaEffect’s home-page design comp
However, Harry’s late-night coding endeavors have left him with this (Figure 5.2):
)
Figure 5.2 Harry’s version of the FarfallaEffect home page