Room Homepage

This is a challenge posed by Frontend Mentor to build furniture showcase homepage





Pug Js


Vanilla JS

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


My process

Built with

What I learned

I learnt how to properly use scss mixins in my work.

This is an example of a mixin i found for responsive breakpoint management:

/// Responsive breakpoint manager
/// @access public
/// @param {String} $breakpoint - Breakpoint
/// @requires $breakpoints
/// @example scss - Usage
/// .foo {
///   color: red;
///   @include respond-to('medium') {
///     color: blue;
///   }
/// }
/// @example css - CSS output
/// .foo {
///   color: red;
/// }
/// @media (min-width: 800px) {
///   .foo {
///     color: blue;
///   }
/// }
@mixin respond-to($breakpoint) {
	$raw-query: map-get($breakpoints, $breakpoint);

	@if $raw-query {
		$query: if(
			type-of($raw-query) == "string",

		@media #{$query} {
	} @else {
		@error 'No value found for `#{$breakpoint}`. '
         + 'Please make sure it is defined in `$breakpoints` map.';

I also learnt how to properly structure my scss styles thanks to the Sass Guideline.

I also improved on my development when it comes to using Pug for my markup.

Continued development

Moving forward I'll be focusing on being able to breakdown my Pug pages into smaller partials for easier page management.

Useful resources

Let's talk

Feel free to Contact me by submitting the form below and I will get back to you as soon as possible

Max 1000 chars