Drag and Drop Shopping Cart
Printer Friendly Version Week 1
How the web page functions
Finished version of shopping cart
Web Page Elements - laying out the page
- We need to layout on a piece of paper how we want our shopping cart page to look like.
- For this exercise we will use the drawing seen below.
- We will be using the flexible box model for this exercise.
- The flexbox model is a system which helps us layout our web page.
- It creates a flexible layout for us in which the browser does all the calculations for us as to height, width, and placement.
- White space is distributed equally between child elements.
- The flexbox model is especially useful when working with different screen sizes like tablets and call phones.
- In the box below you can see the html file template we will be working with.