Skip to content
Submitted almost 2 years ago

single-page-desing-portfolio with scss

Audrey Lovelace•100
@AudreyLovelace
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single-page design portfolio
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

how to make a slide?

  1. frame > container (flex row) > several images

  2. give the frame and images certain but responsive width and height, for example, 60vw.

  3. queryselect the frame and all pictures as an array of nodes.

  4. get the frame's width in the js file.

  5. modify the container's margin-left based on the index of the nodes array and frame's width.

Community feedback

  • Audrey Lovelace•100
    @AudreyLovelacePosted almost 2 years ago

    notes for touchscreen

    1.add {passive: true} for event listener as the 3rd parameter to prevent default scrolling.

    2.event.preventdefault() also works but it's much more expensive so passive: true is preferable.

    notes for element.style

    1.element.style="something" will be erased when you declare element.style="another thing" else where.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord