meet-landing-page using css from scratch
Design comparison
Solution retrospective
Do you guys think that It was a good Idea, when I decided to give a width higher than 100% to the container of my image so that it overlapps his parent (body). Do you guys think there is something in my project that I could do better.
I thankyou for every comment that could make me improve my coding skills.
Kind regards
Christ
Community feedback
- @vanzasetiaPosted about 2 years ago
Hello there! π
Congratulations on finishing this challenge! π
Good job on using the
width
andheight
attributes for theimg
elements! This way, the browser knows how much space the image requires before it can be fully loaded. As a result, it would optimize CLS (Cumulative Layout Shift).I notice that the HTML has two
link
tags for the stylesheet. But, thetypography.css
doesn't exist in theassets/styles/
folder. So, I would recommend uploading or pushing the necessary CSS file for the site.Regarding the image, are you talking about the
image-hero
? For theimage-hero
, I made those as background images on all screen sizes.Some more suggestions for improvements.
- Write your code with a consistent style (e.g. the indentation, quotes, whitespace, etc) or use code-formatter (e.g. Prettier). If you write or format your code that way, it will make it easier to read for everyone (including your future self).
- The download button should be an anchor tag with
download
attribute (not abutton
). - I would recommend making the number between sections (
<aside>01</aside>
) with pseudo-elements. It is possible to create those with pure CSS. As a result, it will clean up the HTML from the decorative elements.
That's it! I hope this helps! π
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord