HTML and responsive CSS with a mobile 1st approach

Community feedback

• 

  P

  Noemi Gali•280

  @NomiDomiPosted almost 3 years ago

  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! :)

  0