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 ScreenshotWHAT 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.
- 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.
- 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.
- 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.
- 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.)
- Including the live video is not required, just use the live video still from below.
Assets for Use
Colors:
- Light Brown: rgb(214,152,105)
- Grey: rgb(232,232,232)
- Orange: rgb(222,80,33)
- Red: rgb(139, 1, 0)
Fonts:
- Navigation and Body Copy: Nunito
- Headlines: Playfair Display
- Location list in top section: Anton / Pacifico (This is a substitute open-source script)
Icons & Logos:
Barroco Logo in Orange - in case you want to use it
Images:
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:
- Your assignment is marked up in proper HTML, using the correct elements as needed.
- Your CSS is formatted properly with media queries starting at a small screen and then changing to a large screen.
- 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.
- 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
- Once you’re satisfied, copy the Editor Mode URL from CodePen
- 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:
- 5 - 6: HTML CSS and accompanying media queries is written appropriately. All steps were followed and correct styles are applied. The design mostly mirrors the original, with proper steps taken for responsive format. You used either flexbox or grid to position elements.
- 3 - 4: CSS is mostly structured correctly, but there are some syntax and/or media query issues (for example, you forgot to close a rule with a semicolon). Some of the steps were missed. The design doesn’t work well at some responsive breakpoints.
- 0 - 2: CSS does not use appropriate style attributes. Media queries are not set correctly. Syntax is incorrect and many of the steps were missed. The layout isn’t appropriate for a responsive website.