Skip to content
OverviewSolutions
9
Comments
8
stephany247
@stephany247

All comments

  • Tessy Samuel•100
    @VendysamSubmitted 19 days ago
    What are you most proud of, and what would you do differently next time?

    I'm finally understanding css grid

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

    The use of grid

    CSS grid

    2
    stephany247•170
    @stephany247Posted 18 days ago

    Your code looks good overall! Here's a brief review along with suggestions to improve it, focusing on areas like semantics, accessibility, and styling:

    • Alt Text: The alt attributes for images could be more descriptive, like "Daniel Clifford portrait".

    • Media Queries Structure: Ensure that the media queries are well-structured. The CSS for smaller screens should be inside the respective media query.

    • Font Loading: Instead of using multiple font weights in a single link, consider importing only the required weights to improve load time.

    • Remove Redundant Styles: Avoid repeating styles that can be grouped or simplified.

    Keep up the great work! You're making significant progress, and these small improvements will enhance your skills even further. Remember, coding is a journey and each step you take brings you closer to mastering your craft. Keep pushing forward, and don’t hesitate to experiment and learn! You've got this!

    0
  • stephany247•170
    @stephany247Posted 20 days ago

    Good job! You seem to have a good understanding of CSS grid, I just learnt a lot from viewing your code.

    0
  • Luis•250
    @luisv79Submitted 27 days ago
    What are you most proud of, and what would you do differently next time?

    I created the app by putting my skills in react.js and CSS into practice

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

    Having divided the app into components and using CSS styles in React.js, which is a bit different from plain HTML and CSS.

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

    Any constructive feedback is welcome.

    App summary results, React, CSS

    1
    stephany247•170
    @stephany247Posted 22 days ago

    I enjoyed looking through your project and wanted to share some feedback that I hope you’ll find helpful!

    • Desktop Design Consideration: I noticed that the project currently emphasizes mobile or tablet views but lacks a fully designed desktop layout. Expanding to include a desktop view would create a more comprehensive and responsive experience. This would allow users to enjoy an optimized layout across all device types, enhancing usability and visual appeal.

    • Component Modularity: I observed that some components feel a bit tightly coupled to specific tasks, and a few parts seem more complex than needed. It could be beneficial to consider refactoring with modularity in mind, aiming to make components reusable across the project. This way, the code becomes easier to maintain and adapt if you add new features or need similar structures elsewhere in the app.

    Overall, I can see the effort and thought put into this project, and I think refining these areas could make it even stronger. Great work!

    0
  • Davy•290
    @DavyZaneSubmitted about 1 month ago
    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•170
    @stephany247Posted about 1 month ago

    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!

    Marked as helpful
    0
  • stephany247•170
    @stephany247Posted about 1 month ago

    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•170
    @stephany247Posted about 1 month ago

    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•40
    @rodrigoo-alvesSubmitted about 1 month ago
    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

    3
    stephany247•170
    @stephany247Posted about 1 month ago

    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•170
    @stephany247Posted about 1 month ago

    • 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