Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
13
Joseph Reyes
@JreyIV

All solutions

  • Advice Generator App


    Joseph Reyes•440
    Submitted about 1 year ago

    Any better, more efficient ways to solve this? is my code clean? Best practices?


    1 comment
  • Github User Search Challenge


    Joseph Reyes•440
    Submitted about 1 year ago

    how could I refactor my javascript? I know there are ways I just didn't attempt to


    0 comments
  • Single Page Design Portfolio


    Joseph Reyes•440
    Submitted about 1 year ago

    How can I write cleaner code. Any redundancies? any tips on the infinite scrolling? mine is buggy


    1 comment
  • Sunnyside Agency Landing Page


    Joseph Reyes•440
    Submitted about 1 year ago

    any redundancies? can it be cleaner?


    0 comments
  • BMI Calculator


    Joseph Reyes•440
    Submitted about 1 year ago

    How can I make this code cleaner? Especially with my media queries and javascript


    0 comments
  • Age Calculator App with happy birthday message


    Joseph Reyes•440
    Submitted about 1 year ago

    per usual, is my code clean, or are there better and more efficient ways to handle things? Any redundancies?


    2 comments
  • Tip Calculator App Challenge


    Joseph Reyes•440
    Submitted about 1 year ago

    Regarding my javascript, are there ways to make it more efficient and cleaner/more readable? I want to practice making the cleanest code that I can.


    2 comments
  • Time Tracking Dashboard


    Joseph Reyes•440
    Submitted about 1 year ago

    Any redundancies? Was my way of doing it effective or is there a better, cleaner way to do it?


    1 comment
  • Newsletter Sign-up


    Joseph Reyes•440
    Submitted about 1 year ago

    Are there better ways to go about hiding and displaying components? I used style.display none and flex. Take a look at my dismiss button to take me back to the main newsletter sign-up. I feel like it is slow because it takes a second to switch back. Why is that?

    Also are there any tips for sizing? Sometimes it feels like the size is smaller than the design so I make it bigger but then the wording inside is off (line breaks at different words and padding off etc.) It's too hard to make it pixel perfect.


    1 comment
  • article preview component


    Joseph Reyes•440
    Submitted over 1 year ago

    Any redundancies with my code?

    Any tips on best practices I might be not be doing?


    1 comment
  • Meet Landing Page


    Joseph Reyes•440
    Submitted over 1 year ago

    I couldn't figure out how to move two images on the hero to the end of the screen so that they were cut off by the edge of the screen like the design without making a huge hap between them on mobile screens. How did you guys do that?

    As usual, are there any redundencies in my CSS that I would fix?

    How do you guys deal with sizing efficiently?


    1 comment
  • Testimonial Grid Section


    Joseph Reyes•440
    Submitted over 1 year ago

    Are there any redundancies in my code? how can I clean it up a little bit more? Specifically with each child, I feel like there might be a better way to handle each child and their differences.


    1 comment
  • Four Card Feature


    Joseph Reyes•440
    Submitted over 1 year ago

    For this specific project I noticed that when working with grid-template, my divs would expand to unusual lengths when working with the grid-columns/rows. For example,

      .content-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
      }
    
      .content-grid div:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 2 / 4;
      }
    

    the 1st child would elongate and become bigger than the other children. It wasn't until I finished positioning the last child that they all snapped back into their original space. Why is that? what are your favorite resources to learn and practice grid and grid-template stuff?


    1 comment
  • Product Preview Card Component


    Joseph Reyes•440
    Submitted over 1 year ago

    any tips for the responsiveness would help. It seems like it takes me a long time to figure out the responsiveness. Also I always struggle with sizes. min and max width and heights screw me up and i have things that keep growing and things that stay a certain size which is frustrating. I have to toy around with the sizes which takes me a little long, i wish I could get that down in 1 try.


    1 comment
  • Recipe Page


    Joseph Reyes•440
    Submitted over 1 year ago

    How do you eyeball the design? I tried using the different weights for my fonts and they still always looked different from the design no matter which one I used. and what about the width and height of the card itself? without figma is there a way to get exact measurements or do I really need figma for that?

    in my code do you see anything that can be removed or consolidated? maybe some patterns that I tend to repeat a lot that could be placed into one variable or something? Do you think my code is clean enough or would it be a problem in the field?


    1 comment
  • Social Links Profile


    Joseph Reyes•440
    Submitted over 1 year ago

    is there anyway I can clean up my code further? I notice that I have a lot of code where I repeat a lot (see below). Is there a way to make that more efficient or is this the common way that people write css?

    .profile-details {
      padding-block: 1rem;
    }
    
    .profile-details h1 {
      color: var(--clr-white);
      font-size: 1.5rem;
      font-weight: var(--fw-bold);
    }
    
    .profile-details p:nth-of-type(1) {
      color: var(--clr-primary);
      font-weight: var(--fw-normal);
      font-size: 0.9rem;
      padding-top: 0.5rem;
    }
    
    .profile-details p:nth-of-type(2) {
      color: var(--clr-white);
      font-weight: var(--fw-light);
      font-size: 0.875rem;
      padding-top: 1.5rem;
    }
    

    1 comment
  • responsive design using flex and media query. uses custom css too


    Joseph Reyes•440
    Submitted over 1 year ago

    cleaner code, how to finish quicker


    1 comment
  • flexbox solution


    Joseph Reyes•440
    Submitted over 1 year ago

    How do you use figma to make it more pixel perfect (or at least close to)


    2 comments
Frontend Mentor logo

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

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

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