Skip to content
OverviewSolutions
4
Comments
4
qutubahmed732
@qutubahmed732

All comments

  • Merouanos•60
    @MerouanosSubmitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    just aligments

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

    trying to copy the exact widths and heights of the design

    responsive recipe

    1
    qutubahmed732•60
    @qutubahmed732Posted 3 days ago

    Hey everyone! Just wanted to share a little review on the recipe page I created. I focused on keeping the layout clean and user-friendly, making it easy to follow the steps. Here’s a quick overview:

    Presentation: I organized the ingredients and instructions separately, so it’s simple for users to read through each section without getting overwhelmed. I might add a few icons or images alongside each step to make it feel even more engaging and visually interesting.

    Readability: I chose a clear font for easy reading, but I’m thinking about bumping up the font size for the instructions a little to make it even easier on the eyes.

    Images: I added some delicious-looking food photo to keep the page lively. I’m considering adding a subtle hover effect on the images for a touch of interactivity.

    Personal Touch: I’m thinking about adding a short intro for each recipe—maybe a fun fact or a little story about why I love it. I feel like this would make the page feel more personal and relatable.

    Mobile View: I’ve tested it on mobile, but I’d love some feedback on how it looks on smaller screens. I want it to be just as functional on phones since many people use their devices while cooking!

    I’d love any feedback or suggestions to make it even better. Thanks for taking a look! 😊

    0
  • qutubahmed732•60
    @qutubahmed732Posted 5 days ago

    Here’s feedback:

    1. Profile Appearance: The design and layout are attractive and user-friendly, making a good first impression.

    2.Content Clarity: The information is clear and concise, making it easy for users to understand.

    3.Engagement Features: Interactive features like bio links and social icons are well-placed, allowing easy connection.

    4.Suggestions: Colors and fonts could be a bit more vibrant, and the "About" section could have a more engaging, personal touch.

    0
  • qutubahmed732•60
    @qutubahmed732Posted 5 days ago

    Yes here some feedback on the solution: 1.Accessibillity: I have add some aria-label and role attribute that will be accessible and easy to use for the users.

    2.Sementic Markup: I use some sementic markup in this project as much as I could.

    3.Responsive Layout: It is also responsive on mobile and desktop as per requirments of project.

    4.Code Quality: Clear, readable code is essential for maintainability. Using proper indentation, meaningful variable names, and comments can make the code easier to understand for others or yourself in the future.

    Marked as helpful
    0
  • Hart Selwyn•50
    @hartselwynSubmitted 6 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that I could go through this challenge and build this project despite the fact that I haven't worked on any projects in a while.

    I will be using other frameworks like react, vue, angular, etc to enhance my knowledge of new technologies differently in the coming projects.

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

    I had forgotten how to center a div and get border-radius, but with the help of w3schools I was able to overcome these challenges

    Frontend Mentor | QR code component

    2
    qutubahmed732•60
    @qutubahmed732Posted 5 days ago

    To give high-quality, constructive feedback on a solution with these criteria, here’s how you might break down your evaluation:

    1. Semantic HTML

    • Check if semantic elements like <header>, <footer>, <main>, <section>, <nav>, <article>, and <aside> are used properly. These help screen readers and search engines understand the page structure.
    • Ensure buttons and links are used appropriately. If a button is doing navigation, it should be a link instead, while buttons should be used for actions.
    • If there’s a form, make sure the solution uses <label> tags associated with each input for accessibility.

    2. Accessibility

    • Alt attributes should be present and descriptive for all images.
    • Make sure color contrasts meet WCAG standards. Tools like Contrast Checker can help verify this.
    • Keyboard navigation: Test if all interactive elements are reachable and usable via keyboard, especially for screen reader compatibility.
    • ARIA attributes: If the project includes dynamic elements (like modals or carousels), ensure that ARIA attributes are properly used to inform screen readers about these components.

    3. Responsive Layout

    • Test the layout on a range of screen sizes: small screens (phones), medium screens (tablets), and large screens (desktops).
    • Breakpoint consistency: Check if content reflows gracefully without breaking or causing horizontal scroll on different screens.
    • Touch target size: Make sure buttons and interactive elements are large enough to be tapped easily on mobile devices.

    4. Code Quality

    • Look for consistent indentation and clear organization in the HTML, CSS, and JavaScript (or any scripting language used).
    • Naming conventions in classes and IDs should be consistent, meaningful, and easy to understand.
    • Evaluate if the solution is modular and reusable. For example, CSS classes or JavaScript functions should be created in a way that makes them easy to adapt and reuse.
    • Avoid repetition by ensuring that common styles are applied through classes instead of inline or repetitive code blocks.

    5. Design Consistency

    • Compare the final solution to the original design mockup to ensure visual fidelity. Look at elements like spacing, alignment, typography, and color use.
    • Font choices and sizes should match the design, and there should be consistency in styling across similar components.
    • Ensure attention to detail, especially with elements like hover effects, active states, and focus states, which add polish to the design.

    Additional Tips

    • Encourage continuous improvement by mentioning any areas where best practices or alternative approaches could benefit the solution.
    • Provide positive reinforcement for areas done well. Highlighting strengths can be just as helpful as constructive criticism.

    Using this framework to provide feedback will help guide the developer toward creating a polished, accessible, and maintainable solution.

    0