@folathecoder
Posted
Hi Mardiya! 😃
Nice attempt to create the sketch. Kudos! Your documentation and commit messages are lit. There are some changes you might wanna make.
I will start listing them under this thread:
- Meta description is important: Try to get in the habit of optimizing a page for SEO. SEO is one of the core skills of a frontend developer.
I recommend you checkout "SEO for developers" on YouTube (like a 20 minute video) and then learn about about open graphs. https://ahrefs.com/blog/open-graph-meta-tags/
- Remove the style tags in your html and it is considered a bad practice to write in-line css.
Writing styles inside your html will take precedence over external CSS, so overriding it will be very difficult.
And you will not be able to maintain your CSS code.
Always use external stylesheets!
- For button design, people usually use the "a" tag instead, because it gives you the flexibility of creating your preferred button from scratch. The "button" tag is a lot of work because you will need to override the existing style before creating yours!
Always use "a" tags for buttons!
- The way you name your CSS classes can be improved. I recommend you learn the BEM naming convention. You can check this on YouTube.
It will help you write nestable CSS. When you start using a preprocessor like scss or sass, you will appreciate it more!
-
Avoid using the break tag "br".... Except when necessary.
-
The 3 cards ought to be placed in the same container and not individually.
This is causing it to distort on smaller screen sizes..
For example, view your work on 1044px screen width! You will notice that the cards are not properly aligned.
LET'S MOVE INTO YOUR STYLESHEET!!😀
- To avoid repetition, always add general settings to the body of your website and not the "main"
Stuffs like font family, background color, etc should be added to the body.
-
You are good with flexbox 😀
-
You can learn more about using variables to write more maintainable css. With this method, you will just need to assign variables to resuseable properties and then insert them when needed.
You won't need to keep repeating yourself.
Below is a good code along video by KEVIN POWELL, it helped me get comfortable with css.
https://youtu.be/bn-DQCifeQQ
Overall, it is a good start! Keep coding! 😎
@Mardiya07
Posted
@folathecoder Thanks alot Fola.🙏 Very much appreciated. I'd look at all the areas you mentioned and improve on them. There is alot of refactoring to be done.
@folathecoder
Posted
@Mardiya07 You are welcome, Mardiya! ....... Happy Coding! 😎👍