Skip to content
OverviewSolutions
4
Comments
8
Andrea Selmi
@andreaselmi

All comments

  • Bella•610
    @Bonu7222
    What are you most proud of, and what would you do differently next time?

    I’m proud that I made the recipe page match the design almost perfectly using only HTML and CSS. It helped me practice clean layout and spacing. Next time, I would try to use CSS variables or a utility class system to make my styling more organized and reusable.

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

    I had a bit of trouble with font sizes and spacing at first. It didn’t look exactly like the design. I solved it by checking the style guide more carefully and using px units to match the exact spacing.

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

    I’d like feedback on my use of semantic HTML. Did I choose the correct tags for sections like ingredients and instructions? Also, is there any way I could improve my CSS structure or make it cleaner?

    Omelette recipe

    1
    Andrea Selmi•160
    @andreaselmi

    Hi there! Great work on your project — you made good use of semantic HTML!

    Here are a few pieces of advice to help you improve:

    📐 Use rem instead of px To make your website more accessible and responsive to user font-size preferences, it’s recommended to use rem units instead of fixed px values. This allows your layout and text to scale more naturally.

    🌁 Don't forget meaningful alt attributes Your <img> tag uses a vague alt attribute. Adding clear and descriptive alt text improves accessibility—especially for users relying on screen readers—and also helps with SEO.

    🎨 Consider using BEM for CSS class naming Your use of classes is already a solid starting point, but to improve readability and maintainability, you might consider adopting a naming convention like BEM (Block Element Modifier). It helps keep your code organized as your project grows and makes it easier for others (and your future self) to understand the structure.

    Keep going! 🚀

  • Andrea Selmi•160
    @andreaselmi

    You did a great job on this project!

    I appreciated the use of rem instead of pixels, semantic html (which is very cool!) and a good use of css classes!

    I'll give you some feedback, to help you improve:

    🌁 Don't forget alt attribute Your <img> tag is missing an alt attribute. Adding descriptive alt text improves accessibility, especially for users relying on screen readers, and helps with SEO.

    🎨 Consider using BEM for CSS class naming Your use of classes is already a good step forward, but to improve readability and maintainability, you might want to adopt a naming convention like BEM. It helps keep your code organized, especially as your project grows, and makes it easier for others (and future you) to understand the structure of your components.

    🎯 Pay attention to design consistency Some aspects of your implementation—such as spacing, colors, and font sizes—differ from the original design. Maintaining consistency with the design specifications is crucial for a polished and professional user interface. Paying close attention to these details ensures a cohesive and visually appealing result.

    Keep going 😎

    Marked as helpful
  • RickLearnsToCode•30
    @RickLearnsToCode
    What are you most proud of, and what would you do differently next time?

    I got it done, but got a lot of help from Copilot. As I improve I want to start doing these challenges without any AI support until I really get stuck.

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

    I've been through several CSS tutorials but none of this seems to stick very well. I really need to get the most common properties into my head better, as well as getting much better at layouts using flex and grid.

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

    General guidance on how to remember the basics of positioning would be much appreciated. Specifically, positioning container divs on the page, and positioning child divs and elements inside them.

    QR Code card - first challenge

    2
    Andrea Selmi•160
    @andreaselmi

    Hi there! Great work on your first project ☺️

    Here are a few pieces of advice to help you improve:

    📐 Use rem instead of px To make your website more accessible and responsive to user font-size preferences, it’s recommended to use rem units instead of fixed px values. This allows your layout and text to scale more naturally.

    🌁 Don't forget alt attribute Your <img> tags is missing an alt attribute. Adding descriptive alt text improves accessibility, especially for users relying on screen readers, and helps with SEO.

    💡 To improve the way you position container divs and their child elements, I suggest you take a look at https://css-tricks.com/, you can find interesting and very simple guides

    Keep going! 🚀

    Marked as helpful
  • Andrea Selmi•160
    @andreaselmi

    Hi there! Great work on your project 🚀 Here are a few pieces of advice to help you improve:

    🔤 Semantic HTML You used only <div> and <p> tags, try to use also heading tags (<h1>,<h2> etc) or others like <section>, <article>. These help improve accessibility and the overall structure of your HTML.

    📐 Use rem instead of px  To make your website more accessible and responsive to user font-size preferences, it’s recommended to use rem units instead of fixed px values. This allows your layout and text to scale more naturally.

    📱 Apply a mobile-first approach It looks like your styles are optimized for desktop first. Try starting your design with mobile styles and progressively enhancing them for larger screens using media queries. This approach improves performance and ensures a better experience for users on mobile devices.

    🎯 Pay attention to pixel-perfect implementation Some spacing, border-radius, or alignments differ from the original design. Try to match the design more closely by checking exact values in your design tool. Consistency with the design helps create a polished and professional user interface.

    Keep going 🚀

    Marked as helpful
  • Andrea Selmi•160
    @andreaselmi

    Hi there! Great work on your project ☺️

    Here are a few pieces of advice to help you improve:

    🔤 Semantic HTML You used the <div> tag for social links, but when linking to other pages or external sites, it's better to use the <a> tag. Also, try using more semantic HTML elements like <section> and <article>. These help improve accessibility and the overall structure of your HTML.

    📐 Use rem instead of px To make your website more accessible and responsive to user font-size preferences, it’s recommended to use rem units instead of fixed px values. This allows your layout and text to scale more naturally.

    🎯 Avoid using IDs for styling Try not to use id attributes for styling purposes. Instead, prefer class selectors. IDs are meant to be unique and are better suited for JavaScript hooks or anchor links, while classes offer more flexibility and reusability for CSS.

    🌁 Don't forget alt attribute Your <img> tags is missing an alt attribute. Adding descriptive alt text improves accessibility, especially for users relying on screen readers, and helps with SEO.

    Keep going 🚀

  • yekta_akhavan•170
    @yektaakhavan
    What are you most proud of, and what would you do differently next time?

    I'm proud that I knew how to solve it and I'll definitely try harder to be more responsive.

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

    Nothing

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

    Responsive Design

    Social-Links-Profile

    2
    Andrea Selmi•160
    @andreaselmi

    Hi there! Great work on your project 🎉

    Here are a few pieces of advice to help you improve:

    🔤 Semantic HTML You used the <button> tag for social links, but when linking to other pages or external sites, it's better to use the <a> tag. Also, try using more semantic HTML elements like heading tags (<h1>, <h2>, etc.), <section> and <article>. These help improve accessibility and the overall structure of your HTML.

    📐 Use rem instead of px To make your website more accessible and responsive to user font-size preferences, it’s recommended to use rem units instead of fixed px values. This allows your layout and text to scale more naturally.

    📱 Mobile-first approach Try starting your styles from the mobile layout and use media queries to handle larger screens. It’s a more scalable and performance-friendly strategy — and it aligns with modern best practices. (You can find plenty of resources online if you’re curious!)

    You're on the right track! 🚀

    Marked as helpful
  • Vaishnavi-194•80
    @Vaishnavi-194
    What are you most proud of, and what would you do differently next time?

    This is my second handson challenge. For the 1st challenge I needed some reference to complete, for this challenge I tried it without any reference.

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

    fonts were provided as .ttf files. But I have imported the google fonts. Learning on how to use ttf files.

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

    All suggestions are welcomed. Thank you in advance.

    Blog preview

    1
    Andrea Selmi•160
    @andreaselmi

    Hi there! Great work so far, you're doing well! 😊

    Just a few quick suggestions (if I may) to help you improve:

    Use rem instead of px: This helps make your website more accessible, especially when users adjust their browser’s font size. It's a good habit to start using rem units early on!

    Make class names more descriptive: Class names like text1 or text2 make the code harder to read and understand. Try using more meaningful names like card__title or card__description. It helps keep your CSS organized and easier to maintain. You can check out this naming convention: https://getbem.com

    Watch out for spacing and border values: For example, in this code:

    #article {
    width: 100%;
    border-radius: 13px;
    margin-bottom: 15px; 
}

    You've used different values that don’t follow design values. A good rule of thumb, by the way, is to use multiples of 4 (like 12px, 16px, 20px…) for consistent spacing and a cleaner design.

    Avoid using IDs in CSS: It's generally better to use classes instead of IDs when styling elements. Classes are more flexible and follow best practices, especially when your project grows.

    Keep going 💪 Let me know if you ever want more help or feedback :)

    Marked as helpful
  • avto2006•10
    @avto2006
    What are you most proud of, and what would you do differently next time?

    I practiced HTML and CSS. I'm learning web development independently, and this was my first experience with a project. I really enjoyed it, and it boosted my confidence. I'm able to see my mistakes, and I'm proud that I can recognize them and improve in the future

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

    "I struggled with styling — for example, centering a specific element was difficult for me. But through that, I discovered one of my weaknesses and grew a bit from it. Now I feel ready to return to those weak spots and practice even more

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

    I need help with centering elements using CSS and improving my layout design.

    I created a QR code using HTML and CSS

    1
    Andrea Selmi•160
    @andreaselmi

    Hi there! Great job on your first project :)

    Here’s some feedback that might help you improve:

    Image not showing: The image isn't displaying because the path is incorrect. Always remember that the path starts from the location of the file you're writing in. For example, you wrote:

    <img class="img1" src="images/image-qr-code.png" width="288px" height="288px">

    But the image is in the same folder as your HTML file, so the correct path is: src="image-qr-code.png"

    Class naming consistency: Be consistent with class names. You’ve used a mix of lowercase and capital letters. Try sticking to one style — usually, all lowercase is preferred. You can check out this CSS methodology for more clarity: https://getbem.com

    Meaningful class names: Class names like text1, text2, img1 don't clearly describe the content or purpose. Instead, try something like card__title, card__subtitle, or card__image — this helps both you and others understand the structure better.

    Avoid using <br> and '&nbsp' for layout: These are not ideal for positioning elements to match the design. Instead, let the text flow naturally and focus on using containers and spacing (like padding/margins) to control layout. This will also help make your design responsive.

    Code formatting: Clean and consistent formatting makes your code easier to read and maintain. Currently, some of your HTML tags and CSS classes have inconsistent spacing and indentation. Try using a tool like Prettier (you can install it in VS Code) to automatically format your code when you save.

    Use of flex: You've used display: flex on many elements, even on simple text elements. Flexbox is great for arranging layout and positioning groups of elements, but it’s best used on containers. Try removing flex from some of the inner elements (like text) and see how it behaves — this can help you understand where it's really needed.

    Let me know if you'd like help with anything else — you're off to a great start, keep going! 😊

    Marked as helpful