/sunny-side

A web page briefly giving information about a creative company

Primary LanguageHTML

Frontend Mentor - Sunnyside agency landing page solution

This is a solution to the Sunnyside Agency. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Bootstrap
  • Mobile-first workflow

What I learned

I was able to practice the use of position absolute for component positioning.Bootstrap for different screen sizes/media views. I learnt the toggle application in HTML and CSS for the mobile navigation toggle.

Continued development

I still intend to learn more about sizing images and making the responsive. Guaging the sizes, paddings and font-sizes from the images provided sometimes seems hard so i plan to keep practicing to get pixel perfect. Position absolute perfection with media queries.

Useful resources

  • W3schools - This was my go to place for things I could not remember and for the new things I was trying out like tooltip.
  • Font - I got fonts to incorparate.

Author