Review my tribute page

Code Feedback
1

Hello everyone, I just completed a tribute page. Could you please review it? If there are any mistakes, let me know. I need your feedback to gain confidence before posting it on Twitter.
Here’s the link:

1 Like
2

Hi there!
Your tribute page is looking awesome. Just make it responsive for small devices.

1 Like
3

Beautiful work, @masoomaqasim5! The layout was enjoyable to read and scroll through. You used a nice font and chose your image placement perfectly.

One thing: your .main-pageimg and .his-journey elements aren’t aligned in the center. This is the current styling for those elements:

.main-pageimg {
  margin-top: 40px;
  margin-bottom: 50px;
  display: block;
  margin-left: 312px;
  margin-right: auto;
  border-radius: 20px;
  width: 430px;
  height: auto;
  border: 2px solid black;
}

.his-journey {
  width: 1070px;
  height: 3850px;
  background-color: #f1efed;
  margin-top: 90px;
}

For the main .main-pageimg, try replacing your left margin to auto, just like your right margin. When both sides of a block element have auto margin, that element is centered horizontally.

For the .his-journey element, add margin: auto and that should do the trick. Again, it works on the same principle as the .main-pageimg.

Well done!

2 Likes
4

Thank you for your thoughtful consideration; it means a lot.

I will definitely make those changes.

Thank you again!

5

I don’t know how I do that.

6

Sorry my mistake. You will learn about responsive design in next curriculum challenges.

7

Can anyone help me make my tribute page responsive? I want to showcase it to someone and also post it online. However, if they open it on their phone, all my efforts will be wasted. I really need assistance with this!

I’ll let them know that someone else helped make it responsive.

8

You will learn it soon in the upcoming projects. I would go ahead with those and then come back to your tribute page and fix it.

That being said, if you really wanted to, you could study a bit on your own and try it now. Here’s what you’ll often need when you optimize for mobile screens:

  • Media Queries: these are basically CSS rules that, among other things, only apply certain styling if screens are a certain width. MDN’s reference is a great way to figure it out: Using media queries - CSS: Cascading Style Sheets | MDN Don’t worry if you don’t understand the whole article — some of the info is unnecessary. Focus on the screen-width queries.
  • Use viewport-relative units: CSS has some units, like px, that are static: 100px is always 100px. But there are other units, like vh and vw, which are relative to the size of the viewport. Combine this with percentages for nested children elements and you should get a flexible webpage that adapts well. Media queries are still needed for acutally changing layout, but viewport relative units are good if you don’t need to change the order of elements, but only their size. This is a good, simple article to learn the different CSS units out there.

There are also other techniques for making content responsive, like flexbox and grid. Usually the solution is a combination of these. You will learn this in the projects ahead, but if you like, you could try implementing them now for a headstart :wink:

Just remember that, whatever combination of solutions you end up using, the simplest way is always the best way, as long as you achieve the desired results.

Happy coding!

1 Like