Skip to content
OverviewSolutions
13
Comments
17
P

Gonzalo Tejada

@vgt3j4d4Peru290 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Gonzalo Tejada•290
    @vgt3j4d4Posted about 2 months ago

    • Does the solution include semantic HTML? Kind of. I think a <main> tag could have been used. Also a <section> before the <h1>.

    • Is it accessible, and what improvements could be made? Visually impared users might have trouble knowing that where an the generated password is after clicking on the GENERATE button. The basic way to implement this is with an element with aria-live attribute. See this.

    • Does the layout look good on a range of screen sizes? Not as needed. On devices with 320px width the screen looks weird. Also there were no breakpoints being applied so the dimensions don't change depending on the screens. As tailwind is being used you can check: Responsive design and Using custom breakpoints

    • Is the code well-structured, readable, and reusable? Yes

    • Does the solution differ considerably from the design? Well it doesn't change depending on mobile or tablet. Aside of that I find the solution good.

    0
  • P
    Gonzalo Tejada•290
    @vgt3j4d4Posted 5 months ago

    • Does the solution include semantic HTML? Yes

    • Is it accessible, and what improvements could be made? I believe any modifications in the Bill, Tip % and Number of People resulting in Tip calculations updates, should be notified to screen readers. For this, aria-live is helpful.

    • Does the layout look good on a range of screen sizes? Yeah

    • Is the code well-structured, readable, and reusable? Yes

    • Does the solution differ considerably from the design? Yes it does. Paddings, font sizes and tip buttons layout on mobile devices differ.

    Marked as helpful
    1
  • P
    Gonzalo Tejada•290
    @vgt3j4d4Posted 5 months ago

    • Does the solution include semantic HTML? Yes

    • Is it accessible, and what improvements could be made? nav > ul > li trigger the action of changing the data depending on the selected frequency. I see a onClick event handler but this will only work with a mouse or in a touchable interface. In order to become fully accessible it should also work with the keyboard. A quick fix would be to use a or button. IconEllipsiswill eventually become a button and thus will be focusable. If not using a button, probably would be good to addtabindexandrole=button`.

    • Does the layout look good on a range of screen sizes? Yes. I do like the view on tablets and I'll admit I forgot to implement it :(

    • Is the code well-structured, readable, and reusable? Yes. Using React components.

    • Does the solution differ considerably from the design? Just a little bit. For example, the separation between li items. Ando also the Card elements seems to be using a different border-radius which is not really the case but something is happening as you can see the background color of the Card in the bottom borders. I think you can use flex in the Card and make the text content move to the bottom using self-end.

    Marked as helpful
    1
  • P
    edpau•470
    @edpauSubmitted 6 months ago
    What specific areas of your project would you like help with?

    I am trying to improve my TS and JS skills, please kindly comment on my code.

    I am also looking into how to set explicit width and height on the SVG to reduce layout shifts and improve CLS, while making the SVG responsive, please advise the best practice.

    Newsletter sign-up form with TS

    #bem
    1
    P
    Gonzalo Tejada•290
    @vgt3j4d4Posted 6 months ago

    • Does the solution include semantic HTML? Yes

    • Is it accessible, and what improvements could be made? Yes (using aria-live for error notifications)

    • Does the layout look good on a range of screen sizes? Yes

    • Is the code well-structured, readable, and reusable? Yes

    • Does the solution differ considerably from the design? No

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

    I am trying to improve my TS and JS skills, please kindly comment on my code. I am also looking into how to set explicit width and height on the SVG to reduce layout shifts and improve CLS, while making the SVG responsive, please advise the best practice.

    I find the code OK.

    1
  • Murilo Matt•200
    @MuliroMattSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    I'm up to any suggestions

    Article Preview Component using SASS and JS

    #sass/scss
    1
    P
    Gonzalo Tejada•290
    @vgt3j4d4Posted 6 months ago

    • Does the solution include semantic HTML? Mmmm it could be improved I believe. There is no <main>. <section> has been used but I don't think it fits there, same as <i>. You could find this useful HTML5 Element Flow Chart

    • Is it accessible, and what improvements could be made? Not sure if <picture> is needed (as there is only 1 image under it). Also, alt properties on images could be more descriptive. Moreover, the share button ends up opening a "section", either at the bottom or as a tooltip. For that aria-expanded and aria-controls could be benefitial. Another thing is that, the share links should be accesible using the keyboard, and that's not possible with your approach. Consider changing the span.share-icon to a button and making the share links <a> or <button>. That way the user will be able to navigate through them using the keyboard and something can be done once the user clicks them.

    • Does the layout look good on a range of screen sizes? Kind of. When changing the screen size from landspace to portrait mode, I see the image scales which not sure is expected.

    • Is the code well-structured, readable, and reusable? Yes.

    • Does the solution differ considerably from the design? No.

    • What specific areas of your project would you like help with? I think you are trying to use BEM but I'm not really sure as I see class names like card__content__text__title which is violating BEM. Check this for more information MindBEMding. Also, I see you added the font import inside _reset.scss, maybe put it in a separate file or in style.scss.

    0
  • khanwelcomes•60
    @khanwelcomesSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Identifying the required layout styling the borders.

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

    Identifying the exact spacing between elements and the font properties was challenging. Using the figma file i could figure out.

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

    is the code efficient and readme file proffessional?

    CSS Grid model with centered content

    1
    P
    Gonzalo Tejada•290
    @vgt3j4d4Posted 6 months ago

    • Does the solution include semantic HTML? Yes, maybe div.text (div with the class text) can be switched to <article> or <section>. You might find this useful [HTML5 Element Flowchart].(https://html5doctor.com/downloads/h5d-sectioning-flowchart.png)

    • Is it accessible, and what improvements could be made? Yes. Still I believe the alt property could add more context i.e.: QR code to visit Frontend Mentor and take your coding skills to the next level

    • Does the layout look good on a range of screen sizes? Yes

    • Is the code well-structured, readable, and reusable? I believe the css could have been written in a separate file and include it as a <link> tag

    • Does the solution differ considerably from the design? No

    1. What specific areas of your project would you like help with? > Is the code efficient and readme file proffessional? The code is simple as I said above a separate .css file would help to separate the logic. Remember to remove the original README.md and rename README-template.md to README.md. The Built With section I believe needs to be updated.
    Marked as helpful
    0
View more comments