Overview This assignment introduces you to the use of CSS Flexbox to handle the layout of key sections of your web pages. Next week's assignment will have you combine the Flexbox layout for key page sections with overall grid layout

Overview This assignment introduces you to the use of CSS Flexbox to handle the layout of key sections of your web pages. Next week's assignment will have you combine the Flexbox layout for key page sections with overall grid layout for 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. Do not put CSS style rules or style attributes in the HTML. All pages should link to the same .css file (do not create separate .css files for each page).

On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_4. Copy your files from the Week 3 assignment (including images and the CSS file). Open this folder in Visual Studio Code. Adding Flexbox for the Navigation In the

...section of the page, organize the links to your site's page in an unordered list (

• ...

). Use a separate list item (

...

) for each hyperlink. Retain the anchor tags (Link Text) so the links work correctly. Confirm that the hyperlinks all work on all pages before continuing. Edit the CSS to use Flexbox to create a horizontal navigation bar as discussed in the reading for this week. Rather than a list, the links should appear in a centered, horizontal group like this (the color, styling, and the actual links should match your site). See an example of Navigation Links. Document the relevant parts of the HTML and CSS for the navigation with comments. Check that the links on all pages are consistent and work correctly. Adding Flexbox for a Dynamic Horizontal Arrangement of Elements On the page of your choice, create a set of at least six "featured" elements (also called "cards") that are arranged in a flexible layout that adapts as the width of the browser window changes, such as the following: See an example of Special Cards. The content and styling of the individual items should fit in with your site. The key thing is to use CSS Flexbox with appropriate FlexBox alignment properties to produce a layout like the one shown above. The elements should include a heading/title, some relevant text, and an appropriately sized image or graphic. Document the relevant sections of the HTML and CSS with comments. Verifying Your Work After you are done working on your pages, test them in two different browsers to confirm they work as expected. In a Word document, state which browsers you tested the pages in. You do not need screenshots of the pages displaying in the browsers. You are welcome to use an AI chatbot to assist with understanding the problems and to suggest corrections, but you need to decide on the corrections to be made, and you must type in the code yourself. Do not copy and paste code from the chatbot or allow the AI to modify your code. Re-check the edited .html files and revised .css file as needed until all issues have been addressed. Any 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 with changes. Fix any errors noted by the validation tool and correct the causes of any warnings. When the pages pass, get screen shots of the successful validations. 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 file passes validation, take a screenshot of the successful validation. Take a screenshot of the Nu HTML Checker results for each page showing successful validation and add it to the Word document with the statement of which two browsers you tested the page in. Add the CSS validation screenshot showing successful checking of the CSS to the same 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. Create navigation bar using an unordered list in a

section. Create a featured items section of the page. Validate HTML and CSS and correct any errors. Competency 3: Apply CSS web page layout techniques to organize page content. Use CSS FlexBox to handle the layout of the navigation links. Use CSS FlexBox to give the featured items a dynamic layout.