First project - Tribute/roast of Michael Owen

Code Feedback
1

Hey everyone. I’d love to get some feedback on my first attempt at creating a web-page: https://codepen.io/bofmar/full/eYZObXv . The page seems to be passing all the tests but I would like someone to have a look and tell me how I can improve the page’s responsiveness and accessibility along with anything else that might strike an experienced programmer as odd or bad practices. All critique is welcome since I am a massive newby.

Thank you all for taking the time to look at this!

2

Hi @bofmar,

Nice website! I like how the code looks.

The only recommendation I would make is to subdivide the body into some small number of big containers to group things together. For example, you might have one section for the title, subtitle, picture and caption; another for the biographical text after the picture; another one for the timeline and text below; another for where the quotes are.

This makes the code easier to read (which means that it’s easier to maintain in the future if you want to add things to it, or move sections around).

3 Likes
3

Hi @johnsciutto, thank you very much for your kind words. Your suggestion makes a lot of sense in retrospect and I will be doing something along those lines for future projects. Thank you a ton for taking the time to check my code. :smiley:

4

Welcome to the forums @bofmar. Your page looks good. Some things to revisit;

1 Like
5

@bofmar Well done with the page. It looks good. my only suggestion to add to all that’s been said is for you to add little padding to the career timeline to separate the text a bit from the border.

In all it looks great.
WELLDONE

1 Like
6

Hey @Roma and @Amegs ! Thank you both for getting the time to look at my project and for pointing out what needs improvements. I will be reiterating on it based on your suggestions today.

Again, thank you very much for the help.

7

Hi @bofmar and welcome :facepunch:

Nice job with your first page!

My comments:

  1. I don’t like to scroll a page to see the entire image, so I would prefer to put something like this in your code:
#image{
  max-width: 100%;
  max-height: 70vh;
}

Just a opinion :grin:

  1. And every thing that you write on codepen is in the body, so your title and script can be put in other place, like the image above:
    image
    image755×575 26.1 KB

A link if you want to know more about how codepen works:

  1. And I think some text-align: justify; would be nice in your code:
body p{
  text-align: justify;
}
  1. And here:
<p class="sans-serif"><b>If you'd like to know more about <del>the walking meme</del>one of history's greatest men,<a href="https://en.wikipedia.org/wiki/Michael_Owen" target="_blank" id="tribute-link">check his wikipedia page.</a></b></p>

I think a <hX> would be better tham a p, p is normally used as a paragraph, and <hX> for a text that you want to emphasize.

1 Like
8

Hey @julio-pinheiroo !

Great stuff. Even though by now I have figured out that codepen auto-generates the , and tags I was wandering where exactly I am supposed to put the script and title in. So your comment really helped on that regard. Also the rest of your suggestions make total sense too. Thank you for taking the time to look at my project :smiley:

1 Like