Skip to content
OverviewSolutions
9
Comments
13
Chrystiana Penalber
@chryspenalber

All comments

  • Chrystiana Penalber•120
    @chryspenalber

    You might consider adding margin to the body and applying the fonts recommended in the challenge to better match the expected design.

  • Chrystiana Penalber•120
    @chryspenalber

    I really liked your solution! I’d just encourage you to add a ReadMe to explain your project.

  • P
    Alexander3717•310
    @Alexander3717
    What challenges did you encounter, and how did you overcome them?

    There were many minor challenges but the toughest one was making the share button behave the way I intended. Here's the logic I wanted to achieve:

    • On desktop, show the share options toast when hovering over share button and change the button color
    • When no longer hovering over either, hide the toast and reset the button color
    • After clicking the button, show the toast and "lock" so it stays open even when the mouse moves away
    • Allow the user to close the toast either by clicking the button again or anywhere else on the page
    • Use subtle fade transitions for all visual changes

    I implemented this behavior by dynamically adding and removing classes like .hidden and .hovering on the button and toast based on user interactions. I also used the aria-pressed attribute to track whether the button was currently active.

    For accessibility I also needed to give the toast display: none when it's hidden because with just zero opacity it is still clickable. But I couldn't fade the toast by giving it display: none directly because the display property cannot be animated. I solved this by listening to the transitionend event to set display: none on the toast right after it finished fading out.

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

    If you know a better way to handle the share button logic or have tips to make my code cleaner and more professional please feel free to share them. This is my first solution using JavaScript and I'll appreciate any feedback that helps me learn.

    Also, if you notice anything wrong with the page layout or responsiveness, please don't hesitate to comment.

    Article preview component made with flexbox and vanilla JavaScript

    #sass/scss
    1
    Chrystiana Penalber•120
    @chryspenalber

    Your solution is excellent. I’ll use it as a reference and source of inspiration to enhance my own work. Well done!

  • Chrystiana Penalber•120
    @chryspenalber

    I really liked your solution. It is responsive and it looks very similar to the original version. Congratulations!

  • PresidentTree94•230
    @PresidentTree94
    What are you most proud of, and what would you do differently next time?

    I simply followed the original project and coded the solution with HTML and CSS, but I also added a Dark Mode function in Javascript. Next time, I would like to try it in other frontend languages like ReactJS.

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

    Like the last project in the unit, I did not have the Figma to reference so it was a lot of guessing and checking to get it to match the challenge as close as possible. So far, this one was the most challenging to match.

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

    I am still learning the other frontend languages, such as ReactJS, so any advice involving them would be helpful. A React extension may also be included on GitHub.

    Testimonials Grid Section (with Javascript Dark Mode)

    1
    Chrystiana Penalber•120
    @chryspenalber

    I really like your solution for smaller screens.

  • Chrystiana Penalber•120
    @chryspenalber

    React has been tagged, however, it doesn't look like it has been used.

    Responsive Design Considerations:

    The use of grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); ensures a flexible layout that adapts well to different screen sizes. The @media screen and (min-width: 568px) breakpoint optimizes the layout for larger screens.

    Consistent Naming Conventions:

    The BEM (Block-Element-Modifier) methodology is used effectively (.container__cards, .card--supervisor), making it easy to understand and modify styles.

  • Chanokthorn Uerpairojkit•190
    @Chanokthorn
    What are you most proud of, and what would you do differently next time?
    • Handling responsive layout on initial steps can help with managing styling in the long run.
    • Defining which component are similar between all screens helps with grouping components together for reusability.
    What specific areas of your project would you like help with?

    I'm curious how we usually handle sizing in these scenarios:

    • Mobile: It appears that size of image and card information determines the size of the card.
    • Desktop: The size of card information should determine the size of card, but having child component determine size of parent seems like a complex practice, what's the appropriate approach?

    Responsive design utilizing grid and flex

    1
    Chrystiana Penalber•120
    @chryspenalber

    I would suggest you to use flexbox instead of grid template in this case.

  • Chrystiana Penalber•120
    @chryspenalber

    Strengths:

    • Good use of Bootstrap:

    • Well-structured HTML:

      • The markup is clear, easy to follow, and well-organized.

    • Responsive Design Considerations:

      • The @media query effectively handles the display of elements based on screen size, showing a desktop view or mobile view as appropriate.

    • Nice Styling:

      • Custom CSS works well with Bootstrap, especially the hover and active states on the "Add to Cart" button, which adds interactivity.

    Areas for Improvement:

    1. Incorrect Placement of <main> Tag

    • The <main> tag is inside the <head>, but it should be inside the <body>.

    2. Incorrect Custom Font Name

    • There is a typo in the custom font names. "CostumFontBold" and "CostumFont" should be corrected to "CustomFontBold" and "CustomFont".
    • Ensure that the font files exist in the specified paths.

    3. Overuse of Inline Styles

    • There are many inline styles used throughout the HTML (style="..."), which can make the code harder to maintain.
    • Move the styles to a separate CSS file or place them within the `` tag, but it should be a <button> element since it is an interactive control.

    Summary

    Your code is generally well-structured and follows good practices for layout and design. With some minor adjustments to the placement of tags, font usage, and inline styling, the code will be much more maintainable and accessible.

  • Chrystiana Penalber•120
    @chryspenalber

    Suggestions for Improvement

    🔹 Avoid margin-left: -15px; in lists

    • Adjust spacing using padding instead of negative values to improve readability and prevent unexpected shifts.

    🔹 Avoid margin-bottom: -4px; on the image in mobile view

    • Using display: block; and vertical-align: middle; could be a more reliable solution for proper alignment.

    Overall, your CSS is well-structured! These improvements can help make your code cleaner, more accessible, and efficient.

  • Chrystiana Penalber•120
    @chryspenalber

    Suggestions for Improvement

    1. Improve the .recipe width for larger screens

      • width: 50% might be too restrictive on large screens. Consider using max-width instead: 
        .recipe {
    width: 90%;
    max-width: 600px;
}

    2. Make images fully responsive

      • Add height: auto; to .recipeImage to maintain aspect ratio properly: 
        .recipeImage {
    width: 100%;
    height: auto;
    border-radius: 20px;
}
    Marked as helpful
  • Chrystiana Penalber•120
    @chryspenalber

    Suggestions for Improvements

    1. Remove flex-direction: column; from .info

      • The .info class uses display: block;, so flex-direction: column; has no effect. If you want to keep it as a flexbox, change it to display: flex;.

    2. Add box-sizing: border-box; to body

      • This prevents issues with padding and width. Simply add this at the beginning of the CSS: 
        * {
    box-sizing: border-box;
}

    3. Improve button responsiveness

      • On mobile, the button may become too large. Use width: 100%; instead of a fixed value. 
        button {
    width: 100%;
    max-width: 300px;
}
  • Chrystiana Penalber•120
    @chryspenalber

    Gostei da solução criada, Rodrigo.

    Recentemente, me ensinaram sobre a função clamp() para responsividade na tipografia. Vale a pena dar uma olhada e conhecer mais — seu código ficará mais clean.

    Talvez tenha sido uma opção sua, mas senti falta da sombra aumentar com o hover.

  • Chrystiana Penalber•120
    @chryspenalber

    I liked your solution; it adapted well to both larger and smaller screens.