@James-alderson
Posted
The challenge you designed is great, there are just a few tips that will help improve your design if you follow them:
HTML:
- Adding two meta tags i.e. (author, description), these two tags will help improve the SEO of your design. (optional)
- Import web fonts in the CSS file, not in the HTML file.
- Use semantic HTML tags, in this case it will no longer show accessibility problems in the reports section.
- Use img tag instead of svg content, it's true that using svg content can make a lot of changes, but one of its disadvantages is that it increases the number of HTML lines and makes your code look messy.
- Use the alt feature in img elements, if your design image is not loaded, the alt text will be displayed. Of course, this will make your HTML design no longer have the problem of HTML design in the report section. If you're using an image that doesn't require alt text, for example: the Ethereum icon or the clock icon. In this case, leave the value of the alt attribute empty and use ARIA Roles. Use this line of code: (aria-label="hidden").
- Use h and p elements instead of div element.
- Use the width and height attribute in your img elements, with this you have specified the width and height of your image and improved the SEO of your design.
- For links, use the a element instead of text.
CSS:
- Use custom properties to define color.
- Define the box size value in the margin box.
- Use the grid for the middle of the element. (optional)
- Define the font family in the body element so that you no longer need to define the font family value for each element.
- You can also use the line-height value without the px unit.
- Use a max-width value for your content container, this will help your design to be responsive.
- Use rem or em units instead of px.
- Use transfer. (Optional).
Github:
- Remove the file README-template.md from inside the project files and put it inside the main directory of your project, then edit the information inside it, then change the name of the file README-template.md to README.md. You can visit my GitHub to understand this better.
Don't worry about the large number of tips, you can learn all of them with time and practice. In fact, I have created a fork in your repository where you can see all the tips I mentioned above in your code.
keep practicing and learning ๐ช and happy coding ๐.
Marked as helpful