Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
1
P
krru09
@krru09

All solutions

  • Audiophile Website - Responsive, Interactive, Animated Webpages

    #accessibility#animation#sass/scss#fetch

    P
    krru09•200
    Submitted 3 months ago

    I wanted to make it more obvious that items have been added to the cart and a tooltip that displayed how many items were in the cart. I did not get to do that for this project since I did not know how to make it look good for all amounts of items (e.g., circle would end up covering the cart icon). I also wanted to utilize the Jasmine testing frameworks but have difficulties trying to figure out how to test classes, so I omitted it entirely. Any resources or advice for testing Classes in a framework would be great!


    0 comments
  • Responsive Contact Form with Animated Toast Notification

    #sass/scss

    P
    krru09•200
    Submitted 4 months ago

    Any feedback is appreciated!


    0 comments
  • Responsive Product List with Cart (Pure Vanilla JS, HTML, SCSS/CSS)

    #sass/scss

    P
    krru09•200
    Submitted 4 months ago

    I would like to explore more ways to create the pop-up modal at the end. I utilized the popover modal API but it seems like it may not be supported by older versions of some browsers (e.g., Firefox).

    Speaking of the popover modal, I had some issues with starting a new order. My original plan was to essentially erase the content from the popover modal after the user clicks Start New Order; however, the content in the modal would erase first and not close. The only way I got around it was utilizing a setTimeout() on the function that was responsible for clearing the modal, clearing the cart, and reloading the page. The timeout was so that the modal can close first and then begin a new order. This works, and I only needed to put 100ms for the setTimeout, which is basically indiscernible in practice... but I realize there was some flaw or inefficiencies in my JS for starting a new order. Any advice would be great!


    1 comment
  • Responsive Suite Landing Page (Pure HTML, CSS)


    P
    krru09•200
    Submitted 5 months ago

    What was your approach for the hero and review sections? Particularly with the spacing and title with the hero section, and the placement for the images in the review section? I figured grid could have been utilized (I did not use grid for this challenge at all), but any feedback would be great!


    0 comments
  • Responsive layout using CSS grid


    P
    krru09•200
    Submitted 6 months ago

    I would like further help on how to make position: absolute and position: relative images responsive based on the screen size. I utilized multiple media queries and breaks as to where it should be based on the design, so it doesn't overflow out of the container it's attached to; but I'm sure there's probably an easier way. Please feel free to let me know!


    1 comment
  • Responsive Tech Book Club Landing Page using CSS


    P
    krru09•200
    Submitted 6 months ago

    0 comments
  • Responsive layout using CSS grid


    P
    krru09•200
    Submitted 6 months ago

    Sizing the desktop bento-grid so that it wouldn't be too big and require scrolling or zooming out from the user. I do think it's probably somewhere in my bent-grid-container class, and would need to adjust the grid-template-columns section.


    0 comments
  • Static Omelette Recipe Page using HTML and CSS (non-responsive)


    P
    krru09•200
    Submitted 8 months ago

    I'm not sure how to set the bullets in the way the final sample project has done. Also any advice on working with fig files and design systems. I kind of bulldozed my way through, and I'm not sure if the process was right. What are your thought processes on translating figma prototypes into code?


    0 comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub