Last but not least :
- The Personal Portfolio Page : https://codepen.io/van_cmoi/full/rNjrNqx
(working on updating social media infos at the moment so that part is not quite done yet)
Thanks a lot !!
This is how it looks for me on my phone. I can’t check it from a desktop right now.
The text on the project thumbnails is pretty small. But I know many people expect mobile users to zoom in / out to deal with this so it’s not a huge issue.
I’ll say this though. Even though one of thr user stories tells you to make sure your header uses up 100vh of height, you still don’t want so much empty space in between your header and your main (it’ll be especially noticeable on large screens). To solve this, you can reposition your header content to close the gap.
And as for the thumbnails, I think they could benefit from a responsive grid setup if you aren’t already using one.
1 Like
Thank you very much for the feedback, i’m going to try to fix those now ^^.
I also don’t really like the fact that they make us set the header to use up 100vh, but rules are rules I guess !
Your page looks okay @vanoushka18. Some things to revisit;
- The test script, with all tests passing, should be included when you submit your projects.
- Your page passes 11/12 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
- Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in the HTML editor. (No need to include thebodytags). For anything you want to add to the<head>element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for ’ box.- For instance links to fonts go in the box labeled ‘Stuff for ’
- You have elements out of order. Everything the browser displays belongs on the
bodyelement. Review this for an understanding of the HTML boilerplate tags.
- Run your HTML code through the W3C validator.
- There are HTML syntax/coding errors you should be aware of and address.
- Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
- The one for CSS is good. Use it and address the issue(s). (You may have to run it more than once)
- (The one for HTML misses things which is why I recommend W3C)
- Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.- Reference MDN Docs
- 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?
- Make your page responsive. Remember, the R in RWD stands for Responsive
- There’s a horizontal scrollbar on smaller screens
They didn’t. The user story says, The height of the welcome section should be equal to the height of the viewport.
1 Like
Thank you very much for all of your advice, I used W3C Validator & changed the font units everywhere. I only have one problem remaining, which is the responsiveness of my navigation bars, but I guess I’ll get to fix that once I get started and know more about JS.
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.