10: Frontend Development Process Stages 3 and 4

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."

Upgrading is Easy

Register today for the Beginner Basics course and get the new releases by just paying the difference. There's also special discounts for existing customers when new courses are released.


Still Not Sure? Check out more curriculum!