This is my first post on the forum, as someone who is entirely new to coding, since July 2020.
I have completed the RWB certification and have now almost completed the first Javascript certification too. I have also learned the basics of Git and dabbled a little in Python.
As a novice, I’d appreciate any feedback on my RWB projects, or any tips on where I need to improve my coding. I tried to incorporate some little tricks along the way (e.g. the CSS animation in my Rubik’s project).
(As I designed all of my projects offline in Chrome, the layout doesn’t work so well in CodePen unless in full-page view. I guess that I can certainly learn to incorporate media queries more effectively for one thing).
It’s a shame you didn’t ask for feedback on each project individually as you completed them. It’s just a lot of work and time to go through all of them at once and give decent feedback.
For your portfolio page, I have one issue that you should definitely fix.
You shouldn’t use just view port units (vh/vw) for font sizes. Doing this takes away the ability of the user to manually increase the text size, which is a big accessibility issue. Use em units for your font sizes, and if you wish you can add a tiny bit of view port unit to them (for example: font-size: calc(1em + 1vw);). And you also must get rid of the font-size declaration in :root.
No worries, thanks for your feedback. I just got my head down and ploughed through the whole lot and didn’t feel ready to take on feedback until I felt like I was getting my head around it. It’s a little overwhelming at first when you’re a complete novice! Anyhow, I’m going to build a proper website from the Product Landing Page project, so I’ll rework all the font sizes etc, thanks!
Your pages looks good. Some things to revisit;
The issue with the font size mentioned previously is on all your pages and should be addressed.
survey
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
For instance links to fonts go in the box labeled ‘Stuff for <head>’
Change the cursor to a pointer when hovering over the submit button
On small screens the contrast is poor and any text is hard to read.
prod landing
Same as previously noted in how to use codepen
side note, the FCC test suite is JS and will not work when placed in the head element. It needs to be right before the closing body tag. Codepen is forgiving which is why it works for you.
Same as above. Run your HTML code through the W3C validator.
There are HTML coding errors you should be aware of and address.
Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
side note, the FCC test suite is JS and will not work when placed in the head element. It needs to be right before the closing body tag. Codepen is forgiving which is why it works for you.
Same as above. Run your HTML code through the W3C validator.
There are HTML coding errors you should be aware of and address.
Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
side note, the FCC test suite is JS and will not work when placed in the head element. It needs to be right before the closing body tag. Codepen is forgiving which is why it works for you.
Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.