Tribute Page feedback (be gentle?)

https://codepen.io/jimmyskraft/pen/NWqyJZB

Hey world, super new here—never been particularly tech-competent and never ever ever thought I’d be giving coding a shot, but I learned about FCC two weeks back and one thing led to another and here we are. I’m almost cripplingly critical of myself, so it terrifies me to share my work when I’ve seen so many great projects on here…but it seems like a great way to learn so I’m doing it!

Anyway, here’s my first project—the Tribute Page. Thoughts?

Hey, I’m pretty new over here as well but I got a few more weeks learning / training than you^^ so I’ll try to give an honest feedback from what I can see.
(I might say some mistakes too…)
First of all the general output is simple but working and this is pretty much what we have been asked for right. I don’t really understand the usage of the color maroon though. Colors a very very vast domain and you might want to read a few articles about them. https://www.w3schools.com/colors/colors_triadic.asp
I recommend this website for starters… and the use of rgba() instead or the name of colors. The color of the text and its font-family are easy to be changed and can drastically improves the experience.
(Of course this is only how I see it)

Let’s start with the code…
First your html code is incomplete your missing the whole “head” part.
Secondly you’re using <strong></strong> to make elements bold which is incorrect.
It should be only used to make some part of the text more important than others. (keywords).
And if I’m correct it’s a way for html to improve semantic. Like <main><article><section><header> they are a way to let know html what is the content.
(I’m might not be super clear here so I invite you to look for it if you’re interested in).
The correct way is to use CSS, in this case with
<p><span class="bold-class">My bold text</span>My non-bold paragraph etc... </p>
with the CSS
.bold-class { font-weight: (value from 100 to 900 I think;}
Which leads us to your CSS, the only remark I have is you’re using a lot of ID’s which on a small webpage like this is fine.
But you need to understand that you have system of points for the CSS to know which rule to apply.
inline CSS (directly in the html)
ID’S
classes pseudo-classes attribute
elements pseudo-elements
respectively
1 | 0 | 0 | 0
0 | 1 | 0 | 0
0 | 0 | 1 | 0
0 | 0 | 0 | 1
It’s may be a bit too subtle but trust me if I had knew that at the beginning it would have saved me a lot of time trying to figure out why this element doesn’t have this color or this style.
It’s a long post I know but I really tried to pass you a better knowledge for your next website.

Welcome to the forums @jimmyskraft. Your page looks good.
As far as the previous post about your HTML code being incorrect because it’s missing the head part, don’t worry about that. Codepen provides the boilerplate for you so the only code you need is what would go between the <body> </body> tags. And as you probably know, you don’t need to include the body tags either.
The only thing I will say it do not use the <br> tag to force line breaks. Use margin and/or padding in CSS.
Read the following for the correct usage of <br>


As far as semantics are concerned you would use the bold tag to make your dates visually bold. In a semantic page, the strong tag is used to emphasize text which would be of importance when a screen reader is being used.

Hi there,
Nice job on the page.
I like how the responsiveness looks.
Nice colors and layout looks pretty good as well.
Keep going.

I think the colors work and they fit the image. Which is always a good guide when you have such a prominent image.

  1. See if you can’t find a nice font you like. It can really add a lot to the look of a page. Maybe something like Raleway would fit the theme/subject. I would also increase the overall font size.

  2. It’s a good image but it might get too big on large screens. I would give the figure element container a max-width and center it using margin auto.

  3. I would remove the default padding on the <ul> (padding: 0) to get a more centered look and increase the max-width.

  4. Maybe try something different with the song list. I don’t really have a great idea, but for some reason I want to put them in a longer running text piece which includes some information about the songs.

Here is an example of what the page might look like with the changes.
https://codepen.io/lasjorg/full/ExjRWVM

If you want you can fork it and look at some of the changes. I will delete my version when you are done just let me know. The song text is just some wiki text and I didn’t put too much effort into it. Maybe you can improve on it (if you like the idea).

Thank you for your feedback! Especially helpful that you included an example page with some of the edits. Importing fonts makes more sense to me now, and you gave good advice on how to treat the image and the list element. Also, I dig your more creative approach to the songs section. All in all very helpful!