Skip to content

Instantly share code, notes, and snippets.

@outoftime

outoftime/INSTRUCTIONS.md

Last active October 23, 2017 22:33
Show Gist options
  • Save outoftime/c4036c06e1139717247932a3284e1b02 to your computer and use it in GitHub Desktop.
Save outoftime/c4036c06e1139717247932a3284e1b02 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=c4036c06e1139717247932a3284e1b02
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Celebrity</title>
</head>
<body>
<div class="container">
<div id="title">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Raw
INSTRUCTIONS.md

Imagine you are creating a website to showcase the awards of your favorite celebrity.

Create a website that includes:

  • A title that takes up 100% of the page width
  • At least 2 columns for the content (you choose the width and content)

Example

Tips

  • Start by identifying the parent element that will be the flex box.
  • What CSS properties do you use to set the parent element's display to be a flexbox?
  • What CSS property do you use to make the child elements wrap on the page as columns?
  • How do you define how wide an element is on the page?
Raw
popcode.json
{"hiddenUIComponents":["editor.javascript"]}
Raw
styles.css
#container {
}
#title {
}
#left {
}
#right {
}
#footer {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment