Weather+Forecast+Project

Instructions

 * 1) Create a new folder called Forecast.
 * 2) Copy the Skeleton and paste it into a new Notepad file.
 * 3) Save the file as forecast.html. Make sure this file is saved in your Forecast folder.
 * 4) Add a heading to the top of your page that says, “Five Day Forecast”
 * 5) Create a table with five rows and five columns, which will hold information like this:


 * Monday || Tuesday || Wednesday || Thursday || Friday ||
 * High temp || High temp || High temp || High temp || High temp ||
 * Low temp || Low temp || Low temp || Low temp || Low temp ||
 * Description of weather || Description of weather || Description of weather || Description of weather || Description of weather ||
 * Picture || Picture || Picture || Picture || Picture ||


 * Using the internet, find a five day forecast for your city and insert the information into the table.
 * Go to []. Find the icons which match the forecast and save them to your Forecast folder. Add these images to the last row of your table.//Note: If you need help remembering how to add images to your web pages, go to [|http://www.w3schools.com], click on Learn HTML, and then click the Images link. This will provide several examples. The images should go in between the and tags in the last row.//
 * Create a new file called //styles.css// and add a link to this file in your forecast.html page. Add the following link element inside the section:
 * Add styles to your styles.css page. The table should be in the following format:
 * 1) Table cells should have a colored border.
 * 2) Borders for the table should be collapsed (you should not see double borders where table cells come together).
 * 3) The entire document should use a font other than Times New Roman (add a style to the body selector to change styles for the entire page).
 * 4) The font in the first row (with the days of the week) should be bold. All other text in the table should be normal (not bold).
 * 5) The first row should have a colored background (the other rows should not be colored).
 * 6) The high temperatures should be red.
 * 7) The low temperatures should be blue.
 * 8) Each column should be 200 pixels wide.
 * 9) Text inside the table cells should have 10 pixels of padding on each side.
 * 10) Your heading should be centered and have some other styling applied to it.

Styling Hints

 * 1) Create a separate class for the highs, lows, and header. These classes should be applied to the appropriate table rows.
 * 2) Any styles that you’d like to apply to every single cell should go inside of the td { } selector.

Properties You Will Need To Use

 * 1) color
 * 2) background-color
 * 3) text-align
 * 4) font-weight
 * 5) font-size
 * 6) border-style
 * 7) border-color
 * 8) border-width
 * 9) padding
 * 10) border-collapse
 * 11) font-family

Screenshot


Rubric
 * **Component** || **Possible Points** || **Score** ||
 * The table contains five rows:


 * Day of week
 * High temperature
 * Low temperature
 * Description of weather
 * Picture of weather || 5 ||  ||
 * The web page contains a heading || 2 ||  ||
 * The table contains an up-to-date forecast for five days || 2 ||  ||
 * The pictures accurately match the forecasted weather for each day || 2 ||  ||
 * The website contains an external style sheet (styles.css), which the html page is linked to (forecast.html) || 2 ||  ||
 * Table cells have a colored, styled, collapsed border || 3 ||  ||
 * The entire web page uses a font other than Times New Roman || 2 ||  ||
 * The first row is bold and has a colored background || 4 ||  ||
 * High temperatures are red and low temperatures are blue || 4 ||  ||
 * Each column is 200 pixels wide || 2 ||  ||
 * The heading is centered and styled || 2 ||  ||
 * The project was submitted on time (20% off for each day late) ||  ||   ||
 * **Total Score** || **30** ||