Frontend Mentor - Launch countdown timer solution

This is a solution to the Launch countdown timer challenge on Frontend Mentor.

Table of contents

• The challenge
• Screenshot
• Links
• My process
  • Built with
  • What I learned
  • Continued development
• Acknowledgments

The challenge

Users should be able to:

• See hover states for all interactive elements on the page
• See a live countdown timer that ticks down every second

Screenshot

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: live site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

My major lesson from this project was the use of certain Javascript functions like getTime() to aid in particular web page styling.

I also learned about a CSS property known as z-index to overlay one HTML element over another, especially images.

Continued development

Media query is still a major challenge for me and this project should not have been this difficult for me. Mobile responsiveness is still an area I wish to develop myself in.

Acknowledgments

Shoutout to Cyprian for helping me out with the code for real-time display of the countdown without reloading the page.