Skip to content
OverviewSolutions
17
Comments
4
MiloosN5
@MiloosN5

All comments

  • P
    David Sibrian•350
    @armson45
    What are you most proud of, and what would you do differently next time?

    I think the BEM naming I used it's pretty good so but still not perfect. From the design It looks pretty similar for me :D

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

    I had troubles with the Nutrition table at the end, I've always have problems with tables. Also when I tried to change tha mark of the list items.

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

    Everything you can :)

    Recipe Page using BEM

    #bem
    1
    MiloosN5•190
    @MiloosN5

    What issues are you encountering with tables and markers? The main problem I notice is with paddings/margins and possibly some sizes. For example, the main title seems smaller in your solution —at least based on a comparison with the solution design.

  • Gurbala Laurent•110
    @laurentGurbala
    What are you most proud of, and what would you do differently next time?

    I am particularly proud of having implemented a mobile-first approach to manage the responsiveness of the site. This allowed me to ensure a good user experience on mobile while remaining flexible for desktop versions. In addition, the management of hover and focus states for interactive elements proved to be fluid and accessible.

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

    One of the biggest challenges I faced was managing the Inter variable font. Integrating a variable font and ensuring it worked correctly across browsers required me to understand how the font's variation axes (like weight and slant) worked. After doing some research and testing different approaches, I decided to use the static version of the font to ensure maximum compatibility.

    Social links profile

    #bem
    2
    MiloosN5•190
    @MiloosN5

    Good job! However, it seems that something is either oversized or undersized. From what I can see, the main heading (Jessica Randall) seems to be the issue, but there may also be other elements, such as padding, that need adjustment.

  • P
    David Sibrian•350
    @armson45
    What are you most proud of, and what would you do differently next time?

    I'm proud of solving some bugs without help, just with my own knowledge...Of course is not the best code but I guess is a good one.

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

    I was trying to save some lines and I remember something about 'Nesting' with this character '&'. I find it very helpful.

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

    I'm still trying to improve the modularization, class naming and so.

    Blog preview card using grid

    #bem
    1
    MiloosN5•190
    @MiloosN5

    I think you are on the right track! Just a few recommends that can help you improve:

    1. Use SASS/SCSS instead of CSS – SASS is a preprocessor scripting language that extends the capabilities of CSS.(source) However, browsers can't understand SASS directly, so it needs to be compiled into CSS.(source) One benefit of using SASS is that you can organize your code better, such as by grouping all article-related styles into a common wrapper.

      • when you use CSS:
      .article__type {
    background-color: var(--yellow);
    font-family: 'Figtree', sans-serif;
    ...
}

.article__title {
    font-weight: 800;
    &:hover {
        color: var(--yellow);
        cursor: pointer;
    }
}

.article__text {
    color: var(--gray-500);
    line-height: 150%;
}
      • with SASS/SCSS:
      .article {
    &__type {
        background-color: var(--yellow);
        font-family: 'Figtree', sans-serif;
        ...
    }

    &__title {
        font-weight: 800;
        &:hover {
            color: var(--yellow);
            cursor: pointer;
        }
    }

    &__text {
        color: var(--gray-500);
        line-height: 150%;
    }
}

    2. Enhance your semantic HTML – I’ve noticed that you're already using some semantic elements like <section> and <article>. However, here are a few additional recommendations:

      • put time inside <time>
      <time dateTime='2023-09-23'>Published 23 Sep 2023
      • put your image inside <figure>
      <figure className='card__graphics'>
<img />
</figure>
      • put someone's (e.g. author) info inside <address>
      <address className='card__author'>
    <img />
    <span className='card__author-name'>...</span>
</address>
  • P
    David Sibrian•350
    @armson45
    What are you most proud of, and what would you do differently next time?

    I'm excited to have moved out the basics. While this project wasn't overly challenging, I'm proud of my growth as a developer, learning to rely on documentation and problem-solving skills though I know I can do it better, use better naming of classes or when structuring the html.

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

    I know most of the HTML tags but stills quite difficult when it comes to structure...What's the better way? this should go here or there? How should I name this class?

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

    Structure of HTML tags and the use of BEM.

    QR component

    #bem
    1
    MiloosN5•190
    @MiloosN5

    I like the way you structure your website using HTML code. My suggestion for your future work is to think of your code as a collection of smaller parts. In other words, try to understand the connections between elements. This approach can be really helpful in the future when you use frameworks like React, Vue, or Angular. Simplifying your code can improve reusability and optimization, as well as make it easier to manipulate.

    Marked as helpful