Frontend Mentor - Sunnyside agency landing page solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

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

Screenshot

Links

• Solution URL here
• Live Site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla JavaScript
• Font Awesome Icons

What I learned

In the course of attempting this project, I learned about the javascript .contains() method which I used with the classList property to check if an element has a class and going further to use an if statement to make a decision based on whether it atrributes to true or false.

I also re-learned z-index: -1; which is a negative value to lower the display priority of an element. I used this on <a href="">LEARN MORE</a> after applying the :after pseudo class to it to achieve the expected result.

I definitely learnt more about how the css position: ; property to properly position elements on the screen as well as css @media screen to make the site responsive across all screen sizes.

Continued development

I will continue to learn about the css grid property to better understand it and use it more often in future projects.

Useful resources

• CSS z-index - This helped me remember the negative values for the z-index css property, as well as the importance if reading documentations when I am stuck.
• The picture tag - This provided me with information on how to use the picture html tag which helps to specify the source for more than one image based on screen sizes

Author

• Twitter - @mishael_codes
• Instagram - @mishael_codes
• Frontend Mentor - @mishael-codes