Skip to content
OverviewSolutions
5
Comments
5
jamurai77
@jamurai77

All comments

  • jamurai77•110
    @jamurai77Posted 17 days ago

    This looks good. It transitions very cleanly because you used absolute units to set width and height properties. While I actually appreciate that it seems like its a bit frowned upon when making sure pages are really responsive. I'm still a noob though so maybe with a page this simple its not an issue?

    0
  • P
    Chanokthorn Uerpairojkit•190
    @ChanokthornSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    • Would plan more carefully on how to arrange or group components together, in this instance, the hero image on top should not belong as other elements, which is noticed only when supporting mobile screen.

    • Learned more in-depth styling of table and ordered/unordered lists, including first/last/nth elements.

    What challenges did you encounter, and how did you overcome them?
    • Styling of unordered list marker margin was confusing for a while until realizing that we can utilize padding left of the <p> tag inside the list item.
    • Dividers can be confusing for the first time, overcame with usage of nth-child attributes.
    What specific areas of your project would you like help with?

    Any feedbacks are very appreciated, thank you.

    Using @media query and nth-child for specific design challenges

    1
    jamurai77•110
    @jamurai77Posted 20 days ago

    Looks good to me. I had much the same experience as far as the challenges mentioned in your process. Only thing I did notice though was that between the large screen size and the mobile size the content did not look that great, portions were not appearing on the screen. So the responsiveness could be improved for medium-sized screens.

    Marked as helpful
    1
  • jamurai77•110
    @jamurai77Posted 29 days ago

    Looks okay at full screen resolution but the interactive elements don't work like they're supposed to. The buttons should change to the green color with the black text. Really doesn't look good once you start changing the screen size, doesn't hold its shape at all. It thins out too much before 800px and then fills the entire width of the screen at about 775px. So the responsive design needs a lot of rethink.

    Marked as helpful
    0
  • jamurai77•110
    @jamurai77Posted about 1 month ago

    Live webpage looks good but doesn't scale responsively like it's supposed to. I used a media query to achieve that, as well as the clamp function for the text. As far as the code it's frowned upon to include all your styles in the index.html file, you should create a separate index.css file to keep things neat and easily accessible.

    Marked as helpful
    0
  • jamurai77•110
    @jamurai77Posted about 2 months ago

    So the biggest problem you have I think is that you used a percentage for the width property of your "content" div. So when you make the screen size smaller that div doesn't hold it's shape and the whole thing gets thin, tall, and distorted. The assignment was to make the card retain its size and shape at different screen-sizes. So you need to fix that in your stylesheet. Other than that I'm sure the accessibility report was bad because you need to use more semantic html instead of generic divs. Use header, main, and footer elements to make it easier for people using screen-readers and such.

    0