3 column preview card component

Community feedback

• 

  Mamadou Mar•550

  @Mar1362Posted about 2 years ago

  @venkat2305 here are some suggestions:

  1. Your container may be a <section> instead of <div>. I suggest you to see about content sectioning

  2. Put all headers in your different container at the same level (like putting them all in <h1> tag) in order to keep a logic semantic

  3. The icons are purely decorative so you have to add aria-hidden="true" or role="présentation" attributes to your <img> tag in order to improve experience of assistive api. However, there's a difference between these two attributes. I recommend to see this doc. Another way to do is to put them as a background-image

  4. <a> is an inline tag so you have to always put it in a block tag like <p>

  5. Notice that every "Learn more" have his own color. So you may fix that in order to match the design

  Thank you, I'm open for any questions! HAPPY CODE

  0

  ---

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

  @Mar1362 thanks for the suggestions.

  1. grace from the slack community told me, " you’d never have 3 h1s on a page. This component would sit on a page that already has a h1. So change headings to h2s". so, I changed the tags. can you please clarify this?
  2. can you tell me why should we put a tag as a block? Do you mean, we have to change its display property to block?

  0

  

  Mamadou Mar•550

  @Mar1362Posted about 2 years ago

  hi @venkat2305

  1. it is all about hierarchy and importance. Talk about importance, let's say you are creating a web page for a company then you must put the name of the site which could be the name of the company as a title of the whole page. so, you decided to put it in <h1> tag. now, whenever you put another title inside the site let's say 'EAST HEADQUARTER' in a <h1> tag that would means that this last one have the same level of importance as the name of company. then, sinces 'EAST HEADQUARTER' is a section of the company, it should be putted in a lower title importance so <h2>. And, when we have some other titles which are subsections of 'EAST HEADQUARTER' like 'SERVICES' and 'MEMBERS' they should be putted in <h3> since these two last one have the same level and are subsection of 'EAST HEADQUARTER' section. That's why, webmasters usually use the <h1> tag just once as the title of the full page. In the other hand, we have to consider hierarchies. In fact, semantic html page have different sections and each section may have his own title, a subsection with his own title too. Therefore, the headings should be used in fallback mode. i mean you should have the following:

  <main>
  
       <section>
                <h2>Title1.1</h2>
                <p>here we may go with some paragraph and a content</p>
                                 .....................
                <section>
                         <h3>Title1.1.2</h3>
                          <p>paragraph...................</p>
                                      .........................
                          <section>
                                     <h4>Title1.1.2.1</h4>
                                     <p>...........................</p>
                                     <ul>
                                             <li>......</li>
                                             <li>.......</li>
                                                   .......
                                             <li>.......</li>
                                      </ul>
                          </section>
                          <section>
                                     <h4>Title1.1.2.2</h4>
                                     <p>...........................</p>
                          </section>
                </section>
                <footer>
                             ................
                </footer>
       </section>
  
       <section>
                  <h2>Title1.2</h2>
                        .....................
       </section>
  
  </main>
  

  take a look on how section are nested and the headings hierarchy. Now, you should combine importance and hierarchy in order to choose the right heading level :) hope i was clear. and i am always ok for any question!

  2. some tag have display: inline; like <a> , <span> , <em> or display:block like <p> , <div> , <section> as a default css property and that is logic. in fact, an anchor should be in paragraph in order to allows visitor to know what it refers to. it is just a good practice to get inline type elements ( elements that always have by default a display: inline;) inside a block type elements :)

  0
• 

  Mamadou Mar•550

  @Mar1362Posted about 2 years ago

  Hi, i appreciate the code as well as the render. Really, nothing to say, everything is clean apart from the fact that your column should be more longer than that, add the hover effect on "learn more" button, and try to use more appropriate html tag instead of the div just to get used to it :)

  Thank you!

  0

  ---

  

  VenkatSairam•80

  @venkat2305Posted about 2 years ago

  @Mar1362 what HTML tags should I use? and where? thanks for your feedback

  0