Surf and Paddle, now with Responsive (Part 2)!

Description

Responsive web design includes the use of media queries. As discussed in class, we will be building from mobile and global-first to large breakpoints. That means we start with mobile-friendly and older browser and device friendly CSS and then use min-width media queries from smallest to largest after that.

Before continuing with the second stage of the RWD Surf & Paddle, complete sketches to plan out the project. For this next phase of Surf & Paddle, refactor your existing code to make Surf & Paddle responsive. Add a global/mobile breakpoint, a medium size, and include your original large/desktop one. Use your sketches from part one to come up with concepts and ideas.

Make sure to read through the reading assignments as they will help you make it through this assignment.

Objectives

Learning Objectives

Upon completion of this assignment, you should:

Consider options on how to retrofit desktop layouts into RWD-friendly media queried ones.

Performance Objectives

After completing this assignment, you be able to effectively use

media queries
meta viewports
Sketches-to-code processes
experimentation in code! Get creative. There isn’t a wrong answer! Just try something out!

Details

Deliverables

An HTMl file that include the meta viewport code
A responsive version of surf and paddle.

Details

Upload to “tiy_assignments” until “day_17” as “surf_paddle_rwd”. Hint: copy existing surf and paddle into this folder and work on code from there.