4
\$\begingroup\$

I'm following the project found here. I'm sure I forced some flexboxes where they didn't need to be. Tried to apply some accessibility topics that were discussed in earlier lessons. Overall its a very plain static page, but I'm trying to get the basics down in terms of structuring my html page correct before moving on to more complicated topics. I'm looking mostly for tips on how I'm structuring/nesting the HTML, as well as adding accessibility, and if my CSS structurally makes sense.

Solution

Note: this was wrote in Codepen so head/body tags are missing.

HTML:

<main id="main">
  <h1 id="title">Philip Drury Dawson</h1>
  <div id="img-div">
    <img id="image" src="http://media.cleveland.com/shaw_impact/photo/dawson-tiphelmet-2012-ccjpg-ad91451e0875bce2.jpg" alt="Phil Dawson greeting fans in First Energy Stadium">
    <p id="img-caption"><em>Phil greeting his fans</em></p>
  </div>
  <!-- END img id="image" -->

  <div id="tribute-info">
    <p>Phil was the best. <a href="https://www.reddit.com/r/Browns" target="_blank" id="tribute-link">We love him.</a>
    </p>

    <article>
      <h2>Cleveland Browns</h2>
      <p>The Cleveland Browns signed him as a free agent in March 1999, and he remained with the team for 14 years until he was signed by the San Francisco 49ers on March 19, 2013. (He was the only player left from the 1999 Browns squad). Dawson holds the
        Browns record for most consecutive field goals made (29) and most field goals in a game (6). Dawson is currently the 7th most accurate kicker in the NFL. On October 10, 2010, Dawson tied Lou Groza for the Browns' career field-goal record with
        234. The two are tied for 35th in NFL history. Dawson scored the first points in the history of the "new" Cleveland Browns in 1999. On October 10 of that year, he scored the only touchdown of his career on a fake field goal against the Bengals
        in an 18-17 loss. His official career long was a 56-yard field goal on November 17, 2008, which would prove to be the game-winner against the Buffalo Bills on Monday Night Football. However, he did hit a 59-yard field goal in an August 14, 2010
        preseason game. Dawson would have become an unrestricted free agent at the end of the 2010 season, but he was given the franchise tag on February 22, keeping him for the 2011 season.
      </p>
    </article>
    <article>
      <h2>The Phil Dawson Rule</h2>
      <p>Dawson had a rule named after him after a missed call by referees. On November 18, 2007, Dawson attempted a 51-yard field goal in the closing seconds of the fourth quarter to tie the game against the Baltimore Ravens. The kick carried through the
        air and hit the left upright and then the rear curved support post (stanchion), which bounced the football over the crossbar and into the end zone, in front of the goalpost. The kick was originally ruled no good. Under NFL rules, the play was
        not reviewable.
        <a href=#references><sup>[1]</sup></a> Officials discussed the play among themselves for several minutes and decided that, since the ball had indeed crossed the crossbar within the goal, whatever happened afterward to the ball did not matter.
        The kick was considered good, as announced by referee Pete Morelli. However, as the play is not technically reviewable, referee Pete Morelli announced that the play was reversed "after discussion," as opposed to "after further review," as is usually
        stated. At this point the Ravens, already celebrating in the locker room (they would have won 30-27 if the field goal was no good), were called back out onto the field to proceed to an overtime period. The Browns went on to win the game, 33-30
        in overtime, as Dawson came through again with a more visible 33-yard field goal. Dawson finished 4 for 5 in FGs whereas fellow Lake Highlands High School alumnus Matt Stover finished 3 for 3 in FGs for the Ravens.<a href=#references><sup>[2]</sup></a>        Notably, later in the season on December 16, in driving snow and wind gusts up to 40 mph, Dawson kicked another field goal, an improbable 49-yarder, that hit the same center support post. This field goal helped the Browns achieve an 8-0 win over
        the Buffalo Bills in blizzard conditions. Hitting this same structure twice in the same season has led some members of the Cleveland press to begin referring to the support post as "The Dawson Bar."<a href=#references><sup>[3]</sup></a> Prior
        to the 2008 season, the rule was changed to allow field goal and extra point attempts that hit the uprights or crossbar to be reviewed. This new rule is dubbed the "Phil Dawson Rule."
      </p>
    </article>
  </div> <!-- END div id="tribute-info" -->

</main>
<footer>
  <div id="references">
    <h2>References</h2>
    <ol>
      <li> <a href="http://www.espn.com/nfl/columns/story?columnist=sando_mike&id=3120230">http://www.espn.com/nfl/columns/story?columnist=sando_mike&id=3120230</a> </li>
      <li> <a href="http://www.espn.com/nfl/boxscore?gameId=271118033">http://www.espn.com/nfl/boxscore?gameId=271118033</a> </li>
      <li> <a href="https://halftimeadjustments.wordpress.com/2007/12/20/the-dawson-bar/">https://halftimeadjustments.wordpress.com/2007/12/20/the-dawson-bar/</a> </li>
    </ol>
  </div>
</footer>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

CSS:

html,
body {
  font-family: verdana, arial, helvetica, sans-serif;
}

body {
  background-color: #444;
}

#main {
  color: #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 5%;
}

#img-div {
  background-color: #ff3c00;
  display: flex;
  flex-direction: column;
  justify-conent: flex-end;
  align-items: center;
  padding: 0px 0px 0px;
}

#image {
  max-width: 100%;
  height: auto;
}

#tribute-info {
  color: #222;
  background-color: #efefef;
  margin: 30px 0px;
  padding: 10px 5%;
  text-align: center;
}

#tribute-info h2 {
  border-bottom: 1px solid rgb(2, 2, 2, 0.2);
  padding-bottom: 10px;
  margin: 10px 0px;
  font-size: 1.5em;
}

p {
  font-size: 0.88em;
  line-height: 1.5;
}

sup {
  vertical-align: top;
  line-height: 1;
  font-size: 75%;
}

footer {
  color: #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 5%;
}

footer h2 {
  border-bottom: 1px solid rgb(239, 239, 239, 0.2);
  padding-bottom: 10px;
  margin: 10px 0px;
  font-size: 1.5em;
  text-align: center;
}

footer ol {
  columns: 2;
  column-width: 15em;
  font-size: 0.84em;
  list-style-position: inside;
}

footer a {
  color: #efefef;
  font-style: italic;
}
\$\endgroup\$
  • \$\begingroup\$ really dude you went and edited capitalizations but couldn't give a single piece of feedback on the code at hand? \$\endgroup\$ – Tommy K Jan 23 at 23:06
  • 1
    \$\begingroup\$ The user changed more than just capitalization (e.g., syntax highlighting), and editing and answering are two separate tasks (users might edit questions even if they don’t have expertise, or anything to say, or time to post). \$\endgroup\$ – unor Jan 26 at 9:44
2
\$\begingroup\$

HTML semantics

The following snippet:

<img id="image" src="http://media.cleveland.com/shaw_impact/photo/dawson-tiphelmet-2012-ccjpg-ad91451e0875bce2.jpg" alt="Phil Dawson greeting fans in First Energy Stadium">
<p id="img-caption"><em>Phil greeting his fans</em></p>

Looks like an ideal candidate for <figure> and <figcaption>. Beyond semantics, It would visually simplify the markup, too.

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as single unit from the main flow of the document.

<figure>
  <img src=“…”>
  <figcaption>Phil greeting his fans</figcaption>
</figure>

target=“_blank”

Every place you use these should be accompanied by the following attribute: rel="noopener external”

This is a plus for security and performance. More on that here.

The footer

This is more of a design opinion, so feel free to ignore it. I think this area of the page looks jumbled and could use some love.

CSS

  • The unit is not necessary if the value is 0. So 0px could just as well be 0
  • If you don’t need to support IE, some native CSS variables would help organize repeating styles

For example:

:root {
  —gray: #efefef;
}

#main {
  color: var(—grey);
}

#tribute-info  {
  background-color: var(—grey);
}

General comments

  • The number of ids seems unnecessary
  • Some of the names of the ids are too general (“image”) and could be a problem if the HTML volume scales

I hope this helps!

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