Assignment Information 3/23/24, 8:54 AM GRA 310 Module Four Activity Website Content Guidelines and Rubric Overview The header, footer, and navigation structure of a website are known as universal components. These components are standard for all webpages, irrespective of their location on a website. After these universal components are designed, custom content is added to each page according to the purpose of that page. Examples of custom content include images, written content, call to action, etc. Additionally, designers apply web design and UX principles to the page design to optimize the files for web performance and usability. Scenario You are a web designer who works at a small design firm. Your firm has been hired by a coffeehouse-Nebula Coffee-to design and build a functioning and compliant, service-based, responsive website. One of your teammates has already added the boilerplate, header, and footer to some of the HTML pages. Now, your manager has asked you to add content to the About page of your client's website to showcase as an example to the client. Directions Add content to the About page (about.html) of your client's website. The content has been provided in the Supporting Materials section. Also, apply web design and UX principles to inform the webpage's design. Use code from the Bootstrap 5.3 framework to complete your work. Other versions may have steps and details that differ from the specific requirements of this milestone. Step-by-step instructions and a video (in the Required Resources section of this module and the Supporting Materials section of this activity) have been provided to guide you through this assignment. Note: You will use Visual Studio Code to complete this assignment. If you haven't done so already, refer to the Start Here area of the course for download instructions and guidance on compressing (zipping) files. Specifically, you must address the following rubric criteria: Part 1: Design Design your client's About page by adding content in the about.html file. Also, apply web design and UX principles to enhance the design. The website About page (about.html) and the source content document have been provided in the client files linked in the Supporting Materials section. Please note that the root folder contains some additional HTML files that are blank. These pages are meant to be placeholders only. You do not need to add any content or edit anything within these blank HTML files. 1. Include code for a responsive grid layout in the about.html file. Include the following details in your work: A. Navigate to the Bootstrap (v5.3) website. In the main menu at the top, click on Docs and then find the Grid section in the left-side menu. • Note: Bootstrap's grid system uses a series of pre-built responsive classes (containers, rows, and columns) to help you lay out content more easily and automatically reorganize content based on screen size. B. Create a responsive grid made of 12 columns. Complete the following steps: i. Revisit the Grid section of the Bootstrap website. ii. Copy the Mix and Match section of the Docs menu. iii. Using your computer's paste function, paste the code snippet below the closing nav tag and above the <footer> section. Note: The 12 columns are nested in rows. You may use any combination of columns to create a grid if the numbers added together equal 12, for example, 6 rows by 6 columns (6+6 = 12), 5 rows by 7 columns (5+ 7 = 12), and so on. C. Save your about.html file. i. Test the code by opening the about.html page in your web browser. You can do this by utilizing a Visual Studio Code extension or using your favorite browser's file and open feature. D. Adjust the column widths within the code snippet. To do this, complete the following step: i. Change the column class numbers in the last row. For example, the last row in your document has two side-by-side columns that are defined by the classes col-6 and col-6 (6+ 6 = 12). Change the first column class col-6 to col-8 and change the second column class col-6 to col-4 (8+ 4 = 12). E. Save the about.html file. i. Preview the page in your browser window to ensure the updates are reflected in the browser window. https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-... ite_Content_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3 Page 1 of 4 Assignment Information 3/23/24, 8:54 AM 2. Include text provided by the client. Refer to the Nebula About Page Content document provided in the Client Files folder. You do not need to include all of the content from the document but ensure the page looks balanced-not too empty or crowded. Complete the following steps: A. In your about.html file, locate the responsive grid section from section 1. Remove the first two rows, leaving only the row that you altered previously. B. Add breakpoints to the column classes by adding in -sm, -md, -Ig, and so forth. For example, col-8 could become col-md-8. The breakpoint addition will tell the browser to stack columns when the screen size gets smaller for better legibility. The size of the breakpoint (indicated by -sm, -md, -lg) corresponds to a screen size where that stacking action will occur. You can view the breakpoint screen sizes on the Bootstrap website under docs, layout, and then breakpoints. C. Delete the placeholder text (.col-6) from both columns. D. In the larger column (col-md-8), insert an img tag that contains one of the images provided in the client's root folder. E. In the smaller column (col-md-8), insert a couple of sentences wrapped in either heading (h1, h2, h3) or paragraph (<p>) tags to welcome the audience to your client's website and give them an indication of the nature of the business. Use the content provided in the client files, linked in the Supporting Materials section to populate the column. F. Save your about.html file. i. Preview the page in your browser window. 3. Set up an image carousel comprising at least three images. Use the images provided in the client's files, linked in the Supporting Materials section. Complete the following steps: A. Navigate to the Bootstrap (v5.3) website. B. In the main menu at the top, click on Doc and look for Carousel under the Layout section. C. Copy one of the carousel code examples on the page. D. Using your computer's paste function, paste the carousel code below the closing nav tag and before the row you inserted in section A. E. Look for the carousel-item-active classes and insert img links to images within your root folder into the tags, for example: <div class="carousel-item"> <img src="example.jpg" class="d-block w-100" alt="..."> </div> F. Save your about.html file. i. Preview the page in your browser window. 4. Apply user experience and web design principles to the design. Include the following details in your work: A. Consistency: Are similar elements designed the same way? Are your images consistent in style? B. Hierarchy: Is important information presented first? Are you using heading tags to designate the importance of specific text? Is unimportant information presented in a smaller font size or weight? C. Responsive design: In about.html, add Bootstrap's "img-fluid" class to scale images on smaller devices, for example, <img src="example.jpg" class="example image">. You can check responsiveness by resizing your preview window and seeing If your image scales down with the screen size. D. Accessibility: Address the following areas of accessibility: i. Fill out all alt tags with short and relevant descriptions of images. This is to ensure that people can use and access a screen reader when necessary. ii. Add breakpoints to all columns so that images will stack on a smaller screen size. E. Save the about.html page and preview it in your browser. 5. Zip the root folder for submission. Before zipping, ensure the contents of the root folder are organized properly and updated with the latest edits. Part 2: Written Response Explain how the principles of web design and UX were applied to the design you created in Part 1 of this assignment. 6. Describe how UX and web design principles were applied to organize the webpage content. What to Submit Submit the following deliverables: Part 1: Root Folder Submit the root folder created in Visual Studio Code as a zip file for grading. The zipped root folder should contain all the relevant subfolders and files edited in Part 1 of this assignment. https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-... ite_Content_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3 Page 2 of 4 Assignment Information 3/23/24, 8:54 AM Part 2: Written Response Submit your written response as a 1- to 2-page Microsoft Word document with double spacing, 12-point Times New Roman font, and one-inch margins. If you reference any sources in your work, cite them according to MLA style. Supporting Materials The following resources support your work on this activity: GRA 310 Module Four Client Files Download and unzip this folder to access the required files needed for this assignment. Module Four: Website Content This video from the Module Four Required Resources will help you complete this activity. Module Four Activity Website Content Rubric Criteria Exemplary Proficient Needs Improvement Not Evident Value Does not attempt criterion (0%) 25 25 Part 1: Responsive Grid N/A Layout Part 1: Text N/A Part 1: Image Carousel Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner (100%) Part 1: UX and Web Design Principles Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner (100%) Includes code for a responsive grid layout in the about.html file (100%) Includes text provided by the client (100%) Sets up an image carousel comprising at least three images (85%) Applies user experience and web design principles to the design (85%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include including the responsive grid layout code in the HTML file accurately (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include ensuring that the required text has been included accurately (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include accurately setting up an image carousel using the provided images (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include applying the principles of consistency, hierarchy, Part 1: Zip N/A Part 2: UX and Web Design Principles Does not attempt criterion (0%) 15 Does not attempt criterion (0%) 15 Does not attempt criterion (0%) 25 responsive design, and accessibility accurately (55%) Zips the root folder for submission (100%) N/A Does not attempt criterion (0%) 5 Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner (100%) Describes how user experience and web design principles were applied to organize the webpage content (85%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include describing how user experience and web design principles were applied to organize the webpage content in a clear, logical, and detailed manner (55%) Articulation of Response Exceeds proficiency in an Clearly conveys meaning with Shows progress toward Does not attempt criterion (0%) 10 10 Submission has critical errors in 5 https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-... ite_Content_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3 Page 3 of 4 Assignment Information exceptionally clear, insightful, sophisticated, or creative manner (100%) correct grammar, sentence structure, and spelling, demonstrating an understanding of audience and purpose (85%) proficiency, but with errors in grammar, sentence structure, and spelling, negatively impacting readability (55%) grammar, sentence structure, and spelling, preventing understanding of ideas (0%) 3/23/24, 8:54 AM Total: 100% https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-... ite_Content_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3 Page 4 of 4