HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Congratulations on completing your first challenge! You have done a great job and I can see you are on the right track.

  I have some suggestions about your code that might interest you.

  Center

  • With margins you won't be able to center it correctly, for example, on mobile devices, there will be a large space above the component due to the use of "margin-top: 20vh".

    This photo is how your solution looks on a mobile device: screencapture

  • Centering an element with position: absolute would make your element behave strangely on some screen sizes, "there's a chance the content will grow to overflow the parent".

  • The best ways to align elements in a container is to use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

  Box

  • The box-sizing property in CSS is used to tell the browser how to calculate the total width and height of an element. By default, the box-sizing of an element is set to content-box, which means that the width and height properties are measured including only the content, but not the padding or border.

    Using content-box can be beneficial in some cases. However, it can also be problematic in certain situations where elements need to be sized accurately.

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  2

  ---

  

  Welder Ressutti•30

  @welderessuttiPosted almost 2 years ago

  @MelvinAguilar

  Thank you for your feedback!! I'll test these suggestions.

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  There is no need to give .container a height value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Welder Ressutti•30

  @welderessuttiPosted almost 2 years ago

  @Hassiai

  I'm so grateful for all of your suggestions. You all are amazing!!

  This website is worth more than all the courses I have done.

  Thank you very much for helping with my HTML & CSS knowledge, I'm really happy.

  Best wishes to you all!!

  1
• 

  Alamin•2,000

  @CodeWithAlaminPosted almost 2 years ago

  Hi Welder Ressutti👋 Great job on completing this challenge! 🥳

  I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

  • In the HTML, the developer is using .attribution class for the text at the bottom of the page. It would be better to use semantic HTML elements like footer instead of a class to describe the text. Also the # in the <a> tag in the .attribution class should be replaced by a proper URL

  <footer>
      <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="http://welderressutti.com">Welder Ressutti</a>.</p>
  </footer>
  

  • Separate HTML and CSS: You are using CSS inside the HTML file, which can make it harder to maintain the code and update the design. You could separate the HTML and CSS, by creating a separate .css file and link it on the HTML using the link tag. This would allow for better organization and make it easier to maintain the code.

  Overall, this is a very well done solution to the challenge. Great job!

  Hope I'm Helpful! 👍

  Keep up the good work! 😊❤️

  Marked as helpful

  1

  ---

  

  Welder Ressutti•30

  @welderessuttiPosted almost 2 years ago

  @CodePapa360

  Thank you for your feedback!! I'll test these suggestions.

  1