Skip to content
OverviewSolutions
3
Comments
3

Ronaldo Nogueira de Sousa

@ronogue70 points

Formado em Ciências da Computação na Regional Jataí - Universidade Federal de Goiás - UFG.

Latest solutions

Latest comments

  • P
    Ronaldo Nogueira de Sousa•70
    @ronoguePosted 23 days ago

    Hi, congratulations on your solution! To help you out, here is some feedback:

    • Try to use more semantic HTML tags. For example, the main content of your page should be wrapped in the <main> tag. For the content, you could use the <article> tag.

    • To group elements, you could use <section> tags. For instance, to create the link groups, you could use a <section> with a class of links.

    • Each link should use the appropriate <a> tag.

    • You used a <div> to add the avatar image, but instead, you should use the <img> tag inside a <figure> element (<figure> tag).

    • Try to understand and use Flexbox to align the card at the center of the page—not just the card, but other elements as well (Flexbox).

    Again, congrats on your solution! I liked how you structured the classes, making it easy to understand the layout of the elements.

    0
  • P
    Ronaldo Nogueira de Sousa•70
    @ronoguePosted 23 days ago

    Hi, congratulations on your solution! I really liked it. Just to help you out, here is some feedback:

    • Use more semantic tags. For example, the container could use the <article> tag for the main content. Inside it, you could use the <section> tag to separate different parts of the content. For the publish date, you could use the <time> tag to represent the date.

    • Use more descriptive class names. For instance, instead of using .text for the container that holds the title and description elements, you could use .content for the container and .title and .description for the <h1> and <p> elements, respectively.

    • You used the class .legend for the image, but instead, you could use a more semantic tag, such as <figure>, along with <figcaption> for the caption (<figure> tag).

    Again, congrats on your solution! I also learned from it—thanks!

    Marked as helpful
    0
  • P
    Marion•140
    @MarionCtsSubmitted 30 days ago
    What are you most proud of, and what would you do differently next time?

    This is my first challenge on Frontend Mentor. I have basic knowledge of HTML and CSS fundamentals from a previous Web Design training, and I want to improve significantly.

    For this challenge, I aimed to get as close as possible to a pixel-perfect solution while ensuring semantic HTML. The Figma design was extremely helpful, and I believe my solution is quite close to the original design.

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

    I wasn't sure if my HTML was correct, so I had to revisit my lessons to ensure I was using the right elements. Since this is such a small page, I initially skipped writing a CSS reset, although I was reminded that it is a good practice, even for small projects.

    I corrected this, and with a few minor updates, the page looked even better. This made me realize that, regardless of the project size, writing clean and well-structured code is never 'too much.

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

    I would be grateful for any kind of feedback!

    QR Code Challenge

    1
    P
    Ronaldo Nogueira de Sousa•70
    @ronoguePosted 29 days ago

    Hi Marion,

    Congratulations on completing your solution! It’s great to see your progress. I have a couple of suggestions to help improve your code further:

    1. Global Reset and Box-Sizing:
      Consider using the global selector (*) to reset the padding and margin of all elements to 0. Additionally, setting box-sizing: border-box globally will make it easier to manage element dimensions, as it includes padding and border in the element’s total width and height. For example:

      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    2. Semantic HTML:
      The <figcaption> element should be nested inside a <figure> tag, as it is meant to describe content within the <figure> element. You can refer to the MDN documentation on <figure> for more details.

    Once again, great job on your solution! Your use of the <article> tag reminded me of its purpose and inspired me to revisit its usage.

    Marked as helpful
    0