Converting Wireframes to Code

  1. Choose one design option from your sketches. Ideally, one framework will hold the content for all of your site pages. (It is common to want the Home page to have a different structure than your other inside pages. In that case, you’ll need two HTML frameworks.)
  2. Analyze your sketch and create a grid around it, demonstrating the HTML elements that will make up the framework. Start with the largest containers and then move on to the smaller ones.
  3. Construct HTML based on your analysis.
  4. Create CSS to size and style the elements. Add width, height, necessary floats and clears. It is recommended to add a background-color to help see the containers take shape.