Assessment 3 Page Layout With CSS -3240 – pt 3

Directions – The assessment focuses on using CSS for page layout. You will be using CSS layout techniques such as CSS flexbox and CSS grid to give your pages a consistent but flexible layout.

Start with the index.html file. Revise your CSS and edit the index.html (homepage) so that the overall page layout is responsively handled by either CSS Flexbox (also just called “flex”), CSS Grid, or a combination of the two.

• The layout should avoid requiring the user to scroll horizontally to see the content as the size of the browser window changes (though when the window is very narrow, horizontal scrolling may be unavoidable).
• Remember that all CSS must be in the external stylesheet (.css file).
• All pages should use the same CSS file.
• Make sure that your page includes enough text and at least a couple images to demonstrate that the layout works for our content.
• Document the added/revised CSS and HTML with comments.

Take the layout approach from the index/homepage and apply it to the site’s other pages so that they have a similar overall layout (at least in terms of the top of the page, the navigation area, and the footerserving as a kind of frame).

• The layout and styling of specific content areas on each page may vary depending on the contents, but the site’s pages should look like they go together.

On either the About page or the Contact Information page, use an HTML table styled with CSS to present tabular data.

The HTML table should consist of three or more rows (with table column headers, <th>. . .</th> in the top row) and at least two columns.

On the gallery page, set up at least two dynamic columns within the overall layout to display the images.

• You will need to have at least three or four images to make sure the layout works well.
• The layout of the images should be flexible and adapt to the width of the browser window.

Test your pages in two different browsers to make sure the work as expected. You don’t need screenshots of these tests. Just state in a Word document which browsers you tested the pages in.

Validate your pages and CSS using the W3C services:

• HTML: .
• CSS: .
• Warnings (in yellow) are okay, but any errors (in red or pink) need to be corrected.
• Take screenshots of the successful validations and put them in the Word document.

Assessment examples: You may use the assessment examples in the file to give you an idea of what a Proficient or higher rating on the scoring guide would look like.

Note: Errors from the validation should be fixed. However, warnings do not need to be fixed but should be reviewed. Fix the issues from the top down, as one error can cascade into 20 other errors. Remember, for the assessments in this course, be sure to test your web pages in at least two browsers.

Include the Word document in the folder with the files for your website. Be sure to include just the HTML and CSS files for the assessment (leave out “extra” or unused files). Also make sure that the folder contains the image files used on your pages. Zip up this folder and submit it as this assessment.