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
- toggle mobile menu for mobile size
- Solution URL: solution site
- Live Site URL: live site
- Tried to experience some stuff while watching coder coder's tutorial on how she usually approach projects. I started by taking notes, like what she did in her video and tried to research some useful stuff that could help me with the project. I've also tried the mobile-first workflow.
- Semantic HTML5 markup
- SASS
- Gulp
- Flexbox
- Mobile-first workflow
I've learned how to approach a project more clearly and organise stuff to maximize the productivity while coding. I really love working with gulp, and its plugins. I've also learn how to use the clamp property for css and also tried to use the BEM approach for this project.
.learn-btn {
font-size: clamp(14px, 3vw, 18px);
}I'm still trying to improve myself working with mobile-first workflow.
- Resource #1 - This helped me for being more comfortable with setting responsive breakpoints for a project.
- Frontend Mentor - @felixmacaspac
Thanks for the people in slack who helped me with this project. especially DJ & avatarfreak. I had some problems while deploying and they put an effort helping me figuring out what's the main problem 🤙