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
• Dark mode and light mode according to the device's theme

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/fylo-dark-theme-landing-page-BEBZEdxN6d
• Live Site URL: https://fylo-kv.netlify.app/

My process

Built with

• Semantic HTML5 markup
• CSS Grid
• Mobile-first workflow
• TypeScript - TypeScript is JavaScript with syntax for types
• Tailwindcss - CSS framework
• Font awesome icons - For icons
• Parcel - Bundler

What I learned

I've learned lot of things in this challenge:

• How use tailwindcss
• How to configure tailwindcss
• How to make dark mode toggler
• How to toggle navbar while scrolling:

const navbarHider = () => {
  let prevScrollPos = window.scrollY;

  window.onscroll = () => {
    let currentScrollPos = window.scrollY;

    if (currentScrollPos > prevScrollPos) {
      nav.style.top = '-80px';
    } else {
      nav.style.top = '0';
    }

    prevScrollPos = currentScrollPos;
  };
};

Continued development

Technologies I'd be learning soon:

• Blockchain Development
• Backend Development with NodeJS
• Data Structures and algorithms
• Testing (JS)
• React Native
• Cyber Security

Useful resources

• MDN Docs - This is an amazing reference which helped me finally understand detailed concepts like data- attr, aria attr, input range etc.
• W3Schools - This is an amazing website for learning, I've learned about semantic tags from here only and learned many important HTML elements. I'd recommend it to anyone still learning this concept.
• Tailwindcss Docs - Best reference to get started with Tailwindcss

Author

• Website - Vatsal Singh
• Github - @vatsalsinghkv
• Twitter - @vatsalsinghkv
• Instagram - @vatsal.sing.hkv
• Facebook - @vatsalsinghkv
• Frontend Mentor - @vatsalsinghkv

Acknowledgments

• Favicon - Share icons created by Creatype - Flaticon