mtcawthray / static_comp_challenge

Static_Comp_Challenge

Static Comp Challenge

This excercise was designed for our cohort to get our CSS and HTML reps in, so-to-speak, and provided an opportunity to work with media queries in CSS to design for different sized screens.

Table Of Contents

• Overview
• Examples
• Learning Goals
• Future features
• Technologies used
• View Deployed Page
• Contributors
• Challenges & Wins

Overview

We were provided a comp image to design our page after. We needed the structure and content to match, but were given a certain amount of liberty with the general styling of colors, assets, and copy within the the framework. This project did not require any javascript capability.

Examples

This was the comp image provided:

This is my page on a laptop screen:

This is my page on a tablet screen:

This is the app on a mobile screen (iphone X):

Learning goals

• Design for multiple displays using media queries within the CSS
• Write semantic HTML
• To create a product that respects the integrity of the original design

Future features

• I would like to further refine the card layouts to closer match the comp
• I would also like to implement a hamburger style dropdown menu for smaller screen sizes

Technologies used

• HTML
• CSS

View Deployed Page

• Please click this link to view the deployed page.

Contributors

• Mark Cawthray (code)

Challenges and Wins

Wins:

• Creating a dynamic page for 3 screen sizes
• Finding and creating suitable assets
• Taking creative liscense while still maintaning the overall integrity of the project

Challenges:

• Setting realistic time-frames for making minute design adjustments
• Accounting for when the appropriate time to use a
  element vs something more semantic

Return to top

static_comp_challenge's Issues

Design Mobile size CSS

320px - 480px
should header 'stick' to the top?

• needs header with logo
• maybe hamburger menu logo to show menu
• displays 1 card at a time

Design Laptop size CSS

769px-1200px

Design Tablet size CSS

480px -768px
should header stick to the top?

• Should show 2 cards per row, (maybe 3?)

Create Basic HTML Structure based on Comp

• make elements for everything in the header
• make elements for everything inside of the card
• create 8 duplicates of the cards to match comp
• add classes and id's where you can, it may make sense to add these later for some elements.

find and import assets to repo

Get assets for:

• FAQ
• 'Add Listing' (something like a plus sign)
• login icon (like a blank avatar or something)
• the Denver Music Gear Swap logo
• view listing icon (something like an arrow or binoculars)
• date icon
• 8x instrument images