Skip to content
OverviewSolutions
18
Comments
8
Juan Gomez
@newbpydev

All comments

  • Ryan•30
    @Ryoliveira
    What are you most proud of, and what would you do differently next time?

    Got more comfortable with short hand declarations.

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

    I had a hard time deciding how to code the links. At first i tried to do an anchor tag within a div, but then when clicking the div, nothing would happen. I ended up going with a div and a @click event to redirect the user to a redirect function.

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

    Are my css properties structured correctly?

    What overall improvements can I make?

    Social link card component made in Vue with composition api

    #sass/scss#vite#vue#typescript
    1
    Juan Gomez•260
    @newbpydev

    Very nice Ryan, since you have created your version a nice little feature you might try is adding a customized theme, or adding the dark/light mode depending on the user's preferences. Take a look at the lighthouse, I believe you have a problem with the contrast of your name. Please keep in mind some people might have an issue reading it since it is almost being camouflaged to the background color.

  • Jiří Ćmiel•40
    @jiricmiel
    What are you most proud of, and what would you do differently next time?

    I've tried to use semantic HTML and BEM using SASS.

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

    Using BEM I often overthink things. I needed to go back again and rewrite it few times. Sometimes output was not as I expected. I double checked everything with developer tools and fixed the problems. Mostly it was adding padding and margins to inline elements without realizing it.

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

    I'd like someone to check my semantic HTML. I'm not really comfortable with it yet and I'm not sure if I used it right. Any help on that topic is welcome. Also reviewing code in general would be highly appreciated.

    Blog preview card. Coded with SASS, BEM, Grid, Flexbox, Semantic HTML.

    #bem#sass/scss#accessibility
    2
    Juan Gomez•260
    @newbpydev

    Hi fellow developer, You seem to have encountered the same problem that I have come across which is the naming of the classes especially using BEM, on most of my projects I try to follow these guidelines:

    • Use more descriptive element names: Ensure each element's name clearly describes its purpose.
    • Avoid unnecessary abbreviations: Use full words for better clarity.
    • Ensure consistency in naming: Maintain a consistent naming pattern throughout the code.

    I have these tips written down on my corkboard so I don't forget to use them on my projects, they might come in handy. Good luck on your journey.

  • Luis Filipe e Silva•10
    @luisfilipex
    What are you most proud of, and what would you do differently next time?

    Muito bom, pratico.

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

    Centralizar a imagem.

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

    Todos.

    Projeto QR Code

    #styled-components
    1
    Juan Gomez•260
    @newbpydev

    A plataforma e muito boa, continue fazendo mais challenges, se voce esta iniciando esta jornada, recomendo Udemy para ver cursos sobre Web Development, eles tem conteudo em Portugues tb. Boa sorte.

  • Juan Gomez•260
    @newbpydev

    One final note, about the landmarks, you must use the proper tags for example the

    <header></header>
<main></main>
<footer></footer>

    These are the landmarks, again it's all about the screen readers and those with disabilities, they will depend on the proper information. I noticed you used it in the footer, but there are more such as the header, navs and such. You used more div tags, so FrontEndMentor complains, which is good to help us think more about the users. if you decide to keep using divs you must give them a role, ex:

    <div className="header" role="header">
This div will be considered a header, even though we didn't use the <header></header> tag.
</div>

    I sometimes alternate between the div with roles and the actual tags just to experiment.

  • Juan Gomez•260
    @newbpydev

    I see that in one of your problems is that you didn't wrap your

    <li></li>

    code with a ul or an ol, remember that this is to help the screen readers identify your lists, ex:

    <ul>
  <li>remember this is a list item</li>
</ul>

    Another problem that arose were about the <a> tags, if you take a look at your code, inside the a tags you don't have any text, so the text readers won't be able to help people with accessibility problems, we need to use the aria-label and you can add a label or description of where this link will take them, ex:

    <a aria-label="click me to learn more about my products" href="#"></a>
  • Juan Gomez•260
    @newbpydev

    Excellent work, it is close to the result, just a quick recommendation, the font size of the headers and some of the background colors are a little off. The background of the 'white' areas has a hint of beige color. What I used to do is get the image of the designs and put it in Figma, then use the color picker to get the exact, or super close, version of the color used. While you are at it, if you make a frame with the size of the design you are using, then line up the sides you can get the exact dimensions of the font sizes and image sizes. It is a handy trick to know.

    Marked as helpful
  • Juan Gomez•260
    @newbpydev

    excellent work, I can't wait to get back on the wagon, I decided to do the React course and use these projects to practice, starting next week I will continue with the challenges, keep it up.

  • Juan Gomez•260
    @newbpydev

    Hi, don't forget to center the card on the screen the typical margin: 0 auto; can help you quickly fix this problem, and don't forget to fix the fonts. If necessary search on fonts.google.com to get the code to put on the header of the HTML file.

    Marked as helpful