Live link to deployed project (hosted on GitHub Pages)
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 ✅
(jpeg starter files provided in Frontend Mentor challenge hub)
click to view
click to view
click to view
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Vanilla JavaScript event handling
- Mobile-first workflow
- Responsive web design
-
I wanted to have a bit of fun by flipping one of the site's 'Services'
section's background images on its head. To achieve this, I had to leverage an absolutely-positioned::beforepseudo-element. This pseudo-element'stransformproperty was used to perform the desired rotation:
-
This was only my second time building out a site incorporating CSS grid, so I found Morten Rand-Hendriksen's LinkedIn Learning course on this layout method to be an excellent primer. More specifically, his advice on using a
@supportsCSS at-rule to check for browser support before conditionally applying Grid styles was something I adhered to within the project's stylesheet:
-
I decided to detach the site's
navfrom its.fixed-toppositioning on tablet and desktop, and instead use a dynamically-displayed 'back-to-top' button on vertical page scroll (> 500px) to aid navigation/improve UX:
At the time of writing (August 2021), the project's custom stylesheet contains over 1,500 lines of CSS. It is my intention to refactor and reduce the size of this file at a later date, most likely through targeted use of CSS Variables. I also plan on slightly increasing font-sizing throughout the site on tablet, as this is looking a bit on the small side at present.
- 'Fixed page header overlaps in-page anchors' (Stack Overflow) was used to find a pure CSS workaround for this persistent issue caused by the site's
nav.fixed-topcovering the top portion of each anchor link area - 'Hey, what about the figure element?' from this CSS Tricks article was used as a reference in an effort to follow semantic HTML5 best practices when coding the site's 'Client Testimonials'
section - 'How to Apply CSS3 Transforms to Background Images' (SitePoint) was used to rotate one of the background images featured in the site's 'Services'
section180 degrees on tablet and desktop (see above) - 'A Complete Guide to Grid' (CSS-Tricks) was used as a 'cheat sheet' for implementing the site's partial CSS Grid layout on tablet and desktop
- W3Schools HTML Colour Picker was used for generating on-the-fly colour pairings and modifications (lightening, darkening etc. of core project colours)
- Box Shadow CSS Generator was used to gauge the correct amount of
box-shadowfor the site's off-canvasnavbar-navmenu on mobile - PicResize (online image editing tool) was used to crop and resize images
- TinyJPG (online image compression tool) was used for image compression
- Responsively App was used to capture video of scrollable device emulators showcasing this solution's responsive mobile-first layout
- Ezgif was then used to convert this video file to the
gifformat for inclusion in the Screenshots section of this Markdown file - Ray.so: was used to create the code block images featured in this Markdown file
This site has been created for development purposes only.