Project 7: Layout with Flexbox

Due Date: Thursday, 3/7/24

Before the development of flexbox, there was darkness. Designers wrestled with CSS floats in their efforts to create grid layouts. Then, out of this darkness came flexbox, a beam of light allowing designers to create grid-like dimensional layouts.

Flexbox was developed to make it easier to align content using one-dimensional layouts, either vertically or horizontally. Elements in a flexbox layout can have their height or width set to accommodate different screen sizes.

A flexbox layout consists of two elements:

1. The flex container (or flex parent): This is the top-level or parent element. Think of it like a big box that houses a bunch of smaller one.
2. The flex children: These are the contents of the flex container — the little boxes in the big box.

(above text written by Jeff Cardello)

Flexbox is awesomely convenient if you have a bunch of articles that you want to have the same importance in the eyes of the user. It handles the placement for you. It automatically adjusts to different screen sizes by changing how many things are in each row. It is favored by most web designers.

• Open Project 7 in replit. I copied the first file you will need into index.html and style.css, so you can start with that.
• Browse to the mdn Flexbox lesson and read the first half, working the example as you go. You may stop just before "Flexible sizing of flex items."
• When you are done, use the example as a starting point, but change the content, colors and other aspects of style to make it your own. One idea is to do a "top ten" list. You must have (at least):
  1. header, styled
  2. Make your own choices in the styling, throughout the page.
  3. section, styled
  4. 10 articles inside the section
  5. Choose some interesting content to put in the articles
  6. Use display
  7. Use flex-wrap
  8. Use flex
  9. Use justify-content (if there isn't much leeway in where the articles display within each one's alloted space, then justify-content won't do much. But do it anyway.)
  10. Add other stuff if you want to.
• Submit your finished work.
• If you want to read more, there are many other excellent sites about this topic, including W3School's Flexbox page.

Rubric

Category	minus 15 points	minus 10 points	minus 5 points	Full points
Project Requirements	Student follows 6 of the bulleted instructions, above.	Student follows 7 of the bulleted instructions, above.	Student follows 8 of the instructions, above.	Student follows instructions numbered 1-9, above.
Code Quality	Code doesn't run as expected and shows they did not study or understand the learning resources	Code displays somewhat as expected, minimal understanding of learning resources	Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources	Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well
Code Style	Code is very hard to read and understand, follows almost no styling guidelines, inconsistent and causes errors	Code is not very readable or consistent, but follows some styling guidelines, some errors	Code is readable and follows proper style, but is not in an external style sheet	Code is in an external style sheet, is readable and follows proper style
Creativity	Student does not show basic creative effort (i.e. no addition of content, text/headers/etc)	Student shows minimal creativity from base requirement (i.e adds a couple things but not much)	Student shows some creativity from base requirement (i.e creates some content, text/headings/etc and some nice styling)	Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, styling)