Rough Tribute Page, Please Critique

Hi All,

I just completed my tribute page and it’s ugly.

If you have time, can you look at it and suggest improvements? http://codepen.io/wrshif/pen/jqjPad

Thanks,

William

Keep in mind that I am still learning as well but my personal suggestions would be: try not to change the aspect ratio of your pictures, it makes them look kind of weird. I also personally don’t really like using the stock white background, and I think have your title text in red in this case looks a little weird. When using codepen put your css code in the css section rather than putting it in html. I liked the text at the end and thought it was pretty funny, keep up the good work and you will see improvement. Here’s my tribute page: http://codepen.io/twm013/full/yOwaKd/. As you can see it is far from perfect, but I have already gotten a better just by coding every day. Good luck!

I wound move your inline css styles to an external style sheet. That is industry standard so it would be better to start now and try to do that.

I would go back and try adding in some bootstrap. It was an easy way for me to add styling to my work when I first started. I would spend a long time trying to figure out how to make columns and make responsive webpages when bootstrap already does that for you. Its also used a lot in the web dev industry so it doesn’t hurt learning it either.

Thank you for taking the time to comment. After looking at your site, I want to create a background and add some of those buttons that move the page down to the next part. What are those buttons called?

When you say not to change the aspect ratio of pictures, do you mean that I should not change the height and width of the pictures? If so, how can I get the pictures to be the right size?

Thank you for the advice- when you say move the incline css styles to an external style sheet, is that the same as moving my elements to the CSS box to the right of the HTML box in code pen? I’ve seen some folks doing that.

I will go back to the bootstrap section of the tutorials and try to incorporate them. Thanks for the heads up.

1 Like

Yep its the same thing. When you start building your websites on your local machine it will be a little different but It will be the same premise and functionality. As a basic approach when developing you want to try to keep your different langues separate. So HTML gets its own files. CSS get is own. JavaScript gets its own etc. Even though your able to mix HTML, CSS and JS try to keep it all separated. It makes bigger projects easier to read and debug.

Most of what I have to say has already been said. When you add a picture, try not to change both height, and width, only do one or the other. That way the picture is resized, but retains it’s aspect ratio. That will keep them from getting that squashed look.

And put as much of you inline CSS (the stuff inside your style tags) as possible into an external stylesheet. Or this case the CSS box.

Other than that it looks great on all device sizes from what I can see.

Edit:

Also, for something like the border, you don’t have to do the color, width and style separately. Instead type it like this:
border: 2px solid black;
This will give you the exact same style as typing each one individually.

One thing you can try design-wise is varying your fonts either by switching font weight/size or font-family. For example, the text at the bottom of your site could be a little smaller and carry less weight, so more emphasis is placed on the middle and top sections.

A good resource for design tips: https://hackdesign.org/