A Jurassic-themed Tribute Page - please let me know your thoughts!

Code Feedback
1

Hi all,

I’ve just completed my Tribute Page. It’s the first thing I’ve ever written, so would love some feedback. I’ve tried to add in some responsiveness with media queries (couldn’t find a way to properly test them!), plus some coloured bullets using a pseudo class. Super novice, but have to start somewhere!

I haven’t used any grids or anything, but hopefully will get the chance to play around with those a bit in future.

Thank you!

2 Likes
2

Hello @ZaraK!

Great job on you first project. For mobile and responsiveness I would offer that you should try to utilize relative units vice absolute units. Not everything will always use relative but you can achieve the most responsiveness by using them as much as you see fit.

You can check your media queries you can use the inspect tool on most web browsers. I believe Chrome is ctrl+shift+i and once it’s open you can select mobile view. You can also zoom in and out to see how the page responds to screen sizes.

I would check that out and you’ll see that you have a couple things to fix for viewing on smaller devices.

Also on CodePen all data that goes into the <head> section should be placed under setting>html>stuff for head. I see you have a link at the top. Just so you are aware that area you are typing in is actually the <body> of the html.

Great job on this one.

2 Likes
3

Hi Justin,

Thank you for the fantastic feedback! I really appreciate it.

Yes, I really didn’t want to use absolute units… However, all tutorials for coloured bullets seemed to require them. I think that it doesn’t help that I’m still pretty unfamiliar with the mechanics of it to find a workaround yet.

Also, thank you for the tips on inspecting the code. I’ve opened it up in debug mode and then inspected. I see my image and caption is overlapping my background, so I guess I might ask for help on the forum here with that.

Thank you for taking the time to give your thoughts!

1 Like
4

Hey Zara,

congrats on your project, great job! :clap:

My ideas:

  • I like the mixture of the colors!
  • I have a wide screen, so the list is very hard to read, because the lines are very long
  • you can increase the readability of your code by 1. clicking on the small arrow on the right side of the code box and 2. clicking Format HTML/CSS
  • you can get a code validation here by pasting your HTML code into the body (without the link and the script)
  • in your CSS, you put each @media (max-width: 600px) {...} underneath the default rule; I think to get a better overview, you can move them into one and put them to the bottom of the file:
@media (max-width: 600px) {
  #main {...}
  #title {...}
}

Keep us posted!

1 Like
5

Hello miku,

Thanks for this! I read it thoroughly and have taken note. I also really appreciate your comment on my other post. Thank you for taking time to go over this with this noob. :smiley:

1 Like
6

@ZaraK, please verify your email address with codepen so we can view your page full view.

7

Done, thanks :slight_smile: