@edburtnieks-private
Posted
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 img elements missing alt attribute. You should always provide alt attribute:) If the image is purely decorative (in this case there are none) you can leave the alt attribute with empty string like alt="". That's totally fine, but it's good practice to always include it.
Keeping on semantic HTML topic, there should not be two h1 elements on single page. h1 element 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. .flex and .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 :hover and :focus for the button;)
These are the major things I picked up on. Keep it up!:)
@mihneagtt
Posted
Thank 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.
@edburtnieks-private
Posted
@mihneagtt You are welcome:) I am glad I could help. Keep it up!
