Skip to content
Submitted over 4 years ago

Landing Page With CSS Animations, Vanilla JS Effects

ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Bookmark landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, everybody! 👋

This was such a beautiful challenge and I learned so much from making it! I actually wanted to do more, but I felt like it was taking a while and I simply needed to submit my solution. 😅

I tried to focus a little more on making this solution accessible with styled outlines, WAI-ARIA, and dynamic alt text for the changing of the tab images. I was also happy that I got to code more JS in this challenge and think carefully about making my JS DRY. 😀

Some extra touches I added were a Material Design-inspired click effect to the buttons, some simple content animations and transitions (using Animate.css again), and a little popup attribution complete with some sound effects! 🎉

Feedback is welcome and appreciated, of course (it's very helpful)! 😊

And, as always—keep coding (and happy coding, too)! 😁

EDIT: I'm aware that a small quirk in my design is that the attribution popup gets in the way of the social media icons in the footer of the page on certain screen widths—but unfortunately, I'm a little lazy at the moment! 😜

Code

Please log in to post a comment

Log in

Community feedback

  • karenefereyan•375
    @karenefereyan

    I live for these animations. Gosh!!!!

  • Emmilie Estabillo•5,600
    @emestabillo

    Hey APG! This is really good! I really like the dashed outlines. Just a couple of things:

    1. Missing email validation and...
    2. (Nitpicky alert) The spacing of the hamburger looks a tiny bit off on the browser, there's a tiny jump when .disable-scroll is applied, and on ios, the X looks cut off on the right.

    But it doesn't matter because I can't help but admire what you've done for the attribution 😄 I really like it when devs put their own spin, and this one's so you lol - fun and positive. You're one to follow when that feature goes live :-) 2 1/2 months?? I wish I had your energy 😅😅

  • Grace•32,130
    @grace-snow

    Hey ApplePieGiraffe

    Really nice solution. The animations are a little bit much for me, but maybe that's personal preference.

    Looks like you're doing pretty well with your learning and have a nice semantic html Structure.

    Minor suggestions from me:

    • use type email for your email input
    • consider moving the h2 for that contact form inside the form
    • that email input needs an aria-label or an actual label in my opinion. Accessibility is as much about cognitive disability as any other and the form title (h2) doesn't make it clear enough that the intended input is an email address.
    • I'd look again into BEM naming. In most places you're spot on, but others are nested incorrectly eg class="header__nav__list__item" There should only ever be one block, one element, so decide when to switch contexts. That could be header-nav__list on a ul, followed by header-nav__list-item. Or if you wanted it all to belong to the header as its block context it would be header__nav on the nav element, then header__nav-list then header__nav-list-item

    Hope that's helpful ideas anyway. Keep going, you're doing a great job 👍

  • Connor Z•5,115
    @zuolizhu

    Hey APG! Happy Friday 😆🍻!

    I saw your outlines of the elements for :focus, nice improvement 🙌!

    The shaking animation of the two buttons on the hero are so cute 🤩!! The animation just changed the whole feeling when using the website. Love it so much!

    Personally I would hide the tab border when :focus, then show the tab border when out of focus. Because from design perspective, both outline and border are served for the same purpose (to indicate focused or not). 🤔 So why would use two effects on one element at the same time. But this is just my personal opinion, hope it doesn't bother you 🤣.

    I am also a big fan of the material design, although it has too many rules to follow 🤯 ( for example, by default Material uses capitalized button text, and avoid using two contained buttons next to one another etc.) For me those rules violate "happing coding", so I just won't use it in my code 🤣. But I'm happy to see your creativity on it 👍!

    I noticed the new attribution you did and the sound effect to it! That's so cute hahahaha! Everyone should try it!

    I was surprised how fast you've improved your skills through out building these amazing solutions, keep doing it 💪! Most importantly, happy coding 🙌!

  • tediko•6,700
    @tediko

    Hello, ApplePieGiraffe! 👋

    Hats off! The animations are subtle and fit perfectly into the design. Kudos for attribution idea! I take a lot of knowledge from your projects, thank you! May I ask how long have you been learning the front end?

    • .cta__input placeholder isn't align center.
    • What i would suggest is to add toggle tabs for faqs section. I mean, when one tab opens, the previous one closes. This is just a suggestion tho.

    Good luck with that, have fun coding! 💪

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