Tribute Page to Mia Zapata

Code Feedback
1

Hello everyone!
I’ve just finished the first big FCC project, creating a tribute page to one of my idols, the great Mia Zapata, late singer of The Gits.
It was really fun doing this project, I had to research a lot and feel like I learned a lot in the process and became more familiar with HTML and CSS.
However, I’m sure my coding lines can be better, so I’d love to receive your feedback!
Thank you!

Link:

1 Like
2

Hey,

Your page looks nice, good job.

One small remark:

I don’t like (and i don’t think it’s a good practice) that you are using inline style (within your h1):

Mia Zapata

You already have the H1 element defined in your css file.
Why don’t you just put color:green in the css then?

1 Like
3

Hello Manuuzzz!
Woah, you’re right!
I guess I oversaw that, if tehre’s already a h1 in css, it makes no sense to keep the inline style.
Thank you for your feedback!

4

Ah, @Manuuzzz, now I remember why I kept the inline style: somehow, when I wrote “color: green;” at the h1 element in CSS, it wouldn’t change the color! Any other change would work, like putting it in italic , however, I couldn’t make it green.
I wrote it in CSS once again, and this time I used the command “!important” - this time it worked.
I don’t know why this happened.

5

I think that is because you use tags within your figcaption.

For example:
if you set color: green in figcaption within your css, it will be green…but then your h2 will also be green.
(i’m not sure if you should use tags within a figcaption.

As a workaround, you can add another class name to your h1 element, for example :
< h1 class=“text-center colorgreen”>
In css: h1.colorgreen { color: green; }
But that is in fact quasi the same as you do with !important.

Anyway, i think it because of your figcaption - h usage.

6

I see. I don’t fully understand how the figcaption interferes with h1, but thank you for your input and tips!

7

You are right…
I copied a h1 and it starts being black from under jumbotron.
If you place a h1 directly under container, it is green.

Even more - remove “important” and remove bootstrap3.
add bootstrap4 and rerun your pen -> it’s green.

8

I like the embedded Spotify part!

9

It worked just by replacing bootstrap3 to 4.
Thanks, Manuuzzz!

@Pagey
haha, thanks! It wouldn’t make sense to just talk about her, people have to listen to her voice to see how special she is!