Skip to content
OverviewSolutions
7
Comments
4
Alexander Sanchez G.
@AlexSG29

All comments

  • Simon Capillon•100
    @simon7195Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm pleased to have managed to get as close as possible to the Figma model. I'd like to know how to use a front-end framework next time.

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

    The spacing between the card and the internal elements slowed me down a little, but I used the ALT key and the mouse to get the exact measurements.

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

    All clear! Thanks.

    Responsive QR Code using HTML/CSS, Git & VS Code

    1
    Alexander Sanchez G.•90
    @AlexSG29Posted 5 months ago

    good job

    0
  • Ghassen Ben Hamida•140
    @rbhgastonSubmitted 5 months ago
    What specific areas of your project would you like help with?

    I wanna push this "Challenge by Frontend Mentor. Coded by The beginner." to the end of the page. I tried using: justify-self: flex-end. but it does not work. I tried also: flex-grow, margin-top: auto and many other solutions but all of them keep messing with the container above ( with qrcode image and texts).

    Used flexbox.

    1
    Alexander Sanchez G.•90
    @AlexSG29Posted 5 months ago

    In answer to your question, in order to place the footer at the end of the page you could have used: footer { position: absolute; bottom: 0; text-align: center; }

    • position: absolute; bottom: 0;: These properties place the element in an absolute position with respect to the nearest container that has a position other than static (which is the default value). By using bottom: 0;, the footer is positioned at the end of this container, which in this case is the body or some other parent container.

    • justify-self: flex-end;, flex-grow: 1; o margin-top: auto;: These properties are part of Flexbox and are used to align and distribute elements within a flex container (display: flex;). However, these properties do not affect the absolute position of an element like position: absolute; bottom: 0;.

    1
  • Alexander Sanchez G.•90
    @AlexSG29Posted 5 months ago

    I like the result, but it seems that you forgot the active design using "hover" over the card, in addition, the black border was also missing. I loved that you used global variables but in the CSS maybe I needed to use reset to improve the design according to each browser and the font-size values ​​should be in rem or em instead of px so that the font is more adaptable to different screen sizes. Good job!

    Marked as helpful
    0
  • Alexander Sanchez G.•90
    @AlexSG29Posted 5 months ago

    I really liked that you used Tailwind, it's something I hope to learn soon, but first I want to learn CSS in full.

    The only thing I have to say about the code are small structural corrections to the html, nothing more:

    • Add <main>: to the main content section, which is a best practice to define the main content of the page. This improves the accessibility and structure of the document.
    • Add a descriptive alternative text for the QR code image, example: (alt="QR code leading to Frontend Mentor website"). This is important for accessibility, especially for users who use screen readers.
    • Ensuring that headings (<h1>) and paragraphs (<p>) are used correctly helps maintain an HTML structure that is semantically correct and easy to understand for both browsers and users.
    1