KXLAA/CW-08-Remix

A solution to a Codewell front-end challenge that was featured in the monthly newsletter. A Responsive three-page website with light and dark mode toggle and a three-step form implemented with Javascript.

Codewell - Remix

This is a solution to the Remix Template. Codewell challenges help you Improve your HTML and CSS skills by practicing on real design templates.

Table of contents

• Overview
  • The challenge
  • Demo
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Demo

Screenshot

Links

• Solution URL: Github Repo
• Live Site URL: Live Preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• SCSS

What I learned

This was a really challenging one. It took me 24 hours to complete this project. The completed site contains 3 different pages. I had to learn on the go due to some tricky Javascript parts such as the dark mode toggle and the multi-step form. But managed to pull it off. The site is fully responsive using SASS media query Mixins. I think the code can still be refactored further especially the Javascript code as i flaunted the DRY principle a lot especially with the dark mode toggle. I will be refactoring the code in the coming weeks.

Author

• Website - KXLA 🤙