← Back to All Projects

Room Homepage

Frontend Mentor - Room homepage solution

This is a solution to the Room homepage challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents


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.
  • Navigate the slider using either their mouse/trackpad or keyboard.

Additional things I did:

  • The slider automatically slides forward after a set interval.

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • SCSS
  • Flexbox
  • JavaScript
  • Mobile-first workflow

What I learned

I should use Flex-basis a lot more:

.header {
  flex: 1 0.75 fnc.rem(840);
  min-height: fnc.rem(360);
  position: relative;
  padding-top: fnc.rem(48);

Sliding based on the margin:

function navigateSlides() {

  if (count <= 2) {
    slides.style.marginLeft = count * -100 + "%";
    textSlides.style.marginLeft = count * -100 + "%";
  } else if (count <= 0) {
    slides.style.marginLeft = "";
    textSlides.style.marginLeft = "";

Continued development

It's possible that there is a better way of implementing sliding images as I've seen a lot of different ways to do it in the course of figuring out this solution.

Useful resources



Thanks to Ms. Jessica Chan (Coder Coder) and all the other YouTube creators making their knowledge available!

← Back to All Projects