Search

Exercise 3: Chicken Soup

Due: 10/24

The purpose of this exercise is to work creating CSS Styles in Dreamweaver.

Use the mockup, reference_chicken_noodle_soup.jpg, as a guide to help you identify different elements on the page.

In this exercise, you will:

  • Identify html tag structure
  • Copy/Paste text from a Word Document
  • Format Text using Dreamweaver
  • Create Links
  • Create and attach a new CSS style sheet
  • Create and apply CSS styles to a webpage
  • Use a Google Font

Instructions:

  1. Create a new branch named 'develop'
  2. Open reference_chicken_noodle_soup.jpg and identify the html elements needed to structure your page (Note the headings, paragraphs, lists and links)
  3. Create a new HTML file and save it as index.html
  4. Create a new div with a class of page-container
  5. Copy/Paste text from word doc into page container and remember to clean up any leftover word formatting.
  6. Using the mockup as a guide, format the text using the properties panel
  7. Create Links as shown in the mockup:
  8. Create a new CSS style sheet named styles.css and attach it to index.html
  9. Use the following Google Fonts for your page:
    • Headings – Sansita
    • Body Copy – Open Sans
  10. Style your page elements using the table in the Instructions PDF
  11. Save your changes
  12. Upload your completed work to the develop branch in GitHub and commit your changes
  13. Merge your changes to the Master Branch

Accept the Assignment

Related