i would like to get some feedback from my first challenge. It’s a tribute page to Chadwick Boseman. It’s responsive but if you have any ideas to improve, I appreciate it.
Hi @joelsantosbrandao !
Welcome to the forum!
I have edited the title of your post to remove the codepen link.
Please avoid placing links in the title since we cannot click on them.
I think your page looks good.
You might consider rewording the link to something like this.
For codepen, you don’t need to include the head and html tags.
If you need to add links to the head you can place them in the html settings.
Hope that helps!
I don’t think using
display: nonefor the
figcaptionis the correct choice. If you want to hide it and still have screen readers read it I believe you have to move it off-screen (Invisible Content Just for Screen Reader Users). Also, a
divis not a permitted parent element for the figcaption element.
I would see if you can improve the text for the link. You really do not want to use the word “see” and “click here”. I think all you need is “Chadwick Boseman Wikipedia page” for the link text (Link Text and Appearance).
I don’t believe your
table-filmographyis using valid HTML. If you run your HTML through a validator it should tell you so as well.
font-sizeis going to cause issues. The text size will become too small. I would suggest using the clamp() function instead.
Good job, keep it up.
Thank you very much, it was my first time here. I made the recommended changes
Thanks for the feedback , however i have some difficulty understanding why vw in font size would give me problems . I tested it with mobile phone, tablet and laptop and both were within the desired parameters.
If you have any documentation or tutorial that can improve the fluid text part, I appreciate it.
I have already made changes to the project as recommended.
Do not use view port units for font sizes. The user should always be in control of the text size on the page (that is, they should be able to manually increase the text size). Using view port units prevents them from doing this. Your job as a developer is to make sure your page is responsive to text size increases. If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. If font-sizes are defined with vw units the only way a user can increase the text size is to widen the browser window. What if the user has really bad eyesight and can’t make the browser window wide enough?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.