@VCarames
Posted
Hey @siduki, some suggestions to improve you code:
-
Your layout isnt responsive at all, I suggest researching on web development responsiveness.
-
Add the following to you Body Element to fix the background:
body {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
-
The logo Alt Tag in the logo needs to be improved upon. The logo is arguably the most important image in you page. So the description should state the company name and what it is.
-
When using Alt Text Tag, you want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
Your "buttons" were created with the incorrect element. When the user clicks on the button they should directed to a different part of you site. The Anchor Tag will achieve this.
-
The Article Element isnt being used incorrectly, a simple div would suffice.
-
To make it easier to deal with CSS , have more control over your content, and ensure that your content will look the same regardless of browser used I suggest using CSS Resets.
Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
Happy Coding!
Marked as helpful
@siduki
Posted
@vcarames Thank you for your feedback.
I'll try resolve my issues with your suggestions and keep in mind for future.
I have one question about reset, if I use * (asterisk) and then reset options, it's not enough? This time I'm just resetting margin, padding and box-sizing.
@siduki
Posted
@vcarames Also, I have one request to you. If you can, please check this solution for me
Testimonials Grid with HTML and CSS (CSS Grid)
I think it's not bad, also responsive. If you can check and give me some suggestions, thank you.
@VCarames
Posted
@siduki
You can a lot more to your CSS Resets, like `` img, picture, video, canvas, svg { max-inline-size: 100%; block-size: auto; }
To make you images, images/icons responsive.
@VCarames
Posted
@siduki
I suggest taking a look @grace-snow project for this one. Its perfect example of how it should be created.
Instead of using Blockquotes You can also use Divs:
"div is fine to use too. Just make sure there are meaningful elements within it, like paragraphs ☺" - Grace Snow
