Student Showcase

Let’s take a look at any Restaurant Wireframes assignments that have been turned in.

Responsive Video

Midterm Challenges

Challenge 1

Download the challenge start file, do these three things then zip up the contents of the folder and submit it.

  1. Add the meta tag that will tell mobile devices not to zoom the page.
  2. Add a rule to the stylesheet that changes the box model so that padding and borders are included in the width of all elements on the page.
  3. Add a media query so that when the screen is less than 960 pixels wide, the #page element is 100% the width of the screen.

Use the internet or your previous files to get the information you need to successfully complete this challenge.

Challenge 2

Starting with the completed file for challenge 1, add the following to the HTML:

  1.  Give the section an ID set to “main”
  2. Add section tags around each of the three paragraphs and give them a class set to “column”

The markup should look like the picture attached below.

Then on the stylesheet make these changes:

  1. change the rule for section and make it specifically attached to the “main” section.
  2. Change that rule so that there is 20px padding on the top and bottom, plus 5px padding on the right and left
  3. Add a rule for the class column and set it so that the columns float left, are one third the width of the page and have 15px padding on the right and left.

The final version of this challenge should look like the image shown below.

challenge2

 

challenge2-markup-screenshot

Challenge 3

Add images to the tops of each of the three columns. The images should be 350 x 250 pixels. You can use http://placehold.it to generate the images.

On the stylesheet, add a rule that keeps the images from breaking out of their containing columns. The final result should look like the screenshot below.

challenge3

Challenge 4

For this challenge, add to the challenge 3 files so that when a browser is set to 750 pixels wide or less, the first column is 100% the width of the page and is no longer floated. The second and third columns then take up 50% of the page each.

Also, make the image in the first column float left and be a maximum width of one-half of the page with a 15px margin on the right. See image below for how it should look.

Challenge4

Challenge 5

For this challenge, add to the challenge 4 files and make it so that when the browser window is 600 pixels wide or less, all the columns span 100% of the page. Also make it so that the images in the columns are all 50% of the width of the page, are floated left and have a margin on the right of 15px. See the image below for how it should look at 600 px wide.

challenge5

Challenge 6

For this challenge build on the files for challenge 5. Make it so that at 320 pixels or less the images are 100% of the page width and are no longer floated or have any margin on them. See the image below for the final result.

challenge6

Challenge 7

Add to challenge 6 files. Add a navigation element under the header. Follow standard markup practice of using a nav element with an unordered list, with list elements that contain anchor tags. Add links to 5 pages. You can use # in the href because these will not actually link to anything.

On the stylesheet add rules to make the nav display horizontally. Each link should be 20% the width of the page and have a border on the right. The last link has no border on the right. Make sure the text is centered within the link, both vertically and horizontally. Below are images of how it should look at full browser width and 500px wide.

 

challenge7a

challenge7b

Challenge 8

Change the challenge 7 files so that when the screen is 480 pixels wide or less, the navigation stacks vertically and is full width of the page. There should also be a border on the bottom of each link, except the last one, and no border on the right. The image below is how it should look.

challenge8

Homework – Restaurant Design Mockup: First Draft

Do a first draft mockup of your design for your restaurant website. It does not have to be completely done – just enough for us to to a critique and help with feedback in class next week. Upload a jpg or png file of your progress.

You can include desktop, tablet and phone sized designs, or you can focus on desktop only to start.

Feel free to add any additional comments about your project or your process.