CSS Advanced Layout (Multi Week Assignment)

Points
5
Assigned
March 16, 2020
Due
April 06, 2020

INTRODUCTION

Barroco Arepa Bar is a Columbian-style restaurant in Lakewood, Ohio.

Their chief complaint is that the website isn’t responsive! Many people use the website from their phones to look at the restaurant’s menu and look up location information.

They’d like you to take elements from their current “desktop-only” website and make it a responsive one, making changes to the design as needed.

View Current Site View Screenshot

WHAT TO DO

In CodePen, you’re going to translate the existing desktop-only home page into a responsive one. You can either use the existing assets and content available on the website or create your own new design (this is a more advanced, but creative, approach). You could also use a hybrid of old site and integrate some of your own ideas.

Note: while you can inspect the code from their current site, the code is machine-generated from Wix and is nearly unreadable. I don’t recommend using any of the existing code.

  1. If you want, fork this starter pen, which has starter content and HTML structure in place. If this seems confusing, build from scratch and pull elements as you go. Feel free to change this content however you need: https://codepen.io/droll_ksu/pen/NJXEMO?editors=1000 -REMEMBER TO FORK. DO NOT WORK FROM THIS PEN.
  2. Use the assets and content below to begin styling your components (you might start from the header and work down). You will have to add additional HTML and classes in order to effectively style your components.
  3. Build your site mobile-first, choosing how items stack and in what order. Then, add in your media queries to create grid, float or flex layouts as needed.
  4. When building the navigation, we haven’t yet learned how to do a collapsible menu. Find a creative way to display your navigation on small screens without resorting to the “hamburger” menu quite yet. (The intermediate layout example could be a good guideline.)
  5. Including the live video is not required, just use the live video still from below.

Assets for Use

Colors:

Fonts:

Icons & Logos:

Facebook Icon

Instagram Icon

Barroco Logo

Barroco Logo in Orange - in case you want to use it

Images:

Main Hero Image

Barroco Larchmere Image

Barroco Crocker Park Image

Barroco Birdtown Image

Happy Hour Holiday Photo

Happy Hour Cheers Photo

Fancy Drink

Fancy Drink 2

Fancy Drink 3

Fancy Drink 4

Dancing Women in Orange Shirt

Live Music Video Still Image

HOW YOU’LL BE GRADED

This is an open-ended assignment, meaning I have no specific expectations for the final design/look and feel, except:

  1. Your assignment is marked up in proper HTML, using the correct elements as needed.
  2. Your CSS is formatted properly with media queries starting at a small screen and then changing to a large screen.
  3. You’ve used at a minimum one flexbox, float or grid property to position items side-by-side in appropriate places. You can mix and match flex and grid as appropriate.
  4. The design effectively replicates the content of the original website design, with design changes as appropriate to create the responsive site. Don’t want to include something? You can leave it out.

Submitting the Assignment

  1. Once you’re satisfied, copy the Editor Mode URL from CodePen
  2. Log in to Blackboard Learn to submit your assignment. Go to Assignments > Assignment Name. Under Write Submission, Paste the URL of the Pen (Editor Mode). Click Submit.

RUBRIC

Use the following rubric to ensure you receive the highest possible grade for the assignment:

Use the following rubric to ensure you receive the highest possible grade for the assignment:

Return to Assignments