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.
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
- 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