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

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

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

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• Flexbox
• BEM Methodology
• Pug JS - HTML Markup
• Sass (Scss) - For styles
• Webpack - Package bundler

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",
			unquote($raw-query),
			inspect($raw-query)
		);

		@media #{$query} {
			@content;
		}
	} @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

• Sass Guideline - This helped me to learn more about sass.
• My Pug Scss Webpack starter repository - This is a repository I made to make it easier for me to get going with my Pug an scss projects without too much set up.