I created a one-page website for the fictional Derby City Drip coffee shop for my FEWD Code Kentucky project. The design mockups came from Code Louisville FEWD Coffee Shop. I approached this project like I was a frontend web developer and my job was to turn the provided mockups into a fully functioning one-page website. I tried to recreate the mockups as faithfully as possible.
Alternatively, you can view my project by clicking this link Derby City Coffee.
`You must include a minimum of 2 media queries that create a better layout/user experience.
They must make some visible changes to your site’s layout, such as re-aligning/moving content areas, changing your menu, changing the location of content areas and images, hiding/showing elements, etc.`
- Primary Navigation changes from horizontal to a vertical, drop-down menu.
- Hero section changes from horizontally aligned text-block and image to vertically stacked with the image underneath the text-block.
- Location Map section changes from a 3-column layout ==> 2-column layout ==> 1-column layout.
- Menu Item sections change from a 2-column layout ==> 1-column layout.
- DCD Signup section form changes from a 2-column layout ==> 1-column layout.
- Sitemap section changes from 3-column layout ==> 1-column layout.
- Footer section changes from horizontal to stacked, center-aligned.
A navigation menu that expands and collapses properly at desktop and mobile sizes, such as by switching between vertical and horizontal styles, or is opened and closed by clicking the “hamburger” icon
My navigation menu is horizontal on larger screens and then switches to a vertical, drop down menu for mobile devices that is displayed or hidden by Javascript.
Show/hide one or more content areas or elements on your site through clicking a button or some other user interaction - must be done with some JavaScript code.
My mobile navigation uses Javascript to "listen" for the "click" of the "hamburger icon" which will then toggle the drop down navigation menu from Hide/Show.
Use Flexbox or CSS Grid to organize content areas based on mobile or desktop views. Simply applying a basic flex property so that text wraps as you change screen sizes does not count. You must actually rearrange content or perform some more advanced feature. For example, swapping from a single column layout to a two-column layout on a desktop.
I used a combination of CSS Grid and Flexbox. I fell in love with Grid-Template-Areas.
I am working on a v2.0 of this site so I can clean up the code and incorporate new things I've learned along the way. This project will remain to remind me of how far I've come in my coding journey.