Just finished my Tribute Page for my First Project just want some thoughts

[arguitarman]

I am brand new to coding and haven’t had any experience until I started here recently and have had some trouble getting my tribute page to look as good as I wanted it to. I would like some feedback to see if there’s something I’m not thinking about or if there’s something I’m missing that can be fixed or improved on.

I was trying to take my time and make it look as good as I could because I notice a lot of people use their Tribute Page in there projects on their resumes so I wanted to do a good job on my first project incase future employers decide to look at it a year or two down the road.

any help or advice would be super appreciated. Thank you all in advance

Aaron

J.R.R Tolkien Tribute Webpage

[jwilkins.oboe]

Hi @arguitarman !

Welcome to the forum!

@arguitarman

I was trying to take my time and make it look as good as I could because I notice a lot of people use their Tribute Page in there projects on their resumes so I wanted to do a good job on my first project incase future employers decide to look at it a year or two down the road.

I personally think that your projects you showcase for employers should be more involved than the tribute page.

You will get there when you are building more complex pages

But you are just starting out.
I would just focus on the learning aspect right now and worry about employers later.

---

Just a few things.

The text is hard to read for me.
I would suggest adding a linear gradient over the background images.

For example:

#main {
        background: linear-gradient(rgba(0, 0, 0, 0.612), rgba(0, 0, 0, 0.612)), url('https://i.postimg.cc/0yjy1Hb6/john-salvino-9-Yubwx-AIpw0-unsplash.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: white;
  border: 2px solid black;
}

Instead of

Also the font size could be larger so it is easier to read.

You have a few errors in your html.
Run your code through the html validator

But a couple of the errors I noticed is that you have a few opening main tags.

You only need one opening main tag and one closing tag.

Also you have a few style tags in your code.

I would get rid of the style tags and add your google font imports inside the html settings. (stuff for head section)

It looks like you have a couple footer tags.

You only need one opening tag and closing tag.
You can place all of your links inside one set of footer tags instead of having multiple.

Hope that helps!

[bbsmooth]

A few pieces of advice.

• Avoid setting heights on elements unless absolutely necessary. For example, you have a height of 800px on the list but the amount of content in the list makes it longer than 800px and thus it overflows the container (at least with the font size I am using in my browser). There really is no reason to set a height here, the list should be able to grow taller as needed. You usually want to allow an element to grow taller as needed.

• When you need to set widths/max-widths on elements consider using em units instead of px. This will allow the element to take into account the font size the user is viewing your page with and widen as the font size is increased.

• You should only have one <main> on the page, and one <footer>. Run your HTML through a validator to find any issues. You can also use the HTML/CSS analyzers included in codepen to check for errors. NOTE: I see @jwilkins.oboe already mentioned this, sorry for the duplicate.

[arguitarman]

Thank you so much @jwilkins.oboe and @bbsmooth for the help and the advice! I’ve made sure to bookmark the validators for future projects. I didn’t realize how many errors I had.

My Tribute Page definitely looks a lot better and I have a better understanding of some of the HTML and CSS code I was using and why not or why to use them!

Hopefully I can continue to improve and learn as I go through more projects, It’s a lot of information to take in.

J.R.R Tolkien Tribute Webpage