John Muir Tribute Page Constructive Feedback

Code Feedback
1

Hey Campers, I’m looking for some feedback on my John Muir Tribute page. Any tips or tricks or fixes you guys could suggest would be great. Thanks!

2

Hi @vin3b,

CSSlint:

  • Unkown property ( the " l iy "):
h1{
  ...
   font-familiy: 'Special Elite', serif;
}

HTML inspector:

  • This elements cannot be a child of the <span> element:

    • <h3>
    • <div> 
 <span class="toggleHide"><h3>Namesake Locations: [+]</h3><div class="hidden">
          <ul>
            <li>John Muir Trail, in the Sierra Nevada</li>
            <li>Muir Woods National Monument, north of San Francisco</li>
            <li>Muir Beach, north of San Francisco</li>
            <li>John Muir College, at the University of California San Diego</li>
            <li>Mount Muir, in the Sierra Nevada</li>
            <li>Camp Muir, in Mount Rainer National Park in Washington State</li>
            <li>Muir Glacier, Alaska</li>
            </ul>
            
            </div>
            </span>

MDN documentation:
<span>: The Content Span element - HTML: HyperText Markup Language | MDN

Permitted content: Phrasing content

Content categories - HTML: HyperText Markup Language | MDN

Elements belonging to this category are:
<em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).

A few other elements belong to this category, but only if a specific condition is fulfilled:

<a>, if it contains only phrasing content
<area>, if it is a descendant of a <map> element
<del>, if it contains only phrasing content
<ins>, if it contains only phrasing content
<link>, if the itemprop attribute is present
<map>, if it contains only phrasing content
<meta>, if the itemprop attribute is present

Cheers and happy coding :slight_smile:

3

@Diego_Perez Thanks for the tips! I’ll definitely start using CSSlint and HTML inspector now that’s I’ve found out about them. :smile:

1 Like
4

I was led to your page from your comment about my John Muir page. :smile:
Looks good!

I only had a couple feedback items:

  • It would be nice if the cursor changed to a clickable cursor when hovering over the + symbol to expand a section. You can do that with CSS styling.
  • The blue font on the green background at the bottom for the Wikipedia and Sierra Club links made them hard to read. It would be nice if whatever color you chose had a little more contrast to it.

Great choice of main pic and font by the way! :wink:

5

Nice. I really like the font and the fact that you can expand and collapse different parts. Good work. :smiley:

Seconding the tips already given.