My Tribute Page-First project, all opinions and help welcome!

Code Feedback
1

Hi! i started the Responsive Web Design course like 2 weeks ago and i wanted to know what do you think about my first project. Anything from pointing out errors to cheering is welcome! thank you <3
https://codepen.io/eitan-sc/full/abOGXWW

2 Likes
2

I like the rounded corners of the white on top of a red background.

Your large paragraph of text could probably stand to be left-aligned or even justified, instead of centered! Maybe break it in to a couple of smaller paragraphs. It’s a little hard to read the way it is right now.

1 Like
3

Hi! thank you pointing those things out, i changed them i think it looks much better now. :3

1 Like
4

Oh, yes, that’s much more readable! Good job!

1 Like
5

One recommendation I have is for the bottom section. When you resize the browser the layout doesn’t adjust. In other sections this is not an issue, but on the bottom section it starts to look really condensed together if you look at it on a narrow screen. There are lots of ways to accomplish this! Perhaps the quickest would be to set up a media query and change your flex settings in that media query for small screens. :slight_smile:

Another suggestion is to change your default link stylings. This is just personal preference and doesn’t matter much. But I like to add custom styles to my links so they don’t look “default.”

You can do this using css selectors like

a:link{
// for unvisited link
}
a:visited{
// for visited link
}

But yeah it looks good. Keep it up :slight_smile:

1 Like
6

A few minor things:

1 Like
7

thank you! i made those changes and did a max width 100% on the whole html. thanks for the helppp

8

Cool! i made those changes and a few more, i think its solid now, at least for my first page hahah. thank youu <3

9

The max-width: 100% doesn’t fix the wide content issue. You need the max-width to set a limit on how wide the text is allowed to go regardless of how wide I make my browser window. Personally, I think a nice limit would be to keep it from going any wider than the max width of the image at the top (and also center the text so it lines up nicely under the image).

1 Like
10

Ahh ok ok, and how do i do that? mainly the part of the text width, thank you!

11

Welcome to the forums @Eitan. Good job on your page. A couple of things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • When you submit your projects they should contain the test script.
  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • I mention this because while you have html tags you’re missing a lot of the other boilerplate elements that comprise the document. Codepen doesn’t require them so take the ones you have away.
    • As an aside, title is one of those reserved elements that belong in the boilerplate. It would not, and does not, belong within the body tags. Your use of it is not right here so you can delete it.
  • Don’t use the <br> element to force line breaks. If you want multiple paragraphs then use multiple paragraph elements.
  • Also, the <br> element cannot be a child of <ul> so remove it from your list too.
1 Like
12

You have a conveniently placed section tag wrapping all of your content below the image, so you can target that for a max width. And then you will need to target the margin property to get the text to align under the image.

1 Like
13

Heyy thank you! Those were some important things i didn’t know, i think i fixed almost everything, exept for the paragraph, i searched online and found the “pre” element but it wasn’t working out well, it messed up the whole page and i read too that its meant for poems or stuff like that so it wouldnt be the correct answer and i dont know how to fix it, couldnt find another good answer to that, if you could help me i would appreciate it a lot !! <3

14

Use multiple <p> tags and add margin via css would do the trick.

1 Like
15

Not sure why you would want to use pre. As I said, if you want multiple paragraphs then use multiple paragraph tags. You happened to put two <br> tags together so just replace the first <br> with </p> and replace the second <br> with <p>. And repeat for the second set of <br> tags.

1 Like
16

Hi Eitan,

You are on the right track when it comes to RWD. A few things that can use some improvement:

  • As bbsmooth suggested earlier, it would look nicer on larger screens if there is a max-width to the container wrapping around the content. One way to do this is to wrap a div with the class .container around everything and add a margin auto on both sides.

  • For an image to be responsive use width: 100%, height: auto. Not max-width.
    https://www.w3schools.com/howto/howto_css_image_responsive.asp

  • At the end of the page, on smaller screens the image becomes very small and you can basically not see it. To fix this: change the flex direction to column in the media query you already have.

Some minor design improvements: (I know some of these are not in the original project description but I thought they might be nice.)

  • Add some margin to the caption under the main image.
  • Use an <hr> tag here and there to separate content.

Here is a codepen with my solutions, but try to fix some of these yourself first: https://codepen.io/maximvs_557/pen/jOPpbvy?editors=1100

17

Heyy thanks a lot! that was a big help, and thank you for taking the time of editing it so i could compare and check it. <3<3