Feedback for my Tribute Page (my first actual webpage ever)

Code Feedback
1

Hello,
I created this page about two months ago; however, I would like feedback for it. This was my first try after using FCC. It’s also my first webpage without using a pre-made template. Any feedback would be appreciated. And thanks in advance.

https://codepen.io/JPGC04/full/abvpVJN

4 Likes
2

your website looks very nice I love that it’s also mobile responsive keep up the goodwork

1 Like
3

Really great job! You definitely worked really hard! The "Brief History: " the colon could be removed.

1 Like
4

Good job on your page.

A couple things I noticed.

  • You have a scroll bar along the bottom of the page, but there is no additional content. You can add overflow-X: hidden; to get rid of it.

  • You have an extra opening tag at the beginning of the paragraph starting with “The Candaniens were founded”

  • If you want to challenge yourself you should remove <br>s from your code and style that with CSS instead.

2 Likes
5

Thanks very much for your advice.
I set the overflow in the body in CSS like this: body { overflow-X: hidden; }
I don’t know if that is the correct method to do so since I didn’t really understand what it does.
I removed the extra opening tag, and I removed all
tags. I also made the necessary changes in CSS after removing the
tags.

Thanks very much.

6

hi @anon43350554

i’d like to share what i learned, since you using position relative, instead of using margin and padding to positioning the child element inside their parent.

i just add this lines code, and remove the overflow x

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

and the scrollbar disapear.

you can read more here

3 Likes
7

Thanks
I’ll check about this in a while, and I’ll see how they will help me after making these changes.

1 Like
8

and the fact is, you can make your container and image to 100%,

my page use the position relative too

https://codepen.io/sobadrdb/pen/yLYGORB

2 Likes
9

you’re doing a good job, continue striking .

1 Like
10

Your page looks good @anon43350554. One thing to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There’s an HTML coding error you can address.
1 Like
11

I wish if you could help me identify the error.
I got an error that I should remove the div which contains the image.
however, the challenges of this project require me to put the image within a div.
what am I supposed to do?

12

hi @anon43350554

you can change the div to figure, as figcaption is allowed as child.

<figure id="img-div">
   ...
   ...
</figure>

hope it help.

1 Like
13

Thanks @sobadrdb and @Roma
I fixed my error.

1 Like