Skip to content
OverviewSolutions
5
Comments
3

Tarik Raposo Parreira

@tarikraposo80 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

Latest comments

  • Tarik Raposo Parreira•80
    @tarikraposo

    Layout looks good, does not include semantic HTML. You can improve visualization with paddings on your card. If you want to follow the layout strictly you can remove the last TR border with table tr:last-child {border-bottom: none;}. The code is well-structured, readable and reusable.

  • Arian Makiabadi•10
    @ArianMakiabadi
    What are you most proud of, and what would you do differently next time?

    doing everything from the scratch was quiet fun

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

    i noticed the children of a flex parent don't get the full width of their parent automatically even if they have a display: block, this can be solved by giving width: 100% to the child element

    Media query

    1
    Tarik Raposo Parreira•80
    @tarikraposo

    Accessible, non-semantic. Looks good on different screen sizes. Readable. Looks very good, just missing the box-shadow.

  • TCHINGUÉ MAKAMTÉ Patricia Kévine•100
    @Pattykev
    What are you most proud of, and what would you do differently next time? What I learned
    • How to auto values om margin properties : In CSS, the margin property is used to create space around elements. When you set the margin to auto, it allows the browser to automatically calculate the margin space. This is particularly useful for centering block-level elements within their container.

    Here's what margin: auto; typically means:

    1. Horizontal Centering: When applied to a block element (like a div), setting the left and right margins to auto allows the element to occupy the available horizontal space equally on both sides, effectively centering it within its parent element.

      .centered {
    width: 50%; /* or any other width */
    margin: 0 auto; /* top/bottom margin 0, left/right margin auto */
}

    2. Vertical Margins: The margin: auto; setting does not have the same effect for vertical margins (top and bottom) unless certain conditions are met (like using flexbox or grid layouts).

    3. Flexbox and Grid: In flexbox or grid layouts, margin: auto; can also be used to distribute space between items or to push items to the edges of their container.

    In summary, using margin: auto; helps in controlling the layout and positioning of elements within a webpage, particularly for centering elements horizontally.

    • Remembered how to change local repository url git remote set-url origin <put the new url there>
    • How to insert an image with markdown

    ![<alternative tex>t](<image url>)

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

    In CSS learning.

    qr-code-component with HTML5 and CSS3

    2
    Tarik Raposo Parreira•80
    @tarikraposo

    O posicionamento dos elementos foi feito com flexbox; Os espaçamentos com padding 16px, respeitando o tamanho especificado no figma; Código bem estruturado e legível; A solução não possui HTML semântico;

    Melhorias: ajustar tamanho do texto para o proposto no layout.