@VCarames
Posted
Hey @MrBlackvanta, some suggestions to improve you code:
-
You're gonna back and work on the text layout; You're almost there.
-
When using images that are different size for different breakpoints, its’ far more effective to use the <picture> element. By using this element not only are able to use different size images, you can also save on bandwidth, meaning your content loads faster.
Syntax:
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt="">
</picture>
More Info:
https://www.w3schools.com/html/html_images_picture.asp
https://web.dev/learn/design/picture-element/
-
The Alt Tag description for the image needs to be improved upon.You want to describe what the image is; they need to be readable. Assume you’re describing the image/icon to someone.
-
The Attribution needs to be wrapped in a Footer Element.; It's the end of you content.
-
Your CSS Reset is extremely bare. You want to add more to it.
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
@MrBlackvanta
Posted
Hey @vcarames, Thanks for this amazing feedback, much appreciated.
-
As for the text layout as you can see am not pro user and I don't have access to the design files only an image and my observation.
-
I know about the picture element but I totally forgot to add it.
-
A footer actually makes more sense I will start implementing that from now on.
-
CSS reset is bare intentionality because it's such a small project and I didn't want to make a deep rest.
@VCarames
Posted
@MrBlackvanta
- The Alt Tag aren't something provided by being a pro user. Its how you make you content accessible to all users.
https://www.w3.org/WAI/fundamentals/accessibility-intro/
https://webaccess.berkeley.edu/resources/tips/web-accessibility
- CSS reset should include things like:
This will make all image responsive:
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
This will help with text overflow:
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
Just because the content is "small" doesn't mean it won't benefit from it.
Marked as helpful
