Tribute Page: The Devil Wears Prada (Need Feedback)

Code Feedback
1

Hello! Here’s my tribute page: https://codepen.io/adaaaaamn/full/pooNxaV. I encourage you guys to check my HTML and CSS codes. I think I made some questionable decisions there so if you guys found something wrong or unusual, please tell me. Thanks!

2 Likes
2

Looks okay for a first try but maybe
change the zoom in onto the second pic to her face instead of her belly

3

Your html code may have more semantically written :

  • For main heading “The Devil Wears Prada”, use <h1> and resize fonts instead using css.

  • For images with image and captions, use <figure> and <figcaption>

other:

  • Instead of using <div> spacer, use margin-bottom or margin-top for space.

Also, gotta say, look wise, it really looks cool!

4

Looks okay for a first try but maybe
change the zoom in onto the second pic to her face instead of her belly

I’m gonna look at that. Right now, I’m just simply scaling the image to be bigger.

5
  • For images with image and captions, use <figure> and <figcaption>

The instructions say to use a <div> element. Is it okay if I enclose the <figure> element inside that?

  • Instead of using <div> spacer, use margin-bottom or margin-top for space.

I feel like it’s kind of complicated to maintain. With the spacers, if I want to increase the space I can just add additional spacers.

6

I am moving your thread to the #project-feedback subforum

7

I see, if instructions says it so then follow it. Enclosing <figure> inside would also be okay.

8

Hey @adaaaaamn, seems you have two elements that share the same id. Check at line 96.

9

Thanks! I forgot to remove them.

10

The example pen does use figure and figcaption

11

The example pen does use figure and figcaption

I updated it now

12

I have to agree about the <div> spacer.
Maybe you could create classes like .spacer-2, .spacer-3 which you can swap out if you need to increase the spacing between your elements. Stacking spacer <div> tags messes with the semantics of your page.

1 Like
13

I’m sorry if this is stupid but what does page semantics mean?

14

Just the structure of the HTML. The simpler, the better. Also think about screen readers going through your page and hitting all those extra divs.
By the way - your page looks fantastic!!

1 Like
15

Oh okay, thanks. Also thank you for the compliment!

1 Like