Skip to content
OverviewSolutions
24
Comments
11

Gareth

@Gareth-Moore410 points

I am looking to start a career in web development!

Latest solutions

View more solutions

Latest comments

  • Wina•90
    @devWina
    What challenges did you encounter, and how did you overcome them?

    making it responsive was quite interesting(not funny at all), only cause I haven't gotten a hang of media queries and flexbox other than that, it was pretty good😊.

    Stats preview card

    2
    Gareth•410
    @Gareth-Moore

    Well done Matey! Good practice I bet.

    If I were to nitpick I'd offer the following suggestions:

    1. You've used incredibly small font sizes (10px). Consider that you should use 16px as you're smallest size for normal content. (a copyright or T&C could be smaller for example).

    2. You've used hard widths for many things like your heading and paragraph elements. You can instead set a max-width and allow them to grow into their space but be limited to a certain width. To make sure you have space around the element put padding on the parent element. E.g.

    <div style="padding: 1rem">
<h1 style="width: 100%">Hello</h1>
<p style="width:100%">It's a me, Mario!</p>
</div>

    Note: block level elements have width: 100% by default (like h1 and p).

    In the above, the h1 and p elements take up all the space except for 1rem on the left and 1rem on the right. Making them fit in nice and snug.

    1. The breakpoint for the larger screen-size is too early and so you have a container that is breaking out of the viewport/screen. Consider putting the breakpoint later, at about 800px. Then for the mobile view, give the container a max-width: 380px (or about there) and margin-inline: auto (same as margin-left: auto & margin-right: auto) to center it. There will be empty space around the container at medium screen sizes but it's way better than having the container outside the viewable area.

    2. This is a bit more complicated but use padding over margin for spacing elements. The reason is that margins don't have background colours, you can only make changes to the content box + padding, and margins collapse on each other and you might be scratching your head as to why a margin is not showing up even though it's set, that is because if there is a top margin, it will collapse with margin above it. (2 touching vertical margins will collapse on each other). Prioritize using flex/grid gap for spacing, then padding, then positioning (top, left, right, bottom, inset etc) and lastly (if you have to) margins. It will save you a good amount of heartache.

    So, you're main container has a width: 70%. You can get a much better result by setting a max-width: 380px (or similar value) and setting it's margin to 1rem/16px or setting body { padding: 1rem }. In this particular case I'd set the margin on the .container because you may not want padding through the entire body, say if you had a banner going from left to right, it would look stupid with padding on either side.

    Anyway, hope that wasn't too much. Best of luck!

  • Wina•90
    @devWina
    What challenges did you encounter, and how did you overcome them?

    making it responsive was quite interesting(not funny at all), only cause I haven't gotten a hang of media queries and flexbox other than that, it was pretty good😊.

    Stats preview card

    2
    Gareth•410
    @Gareth-Moore

    Well done Matey! Good practice I bet.

    If I were to nitpick I'd offer the following suggestions:

    1. You've used incredibly small font sizes (10px). Consider that you should use 16px as you're smallest size for normal content. (a copyright or T&C could be smaller for example).

    2. You've used hard widths for many things like your heading and paragraph elements. You can instead set a max-width and allow them to grow into their space but be limited to a certain width. To make sure you have space around the element put padding on the parent element. E.g.

    <div style="padding: 1rem">
<h1 style="width: 100%">Hello</h1>
<p style="width:100%">It's a me, Mario!</p>
</div>

    Note: block level elements have width: 100% by default (like h1 and p).

    In the above, the h1 and p elements take up all the space except for 1rem on the left and 1rem on the right. Making them fit in nice and snug.

    1. The breakpoint for the larger screen-size is too early and so you have a container that is breaking out of the viewport/screen. Consider putting the breakpoint later, at about 800px. Then for the mobile view, give the container a max-width: 380px (or about there) and margin-inline: auto (same as margin-left: auto & margin-right: auto) to center it. There will be empty space around the container at medium screen sizes but it's way better than having the container outside the viewable area.

    2. This is a bit more complicated but use padding over margin for spacing elements. The reason is that margins don't have background colours, you can only make changes to the content box + padding, and margins collapse on each other and you might be scratching your head as to why a margin is not showing up even though it's set, that is because if there is a top margin, it will collapse with margin above it. Prioritize using flex/grid gap for spacing, then padding, then positioning (top, left, right, bottom, inset etc) and lastly (if you have to) margins. It will save you a good amount of heartache.

    So, you're main container has a width: 70%. You can get a much better result by setting a max-width: 380px (or similar value) and setting it's margin to 1rem/16px or setting body { padding: 1rem }. In this particular case I'd set the margin on the .container because you may not want padding through the entire body, say if you had a banner going from left to right, it would look stupid with padding on either side.

    Anyway, hope that wasn't too much. Best of luck!

  • Gareth•410
    @Gareth-Moore

    Can anyone help with the html issues related to using font awesome. I can't find a solution anywhere... TT

  • Gareth•410
    @Gareth-Moore

    not sure about that preview... go look at the site. It's better than the preview. This is the second time this has happened. Does anyone know what's going on with the preview? Or is it just me... TT

  • Gareth•410
    @Gareth-Moore

    Also the preview is bugged. If you visit the live server it looks nothing like the preview image. Unfortunate but hey who can argue with computers...

  • Gareth•410
    @Gareth-Moore

    hey SpiderMonkey!

    I have a few things for you that you could take a look at when you have a moment.

    1. HTML semantics - Your project has a few HTML issues and they are all to do with semantics. I suggest further reading about your use of semantic tags. For instance your main wrapper <div> could be a <main> tag. This let's users know that the card is the main body of the website with all the important information. You use <div> for just about everything which isn't the greatest habit in the world. For instance you could have gone:
    <body>
   <main class="card-container">
      <ul>
         <li class="card-item">
            content
          </li>
          <li class="card-item">
            content
          </li>
          <li class="card-item">
            content
          </li>
      </ul>
   </main>
</body>

    1. You set the width of your main wrapper to a fixed width and so when you narrow the viewport the card overflows the screen and hides a lot of the content. Using a responsive unit is preferable like %.

    2. Using flex-box on each item would help because you can force the button to the end of the box so it doesn't move around and you resize the viewport. Using align-self: flex-end; on the button would do this.

    3. Your card max-width is too wide and touches the sides of the viewport. Consider using this approach. Set a responsive width first and then a static maximum width second. This would look like:

    .card-container {
   width: 80%;
   max-width: 700px;
}
    1. Your card items containers are being sized with the <div>'s content and padding. Another, and more effective way (as your card items have different sizes at certain viewport widths) is to apply a height to the parent container (the card container) and then apply flex-grow: 1; to the individual card items. That way they all stay the same height as their height is dependent on the parent container and not the content inside the item.

    I hope that all made sense :) Best of luck SpiderMonkey and well done on completing the challenge!

    Gareth

    Marked as helpful
View more comments