Week 02

Topics:

  • Homework overview, HTML Details and Questions.
  • Understanding The BOX MODEL
  • Styling Boxes. Addressing with IDs and Classes
  • Introduction to DIVs and nesting.

Due Next Week:

  • Mark up and style to the following items:
    1. Two Recipes: Pick two interesting recipes. Gather images of the ingredients and/or steps. Design a page that is aesthetically pleasing and also instructional, which flows from top to bottom. Exercise what we have learned about DIVs and the Box Model to separate your recipe into sections. Suggestion: An ingredients section and a Steps section. You must use images. Don’t obsess over advanced layouts right now. Focus on styling block elements with the box model and continue exploring the basic css selectors.
      Each recipe is it’s own project folder with it’s own, unique html and css files.
    2. Three Quote Cards. Select three quotes from people who inspire you. Create a separate page for each quote. Use a div and use what we learned about the box model to position (in the browser window) and size the quote card as you please. Use a css background-image selector on at least one of your quotes to, for example, include a photo of the person being quoted.
      Each quote card should look different and be it’s own, separate HTML file. You may use the same CSS file for all three HTML files, but the style of each quote should be different. Consider using different classes and IDs for each type of quote box. Also consider adding links so you can switch between the three and not close/open each new file.
    3. Code Academy: Complete these sections — (5) HTML Basics III, (9) CSS Selectors

 

 

 

Examples:



Comments are closed.