Skip to content
OverviewSolutions
13
Comments
10
P
yele.m
@YelemyahM

All comments

  • Christian Reed•30
    @ReedorReedSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    How I found the solutions for the challenges i met when making this page

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

    Having the img to fit correct Googled a lot till I found out how to do it.

    Getting the table to look correct was a bit of a challenge. Google and ChatGPT helped a lot with this. The solution ChatGPT gave was incorrect, however it pointed me in the right direction to what I should Google to find the help I needed for the solution.

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

    I had issues getting the h1 in the header to fit in two lines some help to how I can manipulate the text to fit without inserting breaks in the html would be nice to know.

    Other than that I am not sure, all critique is welcome. As long as I can get better :-)

    Responsive solution for the recipe page using flexbox

    1
    yele.m•330
    @YelemyahMPosted 2 months ago

    Hi coder, congrats for succeed this challenge !

    I read that you struggle with getting the h1 in the header to fit in two lines, so I have a suggestion for you :

    • You can try to set a width to your element (i.e. : 300px).

    Hope it can be useful. Happy coding !

    Marked as helpful
    0
  • yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder ! Congrats for succeed this challenge !

    I have few suggestions which might interest you concerning HTML structure and semantics :

    • Your structure is well-organized, but semantic elements like <article>, <section>, or <main> could be used for better accessibility and SEO. For instance, the article content should be inside an <article> element.

    • The alt text of the images could be more descriptive for accessibility. For example, instead of “drawer”, use a more meaningful description of what the image represents.

    Hope it can be useful. Happy coding !

    Marked as helpful
    0
  • yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder ! You have done a great work !

    I have a little suggestion that might interest you.

    • Currently all images are loaded for all devices. To optimize loading speed, you can use <picture> tags to load images adapted to the device.
    <picture>
  <source srcset="assets/desktop/image-woman-in-videocall.jpg" media="(min-width: 768px)">
  <img src="assets/mobile/image-woman-in-videocall.jpg" alt="Woman in video call">
</picture>


Hope it can be useful. Happy coding !
    0
  • Matias Altier•130
    @matiasaltierSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I didn't have many complications doing this exercise but it was good to put the grid into practice. I would like if you could help me improve the semantics and optimize my code.

    Testimonials Grid Section - BEM

    1
    yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder ! Well done for this challenge

    Allow me to give you a feedback :

    • Your HTML structure is clear and uses appropriate elements like <section>, <article>, and <div>. This is great for readability and SEO.

    • However, you should consider using <h3> tags for your subheadings .user__name, as the current use of multiple <h2> tags inside the testimonials can confuse screen readers by implying that each name is a major heading.

    Hope it can be helpful ! Happy coding !

    Marked as helpful
    0
  • yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder ! Well done for this challenge completed !

    I have a little suggestion :

    • Consider wrapping the entire feature cards inside a <section> with a meaningful aria-label to further improve the accessibility and semantic value.
    <section aria-label="Key Features">
  <div class="feats"> ... </div>
</section>

    I hope it's helpful. Happy coding !

    0
  • yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder, well done for completed this challenge !

    I have a suggestion for you :

    • The <button> element contains an image without alt text, which is not ideal for accessibility. Consider adding alt text like "Cart icon" to provide context for screen readers.

    Hope It can be useful. Have a great code !

    0
  • yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder ! Well done for this challenge !

    I have a little suggestion for you :

    • Horizontal Centering of the <main> Element: your main element has a maximum width set to 45rem. You might want to add margin: 0 auto; to ensure it is centered horizontally.

    Hope it can be helpful. Have a great code !

    0
  • yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder ! Congrats for having completed this challenge !

    I have a little suggestion which might interest you :

    • You can add one line in your CSS for a more smooth hover effect on button :
    .boxcard .box-links button:hover{
    background-color: hsl(75, 94%, 57%);
    color: black;
    transition: 0.3s; 
}

    This adds a little delay on the hover effect and make it more user-friendly.

    I hope you can find it helpful. Have a great code !

    0
  • Emmanuel•40
    @pouigemaSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Je suis Heureux d'avoir terminer le mon deuxième projet. j'espère continuer sur cette lancer

    blog-preview-card-main

    1
    yele.m•330
    @YelemyahMPosted 2 months ago

    Hello coder ! Well done, your work is geat !

    I have a suggestion that might interest you.

    • Right now, you are using margin properties margin-left: 35% and margin-top: 15% to position the .carrecontainer, which is not optimal for responsive design. On smaller screens or different viewports, this can lead to misalignment or improper spacing.

    • Instead, you can use Flexbox to center the .carre container both horizontally and vertically, which will ensure better responsiveness and centering across all devices.

    /* Apply Flexbox to body for centering the main content */
body {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 100vh; /* Ensures body takes full viewport height */
    margin: 0; /* Remove default margin */
    background-color: #F4D04E; /* Retain background color */
}

.carre {
    width: 100%;
    max-width: 400px; /* Set a max-width for better readability on large screens */
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid black;
    box-shadow: 10px 5px;
    margin: 20px; /* Adds some spacing around the container */
}

    I hope it's can help. Have a great code !

    Marked as helpful
    0
  • yele.m•330
    @YelemyahMPosted 2 months ago

    Hello Coder ! Good Job on completing the challenge !

    I have a suggestion for about your code :

    • In your css file, I’ve noticed you’re using width: 100vw; and height: 100vh; to set the width and height of the body. While this works on many devices, it can cause issues on mobile browsers, where the viewport height can include parts of the UI like the address or navigation bars. This could lead to unwanted scrolling or layout shifts when those bars appear or disappear.

    • Consider using min-height: 100vh; instead of height: 100vh; to ensure the layout adapts more smoothly across different devices without breaking when these UI elements are present.

    I hope you find it useful ! Good Luck and happy coding !

    0