3
\$\begingroup\$

I was wondering about my HTML & CSS. I'll just create a list as to what concerns I have:

  1. Does my HTML & CSS follow proper coding standards and conventions?
  2. Am I making proper use of semantic tags in my HTML document?
  3. Is there any better way to do some of the stuff I am trying to accomplish? (e.g. centering elements in my document)
  4. I completely understand if you don't wanna do this one, but if you can run the code and look at the website, how does it stand out to you? Is the way the content is formatted appealing or does it not fit with the current context of the page (which is advertising and displaying info)? If it doesn't fit, could you recommend some resources by which I can learn how to format content on a page properly to make it more appealing?

HTML Source Code:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Rollstar BJJ</title>
            <!-- Font loading -->
            <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
            <link rel="stylesheet" href="../CSS%20Files/style.css" />
            <meta charset="utf-8" />
        </head>

    <body>
        <main class="center-align">
            <header>
                <h1>Rollstar Brazilian Jiu-Jitsu</h1>
                <p>Begin and end with respect</p>
            </header>
        </main>

        <aside>
            <h2>Anything you want to know</h2>
            <hr />
        </aside>

        <section>
            <header class="info-block justify-left">
                <h2>About Us</h2>
                <hr />
                <p>Rollstar BJJ was initiated in 2017, and began with a small class of ~20 students in its free trial open mat session. Since then, it's presence has seen significant growth, with the paid students being around 14 in total, and our students already making competition appearances!</p> 
            </header>

            <header class="info-block justify-right">
                <h2>Our Mission</h2>
                <hr />
                <p>To equip our students with the skills the need to survive both on the street and in competition environments, as well as to handle any situation or altercation with a calm demeanor, and ending it harmlessly, with respect, leaving both parties reconciled. Also, as a total bonus:  To have fun!</p>
            </header>

            <header id="contact-info" class="info-block center-align">
                <h2>The Staff</h2>
                <p><a href="#">Head Instructor Hernan</a> (BJJ Brown Belt from Ground Control, 10 years of experience)</p>
                <hr />
                <p class="small-text">That's all the current staff that I know lol ;) Also the contact link is dead sorry :(</p>
            </header>
        </section>
        <hr />

        <section>
            <h2>Media</h2>

        </section>
        <hr />

        <footer>
            <p>&copy; Rollstar Brazilian Jiu-Jitsu 2018</p>
        </footer>
    </body>
</html>

Formatting problems do not allow me to indent code correctly.

CSS Source Code:

h1, h2, h3, h4, h5, h6 {
    font-family: Open Sans, sans-serif;
}

p {
    font-family: Roboto, sans-serif;
}

a {
    text-decoration: none;
}

a:hover {
    color: dodgerblue;
}
/* For some reason the id overrides 
ALL the original styles applied to objects of the .center-align class
SO I have to re-apply some of them... :(*/
#contact-info { 
    display: block;
    margin: 0 auto;
    text-align: center;
}

.center-align {
    width: 500px;
    margin: 0 auto;
    text-align: center;
}

.small-text {
    font-size: 10px;
    font-style: italic;
}

.info-block {
    position: relative;
    display: inline-block;
    width:25%;
    padding:10px;
    margin: 30px 15px;
    border: 3px solid black;
    border-radius: 15px;
}

.justify-left {
    left: 50px;
}

.justify-right {
    right: 50px;
    float: right;
}

aside > h2 {
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
\$\endgroup\$
1
\$\begingroup\$

The meta-charset element should ideally come before the title element (see order in the head element).

You could also bring the link attributes in the same order, and either always add the / in self-closing tags (required in XHTML, optional in HTML), or never.

<head>
  <meta charset="utf-8" />
  <title>Rollstar BJJ</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" />
  <link rel="stylesheet" href="../CSS%20Files/style.css" />
</head>

The main element is for the main content of the page, but you seem to use it only for the header of the page.

The aside element is for content that is "tangentially related" to the content of the parent section (which is the body in your case). Unless you omitted content for the sake of this question, it seems that the line "Anything you want to know" belongs to the main content header, not to its own sectioning content element.

In your first section, you use three header element, but these don’t seem to be headers for this section. As each one contains heading elements, you should explicitly specify corresponding section elements.

The hr element is only for a "paragraph-level thematic break". So it shouldn’t be specified after a section. Your use in the contact-info seems to be appropriate. Your other use (between a heading and a paragraph) is likely not appropriate (unless there is really a thematic break involved). If you want to display a horizontal line, you can use CSS (e.g., border-bottom).

For the staff, you could use a ul.

You could use the small element for the copyright line (and the time element).

The best practice for class names is not to tie them to the current styling. If you intended to restyle the page, having class names like justify-left would be confusing if it’s no longer accurate.

<body>

  <header>
    <h1>Rollstar Brazilian Jiu-Jitsu</h1>
    <p>Begin and end with respect</p>
  </header>

  <main>
    <section>
      <h2>Anything you want to know</h2>

      <section>
        <h3>About Us</h3>
        <p>Rollstar BJJ was initiated in <time>2017</time>, and …</p>
      </section>

      <section>
        <h3>Our Mission</h3>
        <p>To equip our students with the skills …</p>
      </section>

      <section id="contact">
        <h3>The Staff</h3>
        <ul>
          <li><a href="#">Head Instructor Hernan</a> (BJJ Brown Belt from Ground Control, 10 years of experience)</li>
        </ul>
        <hr />
        <p>That's all the current staff that I know lol ;) Also the contact link is dead sorry :(</p>
      </section>
    </section>

    <section>
      <h2>Media</h2>
      <!-- if the media is the same for every page, it should be moved outside of 'main' and probably be an 'aside' instead of a 'section' -->
    </section>
  </main>

  <footer>
    <small>&copy; Rollstar Brazilian Jiu-Jitsu <time>2018</time></small>
  </footer>

</body>
\$\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.