So I am VERY knew to this but I just finished my tribute page and just wanted some feedback. It is very simple, nothing flashy, literally did this in like 2hrs. Let me know what you think? https://codepen.io/KaylaMT/full/BQxZeZ/
Sometimes the simple things are better 
But, imho, there is too much contrast… instead of black i suggest you to use rgba(0,0,0,0.89) or #1c1c1c and also maybe change a little the font, you can find some good fonts on Google Fonts
1 Like
Nice job! I agree with @NeckersBOX that the contrast is very high, though. Also, in the paragraph immediately below the photo, the text almost touches the white border on my screen. You could prevent that by setting a padding for the container or the body in CSS.
Did you notice the v-shaped icon in the top-right corner of the HTML pane on CodePen? If you click that and choose “Analyze HTML”, you’ll probably learn a ton of interesting things. Among other things, it tells me that apparently you forgot to add the Bootstrap CSS in your Pen settings. (Click the gear icon on your Pen to add it.) You have Bootstrap classes in your HTML but no CSS for them. With Bootstrap you can also easily make your image responsive, which it isn’t right now.
One more minor thing: Most Web designers consider it bad practice to use “Click here” as link text. You could use “Katherine’s Wikipedia article” or something like this as an alternative. The link text should somehow communicate to the user where the link takes them.
But don’t let my criticism discourage you! It is by all means a nice and interesting tribute page.
Other than the high contrast between the black inner parts and the white outer parts it very good. I would use a dark grey.
So I added bootstrap and it changed it completely and looked really weird. I don’t really know how to describe it. Like it had a white border, another black border and then the inside was grey but I dont see where that would be in my code.
@KaylaTullis Yes, that is perfectly normal. Your page now has a lot of Bootstrap default settings that you have to override in your own CSS. The problem is that you have some minor formal errors in your HTML that prevent me from giving useful advice. I will clone your page and try to fix it on CodePen.
I’m going to look at it too, just so I can understand what happened., it was just a lot when I changed it lol
@KaylaTullis I forked your project on CodePen here: https://codepen.io/janschreiber/pen/dOjWqZ in order to get rid of the formal issues with your original code. If that is roughly what you had in mind, please fork it on CodePen and post a link to your fork here so we can talk about the more interesting parts.
@KaylaTullis Nice work.
The letters in the second heading look a little to close to each other. Try using letter-spacing to spread them out a bit.
I think using her last name in the timeline bullets is too repetitive. I don’t think you have to use her name so much. I would remove her name and just state the accomplishment by it self.
- Graduated from High School at age 14 …
- Graduated Summa Cum Laude …
1 Like