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.
Note: Delete this note and update the table of contents based on what sections you keep.
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
- Live Site URL: @github pages
- Mobile-first workflow
- Semantic HTML5 markup
- Sass - Sass makes CSS fun again.
- Flexbox
- CSS Grid
- JavaScript
I learned how to use Sass and many of its core features like variables, functions, and mixins. Likewise, I learn how to use partials and how to implement them with the @use and @forward methods.
While they were not new topics, I got some really good practice at using absolute and relative positioning. I must admit that I had only used them in very limited capacities before, but it seemed natural to use those methods on the navigation menu and the services section (text overlaid on the cherries and whole orange images).
This was my first solo project using Sass and it will not be the last. For the next project, I will try to implement the 7-1 pattern, or something very similar.
- Learn Sass in this Free Crash Course - Give your CSS Superpowers! by DesignCourse - This video by Gary at DesignCourse was a good re-introduction to Sass and covers all the basics with simple examples.
- Get your stylesheets more organized with Sass partials by Kevin Powell - I really like Kevin Powell and his teaching style. I used this and 3-4 of Kevin's videos on Sass and found them quick and to the point. I particularily liked the videos on starting projects with Sass, howe to organize files, using partials, and using @use/@forward instead of the @import.
- Sass Tutorial for Beginners - CSS With Superpowers by codeSTACKr - This was a great video covering the fundamentals for Sass, hosted by freeCodeCamp.org.
Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.
- Frontend Mentor - @davidrhyne
- Twitter - @DavidRhyne16