1
\$\begingroup\$

Could you please tell me how I did on my first website?

I designed it using Bootstrap v3.3.7

Here is the code from the index file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
  <title>Home - Nanticoke Chapter NSDAR</title>
  <meta charset="utf-8">
  <meta name="description" content="Nanticoke Chapter National Society Daughter of the American Revolution">
  <meta name="keywords" content="Nanticoke Chapter, DAR, NSDAR, Maryland, MD, Princess Anne, Somerset, Nanticoke, genealogy, historical, society, Old Somerset, Chesapeake Bay, Eastern Shore, ancestor, historical preservation,education, patriotic, Revolutionary War">
  <meta http-equiv="Content-Language" content="en-us">
  <meta http-equiv="Content-Type" content="text/html">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body id="home">
  <header>
    <nav id="custom-navbar" role="navigation" class="navbar navbar-default">
      <div id="custom-navbar" class="container">
        <div id="custom-navbar" class="navbar-header">
          <a class="navbar-brand"><img src="icons/nanticoke_logo.svg" alt=""></a>
          <button id="menu" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
          <ul class="nav navbar-nav">
            <li><a href="index.html">HOME</a></li>
            <li><a href="history.html">HISTORY</a></li>
            <li><a href="joining.html">JOINING</a></li>
            <li><a href="patriots.html">PATRIOTS</a></li>
            <li><a href="mailto:nanticokedar@aol.com?subject=Mail from Nanticoke Website Visitor">CONTACT</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div id="page" class="body">
    <div class="container">
      <div class="header row">
        <span class="text-center col-xs-12"><h1>Welcome to Our Chapter</h1></span>
      </div>
      <div class="main-article row">
        <div class="clearfix">
          <h3 class="heading-2 col-xs-12">The Nanticoke Chapter</h3>
          <a href="http://www.dar.org/national-society/education" target="_blank">
            <div class="img-overlay col-sm-4 text-center">
              <img src="images/betsyRoss.png" alt="The Birth of The Flag" class="main-article-img img-responsive">
              <div class="description ">
                <p class="description_content text-center">
                  The Women of The Revolution<br/> Click Here to Learn More
                </p>
              </div>
            </div>
          </a>
          <div class="main-article-text col-sm-8">
            <h3 class="heading-1">The Nanticoke Chapter</h3>
            <p>
              Membership in the Daughters of the American Revolution honors and preserves the legacy of our Patriot ancestors. As a member of the Nanticoke Chapter of the DAR, through participation in the Society’s various programs and activities, we continue this
              legacy by actively supporting historic preservation, promotion of education, and patriotic endeavors. Most importantly, we share experiences and friendships that last a lifetime.
            </p>
          </div>
        </div>
      </div>
      <div class="main-article row">
        <div class="clearfix">
          <h3 class="heading-2 col-xs-12">What is The DAR?</h3>
          <a href="http://www.dar.org/national-society/about-dar/dar-history" target="_blank">
            <div class="img-overlay col-sm-4 text-center">
              <img src="images/firstDar.png" alt="The First DAR" class="main-article-img img-responsive">
              <div class="description ">
                <p class="description_content text-center">
                  The First DAR Congress - 1892<br/> Click Here to Learn More
                </p>
              </div>
            </div>
          </a>
          <div class="main-article-text col-sm-8">
            <h3 class="heading-1">What is The DAR?</h3>
            <p>Founded in 1890,This nonprofit, nonpolitical volunteer women's service organization dedicated to promoting patriotism, preserving American history and securing America's future through better education consists of over 185,000 members in 3,000
              chapters across the world.
            </p>
          </div>
        </div>
      </div>
      <div class="main-article row">
        <div class="clearfix">
          <h3 class="heading-2 col-xs-12 ">Who Joins The DAR?</h3>
          <a href="http://www.dar.org/national-society/historic-preservation" target="_blank">
            <div class="img-overlay col-sm-4 text-center">
              <img src="images/princeton.png" alt="The Battle of Princeton" class="main-article-img img-responsive">
              <div class="description ">
                <p class="description_content text-center">
                  Defend our nation's history<br/> Click Here to Learn More
                </p>
              </div>
            </div>
          </a>
          <div class="main-article-text col-sm-8">
            <h3 class="heading-1">Who Joins The DAR?</h3>
            <p>
              Women like you, who come from diverse backgrounds and have a variety of interests. Any woman, regardless of race, religion or ethnicity, who can prove her lineal descent from patriots of the American Revolution is eligible to join. They are women who
              care about promoting good citizenship, want to honor their ancestors, are devoted to education and want to preserve our past for the future
            </p>
          </div>
        </div>
      </div>
      <div class="footer-quote">
        <p class="text-center">
          "Happiness and moral duty are inseparably connected."<br> George Washington
        </p>
      </div>
    </div>
  </div>
  <footer>
    <nav id="custom-footer" class="navbar-default navbar-bottom">
      <div id="custom-footer" class="container">
        <div class="dar-links">
          <a class="col-xs-6" href="http://www.dar.org/">NSDAR</a><a class="col-xs-6" href="http://www.marylanddar.org/index.html">MDDAR</a>
        </div>
        <div class="site-info">
          <p>
            Web links to non-DAR sites are not the responsibility of the NSDAR, the state organizations, or individual DAR chapters.
          </p>
          <p>
            © 1890 - 2014, National Society Daughters of the American Revolution (NSDAR) | All Rights Reserved.
          </p>
          <p>
            Design by <a href="mailto:LordRorek@gmail.com?subject=Mail from Nanticoke Website Visitor">Andrew Powers</a>, maintained by <a href="mailto:nanticokedar@aol.com?subject=Mail from Nanticoke Website Visitor">VIS Chair</a><br> Last updated: 02/15/17
          </p>
        </div>
      </div>
    </nav>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
  <script type="text/javascript">
    navClose();
  </script>
  <script src="js/bootstrap.min.js"></script>
</body>

</html>

For the entire code, I have put the JS, CSS, and image files on GitHub.

P.S. I know some of the graphic design choices go against normal design conventions but my clients had very specific criteria and customer satisfaction is my highest priority.

\$\endgroup\$
  • 1
    \$\begingroup\$ HTML 4.01 Transitional, for real? \$\endgroup\$ – Przemek Mar 26 '17 at 22:26
  • 1
    \$\begingroup\$ To provide a slightly more specific version of @Przemek's critique - HTML 4 is about 17 years old at this point, and there's zero reason for new code to be using that doc type. Best case scenario it does nothing, worst case scenario some browsers will think your page is older than time itself and display it in a compatibility mode. Replace the first line of your code with <!DOCTYPE html> - that's the HTML5 doctype. \$\endgroup\$ – Joe Clay Mar 28 '17 at 9:23
2
\$\begingroup\$
  1. Bootstrap uses HTML5. So, your doctype should be :

    <!DOCTYPE html>

  2. Basic Template clearly states that the 3 meta tags should come just after opening the <head> tag 1.

  3. You can easily customize the code by removing unwanted <div>s from your code, such as, <div id="page" class="body"> <div class="container"> With <div id="page" class="body container">.
  4. You have used the custom-footer id more than once.
  5. And last but not least, you can easily validate your code with a HTML5 validator.
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.