This is a solution to the Sunnyside agency landing page 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
- Solution URL: GitHub Repo
- Live Site URL: https://agency-landing-page-mikael.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
During this project I learned more about responsive design for different devices and while I am still not 100% confident with this, the time put in has helped build that confidence and improve the way I approach responsive styling.
I also learned how to make the interface appear different based on the device, by having mobile devices replace the navigation bar with a hamburger menu.
I would like to come back to this project at a later date and change some of the responsive stylign features so they are more flexible, for example on desktop zooming in/out of the page it effects some of the styling at the moment.
After improving this page, I'd like to have a go at using CSS grid, since I tend to rely more on flexbox. As well as perhaps using other technologies such as React or Vue.
- Website - Mikael Vadi
- Frontend Mentor - @mikael-v
- Linkedin - Linkedin Profile