10: Frontend Development Process Stages 3 and 4

The video for this lesson is slightly older (thus the different microphone) but it's still relevant to the exercise and demonstrates the process. The only difference is the code shown for Blockstart will be off, but it's removed so shouldn't be a problem.

In exercise 9 you learned how to use the blockstart.css combined with a simplified four step process to create a web page. In Exercise 9 you only did stages 1 and 2 of the process, so in this exercise you'll learn how to do stages 3 and 4 to complete the web page.

Process Review

The process you've been following is this:

1. Big Block Layout Layout the big blocks for the page, usually 3-7 blocks, or a big "example" block for each element you'll need.
2. Refine Fake Content Fill in the big blocks with fake text, placeholder images, and other "content" to work out more refined positioning and proportions.
3. Replace and Refine More Replace the block structure with refined HTML tags and use CSS to correct placement, improve visuals, and add more details.
4. Turn the Lights On Finally, add in the color schemes, fonts, images, and real text and then use that to continually refine the details even more. Your goal here is to not only make each element nice, but to make sure it fits with the whole visual experience, aka the "gestalt."

In Exercise 9 you should have created a copy of one of the blockstart demos up to stage 2 Refine Fake Content. That means your page should look about 50-70% close, depending on what you're working on. You should have most of the blocks, a bunch of fake content, placeholder shapes, and everything mostly in the right position and proportions.