Hi everyone!
I’ve just finished my first project and looking forward to receiving your feedback.
Thanks a lot!
1 Like
Hey @Dmitriifs!
Congrats on finishing your first project!
Just a few things. I ran your code through the html and css validators and there were a few issues that you should take a look at.
Also there were a few times where Steve is misspelled.
Lastly, you have a script tag with some javascript code and I would move that over to the javascript editor.
Hope that helps!
2 Likes
Hey, your project is so cool @Dmitriifs! I like the multi-color style.
Yet one thing to notice:
- Can’t you make the first image a little bit smaller?
Overall, your project has a good quality and it passes the tests.
Happy Coding!
1 Like
Welcome to the forums @Dmitriifs. Your page looks good. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in HTML. (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 <head>’ box.- The link to the font goes in the box labeled ‘Stuff for <head>’
- Run your HTML code through the W3C validator.
- There are HTML coding errors you should be aware of and address.
- Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
- The one for CSS is good. Use it. Be aware of using duplicate selectors.
- (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. - Never use view port units for font sizes. The user should always be in control of the text size on the page (i.e. 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. Currently, the text size on your page will not change using this method because all of the font-sizes are defined with vw units. This means the only way I can increase the text size is to widen my browser window. What if I have really bad eyesight and can’t make my browser window wide enough?
2 Likes
Thank you so much for such a thorough feedback!
- I worked out every point you mentioned and fixed all the issues with code which were mentioned by both css and html validators.
- I’ve replaced br elements with ul and li elements.
- I’ve replaced vw units with rem. Is it a better choice?
Good job cleaning things up @Dmitriifs.
I may not have scrolled when I first visited your page. I see the grids do not resize properly or evenly on smaller screens. Screenshot attached.
