Frontend Mentor - Huddle landing page with single introductory section solution

This is a solution to the Huddle landing page with single introductory section 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

Overview

The challenge

Users should be able to:

• View the optimal layout for the page depending on their device's screen size (375px and 1440px wide were specified in the design mockups)
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

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

What I learned

I had to refresh a little bit about the "fill" on an svg. You need to add the svg code directly to the html if you want access to it in the DOM. So instead of pulling in the svg files for the social media icons with the img tag I placed the svg code directly in the html and then I could access the hover state with css.

.social:hover {
    fill: #e882e8;
    border-color: #e882e8;
}

When I html validated my code I had an error because I trued to use the alt attribute on an svg tag. This is not the appropriate way to make svg files accessible. Instead I needed to use aria tags in combination with a title tag.

<svg class="social" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" aria-labelledby="facebookID">
<!-- Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
<title id="facebookID">Facebook Icon</title>
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
</svg>

Continued development

I could have used flexbox or CSSgrid to build this page but it was such a simple page I chose not to refresh my memory on those today. For future and more complicated layouts I would utilize CSSgrid or flexbox.

Useful resources

• CSS Tricks - This helped me figure out how to make svgs directly embedded in the html accessible.
• Stack Overflow - This helped me remember how to change the hover state on an svg.

Author

• Website - Heidi Fryzell
• Frontend Mentor - @heidi37
• Twitter - @HeidiFryz