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.
- Overview
- Examples
- Learning Goals
- Future features
- Technologies used
- View Deployed Page
- Contributors
- Challenges & Wins
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.
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):
- 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
- 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
- HTML
- CSS
- Please click this link to view the deployed page.
- Mark Cawthray (code)
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