Frontend Mentor - Huddle landing page with curved sections solution

This is a solution to the Huddle landing page with curved sections challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

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

• Solution URL: Git repository
• Live Site URL: Live site

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• CSS custom properties
• Flexbox
• Vanilla JavaScript

What I learned

It was totally unnecessary for me to use JavaScript for the creation of the pseudo-elements in this project (albeit it would have created a lot of repeated code in CSS file), however, since this is a practice project I wanted to make use of my JS knowledge and put it to use. Hence, I made a lot of discoveries. The main ones being:

• the nature of pseudo-elements and how these are not part of the DOM and hence cannot be read and manipulated like traditional elements;
• I toyed with the idea of creating the pseudo-elements upfront and then applying a specific styling class through JS. This would have required the use of .getComputedStyle() method, which however turns out to be read-only and therefore not applicable to my case;
• I therefore discovered that I could access my document stylesheet and add my rules through it.

document.styleSheets[1].addRule('footer::before', `content:url('${imageArray[0].src}');`);

UPDATE Ultimately, I had to remove the .src on the iteration, since this was not used once I changed to array literal notation (see more below).

As you can see, I saved all the images in an array and iterated over each one and rendering them through interpolation.

The creation of an array for images wasn't as straightforward either. To access the image in root you need to set the source through imageArray[8].src. See above

Of course, I also needed to make sure that the page remained responsive, therefore I used if statements to check the window for size and render the correct image if it matches.

// Set media query
var x = window.matchMedia('(min-width: 900px)');

UPDATE

Upon testing in Chrome, the .matchMedia method was not compatible. It was recommended to use the userAgentData read-only property which returns a boolean as to whether the user is accessing from desktop or mobile. Although the docs state that this is not fully compatible with all browsers as it is still experimental, it worked on both Firefox and Chrome on my machine.

The aim of applying JS for this relatively simple task was inspired from the desire to write less CSS code (for fun, because I do enjoy it!). It turns out I had to write just as much JS code, however it was easily done with the Visual Studio Code plugin Text Pastry and ample use of multi-carret selection.

Continued development

Of course, this is a work in progress and still needs some tweaking. I also need to check all accessibility rules. Meanwhile, I'm curious to know how feasible it is to use JS for style rendering, especially pseudo-elements.

Useful resources

• Accessing Pseudo-elements through JS - A useful tool for the future.
• Stackoverflow varied solutions - Suggestions on how to select and manipulate pseudo-elements through JS.
• Creating an array of images UPDATE this resource is not recommended any longer. After passing my code through JSHint JSHint I learnt that array literal notation is preferred using empty brackets, like so: newArray = []. Therefore the images and their source needed less code, so that's a double thumbs up!
• Media Queries with JavaScript
• Text Pastry - Inspiration on using this plugin for some quick insertion of incremental numbers.

Author

• Frontend Mentor - @KristaCalleja
• Twitter - @krista_calleja