| MTM6130

Review Challenges

Description

A variety of in class exercises. Students will be given time to complete each of the challenges below. Discussion to be had afterwards.  Students should build review answers in CodePen as future resources.

Submission

Create a CodePen Collection named MTM6130-Review

Forking/Creating Your own CodePen Pens, Add each of these review exercises to the MTM6130-Review CodePen Collection.

Submit the CodePen Collection URL.

Challenges

Challenge 1

Using the appropriate layout properties, recreate this image in CodePen. Use background colors on two elements and position the elements with the appropriate css properties.

*Hint the red square is relative to the blue square.

Challenge 1

Challenge 2

Using appropriate HTML5 Markup, create this navigation pattern. The anchors inside your navigation should have this background color. Add a :hover state to the nav anchors. Set minimum widths on the lengths of the list-items to account for a varying length of text inside.

Challenge 2

Challenge 3

Forking this CodePen recreate styles for this table similar to the image below: Use advanced CSS selectors to highlight the td's in the columns.

*hint :nth-child can be used a variety of ways here.

Challenge 3

Challenge 4

This layout has a problem. Can you identify why the paragraph is in between the two boxes?  Fork this CodePenopen in new window and apply the fix required to correct this floated layout.

*hint The height of the container isn't calculating correctly.

Challenge 5

What CSS property is missing from these .col-2 elements for the spacing these two elements to float beside each other correctly?  The widths are 50%, there is no space between them. Fork this CodePen and add the correct CSS property for these elements to align. Do not adjust the padding or width or height of any element. There is one CSS property to add.

*hint Something to do with the widths in the box model.

Challenge 6

Using your knowledge of responsive layouts, create this layout that expands from single mobile columns to a more traditional floated layout. For this challenge it is not necessary to use content and you can set heights and background colors on the elements required to make this layout.

Hint <header> <footer> <main> <aside>

Challenge 6