This is a solution to the Huddle landing page with curved sections challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

• Solution URL: Solution
• Live URL: Live

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

I want like to have more focus on using grid. Also, specifically for this project, I was unable to figure out how I would change the curved background images to the mobile versions when using responsive design. I placed my images in the HTML so I was unsure how I would change them when viewed for mobile screens. To work around this I used position: relative and adjusted the position based on the screen size.

• Freecodecamp - I already have experience using responsive design but this tutorial really helped understand units and which ones work best and when.
• Kevin Powell - I attempted this challenge with desktop first in mind which left my webpage in a complete mess when trying to make it responsive. This tutorial really made me understand why building out HTML & CSS with mobile first approach makes it so much easier.

• Frontend Mentor - @jkellerman