Frontend Mentor - Huddle landing page with single introductory section solution

This is my 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

Coding Time : 9 hrs 47 mins

Users should be able to:

• View the optimal layout for the page depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS with custom properties (Still Holding back on the tempation to use SASS)
• BEM
• Flexbox
• Mobile-first workflow

What I learned

I learned a lot during my second project. Still working to set-up an effective workflow. I didn't look at the previous project because I learn more doing this 'The Hard Way'. Yet I still struggle a bit with layout need to Google / Lookup basic things. I did my first CSS transitions and button shadow.

.container__text__button {
    width: 13rem;
    background-color: var(--HeaderColor);
    color: var(--Violet);
    border-style: none;
    box-shadow: 0px 3px 5px 3px var(--ButtonShadow);
    border-radius: 1.25rem;
    margin-bottom: 3.5rem;
    padding: 0.625rem;
    font-size: 1rem;
    font-weight: 300;
    transition: all 0.1s ease-in-out 0s;
}

Continued development

My focus was on getting the responsive to be smooth and pleasant and be close to pixel 'perfect'. Also wanted to use transitions and correct colours, using a picker if needed to get the right hex value. Also want to use the Dev tools more to test assumptions and tweak the layout before I convert them to HTML / CSS.

Useful resources

• CSS Filter Generator - This helped me to turn the SVG buttons into the correct colors.
• What are Semantic Tags - Learn more about Semantic Tags
• Semantic HTML Explained - This is helpful to understand when to use which Semantic Tag.
• Typora - Handy Editor to Wysiwig edit these README.md files. I don't enjoy typing 'Raw' Markdown but i love the MD format!

Author

• Frontend Mentor - @Drallas
• Dev.to - @Drallas