Skip to content
Submitted about 3 years ago

meet landing page Very resposive with HTML, CSS and some animations

Marlon Passosā€¢940
@MarlonPassos-git
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

This project on the instruction part gave me a lot of work to make everything responsive, but I liked the result. I went for an approach that I haven't seen in other projects.

However there were parts that I had to use some divs to organize these my layout, particularly I wish I had not used them, both in the initial images and in the buttons, if you know how I can reduce the amount of divs please let me know.

I wanted to know with you guys about the animations, I used it but it was crazy, I would like to know about organization, accessibility, and time for animations because I'm worried about this interfering with the user's experience.

In the project I used the figma dimensions as a base, but even so I see that there are "crooked" items, I would like to know how I could solve this, without having to keep taking screenshots of the screen comparison. I'm always looking for the pixel perfect.

Any suggestion is welcome, in the last challenge I thought it was good, but the guys showed me several points that I missed, and I managed to learn a lot.

another thing, for accessibility they recommend putting the dimensions of the image in the html, however when I put the dimensions and the page readjusts to be flexible it points as an error, is there any way to put more flexible dimensions in the html

Community feedback

  • Daveā€¢5,295
    @dwhensonPosted about 3 years ago

    Hi @MarlonPassos-git lovely job on this one! šŸ™Œ looks great!

    With regard the div elements, they aren't necessarily bad, it's just that people use them when there are better elements available... Your use looks fine to me.

    Some points to think about:

    1. I would suggest the second button, not the download one, should be a link rather than a button. If the click takes you to another page it's a link, if it starts an action its a button.

    2. For the numbered circles, I would suggest just putting a margin: auto on either side of the div, and using a pseudo element for the line? Your way works fine though. This might avoid the need to hard code in some values though.

    3. For the animations, it's better to use something like transform: translateY(56px) rather than top. Changing a transform is much less work for the browser with the same effect (looks nice though!)

    4. For the images, the width and hight attributes are to prevent layout shift once the image loads, not really a11y. You should add both attributes, but without the px this might help?

    I can't comment on your pixel perfection as you are ahead of me here!

    Hope this helps a little!

    Cheers šŸ‘‹

    Dave

    Marked as helpful
    1
    Marlon Passosā€¢940
    @MarlonPassos-gitPosted about 3 years ago

    @dwhenson Hi Dave, thanks for the feedback. so in relation to the button yes I used an <a> tag, I just didn't put the link because I didn't really feel it hahaha. wow I didn't know this from the margin: auto and this trabsform, this will really make it much easier in the next projects. And thanks again for taking the time to review my work :)

    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