CSS Zen Garden Layout

Unlike other labs, you will not need to run this lab through a validator. We are deliberately manipulating layout properties in several ways that cause the validators to mark false positives. You should refer to the CSS reference as needed:

• MDN CSS reference

Starting Code

Start by extracting provided source code and opening the files in your preferred text editor:

• lab5.zip

This lab is based on the CSS Zen Garden site, which uses just CSS to create vastly different versions of the same HTML file. The provided index.html is a slightly modified version of that file. (With no CSS formatting, the HTML looks like this.) There are two CSS files included: style.css and layout.css. These two files add color along with some basic spacing properties, including width, padding, and margins. There is also a single JavaScript file (dom.js) that you will use in Step 3.

Requirements

Your task is to modify only the layout.css and dom.js files to create a more intersting page layout.

Step 1: Positioning and flexbox

Start by focusing on the header arrangment and the navigation menu placement as illustrated in the annotated header and annotated navigation images. You'll need to use the following CSS properties to accomplish this layout:

• align-items, justify-content
• display
• list-style
• position
• left, right, top, bottom

You will need to determine what values to use for the positioning, though the test cases do allow some slight variations. All relative position values should be multiples (positive or negative) or 1.5em. All absolute values (with one exception) are multiples (positive or negative) of 5vwh or 5vh. The one exception is the .summary class, which shifts the vertical by 2.5vh.

HINT: For the design name links to shift to the left, you have to change their display value from the default inline.

All screenshots were taken on a laptop with dimensions that were approximately 1500x720. To check if your offsets for positioning and display are correct, make sure the paragraph text breaks in the same places as shown here. You can zoom in/out and resize your browser as needed.

Step 2: Supporting Grid

Next, create the grid structure for the "supporting" content within the <main> element. As a first step, focus on creating just the grid layout shown in this annotated layout. (Note that the window was zoomed out to 90% for this screenshot in order to get the full grid in the image. Also, the nav element is hidden to prevent it from covering up some of the grid.)

Once you have the grid structure, shift each of the elements as shown in these annotated images. These shifts are all relative and are multiples (positive or negative) of 2.5vw or 2.5vh.

Step 3: JavaScript DOM access

Your final task is to move the Resources section as shown in this annotated image using the CSS classes. Note that the Resources text is removed from the DOM using the appropriate CSS display value.

After you have moved the Resources section, you will edit the dom.js file to add the appropriate data to the section. In this file, there is an initialization function with the following line of code:

let list = document.querySelector('#zen-resources ul');

This code makes the list variable act as a reference to the <ul> element within the zen-resources div at the bottom of the HTML code. This list currently have five children that all have   for their text. Your task is to loop through these children (within the body of that function) and to modify two DOM properties for each of the list item elements: classList and textContent. You will set these values based on the data array at the top of the file. When you are done, the section should look like this annotated image.

HINT: classList is a DOMTokenList. You should use the methods for this interface in order to modify the classList.

Submission

When you are finished, create a css.zip file containing only the layout.css and dom.js files. Do not have the files in a subdirectory (folder) within the .zip file. Submit your css.zip file to Gradescope.