Hey everyone,
I just finished my first project on FreeCodeCamp. Let me know what you think!
A few suggestions:
- Don’t set the width on the main section in percentages. As I narrow my browser the content gets very skinny. Personally, I would not put a width on it at all. I’d just use a max-width instead so that it doesn’t get ridiculously wide. And then center it on the page and you don’t even need side margins/padding. Another plus will be that it is automatically responsive and will scale nicely as you make the window narrower.
- Speaking of main sections, your content should be wrapped in a
<main>, so change<section id="main">to<main id="main">. - The link text at the bottom could be a little more descriptive. Maybe something like ‘More info on Douglas Adams’.
- Use figure/figcaption for the image. Technically, the img should have some alt text, but if you use figure/figcaption then you don’t need it, so set it to
alt="".
2 Likes
Thanks for the feedback, I’m making those changes. One thing I’m confused about though is the part of your suggestion where you said ‘center it on the page and you don’t even need side margins/padding’. How do you recommend doing that? If I remove the padding the text runs right up along the edge of the gray div’s borders and it doesn’t look good.
Thanks for the info on max-width. That was really helpful.
Hi, I already sent thes two projects, can I get a feedback? Thanks a lot!
Ahh, I was referring to the centering of the <section id="flex-container"> itself, not the content inside of that container. Since you have that set to display: flex and align-items: center, it is already centered. You just need to remove the width: 30% from it. That’s what you don’t need. Then set a max-width on it (something like max-width: 40em looks nice).
@macondo78, welcome to the forums. Please don’t hijack anyone’s post. If you want feedback on your pages, please open your own topic.
Thank you.
Hi Roma, my bad, sorry!