Skip to content
Submitted 5 months ago

Meet landing page, html, css (sass)

Xqgoji•120
@JhinDanzo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Meet landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

first time using sass for writing CSS

What challenges did you encounter, and how did you overcome them?

responsiveness i want try to use relative values next time instead of px, as i was advised it is better for responcive designes

What specific areas of your project would you like help with?

any advise will be appreciated

Community feedback

  • webdevbynight•410
    @webdevbynightPosted 3 months ago

    Some feedback:

    • since all the images (except the logo) are cosmetic, you should try to serve them as background images in CSS (except for the gallery in the middle);
    • the logo should be inserted into a h1 element;
    • since the buttons are actually links, they should be tagged as a elements instead of button;
    • even though you use SCSS, you can now use custom properties to define variables in most cases;
    • on the line 312 of your SCSS, when using grid-template-*, you should use repeat() when two or more sibling rows or columns have the same size: in other words, you should declare grid-template-columns: repeat(2, 1fr); instead of grid-template-columns: 1fr 1fr;;
    • you should avoid using pixels to define font sizes (here is a video explaining why);
    • to display the circled numbers and the line above, you can generate pseudo-elements and use CSS counters (it is a bit challenging, but pleasant).

    I hope this feedback helps you.

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join 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