Skip to content
OverviewSolutions
6
Comments
17

Noemi Gali

@NomiDomiCopenhagen, Denmark280 points

Recovering impostor syndrome sufferer with a hunger for learning!

Latest solutions

Latest comments

  • Noemi Gali•280
    @NomiDomi

    Hey @cornthecob,

    Congrats on completing your second challenge! :)

    Here are some tips on my side:

    • avoid putting heights on your tags, classes etc. Let the height be adjusted automatically by the content inside
    • for a smooth transition from desktop to mobile avoid using pixels for most things. Here is a great tutorial that talks about the different types of units that you can use
    • use CSS variables for your font family, sizes, margins and paddings too, not just for your colors
    • give more generic names to your color custom properties. Instead of --VeryPaleBlue use --primary-clr. In case you decide to change your colors, your --VeryPaleBlue might have to be green or red and then your variable name will be very confusing
    • for easy access to your code consider putting your html and css files in a folder named src. Src stands for source and it is usually used to easily distinguish between the code and additional helper files. Also add all the images you use in your code in a folder named images or assets inside your src folder

    Hope this helps! Keep on coding! :)

  • Noemi Gali•280
    @NomiDomi

    Hey @4gotpwd,

    Really great job with picking your class names. Your html is general and easy to understand.

    For the css part I would encourage you to add not just the colors to your :root selector, but the font family, sizes, paddings, margins etc. Here is a great tutorial that explains why and how.

    I see you used different types of units which is great! If you want a better and smoother responsiveness, try focusing on using other units than pixels for margins, paddings and font sizes. You can see here what the best practices are.

    Overall great job! :) Hope this helps! Keep coding!!

    Marked as helpful
  • Noemi Gali•280
    @NomiDomi

    Hey @Bechara-Aad,

    First I'd like to congratulate you on completing your first challenge! :) Great job!

    You are completely right about the border not enclosing 100% the image. One way around this is to put a background-color: white in the same class where you set the border. In your case

    .profile {
  border: 0.3rem solid white;
  border-radius: 50%;
  position: relative;
  bottom: 1rem;
}

    becomes

    .profile {
  border: 0.3rem solid white;
  border-radius: 50%;
  position: relative;
  bottom: 1rem;
  background-color: white;
}

    This works great for this project, but sometimes it might not be sufficient. Read this for other methods of dealing with the issue.

    Now looking at your code, here are some additional tips on my side:

    • best practice is to use kebab case when naming your classes. So basically your class card__header should have been written like card-header
    • great job on not using divs everywhere. It's really great to see you picking things like <header class="card__header"> instead. However if you use html tags like this, there is no need to give them a class name same as the html tag. Just simply write <header> and put your css style on header instead of the class .card__header
    • even though I am happy to see you trying out other tags than div, the use of header and footer in this case could have been replaced with section. Headers and footers are usually part of a page (like in Word). They aren't really used for inside a card container like in this case
    • I see that you are having your styles divided between your html and css files. Best practice is to keep everything in one place (in the css file), so in your case move the style section from your html in your styles.css file.
    • for clean code, I would suggest you take a look at CSS variables. On big projects this is a must. :)
    • great use of the different type of units. Keep that up!

    Hope this helps! Again, great job and keep coding! :)

  • Noemi Gali•280
    @NomiDomi

    Hey @lucasweidas,

    You did an amazing job on this one! :) Good use of custom variables and the different type of units.

    I would encourage you to add also the font sizes and paddings in the :root selector for even cleaner code.

    Html wise, best practice is to use kebab case on all class names. I saw that some of your classes are named social__number whereas best would be to be written like social-number.

    I would also argue that you can rewrite this:

    <div class="social-info">
          <p class="social__number">80K</p>
          <p class="social__title">Followers</p>
</div>

    like this

    <div class="social-info">
          <p class="number">80K</p>
          <p class="title">Followers</p>
</div>

    It keeps your class names smaller and in big projects this can be very handy. :)

    Hope this helps! Keep on coding! :)

    Marked as helpful
  • Noemi Gali•280
    @NomiDomi

    Very well done. Great job! :)

  • Noemi Gali•280
    @NomiDomi

    Hey @diegop985,

    Really good job! It is very obvious that you've been looking into things.

    Good use of the different types of units and CSS selectors.

    Here are some tips on my side:

    • try to keep your class names even more generic. I can see that for the different type of cards your chosen names are card--orange, card--blue, card--green. Try using card-1, card-2, card-3 instead. The reason for this is because in a production environment maybe you change your mind and you choose completely different colors for your card. The orange card becomes pink, the blue card becomes purple and the green card becomes blue. You can see the confusion that might create. Now think of if you work in a team and someone else comes and looks at your code. They might go straight to your CSS and change things for your card--blue, but instead of changing the current blue card they will be changing the purple one.
    • I see you decided to used different type of name conventions for your class name: card--orange, card__icon. Best practice wise you should use the kebab case where you put only one dash - between your words. So if I were to rewrite your classes card--orange becomes card-orange and card__icon becomes card-icon.
    • it is amazing that you are using CSS variables and you take your colors from there. I would encourage you to do the same for your font family, sizes, weights etc.

    Here are some useful videos:

    Hope this helps! Keep coding! :)

    Marked as helpful
View more comments