Skip to content
Submitted about 3 years ago

responsive container using flex

Arnav Doley•25
@arnavdoley
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

this is my first project would love to hear suggestions to improve it

Community feedback

  • Jason Moody•300
    @MoodyJWPosted about 3 years ago

    Hi Arnav, great job on your first challenge!

    I'd suggest taking a look at your report as you have some HTML issues.

    • heading tags like <h1>, <h2>, etc should always appear in order. The reason for this is that it allows people using screen readers to more easily navigate the page. If you need to adjust the size of the heading, just use CSS

    • after your <body>, you should wrap content in a <main> tag. This is also mostly for accessibility reasons. You could swap your <div class="container">

    • <img> tags can only have widths in pixels when done inline, you can generally solve this by using a CSS class

    • on the page background image, you would probably have an easier time adding that image on the body in your CSS. Something like below would do the trick, but you might need to adjust if your other CSS interacts

    background: var(--pale-blue) url("../images/pattern-background-desktop.svg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    • another suggestion is to clean up your code a bit. Generally it's a good practice to avoid empty lines within your CSS class or randomly in your HTML. Clean, easily read code will help you get a job if you're trying to and it'll make people more likely to review your code here and elsewhere.

    You can use a code formatter if you code in an IDE like VSCode. A lot of people use one called Prettier, but there are many others. I'd also suggest looking into learning Sass, it's a CSS extension that has a lot of neat features; it's also a "superset" of CSS, which means any valid CSS will work in a Sass file. Kevin Powell has a YouTube video on how to get started with Sass that I found helpful.

    Anyway, that's probably enough for now. Good luck, hope some of this helps!

    Marked as helpful
    0
    Arnav Doley•25
    @arnavdoleyPosted about 3 years ago

    that's some great suggestions , I will look into making changes to the code and also to learn Sass.Thank you for helping me improve @MoodyJW

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord