Hey all! Hope everyone is doing well! I’ve just completed my first web-page ever. It was a project for a course I’m currently participating in, it’s simply a cheat-sheet involving all the HTML and CSS that has been taught as well as having some simple requirements as to what the cheat sheet needs to involve. Such as an HMTL table, one HTML subject, one CSS subject, etc.
Anyway, I just wanted to share my project(will be listed below this paragraph) for any of those who so desire to do me the privilege of viewing my finished product. Absolutely any advice, input, comments, constructive criticism is greatly appreciated and welcomed! Feel free to message me regarding anything what-so-ever, and once again, thank you so much for viewing.
My HTML/CSS Cheat Sheet Project
Hello, it was a nice project to put the skills you learned to the test. My feedback would be to rework your mobile view page. Thats all I looked on was my phone. The images do not fit the phone screen, the spacing between elements needs some work as well. Looks like everything is just squished with no real separators.
Its a nice start though. It would be a great project to improve on as you learn even more.
Hey @Run0fThuRex Congrats on the first web page! What I really like about this is your heading structure. You’ve used h elements for all the headings and you didn’t skip any levels. It has a very nice hierarchy.
One minor thing I will point out with the headings is that it is considered a best practice to only have one h1 heading on the page (and that would usually be the main title/subject of the page and would be placed near the top of the page). What I would recommend is that you change the second h1 at the bottom to an h2. And then I would probably not put the text “Feel free to contact me” in a heading but rather just have it in a p element.
There is one bigger issue I want to bring up though. The blue text on black background for the code and link text is not going to be readable by a lot of people because there isn’t enough color contrast between the text and the background color. Generally, if you have a dark background then the text on that background needs to be pretty light so that it can be easily seen. The lighter blue text in the code samples is technically accessible (but just barely) so you don’t need to make it any lighter, but I would highly recommend you did. But the darker blue text on the code links definitely does not meet accessibility requirements and needs to be much lighter. You can test for accessible contrast levels using the WebAIM Contrast Checker. This text only needs to meet a minumum 4.5:1 contrast ratio, but I would recommend you shoot for AAA requirements and push it to 7:1.