Tribute Page- Mathias De Sousa

I was just posting this to see if anyone can tell me problems or advice on the page. The hope is to make a game out of it for a classroom to learn about De Sousa. But I wanted to learn javascript first.

Hi Merril,

Good job finishing your Tribute project!

I noticed several things that could be improved upon:

  1. You don’t need to add a link to bootstrap from your HTML, it’s already done in your settings.

  2. Separate your style from your HTML, everything in the style tag should go in the CSS tab.

  3. Avoid using inline styling (e.g. style=“color:white”) and do it from the CSS tab.

  4. I noticed that you were trying to add a font called Monoscope. To add fonts you have to provide a link to the provider (e.g. Google Fonts) and set it to a certain class/id. I have included Slabo in my fork.

  5. Try to use class names that are related to their purpose. A class called red-background shouldn’t really be used if it in fact makes it grey.

  6. The question mark img is nested in an a tag. Usually these are used for hyperlinks and anchors. Use a div instead.

  7. Avoid using &nbsp to do indents. You can set text-indent: 50px; in the class that you want to have an indent on the first line.

Most of the issues, seem to stem from the fact that you are a bit shaky on CSS.

Here’s a link to a revised version of your page.

If you have any questions, please don’t hesitate to ask me here or in a pm.

I hope this helped! :upside_down_face:

Thank you a lot for the advice, and suggestions.

I do have a few questions, if you don’t mind.

  1. and 3. are related right? like make sure to make all the style into a class setting in CSS?

  2. Is a tag the hyperlink?

1-7. Thank you, Thank you, Thank you for all the help. All of that makes life a lot easier and makes a lot more sense than what I was thinking CSS was used for.

Hi Merrill,

I don’t mind at all!

Yes, 1 and 3 are somewhat related. Yes you can have inline styles and internal stylesheets.

Regarding point 3, here is an example. You’ll notice both appear to be the same (minus the text inside). However, the HTML for the second is cleaner and less cluttered.

What happens with external and internal stylesheets is that you assign an HTML element (div,h1,p etc) a class or an id. This id or class is then used to fetch a style from the CSS.

  • HTML: class=“box” CSS .box{ background-color:pink} (generally used when a style will be used on more than one element)

  • HTML: id=“box” CSS: #box{background-color:pink}

Yes, a tag can be used for hyperlinks. It’s also used for anchors, which let you navigate around the same page on click.

I hoped that helped clarify things a bit :smiley: