LD04: Layouts Using Flexbox due Thu 21 Sep 13:20
Preparation for Lab Day
In preparation for lab day, do these actions:- In your workspace create a directory called hw04 and copy from hw03 the file poemlayout.html (and its supporting CSS document). Also copy the entire directory called mysite. Go ahead and do a commit/push of those initial files.
- Pick one of https://css-tricks.com/snippets/css/a-guide-to-flexbox/ or https://www.w3schools.com/csS/css3_flexbox.asp and read carefully the first 2 or 3 screenfuls. Then browse the remainder of the document to get a sense of what is possible using flex box.
- Play all 24 levels of the flexbox froggy game:
https://flexboxfroggy.com Jot down your solution to the final level
and leave it as a comment on this lab day assignment in Canvas. As you
play the game remember that each frog represents a div/rectangle on the
screen.
On Lab Day
Do the following steps:
- Do all your work in the hw04 directory of your workspace. Start by editing your
poemlayout.css as follows: (1) Remove all media queries and (2) remove all float
commands. Now look at the layout of your page. It should still have colors and widths set
for various blocks, but all the blocks should be displayed in a vertical orientation.
- Add the display: flex property to the body of your page and
observe the change.
- Begin by systematically applying flex-box changes to your code in order
to approximate the layout here:
https://josephus.hsutx.edu/classes/w1/source/images/poemlayout.jpg.
NOTE: You may decide to remove the display: flex property from the
body and put it elsewhere. Also note, it is possible to nest flex
environments. There are a number of ways to get this to work. See if you
can find a relatively minimal way to do it.
- Once you've achieved the proper layout you can commit your work.
- NOTE: In a typical page design you would not have different colored
backgrounds for each rectangle. We are only doing that here so you can
easily see what is happening.
- One of the requirements in the homework assignment is to use CSS commands
to cause an unordered list to create an attractive horizontal menu. Read
Part 2 of the homework assignment and search for a horizontal menu that you
like the look of and play around with that concept.
- When you have completed the form, show your work to the instructor. If you finish early you can start work on the homework assignment.
