Grace Hopper Tribute Page; Feedback Appreciated!

Grace Hopper Tribute Page; Feedback Appreciated!
0

#1

I dedicated my tribute page to Rear Admiral Grace Hopper.

Take a look, and if you have the time, feel free to leave feedback on how I can improve it. I have difficulty with CSS, so I’d appreciate some constructive criticism in that regard.

I’m also planning on further improving it for mobile use.

Thank you!


#2

Hi

CSS

This is only a recommendation, but is better not use IDs in selectors:

HTML

  • The ‘alt’ attribute is required for <img> elements.
<a href=#><img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Commodore_Grace_M._Hopper,_USN_(covered).jpg"> <h3 id="header-text">Grace Hopper</h3></a>

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

 <h3 id="header-text">Grace Hopper</h3></a>
  • The <div> element cannot be a child of the <ul> element.
  • The <li> element cannot be a child of the <div> element.
 <ul>
          <div class="row">
            <div class="bio-li col-md-6 col-xs-12"><li>1906: Born in New York City; oldest of three children</li></div>

Cheers and happy coding :slight_smile:


#3

Hey, thank you for your response!

I didn’t know that about IDs. That article has opened my eyes to using classes and keeping style rulings reusable.

Wasn’t aware of having to use the ‘alt’ attribute, and I’ll keep in mind the heading levels from now on.

Could you expand more on the div elements not being able to be children of ul elements and li elements not being of div elements? It seemed to be working properly for me.


#4

You’re welcome :thumbsup:

Because don’t comply with the Specification:

MDN documentation:

Permitted content
zero or more <li> elements, eventually mixed with <ol> and <ul> elements.

Cheers and happy coding :slight_smile: