html/css and i use rems to position elements

Community feedback

• 

  P

  Steven Stroud•11,890

  @Stroudy

  Posted 10 months ago

  Hello again, Fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

  • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

  • Your heading elements <h5><h2>, Heading elements should be in sequentially-descending order (e.g., <h1>, <h2>, <h3>) to create a clear content structure, improving accessibility and SEO. Skipping levels or using them out of order can confuse screen readers, affect search engine rankings, and make your content harder to understand.

  • Line height is usually unitless to scale proportionally with the font size, keeping text readable across different devices. Best practice is to use a unitless value like 1.5 for flexibility. Avoid using fixed units like px or %, as they don't adapt well to changes in font size or layout.

  • Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

  • These <div> should really have semantic tags like headings (<h1> to <h6>) and paragraphs (<p>) convey structure and meaning to content, improving accessibility, SEO, and readability by helping search engines and screen readers interpret the content.

          <div class="title">
            Learning
          </div>
  

  I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

  02

  Marked as helpful
• 

  P

  David Blackman•140

  @defenstration

  Posted 10 months ago

  Your preview card looks pretty good. There are some small sizing differences, but overall it's close.

  There are some things in the code that you might want to look at.

  First, you want to get used to dropping your styling into a css file. It just makes it easier to review your code.

  It's awesome that you are focusing on using reactive units! I have not seen them used the way that you are using them. In my understanding the typical rem is 16px. When you use tenths of an rem you get some strange fractions. .1rem is 1.6px. I don't know what kind of effect that has, but I have always used eights to do rem, where .125rem = 2px. Maybe someone on here with more knowledge can speak to the effects.

  There are also some semantic HTML elements that I would look at. I use headings like the contents section in a book. H1 as the book title (this is also what screen readers look for to start the page), with h2 being the next level (sections) then h3 next (chapters) and so on. I'm still tweaking how I do this, but starting to think about them that way helped me start organizing my thought better about building.

  I hope this helps. Stay awesome!

  00

  Marked as helpful
• 

  Saleem Abdussalam•30

  @Ethical-Saleem

  Posted 10 months ago

  Kudo to a job weel done. You could try improving on the line-height of the description to make it look closer to that in the design

  00