My Tribute Page Assignment

Code Feedback
1

Hi!

I finally completed my first project. Any feedback would be appreciated.

This was indeed a fun, but difficult first task.

{% codepen https://codepen.io/ruanmool/pen/rEYQQj %}

Ruan

1 Like
2

Doesn’t seem to be responsive.

3

@Ruanmool good job on your first project.

  • As DZamora54 says fix the responsiveness. Add media queries to make the project responsive.
  • The head is cut off of the background images in desktop mode. The background position need to be set to top. You can fix it like this
background: url("images/image-of-person.jpg") no-repeat top center fixed;
4

Thank you! I was wondering on how to make it work to look the same on mobile. I’ll try it and get back to you. Thank you for the assistance.

6

{% codepen https://codepen.io/ruanmool/pen/rEYQQj %}

Is this better?

7

@Ruanmool
The div is covering his face. You may want to cut the top of the image off. It is up to you.
The font is shrinking too much in mobile view. I am not able to read it. For fonts using rem is better than vw or vh or %.

8

Could you possible explain to me how this scaling and size thing works. I’ve tried to do some research but it is even more confusing! Thanks

9

@Ruanmool use the demo on the MDN website and change the values. It will be easy to understand then.

Example: change

background-position: left;

to

background-position: top left;
10

Thank you.

And how does the rem stuff work for words?

11

Hi @Ruanmool, it looks good to start but there are some things you should revisit to clean it up.

  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • lots to clean up in HTML. You have many typo’s. Improper use and placement of the <body> </body> tags. (codepen assumes the <body> tags, you don’t need to include it.) Invalid element <p1>, etc
    • you have duplicate declarations in CSS that affect how things display. Remember, the “C” in CSS is cascading and while the second declaration in some is better there’s no need to have the first. You also have typo’s and invalid properties.
  • a lot of uses of <br> that you don’t need. Use margin and/or padding in CSS to do your styling.
1 Like
12

You have indeed done very well. Keep the good work moving. I have also been spending much time on FCC challenges this day