Overview This assignment focuses on another important layout method, CSS grid. We can use grid to layout parts of a page, but it is very useful for handling the overall layout of the page.
You should write all HTML and CSS code yourself. You may use an AI in chat mode to help you understand and correct problems, but you must decide on and type in the changes yourself. You are also welcome to use AI to explain various concepts and parts of the code you have written.
Preparation When working with CSS, remember that you need to keep all style rules in the external, shared .css file.
On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_5. Copy your files from the Week 4 assignment (including images and the CSS file). Open this folder in Visual Studio Code. Adding the CSS Grid Page Layout In the CSS, define a grid for the overall page layout using named grid areas. All three pages for your site will use the common layout. The layout should include areas for: The page header with the site’s banner or title and image that appears on every page. The navigation bar (styled using FlexBox for the previous assignment). The main content area of the page. The footer with information such as the copyright date, date last updated, legal information, or the like. Update the CSS to position the specific elements or sections to the appropriate grid areas. You may need to add classes and ids to the CSS selectors and the HTML tags. Keep in mind that it is best to use semantic HTML tags whenever possible, but you may use
…tags when there isn’t a better semantic option. Add comments to your CSS to document the grid layout. The content of the page should not require the user to scroll horizontally to see everything. You may consult the AI chat of your choice for assistance with working out details or solving layout issues, but you must write all code yourself. Do not copy and paste code from the AI or allow it to edit your code. Verifying Your Work Check your pages in two browsers to make sure that the pages render correctly and look the way you want them to. In a Word document, state which browsers you tested the pages in. You do not need screenshots of the pages displaying in the browsers. The HTML files with changes need to be revalidated. Go to the Nu HTML Checker tool at validator.nu to verify the HTML. In the “Check by” dropdown menu, select “file upload.” Then, click the File Upload button to upload the .html file. After the file has been uploaded, click the Check button. Repeat the process for each HTML file. Fix any errors noted by the validation tool and correct the causes of any warnings. When the pages pass, get screenshots of the successful validations and put them in eh Word document. Validate the CSS file using the CSS Validation Service. The process is essentially the same as the HTML validation (use the “by File Upload” option). Correct any errors in the CSS identified by the validator. When the CSS passes the check, get a screenshot of the successful validation and put it in the Word document. Submission Requirements Add the Word document to the folder containing the three .html files, the .css file, and the image files.
Please do not include extra files in your submission. Compress the folder and submit the zip file as an attachment to your submission. Competencies Measured By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:
Competency 1: Author well-structured, standards-compliant HTML. Test in 2 browsers. Competency 2: Style web page content using current CSS. Ensure responsive design. Competency 3: Apply CSS web page layout techniques to organize page content. Define CSS grid layout. Position page elements in grid. Competency 4: Code HTML forms designed for user-friendly data entry. Validate HTML and CSS.