Frontend Mentor - Scoot website solution

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

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for each page depending on their device's screen size
• See hover states for all interactive elements throughout the site

Screenshot

Mobile View

Tablet View

Laptop View

Links

• Solution URL: Scoot Multipage Website
• Live Site URL: Scoot Multipage Website

My process

Built with

• Semantic HTML5 markup
• Bootstrap 5
• Flexbox
• Mobile-first workflow
• SCSS for style

What I learned

Background elements: I have worked on webpages with background elements and accent images before. I realized that it was better to place them as a background image instead of adding the image within my HTML. I also used percentages to help position the images. That kept the images placed consistently across different screen sizes.

Code Snippet below:

.pattern--leftuparrow1 {
		background-image: url('../../assets/patterns/left-upward-arrow.svg');
		background-size: contain;
		background-repeat: no-repeat;
		width: 48rem;
		height: 10rem;
		left: 5%;
		bottom: 15%;
		z-index: 2;

		@include bp-tablet-up {
			left: -24%;
		}

		@include bp-desktop-up {
			width: 60rem;
			height: 12rem;
			bottom: 8%;
			left: -30%;
		}

	}

  .pattern--rightwarrow1 {
		background-image: url('../../assets/patterns/right-arrow.svg');
		background-size: contain;
		background-repeat: no-repeat;
		width: 46rem;
		height: 10rem;
		top: 3%;
		left: -36%;
		z-index: 2;

		@include bp-tablet-up {
			top: 5%;
			left: -55%;
		}

		@include bp-desktop-up {
			width: 60rem;
			height: 12rem;
			top: 0%;
			left: -75%;
		}
	}

Continued development

My goal is to continue to improve my coding skills with HTML, CSS, and JS.

Useful resources

• 5 Steps to Implement Maintainable and Scalable Sass Theming in Complex Projects - This was a very good article about how to organize your folder structure for Sass.
• How to Use Floating Elements to Improve Your Web Design
• Creating Accordion with Javascript
• How to change color of SVG
• Change arrow Color in Bootstrap
• How to change the accordion's color?

Author

• Website - T. Lanette Pollard
• Frontend Mentor - @tlanettepollard
• Twitter - @TpLanetteNBCT

Acknowledgments

• Simon Hernandez: I like how he structured his HTML code.