Design comparison
Solution retrospective
I'd like a feedback regarding the code, as this is my first website and I'd like to know if I wrote a "clean code". I know that my attempt to make it responsive was a fail, but I'll study more and I will fix my mistakes in my next project. Also, any suggestions or opinions are very much welcomed.
Community feedback
- @edburtnieks-privatePosted over 4 years ago
Hey Mihnea!
The project looks nice, especially for the first website. Good work. Couple of things.
First, as you see in your report there are some issues with
imgelements missingaltattribute. You should always providealtattribute:) If the image is purely decorative (in this case there are none) you can leave thealtattribute with empty string likealt="". That's totally fine, but it's good practice to always include it.Keeping on semantic HTML topic, there should not be two
h1elements on single page.h1element represents the main title of the page and it only makes sense to have one main title per page. If you need to break the title in several lines, as in this case, you can put<br>between the words you want to break. One other thing you could do is to change<div class="flex">to<main>element as it is the main content of your page.I also can see that you have quite a few unused css classes (e.g.
.flexand.container) and unnecessary wrapper elements. Try to get the result with as few elements as possible and add them later if necessary.As for "clean code". I notice there are some inconsistent tabbing inside HTML file. Inside css file, you have indentation set to 4 spaces instead of 2 as you have inside HTML file. It's good practice to stick to either 2 or 4 spaces and be consistent though project, even in different files. Also inside css file, there are a lot of inconsistencies regarding spaces before
:and{. In some places you have space before/after, in some you don't. For these issues you can look into file linting and formatting:) You won't need linting much for this case, but file formatting using for example Prettier is definitely very useful and keeps your code clean automatically once you set it up;)One side note, it's good practice to have your css file be the last
<link>inside<head>element. In this case it wouldn't matter because you are only getting fonts and icons, but it's good practice, if you have external css files (not yours), they should be before your ones:)Aaand finally you should have atleast
:hoverand:focusfor the button;)These are the major things I picked up on. Keep it up!:)
2@mihneagttPosted over 4 years agoThank you very much for your reply!
I did not know the importance of the 'alt' attribute, but I surely will not forget about it again.
It makes sense now that you are pointing it out, I did not think about it before but I'll keep in mind during my next projects.
I was planning to get rid of 'container' before uploading, but I got too excited and forgot haha. The other one, I definitely overlooked it.
I had no idea the indentation was set differently, apparently these are the default settings for Sublime Text, but I will soon move to VSCode and I will make a proper setup. As for Prettier, I had no idea something like this even existed, I will definitely install it once I move to VSCode. It will help me a lot, since I am not really an organized person. Thanks for the tip!
I will definitely keep in mind to link the css lastly.
I'm planning to take some more advanced courses regarding CSS and HTML, hopefully those will help me along the way.
Thank you very much for your feedback, I hope there were not many inconsistencies in my reply, as English is not my mother tongue.
1@edburtnieks-privatePosted over 4 years ago@mihneagtt You are welcome:) I am glad I could help. Keep it up!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord