(Reading time: 2 – 3 minutes)
Everybody loves screenshots… especially accurate screenshots! A few good screenshots can really save you some time when you’re learning anything on a computer.
The problem is when it’s hard to track of everything. When I’m working, I have everything open together, so I can see the entire task all at once. Screenshots aren’t so good at seeing the entire task.
Screencasts and videos can work well, but suffer from the same linear, can’t-see-it-all-at-once, just like screenshots.
So, take the next step: The Visual, All-In-One Guide Illustrating Easy CSS Menu Items.
1000 pixels wide. You will need to click through to see it in all its true glory.
Making the CSS menu was easier than making the visual guide!
Warning: you will have to study this picture like a map. Find the steps 1, 2 and 3 first. These will be keyed to the explanation following the picture.
Custom CSS menu for splash screen, click to get full size.
Ok, it’s a little busy I admit.
Here’s how to read it. First thing, find the three steps. Step 1 is roughly 4 o’clock in the picture, with Step 2 at 3 o’clock, and step 3 at 11 o’clock. In other words, start from the bottom, proceed widdershins.
By steps:
- Firebug is your friend, open it up to find the correct CSS elements.
- Once you have the rule as shown by the hierarchy in Firefox, write it out in your CSS file.
- Reload your CSS file and test.
That’s all there is to it.
A few minutes work… once you have done it a few times.
If you haven’t ever changed your css, use this as a nice little exercise. I’d budget 2-3 hours for it as well. You want to relax and have fun and learn, and not get all in a swivet when you break something. (And you will break something)
Over to you
Here’s a couple of questions for you:
- What kind of work do you do that could be explained in an All-In-One visual map?
- In your opinion, how could this picture map be improved?
