Hi everyone I’ve been working on this personal project for a little under two weeks now. It presented a lot of challenges since I wanted to do everything from scratch using only html and css. All the code is original, but the design isn’t. Looking for feedback on code layout, convention or best practice violations, use of semantic code, and any other input on the code you might have. It’s a big one, but I had a lot of fun building it and learning from it.
A great project once again, I seriously need to learn to be as productive as you. I see lots of new elements like the slide show ‘testimonial’ section and the text transition in the ‘why with us’ section. Here are some faults I noticed:
- The ‘testimonial’ nav link in the nav bar doesn’t work.
- Text in the testimonial elements seems odd, with part of the smaller font text sticking out along with the larger font text before hover. Try to completely hide the lower font text before hover effect.
- At very small screen widths (<275px), the unresponsiveness of the testimonial boxes causes white space to develop on the side of the page.
Finally a suggestion, I think it would be great if each section had an ‘up’ button that took me to the navbar. Right now the only way to navigate the whole page is through scrolling and if I want to access another section I have to scroll around to find it. Hope this helps you and keep on making awesome projects like these.
Looks great, and nice job. Very professional-looking.
The main thing I noticed on the website is that, as was done in your previous project, some of the images are obviously distorted due to the proportions not being kept intact. This is something that should be avoided and is easy to fix via CSS.
In the HTML code, again, you need to be consistent with your use of single quotes or double quotes for attribute values. Use one or the other, not both. Convention is to use double quotes.
In the HTML code, I noticed that you gave a P tag a class of h1. This makes no semantic sense to do—use an H1 tag instead and apply a class to that with a class name that makes sense. The P tag is for paragraph text only, and the H1 is for header text only.
While it’s fine to use colors for class names, I’d suggest limiting your use of these, because then it’d be too easy to stack on a class just to apply a specific color to an element. If you have a certain color that you apply really often to override something, this is usually ok practice, but if you’re heading down the path of having a class for every color that you’re using, you’re going to end up with convoluted maintenance. An example of this is where you have:
<a class="link white" href='#'>If you want to make your links white, apply that color in your “link” class. There’s no advantage to separating it. Also, a class name of “link” on the A tag doesn’t make that much semantic sense—A tags are links, so the class name doesn’t add any meaning to it. You should use class names that add some meaning to the tag that they’re on, otherwise you might as well be selecting the tag itself.
Once again, you have low scores being reported by Google PageSpeed Insights, and you also have errors being reported by the W3C Validator. These should all be improved and fixed. On Google PageSpeed Insights, you should shoot for at least a score in the 80s on both mobile and desktop. Anything lower is too low. And on the W3C Validator, you should shoot for 0 errors.
Thanks for the insights, I will apply these fixes shortly.
Thank you my friend. I will look into the testimonial section glitch.