Skip to content
Questions
Plаce Hоlder Questiоn... A. Bаsic Pаge Structure & Layоut Create an HTML5 document () and set . Inside , include and set the page title to “CGS3853 Final Exam”. In the , create three main regions: a containing the text “CGS3853 Final Exam Information”, a section, a containing the copyright text “© 2024 CGS3853 Course”. B. Grid Layout for the Page Turn the into a CSS Grid container. Define three grid rows with the following proportions: 10% for the header, 70% for the main content, 20% for the footer. Make the body fill the entire viewport using width: 100vw; and height: 100vh;. C. Styling Header and Footer Make the header and footer use flexbox to center their content both vertically and horizontally. Give both regions a blue background and white text. Remove default margins and padding from the header’s and the footer’s so that the text aligns cleanly. D. Creating & Styling the Main Content Inside , create two elements, each with: a heading (), a bulleted list ( with several items). Give the first section the heading “Final Exam Advice” and include a list of exam-preparation tips (such as reviewing materials, practicing, arriving early, etc.). Give the second section the heading “Resources Allowed During the Exam” and include a list naming the resources (slides PDF, ZyBook chapters, ZyLabs, etc.). Hide both sections initially by setting their display to none. Style the sections with: a 1px solid blue border, 10px padding, a width defined by a CSS variable (for example: --boxes-width: 40%;), centered text for each section’s . Use flexbox on to: stack items vertically, center them, include spacing between them (e.g., gap: 20px). E. Lists & Hover Effects Set the list style to square bullets. Add left padding (20px) so the bullet points line up neatly. Add a hover effect for list items so that when the user moves the mouse over an , the text turns red, and becomes uppercase. F. Buttons & Their Container Below the two sections, create a that will hold three buttons: “Give me some advice” “What resources are allowed during the exam?” “Hide All” Style this button container using flexbox, so the buttons are evenly spaced Set the container width to the same width variable used for the sections. G. Button Behavior: showing & hiding sections In a element, retrieve references to: the first section (using its ID), the second section (by selecting the second ), the three buttons (via their IDs or tag-name position). Add an event listener to the first button so that when it is clicked: the “Final Exam Advice” section becomes visible, the “Resources Allowed…” section becomes hidden. Add an event listener to the second button so that when it is clicked: the “Resources Allowed…” section becomes visible, the “Final Exam Advice” section becomes hidden. Add an event listener to the third button so that when it is clicked: both sections become hidden.
Show Answer
Hide Answer
Post navigation