Nils' Tribute Page Feedback

Code Feedback
1

Hi,
I’ve started FCC this week, and completed the Tribute page yesterday. I’ve been programming for 25+ years, but other than learning some basic HTML when it back in the 90’s, I’ve only be doing client desktop apps. So I’m using FCC to learn the web development side of the programming.

Here is my tribute page:

Since I have very little CSS experience, I focused on doing all the formatting in CSS instead of using Bootstrap.

For the text list part of the page, I know using a table probable would have been easier. But the Wiki page from where I scraped the data already had it in a table so I wanted to do something different.

I also know the page isn’t too responsive, so I’d specifically like suggestions on how to improve it that way. Using the hard coded Width for the Figure tag background isn’t a great way to do it since I’ve already seen the box size change drastically depending on the device display.

I’m curious if there’s an easy way to get the different colored box & caption around the photo, without using the new HTML5 Figure tag.

One question I had is about CSS in general. Is there a general rule about when the values should, or need to be in quotes or not? I was able to do what I wanted without using quotes, but the pieces of CSS I copied from online examples or tutorials frequently used quotes.

I think I remembered that any more, all HTML values need to be in quotes.

Thanks a lot for the help,
Nils

2

Hello!

Ill try to answer all of your questions here and provide suggestions. :slight_smile:

For the main image, the figure tag is probably your best bet. It can definitely be done without it by using a simple div and p tag along with some styling. If you want to skip that though, figure tag is the shortcut.

If you dont want to use it, something like this works all the same…

<div id="main-image-container">
    <img id="main-image" src="http://www.lyberty.com/encyc/articles/images/dnd_Box1st.jpg">
    <p>Dungeons & Dragons 1st Edition (1974)</p>
</div>

#main-image-container {
  padding: 20px;
  width: 38%;
  margin: 0 auto;
  background-color: red;
}

#main-image {
  width: 100%;
}

Of course you probably wouldnt go with red. :wink:
EDIT: Feel free to place this in your page to see what it looks like. This code was made looking at your code so that it fits.

Also, no harm in using a table. Even if the wiki page did it, they probably did it because using a table makes sense. Its not stealing if you use a table knowing that the wiki page used a table. If anything its encouraged. Cool thing about tables are that they can be wildly styled and quite unique from one another.

Yes. CSS Attributes need to be in quotes.

<p class="red">Example.</p>
<!-- Only time attribute wont be in quotes is if its a boolean attribute. Example..-->
<button class="btn" disabled>I am disabled</button>
<!-- boolean attributes are not quoted. -->

Site looks good. You could make it more responsive but it wont be easy.
I recommend learning flexbox if your trying to not rely on bootstrap.

Heres a really good tutorial.

3

Thank you very much for your feedback and help. I greatly appreciate it.