Reworked Tribute Page to be mobile responsive - feedback appreciated

HTML pages should always start with <!DOCTYPE html>.

Maybe you meant <html lang="en"> (not eng; attribute values also need to be wrapped in double quotes).

It’s good practice to add
<meta charset="UTF-8">
in the <head> section (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes, see the charset attribute). Also, if you aim for mobile, you should also add
<meta name="viewport" content="width=device-width, initial-scale=1">.

Are you sure you wanted to use Bootstrap 4? Bootstrap 3 is what is taught at FCC.

Try nesting the career highlights in another <ul>, like

<ul>
  <li>...</li>
  <li>...</li>
  <li>
    Career Highlights:
    <ul>
      <li>Microsoft></li>
      <li>Bill and Melinda Gates Foundation</li>
    </ul>
  </li>
</ul>

Avoid using the & character on its own in HTML, because it has special meaning in HTML code. Use the HTML entity for it instead (this: &amp;).

You can center an image using a combination of the img-responsive and center-block classes. No need to write your own classes for these :wink:

One of your img-responsive classes is misspelled as imf-responsive

Consider changing the color of your links. Particularly where it says “To find out more about Bill Gates check out his blog”.

Your <html> tag is not closed. The / is missing.

target="blank" should be target="_blank".

You have two CSS rules that do the same thing.

Since you are using SCSS, why not use some variables? Say, store the red color you use in a variable named $brightRed?

In general, you should name classes based on what they are, not what they look like. You have a class called redText, but what if you decided to make it another color? You’ll have to look for redText everywhere in your code to change it.

Try to avoid using cryptic class names, like gColor, bSpace, etc. Use as much characters as you need to describe the classes; you’ll never run out of characters to use :slight_smile:

You can always hit Analyze HTML or Analyze CSS in their respective editors to spot errors.

Hey, thanks so much for your feedback! That was amazing. A couple of the things I left out were settings of CodePen. It gave me an error for things like .

I made a bunch of changes based on your feedback, and it really helped me to improve my code. I don’t know SCSS yet, and only had it enabled because the tutorial had me do it :). On my next project I will definitely look into that, though, because I love me some variables!

As for Bootstrap 4, that’s the version used by default under quick add on CodePen. I found this out the hard way when I went to use the “push” “pull” attributes on my columns and spent an hour trying to figure out why it wasn’t working. I eventually found that I was using a different version than the material I was referencing, and the code had changed :rage:

Anyways, thanks again for taking the time to review my work and give feedback! You’re awesome!!