Tribute Page - First coding project!

Tribute Page - First coding project!
0

#1

This is my first attempt ever coding something. I know it’s pretty sloppy, but for my first time I’m pretty happy with it. I plan to style it a bit more and adjust the images a bit.
Was wondering if I could get some general feedback though on the colors and text mainly, I feel like they’re a bit off or that the text isn’t very clear.


#2

Nice job! It looks great, I’d recommend increasing the font size for readability and/or even changing the font, and using something like a hex color could help with the intensity of the blue which is a little harsh.

check out this resource for finding some cool colors and hexcodes:
https://www.w3schools.com/colors/colors_picker.asp

this is also a great resource for color palettes:
https://color.adobe.com/create/color-wheel/?base=2&rule=Analogous&selected=2&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.11753282155692579,0.17896560681471196,1,0.10695486761680248,0.37418636861768256,0.91,0.16753282155692584,0.663625486530825,1,0.10695486761680248,0.7968417014508195,0.91,0.11753282155692579,1,0.8839798057544754&swatchOrder=0,1,2,3,4

Good luck on your future projects!


#3

For your first project, you didn’t completely mess it up so that’s a good thing haha :stuck_out_tongue:

A bit about the colors, you usually don’t want to use very intense colors for the background, they don’t work well on the eyes. My suggestion would be to choose something blueish but with lower saturation, for example, #3f59ec.

You might also want to play around with the fonts, the default one looks really bad. You can find many free fonts at fonts.google.com, for example here’s a Roboto font which is one of my favorites:

To add this to your project you want to click the “Select this font” at the top right, choose @import in the window that shows up and get this code:

@import url('https://fonts.googleapis.com/css?family=Roboto');

(you import all google fonts the same way, so if you know their name you can simply change Roboto in above link to something else)

When you insert this code at the top of your CSS you can use it with font-family: Roboto in your body CSS (or wherever else you wish :slight_smile: )

Good luck!


#4

Thanks so much for your input guys! I’ve tried a different font and changed the background color, it’s definitely a lot easier on the eyes now!

There’s one thing I can’t seem to find on the internet though, I’m probably just not searching properly, but I’d really like to have the left and right side be a different color and can’t seem to find info on how to do that.
To be more specific, everything is centered right now and I’d like to keep it that way with the blue background. However, In the unused space I’d like a different background color since one solid color throughout the page looks kind of cheesy IMO.

If anybody would be able to point me in the right direction to go about doing this it would be greatly appreciated!


#5

No problem! Looks much better now :slight_smile:

As for the background color, just apply a different color to “body”, at the moment you have background-color: white.

By the way, I’ve noticed that you added a tag inside your HTML, you don’t want to do that. The body element is used as a wrapper and it contains the entire web content (excluding “head” element) and should only be used below “head” element and closed at the end of the document. Here’s a picture that shows the HTML structure:

Also, codepen makes it easy so you don’t have to use either head or body tags in your pens. And they can’t be overwritten so it serves you no purpose to have it there :stuck_out_tongue: And since it’s there by default, you can still apply styles to it in CSS.


#6

Awesome! Thank you so much for the info, I’ll be implementing this tomorrow after work!


#7

At around 480px screen size the whole info area could use less margin as it looks thinned out on a mobile screen.


#8

You were totally right, I didn’t even notice that. Less margin and lowered the line height a bit. Thank you so much for your feedback!


#9

I don’t know if responsiveness is part of the project curriculum as it’s not part of the testing, but it’s pretty much a standard requirement for most sites so it’s good to check it :slight_smile: