Skip to content
OverviewSolutions
4
Comments
4
Tiago Pereira
@BuildAndBreak

All comments

  • Tiago Pereira•80
    @BuildAndBreakPosted 27 days ago

    Error 404 , there isn't a GitHub Pages site here.

    0
  • Gigi SN•40
    @jeanethsnSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of using variables for spacing, colors and font size.

    Social links profile main solution

    1
    Tiago Pereira•80
    @BuildAndBreakPosted 27 days ago

    Hi, great job completing this project, @jeanethsn!

    Your code is clean, readable, and makes effective use of semantic HTML.

    I also appreciate the use of css variables, it's a great habit that will be invaluable in larger projects, so getting comfortable with them early is definitely a smart move.

    A couple of suggestions:

    -Fixed Width on Section:

    I noticed you set a fixed width of 310px on the <section> element. While this will work on most devices, I’d recommend using a percentage (%) for more flexibility and adding a max-width of 310px if needed. This will make your layout more responsive across different screen sizes.

    -Clickable Links:

    Consider adding links within each list item to make the social media options clickable. Redirecting users to these platforms could be a nice enhancement and why not make your personal social links profile? Think about that :)

    Tip: It looks like there are two closing <main> tags by mistake, so double-check that part.

    Keep up the great work! Greetings, Tiago

    0
  • Tiago Pereira•80
    @BuildAndBreakPosted 29 days ago

    Hi Abdullah! Congrats for completing the challenge!

    Pro's:

    • Use of CSS Variables: Defining color and size variables at the root level makes the code more maintainable and allows for easy updates.

    • Responsive Design: The inclusion of media queries demonstrates a commitment to responsive design, ensuring the layout adapts to different screen sizes.

    Cons: -To enhance responsiveness, and avoid hitting the edges on small screen sizes, I would consider adjusting the .card and .blog-image widths using relative units like "%" instead of fixed values:

    Like this for example: .card { width: 90%; /* More flexible width / } .blog-image { width: 100%; / Image will adapt to card size */ }

    • In the heading selector, the (width: 200;) value is missing a unit, which could cause issues.

    -You could use an <address> tag for the creator’s information, as it’s associated with contact details or authorship in most cases.

    Marked as helpful
    0
  • Tiago Pereira•80
    @BuildAndBreakPosted about 1 month ago

    Good job for completing the challenge!

    Here some tips: -Instead of absolute positioning for .item-qr, you can use Flexbox to center items more efficiently and responsively. -In this case I would use "paragraph" instead of "span" it provides more semantic meaning. -You might want to include the breakpoints for better responsiveness.

    Marked as helpful
    0