Finished with Project 1 of 5 Responsive Web Design Projects

Code Feedback
1

Finally! :tada: I am finished with one of the five projects for the Responsive Web Design Projects Challenge! It took me two hours to code out the whole website and I am finally done. I feel so happy and excited to continue to the next challenge and the next challenge and the next :laughing:

If you wanna see my project , copy and paste this:
https://codepen.io/_codeKing/pen/ExVJNap?editors=1000

2 Likes
2

Great work :+1:

Few notes:

  • When the viewport height is small enough text covers the image

1
12746×862 294 KB

  • Image and caption are not aligned

2
21254×582 102 KB

  • I believe it makes sense to move CSS to the dedicated tab

3
32492×706 68 KB

1 Like
3

Oh thanks for the FeedBack! If I may ask, what code should I add and remove?

4

Hey there, so here are some things that might help.

  • CodePen automatically adds the <!DOCTYPE html> and <html> tags so you don’t need them.

  • The <head> tag is added automatically as well and can be viewed if you click the settings icon in the top left of the HTML section. You can add the font import there.

  • I agree with @lancelote that you should move your CSS down to the CSS section. It is much nicer being able to look at your HTML and CSS at the same time.

  • Your img link is soooooo long lol. Maybe use this one instead https://pbs.twimg.com/profile_images/988775660163252226/XpgonN0X_400x400.jpg

  • For your fig-caption, I don’t think you need the p tag in there, pretty sure you can just have the text between the fig-caption tags.

  • To center the image and text you could just add text-align: center to your img-div

  • Your Header has the vh height unit, but that is a percentage of the screen so it allows it to shrink beyond the content. Just remove the height or set it to a static px amount.

  • The Footer is not centered cause the margins are 10px and 28px for right and left respectively. Not sure why, just give the footer a width and set it to auto margin, or set to block display with equal margins so it is centered.

That’s pretty much all I can see from a quick run-through. Keep it up!

1 Like
5

@codecory Thanks! :+1:

1 Like
6

Page looks okay @Lewis2. Some things to revisit;

  • This line has two typo’s;
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">">
    • rel="stylesheet" is duplicated
    • there’s an extra double quote and > at the end of the line
  • As mentioned, you should get used to doing external styling

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

1 Like