Wireframing Part 2



During the last morning exercise, we built out the HTML for the VSSL mockup:



vssl_mockup/mockup.png




This morning, we're going to work on styling it with CSS to make it look more like the mockup.




Setup

  1. You already created the HTML for this mockup last morning exercise, so for part 2 we'll keep working on that same project
  2. Inside that vssl_mockup folder, create a style.css file. Make sure it's on the same level as your index.html file as well as the img folder and mockup.png file.
  3. Inside your index.html file, link your style.css

  4. Open index.html in your browser.

    • You can check that your CSS is attached correctly by adding a background color to the page temporarily.



Activity

  1. Your focus should be on positioning the content!
  2. Save looking for fonts for last. You don't need the exact font - just choose something that looks similar.



Resources