Responsiveness

About The Project

• 7 Days Of Code Challenge

  • The challenge proposes to follow simple guidelines given over the course of 7 days to create a Front-End App.

• The main focus of this project was to practice how to:

  • Use mobile-first architecture
  • Create responsive layouts

• Schedule

  • Day 1: Create and style header and appointments sections
  • Day 2: Create and style footer and floating button
  • Day 3: Use relative units to style the font and adjust cards width
  • Day 4: Create media query to adjust the layout for tablets and desktop
  • Day 5: Modify the footer to be a side menu on larger layouts
  • Day 6: On larger layouts, change the floating button to a form
  • Day 7: Publish the page

• Observations:

• The focus of the exercise was using CSS, therefore I preferred to make the side menu with css instead of javascript.

  • I used this blog for reference to create the modal menu