Hi, i finished my tribute page, this is the link:
https://codepen.io/Ast-2435/pen/yLBabMb
I wanted to add media queries but i’m not really sure what should i change in them, and i really don’t know how many and which pixels ranges should i support.
Also, please any comment you have about my page is welcome, since this is the first website i ever made, i’m pretty sure it’s full of horrors haha, so any feedback would be great. I wanted to use the “header, section, footers” stuff i learned in the applied accesibility section but i choked and forgot almost everything, also i’m not sure if i should have used flexbox or grid, i wanted to, but i think i would’ve only overcomplicated things.
If i missed any margins, padding, font sizes, text alings, or general QOL stuff that would have improved the site, please tell me, i tried to make it without going back to the lessons, so there’s stuff i wanted to add but i just forgot, for the survey page, i will definitely go back to check and do it better.
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page
Hey man, well done there! It needs some css adjustments but you’ll learn them by practicing more. Just keep making more websites (the projects are good for that). Also try to recreate other websites that you think look cool. Here are some of my tips:
- Instead of putting background, margin, etc on the h2 and p, put them on #tribute-info, which is their container and should handle that.
- There’s a problem with your web page when the browser width becomes lower than the margin. You should percentages for the margins or use a media query so that when the browser width is too small, the margin uses percentages.
You can always read the lessons again if you need to remember something, and of course you can also search the web if you need more resources, or ask here if you can’t find anything. Good luck!
1 Like
Thanks for the feedback!, i’m actually writing the survey page right now, i just noticed the margin problem you’re talking about, that’s really bad!, changed it to percentages and it looks ok for now. also changed the margin of the caption to percentages too, since it was disappearing when the browser width was too small.
about the h2 and p, i’m not really sure why i did it that way, i got confused about the interaction between the h2 and the list, but i fixed that now.
Again, thank you so much for the feedback, it was really helpful!
Sorry I meant to say h2 and ul. But I see you fixed everything else now, that’s great!
For the survey page, I recommend you to use flex or css grid, it’s the perfect exercise to practice it. If you need any help you can ask me or the others here.
If you’d like to use it, I used these games to practice css grid and flex before using it on my web pages:
1 Like
The best way is start first write code for mobile and then change screen size i see when is best point for break and that is the best way for using media query start from 375px width and sky is limit 
1 Like