Skip to content
OverviewSolutions
15
Comments
10
Aaron Ragudos
@Ragudos

All 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
  • Aaron Ragudos•480
    @Ragudos

    Hello! Here are some tips:

    • To centralize the card, you can set a wrapper or the body itself to have a min-height of 100dvh or 100vh then add these:

    display: flex; align-items: center; justify-content: center;

    The snippet above centralizes an element inside of its wrapper/parent.

    • For a transparent background, just use the background CSS declaration and set it to "transparent".
  • Aaron Ragudos•480
    @Ragudos

    I like that you followed the desktop design splendidly and how you used if-statements for invalid values!

    To make your design mobile-friendly, I recommend:

    • Use CSS properties
    • Use the clamp(), min(), or max() function in CSS.

    For dynamic styling:

    • With CSS properties, you can do something like "element.style.setProperty(propertyName, value);" which will help you shorten your code a bit.

    You can separate logic for each validation of content. For example, you can start with the year, then the month, then the day. After that, for each invalid format, you can decide what to change in the DOM to show the error instead of simultaneously showing all possible error messages despite the possibility of only one input being incorrect.

    Lastly, I recommend using element.textContent or element.innerText instead of innerHTML if you are only inserting text inside an element.

    Marked as helpful
  • Aaron Ragudos•480
    @Ragudos

    You did well copying the design! I also did not know that GitHub pages can fetch files. I guess we should not use location.origin for fetching in GitHub pages.

    I like that you added hover states, but you might want to take note is that, most of the time, only elements that a user can interact with should have those hover effects.

    I like that you used functions to render items as well! I recommend using the forEach method instead because .map creates a new array and is generally used for getting a set of values from an array, while .forEach means that we want to call a function per item in an array.

    Marked as helpful
  • Aaron Ragudos•480
    @Ragudos

    Hello! I am new to Frontend Mentor, and my first try is awesome! Anyway, I stumbled upon your work and decided to check it out.

    My recommendations:

    • use <picture> element for images.
    • use a regex for email validation since invalid emails are still submitted.
    • use background-image CSS declaration to achieve the desired hover effect (gradient) on the button.

    All-in-all. Great job!

    Marked as helpful