Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the Fylo dark theme landing page 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
• Acknowledgments

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

Full Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/css-flexbox-grid-8Lh3uD6Cg
• Live Site URL: https://karllouise-code.github.io/fylo-dark-theme-page

Built with

• HTML5
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

My knowledge on HTML and CSS is developed because of the given challenge. My confusion on flexbox and on css grids are now clear.

<h1>Some HTML code I'm proud of</h1>
<script
  src="https://kit.fontawesome.com/de376feec1.js"
  crossorigin="anonymous"
></script>

.proud-of-this-css {
  :root {
    /** Primary */
    --intro-email-background: hsl(217, 28%, 15%);
    --main-background: hsl(218, 28%, 13%);
    --footer-background: hsl(216, 53%, 9%);
    --testimonials-background: hsl(219, 30%, 18%);
    /** Accent */
    --cta-light: hsl(176, 68%, 64%);
    --cta-dark: hsl(198, 60%, 50%);
    /** Neutral */
    --font-color: hsl(0, 0%, 100%);
  }
}

const proudOfThisFunc = function checkInputs() {
  //get values from the inputs
  const emailValue = email.value.trim();

  if (emailValue === "") {
    //show error
    // add error class
    setErrorFor(email, "Please enter a valid email address");
  } else if (!isEmail(emailValue)) {
    setErrorFor(email, "Please enter a valid email address");
  } else {
    //add success class
    setSuccessFor(email);
  }
};

Continued development

For my future projects I want to try some projects wherein I got to test my javascript skills and then learn more about animations and try some css frameworks.

Useful resources

• MDN Web Docs - MDN Web Docs - This helped me for understanding the use of syntax to use on my css. I really liked this website and will use it going if there's a term I cannot understand.
• Kevin Powell - Kevin Powell - This is an amazing instructor which helped me finally understand CSS GRIDS and CSS FLEXBOX. I'd recommend it to anyone still learning this concept.

Author

• Github - Karl Louise Rito
• Frontend Mentor - @Karllouise-code
• Twitter - @karl_rito

Acknowledgments

I would like to thank anyone who have helped me complete this project.