block preview site made with html and css

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  The most important issues that need fixing first in this are all related to html.

  As others have said you are misusing heading elements. This card should only have one heading in it.

  That heading will need a link inside it otherwise people would never be able to access this blog, making the whole component worthless.

  Look up and when to write alt text on images.

  Marked as helpful

  0

  ---

  

  mshah007•20

  @mshah007Posted about 2 months ago

  @grace-snow Do you mean we have a choice on wther or not to put alt? I thought there always had to be an alt?

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @mshah007 the attribute must be present but it shouldn't always have a value.

  0
• 

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  I know you asked Grace for feedback but thought I would give you my feedback to, Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

  • Your heading elements <h3><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.

          <h3 class="highlighted">Learning</h3>
          <h2 class="publish-date">Published 21 Dec 2023</h2>
  

  • Here you have a main and a section doing the same job, You can remove the section as it is serving no purpose,

      <main class="container">
        <section class="card">
        </section>
      </main>
  

  • Using font-display: swap in your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.

  • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

  I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @Stroudy I disagree with the point about main and section.

  Main is a page template level element. It's the page landmark for this component demo page and should be there.

  The card is the component and that is correctly nested inside the landmark. That's a good thing.

  (The rest of the feedback is great!)

  Marked as helpful

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @grace-snow,

  So, if I understand correctly, you're saying that both the <main> and <section> elements are used correctly from a semantic perspective, even though they both contain the same elements. The <main> serves as the page-level landmark, while the <section> provides proper grouping and organization within that structure. This ensures both accessibility and clear content hierarchy.

  Does that capture your point accurately?

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @Stroudy yes. Although section could just as easily be a div.

  I'm not sure I'd say "they contain the same elements". One is a page layout element that contains a component. The other is a component that contains it's content.

  0

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @grace-snow, It is confusing 🤣, I thought that you could remove the <section> and nothing would change. To me it seemed redundant.

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 2 months ago

  @Stroudy think of it as a page layout for displaying components and then a component inside that page.

  This card is a single component. It would get dropped into whatever page needs it in a website. If you made the card itself a main landmark that would mean the end web page would have a main (the card) inside another main (landmark) that already exists on the page.

  You don't want to make components into lanmarks unless that's what they are always meant to be.

  This card is just a card component, it's not the main landmark on every page it's ever used on.

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted about 2 months ago

  Hey @grace-snow, Thank you for taking the time to explain this to me 😁

  0
• 

  Manuel•110

  @Manuel7070Posted about 2 months ago

  It really looks identical :)

  Marked as helpful

  0