Frontend Mentor - Single-page design portfolio solution

This is a solution to the Single-page design portfolio 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 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

Screenshot

Large Screen Size

Medium Screen Size

Mobile Screen Size

Links

• Live Site URL: https://frontend-mentor-design-portfolio-challenge.vercel.app/

My process

Built with

• HTML5
• SCSS
• Flexbox
• Mobile-first workflow
• JavaScript

What I learned

CSS Positioning

I generally have not used CSS positioning, as flexbox has adequately solved my CSS need before. This challenge, however, required me to look at CSS positioning to deal with alignment issues. Once I learned about "relative" and "absolute" properties, I realized my intimidation was unfounded! Because of this challenge, I look forward to more opportunities to use CSS positioning.

CSS Images and Clip-path

Before this project, I would look for images that fit my website, instead of coding it out. However, this project calls for CSS images to complete it. Not only that, I learned about another CSS property, "clip-path" to create shapes.

     button{
        margin: 10px 0;
        border: none;
        clip-path: circle(30%);
        background-color: $Black;
        padding: 40px;
       }

CSS Overflow and Scroll Properties

I had the temptation to use a CSS framework to build out the slide show part of my project. After some thought, I decided against it, as these frameworks can become a handicap to learning CSS. As a result, I learned about "overflow" and various "scroll" properties to solve this coding problem!

.slider{
        display: flex;
        overflow: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
      
        img{
            width: 75%;
            margin:0 2.5%;
            scroll-snap-align: center;
        }

JavaScript getBoundingClientRect()

Lastly, I learned about a helpful JavaScript method, getBoundingClientRect()". This method returns the size of an object. I used this method to get the size of the images in my slide show. Then, I used this info to determine how far to scroll to get to the next image in the slide show.

nxtBtn.addEventListener('click', ()=>{
   let imgDimensions = sliderImg.getBoundingClientRect();
  let imgWidth=  imgDimensions.width;
   slider.scrollLeft += imgWidth;
})

Continued development

There were times when I coded the CSS for larger screen sizes before coding for the mobile screen size. As a result, I had unnecessary code in my CSS rules. Moving forward, I plan to adhere to

Author

• Frontend Mentor - @KarenDouglas
• Twitter - @CodeNoob4Life