Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    Davy• 70

    @DavyZane

    Submitted

    What are you most proud of, and what would you do differently next time?

    I have no experience with responsive design. I watched Kevin Powell's video of doing this challenge, followed it step by step until I successfully completed this challenge myself. For the next challenges, I will reuse the techniques I just learned without any help - I hope.

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

    The main difficulty encountered was that of responsive design, it is the first time that I use media queries. The second difficulty encountered consisted in coding dynamically so that each design detail adapts from one position to another. Example: the CSS function overflow: hidden; allows me not to force border-radiuses at the corners of the image, these being positioned in different corners depending on the size of the screen. Most of the tips I have learned come from Kevin Powell's video.

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

    At this level of difficulty I mostly need to practice, but any feedback is welcome 🙏.

    product-preview-card-component-main

    1

    stephany247• 110

    @stephany247

    Posted

    You’ve done a fantastic job stepping into responsive design for the first time! Following a tutorial to learn is a great approach, and it’s awesome that you applied concepts like media queries effectively to make your design adaptable across screen sizes. I’m especially impressed with how you handled image borders dynamically depending on the screen size—it shows that you’re already thinking about flexibility in your layouts.

    Moving forward, I’d recommend experimenting with fluid layouts using percentages or rem/em units to make your designs even more adaptable without relying too much on fixed values. You might also want to explore CSS Grid or Flexbox for even more control over the layout, especially for complex designs. Additionally, trying a mobile-first approach could simplify your process as it ensures that you prioritize the design for smaller screens first and progressively enhance for larger ones.

    It’s clear that you’ve learned a lot from this project, and I encourage you to practice future challenges without external help so you can strengthen your problem-solving skills. Great work so far, and I look forward to seeing how you build on these techniques in your next project!

    0
  • stephany247• 110

    @stephany247

    Posted

    Hey there! I just want to take a moment to say that I really admire your effort in creating this recipe page. It’s clear that you put thought into the design and structure, and that’s just fantastic! I'm looking forward to reviewing your code and sharing some insights that can help you elevate your work even further. Keep up the great effort!

    Here are some great aspects that made the code stand out:

    • The structure is well-organized with appropriate use of sections and headers.
    • The use of semantic elements like <header>, <section>, <main> and <footer> is commendable, enhancing accessibility and SEO.
    • Using both <ul> and <ol> for lists is appropriate, providing a good structure for ingredients and instructions.
    • Custom scrollbar styles are defined, which adds a nice touch to the overall design.
    • The media queries are well-structured and adapt the layout for different screen sizes effectively.

    Here are some aspects you can improve on:

    • The <img> tag in the header lacks a descriptive alt attribute. It’s essential to provide meaningful descriptions for better accessibility.

    • Adding comments in both HTML and CSS can help explain sections or specific styles, especially for others who may read the code later.

    • Using horizontal rules <hr> between sections can enhance the visual separation of content, making it clearer for users to distinguish between different parts of the recipe. Adding these tags would improve the overall organization of the page.

    • Ensure that line spacing is consistent across paragraphs, lists, and headings. This can be achieved by defining a standard line-height in the CSS for the body and specific elements to maintain uniformity and improve readability.

    • In the section displaying preparation time, the use of a paragraph <p> for "Preparation time" should be changed to a heading element <h2> or <h3> to better represent its importance and relationship to the content that follows. This not only enhances the semantic structure of the document but also improves SEO.

    Marked as helpful

    0
  • stephany247• 110

    @stephany247

    Posted

    You're doing a fantastic job! It's clear you’ve put a lot of thought and effort into this project. I love how it's coming together, and with just a few tweaks, it could shine even brighter. Here are a few small improvements that could help elevate your work even more.

    • One important thing to note is that you should delete the initial README.md file and customize the template README to reflect the specifics of your project before pushing it to GitHub.

    • It’s a good practice to use more meaningful tags like <header>, <section> or <article> instead of generic <div> tags. This will improve the document structure and make it more readable for both developers and assistive technologies (screen readers).

    • Instead of plain buttons, it would be more semantic to use <a> elements for the social links, as these represent navigation. Additionally, provide aria-labels to make the buttons more descriptive for screen readers. For instance: <a href="#" class="profile-button" aria-label="GitHub Profile">GitHub</a>

    • In your p tag styles, you set the font size to 14px. It’s better to use relative units like rem or em, which will respect the user's font settings and improve accessibility. Example: p {font-size: 0.875rem; /* equivalent to 14px */}

    • Instead of using px for dimensions like width and height, use rem or em units. These are more scalable and adapt better to user settings for accessibility (e.g., font scaling).

    I hope these suggestions are helpful in refining your project even further! You're making incredible progress. Keep up the amazing work—you're on the right track, and I can't wait to see what you create next! Stay motivated and keep coding with passion.

    0
  • Rodrigo Alves• 30

    @rodrigoo-alves

    Submitted

    What are you most proud of, and what would you do differently next time?

    • Try to be a little bit more carefull when styling the components

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

    • It was hard to get all the content right
    • I had problems styling all the content

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

    • Help on the styling if theres is ways to improve

    Blog preview card

    2

    stephany247• 110

    @stephany247

    Posted

    Excellent job! You're demonstrating impressive skills here. Your use of semantic HTML is highly commendable. I have just a few small suggestions that could help make this even better...

    • One area to consider is the line-height; using a percentage 150% can sometimes lead to inconsistent results. Using a unit like em or rem might provide more predictable outcomes.

    • To make your code cleaner and more maintainable, try to avoid repetition. For example, I noticed that the attribution class styles were defined in both your internal and external CSS. Keeping styles DRY (Don’t Repeat Yourself) can help reduce file size and complexity. Additionally, look for opportunities to consolidate repetitive styles. This will make your stylesheet easier to read and manage.

    I hope you find this feedback helpful! Keep honing your skills and embracing new challenges with confidence. You're making fantastic strides—stay motivated and continue coding with passion! 💻

    Marked as helpful

    0
  • stephany247• 110

    @stephany247

    Posted

    • Great job on utilizing semantic HTML! Your use of elements like <h1> and <p> helps convey the content structure effectively. This enhances both accessibility and SEO. Consider ensuring that all images have descriptive alt attributes for improved accessibility.

    • Overall, your solution is off to a good start, but there are areas for improvement. Adding ARIA roles and properties could enhance the experience for users relying on assistive technologies. For instance, consider implementing ARIA labels for the QR code and ensuring that keyboard navigation is fully functional.

    • The layout appears to adapt well to different screen sizes, which is essential for user experience. I recommend testing on a wider range of devices to ensure consistency across various screen sizes, particularly on smaller devices, to confirm that spacing and padding remain visually appealing.

    • Your code is well-structured and easy to read, making it maintainable and reusable. Consider using more comments to clarify sections of your code, especially for complex parts. This will help others (and your future self) understand your thought process.

    0