Skip to content
OverviewSolutions
15
Comments
10

Aaron Ragudos

@Ragudos480 points

Hi, I'm Aaron. I am a web development enthusiast with less than a year of experience. May we build stunning websites together!

I’m currently learning...

Rust & Web Design (Layouts, Color Theory, etc.)

Latest solutions

View more solutions

Latest comments

  • Higor Sebastian•50
    @HigorSAS
    What are you most proud of, and what would you do differently next time?

    I'm proud of being able to do this without much difficulty. Next time I would like to use css grid

    What challenges did you encounter, and how did you overcome them?

    The challenge I had the most was spacing the link buttons. I tried to keep the spacing as close to the original as possible.

    What specific areas of your project would you like help with?

    I would like some help in terms of knowing which padding or margin is better, this is what made me struggle the most.

    Page made with html and css flexbox.

    1
    Aaron Ragudos•480
    @Ragudos

    Hello, Sebastian. Great job! First, I recommend adding transitions for the "color" property as well to avoid the flickering effect, which is disturbing for the eyes.

    As for your question, a padding is an extension of an element, almost like a width/height, but it acts like a margin. By this, I mean that a padding's location will contain the element's background color, border, etc.

    You can think of it like the border-box model in CSS:

    inner: content around inner: padding around padding: border around border: margin

    The good thing about margin is that you can centralize objects using that:

    // Let the browser decide how much margin the element will take horizontally. This means that its margin will be as large as the space it has horizontally.
margin-inline: auto;

    So, with padding, since it wraps around the content, if we have a fixed width/height, adding it would squeeze our contents tighter to each other. While with margin, it would just move our element. Take note that sometimes a margin will not move our element because of resistance, for example, with flexbox, although it only occurs on certain cases.

    Kudos!

    Marked as helpful
  • Aaron Ragudos•480
    @Ragudos

    Great job! I like that you specify parts of the CSS code, which is great for large files.

    I recommend trying out flex, align-self, and height in contrast to your grid-row, grid-column solution.

    Also, I noticed that you are very specific with your class names, which is great, and it may be better to use generic class names for stuff like images (e.g. .profile-circle__lg, .profile-circle__xl).

    On a side note, I like your GitHub Readme. Keep it up, man!

    Marked as helpful
  • Aaron Ragudos•480
    @Ragudos

    Hello, CJ. Great Job! I love the SVG animation you did on the icons! A few recommendations after seeing the webpage:

    • Add the currently chosen filter in the button that toggles the filter dropdown for user experience.
    • The search functionality feels clunky, and I can see that the URL query for search params do not have anything.

    Some improvements for the code:

    • For example, the code in Home.tsx has a useEffect for fetching data. I recommend moving the function outside the useEffect since when it is inside, then that means it is recreated everytime the useEffect is ran. After moving it outside, I recommend wrapping it inside a useCallback and add the "region" state as a dependecy to tell React that we only need to recreate the function when the state "region" changes. May I know why is it needed to set the countries state to an empty array when we get an error? Additionally, can't we just do that inside the try catch block to avoid an unnecessary rerender?

    • Since you are not sending out any request to a server when we type in the searchbar, try to attach an event.preventDefault() on the form

    Overall, great job!

    Marked as helpful
  • Aaron Ragudos•480
    @Ragudos

    Good day, Navine! I like your solution. For your troubles, yes, I personally recommend using CSS properties to avoid the styling conflicts we get from inline styles since CSS prioritizes those styles unless an !important was declared in one of the declarations specified.

    Great job for trying to be clean! It's honestly hard to organize things, especially when you just want to build a small project, and I recommend that you have separate files for each purpose. For example, you can move the CSS declarations responsible for resets and another for fonts, pretty much the same as in JavaScript where you separate logic for better readability.

    One tip: Try saving current state of the quiz to sessionStorage to keep track of the progress when the page just for fun.

    Awesome job!

    Marked as helpful
  • Aaron Ragudos•480
    @Ragudos

    Awesome design! I think it will be much better if the middle content (main content) is aligned with the header and footer, which are, if I'm not mistaken, has a justify-between.

  • Aaron Ragudos•480
    @Ragudos

    Hello! I noticed that you used the vw unit for font sizes. It's great for responsiveness, however, I recommend adding a limit to that and some kind of breaker. For example:

    clamp(10px, 2px + 5vw, 20px);

    This means that the font size will be, at minimum, 10px, then increase by 2px per 5% of the viewport width, and once it reaches a font size of 20px, it stops there. You can also use the min() function:

    min(2px + 5vw, 20px);

    This means that the font size will be equals to the minimum value of the two, so if the value resulted from (2px + 5vw) is greater than 20px, then 20px will be the font-size, and vice versa.

    The same is true for the max() function, but it takes the greater value instead of the lesser value.

    Marked as helpful
View more comments