Tribute page - feedback welcome!

Code Feedback
1

I’ve been tweaking and tweaking this challenge a little everyday since I officially submitted it as complete.

This is my first web page ever - though simple, I was really able to get more of a feel for the different topics we covered in the first round of FCC challenges.

My current list of things I’d change if I started from scratch with the knowledge I have now:

  • I’d organize with the concepts from MDN. In one of my later iterations, I did add in some of these pieces, but I think it would have been much easier if I’d started there.
  • I’d do all of the styles in the CSS stylesheet (it seems like this is the best way to keep up with all your styling).

I’d love to know more about:

  • The interplay between/best way to specify bootstrap grid items vs. divs (I know FCC covers a way to do it; I’m just looking for a more holistic way to look at it)
2

Nice tribute page :thumbsup:

In <div class="col-md-12" id="top-level-well">,
you can remove the class (col-md-12 occupies the whole width anyway), and move the inline style to the CSS section.

You can replace

<div class="col-md-12 text-center">
  <h4> ... </h4>
</div>

with just

<h4 class="text-center"> ... </h4>

<h*> tags are block elements by default, so they occupy the full-width.

You’d want to avoid using <h6> for the video caption. Use <p> instead, then change the font size with CSS.

Here’s a related topic

1 Like
3

First off - a huuuuge thank you, @kevcomedia!

One thing I’ve really learned over a few years of hacking things together (for non-web dev stuff) is that it doesn’t always result in the most efficient code. I really appreciate the tips (and I immediately bookmarked that Medium post!).

I went through and made the adjustments you suggested - the only one I have a question about is the <h6> note. Is there something weird that happens when you use headings instead of paragraph elements, or is it just a best practice?

Thanks!

4

It’s for semantics. Tags <h1> to <h6> are meant to be used as headings (that’s what the h stands for).

This explains it better.
http://www.site-seo-analysis.com/seo-articles/use-html-headings/

5

Thanks, again! I will definitely be taking this stuff forward into future projects.

6

Love the topic of your Tribute page! What an interesting subject matter. Nicely laid out too!

1 Like
7

Very well done! Looks great on mobile.

1 Like
8

Thank you, @codezara and @jscogg :heart: