Skip to content
OverviewSolutions
9
Comments
9
jen067
@jen067

All comments

  • jen067•190
    @jen067Posted about 2 months ago

    The code is clean, but there are a few areas that can be improved

    1. Remove height: auto because when I enter the page after a successful authentication, the container's height is insufficient, causing a vertical scrollbar to appear. I tried removing height: auto, and the original layout remains the same without the scrollbar.

    2. When checking for the presence of error messages via the button, you could use add and remove instead of toggle. I believe the error message should persist when the input format is incorrect, but toggle will cause the error message to disappear if I press the button an even number of times, even when the input is still incorrect.

    3. Perhaps you could add code to clear the input fields after a successful validation, instead of keeping the previous data in the fields.

    Marked as helpful
    0
  • Nikita Vologdin•470
    @NikitaVologdinSubmitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    I decided to remove padding bottom from article for now. because have not found way how to match "share arrow icon" with block which appears after click on button and align that icon with content in appearing block. Unfortunately if add same padding-bottom value to the block in creates disproportional look for content vertical alignment.

    Article-preview-component

    1
    jen067•190
    @jen067Posted about 2 months ago

    Overall, it's excellent. It seamlessly switches between different screen devices without any errors. Here are a few areas I noticed that could be improved:

    1. Perhaps you could add more padding to the button, as the icon area currently seems a bit too large, making the icon appear off-center within the container.
    2. It might be due to the transition setting, but on mobile devices, when the text "share" disappears, you can clearly see it gradually fading out instead of disappearing instantly. This might be something that can be improved.
    Marked as helpful
    0
  • jen067•190
    @jen067Posted 2 months ago

    Great Job !!

    0
  • jen067•190
    @jen067Posted 2 months ago
    1. The footer content easily overlaps with the last card on mobile.
    2. Only the top-left and top-right corners of each card's colored area should have rounded corners, while the rest should remain straight.
    3. You can use box-shadow: 0 y-axis offset blur to create the shadow effect initially requested.
    4. The card's title text should have a font-weight set.
    5. Mobile sizes are typically below 768px, but in your case, the layout switches to mobile around a screen width of 980px.

    Another interesting thing is that when the screen size is reduced to below 300px, it applies the desktop styles again, which is also something that can be adjusted

    Marked as helpful
    0
  • jen067•190
    @jen067Posted 2 months ago

    1. In terms of CSS, it might be helpful to use a CSS reset more frequently, followed by the :root selector, and then proceed with other style settings.

    2. For using font-family, consider using CSS variables, like: --ff-montserrat: 'Montserrat', sans-serif; --ff-fraunces: 'Fraunces', serif;

    3. gap: 1rem; only needs a single semicolon.

    4. Good use of flex-basis helped me solve my layout problems.

    0
  • jen067•190
    @jen067Posted 2 months ago
    1. You can add padding-left to the li elements to increase the spacing between the list-style and the text.
    2. On mobile or smaller screens, according to the illustration, the content should be aligned to the top, bottom, and edges, and the border-radius should be removed.
    3. There should be a divider between "Ingredient" and "Instruction" to distinguish the sections, which can be achieved by using pseudo-elements in the container.
    4. You can add a CSS reset to help with the layout.
    0
  • jen067•190
    @jen067Posted 3 months ago

    Pros: The overall design is clean and well-organized, and the cursor icon on hover is very cute.

    Areas for Improvement:

    The background color set for @media screen and (max-width: 375px) is somewhat abrupt; using a darker color might enhance consistency. The top and bottom of the cards tend to stick to the edges of the page. Consider adding padding to the body to avoid this issue.

    For me, I would set text-align: center on <p class="card-header--role">"Front-end developer and avid reader."</p> to ensure that the text remains centered when the screen is resized and the line breaks.

    That's just my solution to this project; your design is good enough!

    0
  • jen067•190
    @jen067Posted 3 months ago

    • Did not write in Markdown. Writing in Markdown would help clearly identify any issues and the process of styling.

    • HTML

    1. Add Classes to Tags to Differentiate Elements
    2. Since the styles of p tags differ, adding a class can effectively apply paragraph styles to individual sections.
    3. Avoid Overusing ID: When there are many image elements, using id="image" is not a good choice. Switching to classes would allow for consistent styling across similar tags.
    4. Footer Setup: In my opinion, there are too many wrapping layers. Instead of using <div id="avname"><h4>greg hooper</h4></div>, it could be simplified to <h4>greg hooper</h4> with a class added to the h4.
    • CSS
    1. font-family: 'figtree'; should be changed to 'Figtree', sans-serif;.
    2. Use rem instead of width, padding, and margin sizes to adjust according to the font size when the screen scales.
    3. For the footer, justify-content: flex-start; is the default style and does not need to be set additionally.
    0
  • jen067•190
    @jen067Posted 3 months ago

    The implementation of CSS variables is truly commendable, as it enhances the maintainability and flexibility of the code. Additionally, the overall structure of the code is remarkably concise, which not only improves readability but also ensures that the design adheres to the principles of responsive web design. This adherence guarantees that the layout remains intact and visually appealing across various screen sizes and devices, preventing any issues related to misalignment or distortion. Overall, the combination of these practices contributes to a robust and user-friendly web experience.

    Marked as helpful
    0