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
• Installing the project on local computer
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

Installing the project on local computer

• clone the project on https://github.com/queseri/single-page-design-portfolio.git
• install dependencies by running yarn install
• run the project locally by typing yarn run dev
• open the live version on http://localhost:1234

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

Links

• Solution URL: Add solution URL here
• Live Site URL: Single Page Design Portfolio

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

Making the carousel

Html and css carousel

• inspiration was drawn from the above example to build the scroll carousel. Notably it was created using the anchor element.

<ul class="slide-container">
        <li id="slide1" class="slide" tabindex="0">
          <img class="slide-img" src="./assets/image-slide-1.jpg" alt="ui and ux animations">
        </li>
        <li id="slide2" class="slide" tabindex="0">
          <img class="slide-img" src="./assets/image-slide-2.jpg" alt="illustrations">
        </li>
        <li id="slide3" class="slide" tabindex="0">
          <img class="slide-img" src="./assets/image-slide-3.jpg" alt="photographic solutions">
        </li>
        <li id="slide4" class="slide" tabindex="0">
          <img class="slide-img" src="./assets/image-slide-4.jpg" alt="Graphic design solutions">
        </li>
        <li id="slide5" class="slide" tabindex="0">
          <img class="slide-img" src="./assets/image-slide-5.jpg" alt="Mobile and web applications">
        </li>
      </ul>

.slide-container {   
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;   
    gap: 1rem;
}

Continued development

Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.

Note: Delete this note and the content within this section and replace with your own plans for continued development.

Useful resources

• Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.

Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author

• Website - Chamu Mutezva
• Frontend Mentor - @ChamuMutezva
• Twitter - @ChamuMutezva

Acknowledgments

This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.