Tribute Page Feedback - Elon Musk

Code Feedback
1

Hey everyone, I just completed my first project for freecodecamp. I put a lot of work into it and I hope you guys like it. In the future though I would like to add some new features such as responsive web design and icons but for now I think it was a good learning experience. Feedback would be appreciated.

tributePageElonMusk
tributePageElonMusk1166×845 229 KB

Codepen: https://codepen.io/hudson-dev/pen/gOPoyMx?editors=1100

5 Likes
2

Hello!

I’ve posted here a few times and sometimes it can be frustrating when nobody checks out your efforts. I bookmarked your post yesterday cause I was tired. Hopefully I’ll do a review 8 hrs from now approximately, because I really like some ideas here.

But for starters…

I liked:

  1. Your html and css skills are fine, which is great.
  2. The timeline is Very Ingenious! I’ve seen how you code it.
  3. I like the color scheme, the shadows on the ‘list items’ (see below), and the topic you chose.
  4. The css is tidy and rather well commented, the class names are very good too. At some point you might want to check out BEM methodology for writing CSS classes.

What you should address (IMHO)

  1. codepen includes a boilerplate i.e the basic html, so if you just paste what is inside the body tags, your post should look fine. BUT all metadata (head element) should be placed in “stuff for head”. You find this by clicking on the gear icon, right besides codepen’s HTML section. The point here is to make the html less cluttered.
  2. The page is not responsive, or at least that’s what I experienced. If you’re using any ‘rare’ property, by clicking on the CSS gear icon you can click on ‘add vendor prefixes’ then your code should work in almost any browser.
  3. In the HTML section, I’d do the timeline using an unordered list element, instead of a div, and then every ‘year’ can very well be a list item.
  4. You can validate html and css, just type html/css validator in google. You’ll find out how. And then, add a comment stating that the pages are validated (okey, I’ll give you a hand here)
  5. The fonts should probably be imported in the HTML file, and in one or two shots (links). Google fonts API has the ability to do it, so you might want to take a better look at it (it’s very easy to use).
    I’ll be back to your codepen in some hours.
3

I really like your tribute page, I would like to suggest as
@anon10002461 point out, that it seems the page is not responsive.

Try view the tribute page with a cell phone browser.

4

Your layout was very creative and beautiful! I loved it!

5

Thanks for the suggestions! I appreciate the feedback and I will be working on them. I’m not sure however what you meant in number 2 of What you should Address. I tried clicking on the ‘add vendor prefixes’ but it completely changed the entire look of the website. Also when I tried validating the HTML and CSS using the link you gave I received an error saying that “This document cannot be checked”.

validationError
validationError1868×352 28.6 KB

1 Like
6

You’re welcome.
Let me know once you’ve the time to make it responsive (or try at least), etc. And I’ll get back to it.

7

Okay I will let you know. Do you know of any resources I should use?

8

Uhmm…
Maybe check out any simple website done with html and css by Brad Traversy (this is a nice responsive website by him). So you can get how he starts from mobile version to desktop, and what do you usually need for that (media queries).

Plus there are 2 important tools you might need: flexbox and grid. You can get the basics in the FCC tutorial for css. I believe you’ve used flexbox but mostly for centering (not 100% sure).

To make such a complex page responsive I would make a brand new project and try to create the mobile version first (this is almost always the right approach).

The mobile version should show your page in this order

  • Elon musk section
  • Timeline Section
  • Maybe something else
  • Footer

This elements should be re arranged in Desktop version, probably like this:

  • Timeline Section || Elon musk section
  • Maybe something else
  • Footer

Hope that’s not too overwhelming, as I said, your page looks nice.

9

Thank you. I will check them out.

10

I don’t mind to help you out using zoom or things like that, I don’t have much to do these days. But in any case try a few things by your own before :slight_smile:

11

Thanks for the offer but I think I will try and figure it out first myself. However if I really need help then we can set up something.

12

Ok I think I made my website more responsive. Check it out: https://codepen.io/hudson-dev/pen/gOPoyMx?editors=1100

13

Hello @hudson.n.kim !

If you want to make your picture fully responsive (as we learned at the course) you can add this code on your CSS:

img{
  max-width: 100% !important;
  height: auto !important;
}

And I tought your code too complex, you almost wrote a code for 2 pages. Are you sure there wasn’t another way? Easyer one?

But the final result was better then the first one! Congratulations! :clap: :clap: :clap: