/Fylo-data-storage-component

Primary LanguageSCSS

Frontend Mentor - Fylo data storage component solution

This is a solution to the Fylo data storage component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

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

Screenshot

Mobile Preview

screenshot

Desktop Preview

screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • Plain CSS
  • Flexbox
  • Mobile-first workflow

What I learned

This was a fun challenge to complete and enjoyed recreating the component through HTML and CSS/SCSS. I'm learning how to use SASS correctly trying to incorporate SASS into my projects to help me organise my codes more efficiently. I did find positioning the background to look like the design provided was difficult however I tried my best. Overall, this was an enjoyable project, particularly where it says the remaining storage. CSS - pseudo class:

&::after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 40px solid white;
            border-left: 50px solid transparent;
            right: 0;
        }

Continued development

For future developments, I should focus on building web pages to work on my HTML and CSS skills on layouts. Also, I should focus on working with more javascript projects in the junior section.

Author