Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Landing Page With CSS Animations, Vanilla JS Effects

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (6)
error

Anchor element found with a valid href attribute, but no link content has been supplied.

<a href="#" class="header__logo">
                <svg width="14...</a>
error

This textinput element does not have a name available to an accessibility API. Valid names are: label element, title undefined, aria-label undefined, aria-labelledby undefined.

<input class="cta__input" type="text" placeholder="Enter your email address" required="">
error

This form field should be labelled in some way. Use the label element (either with a `for` attribute or wrapped around the form field), or `title`, `aria-label` or `aria-labelledby` attributes as appropriate.

<input class="cta__input" type="text" placeholder="Enter your email address" required="">
error

Anchor element found with a valid href attribute, but no link content has been supplied.

<a href="#" class="footer__logo">
                    <svg width...</a>
error

Anchor element found with a valid href attribute, but no link content has been supplied.

<a href="#" class="footer__social-link">
                    <svg xmlns...</a>
error

Anchor element found with a valid href attribute, but no link content has been supplied.

<a href="#" class="footer__social-link">
                    <svg xmlns...</a>

ApplePieGiraffe’s questions for the community

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! 😜

Community feedback

karenefereyanβ€’ 375

@karenefereyan

Posted

I live for these animations. Gosh!!!!

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@karenefereyan

πŸ˜„πŸ‘πŸ™

0

P
Emmilie Estabilloβ€’ 5,420

@emestabillo

Posted

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 πŸ˜…πŸ˜…

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@emestabillo

Haha, thanks, emestabillo! I'll take a look at those suggestions! Happy coding! πŸ˜„

1

P
Graceβ€’ 23,610

@grace-snow

Posted

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 πŸ‘

1


P
Graceβ€’ 23,610

@grace-snow

Posted

One more thing actually! Alt text tips ☺ .

If an image is the only content in a link, make sure the alt text says what the link does rather than describe the icon. Eg. Rather than Facebook icon have Follow @bookmark on Facebook or something.

Similarly, alt text like illustration either needs to be more descriptive to add meaning, or an empty attribute. I should be able to see in my minds eye everything that's meaningful just from looking at the html, and would know if the alt is intentionally empty that the image isn't important to the content.

2

P
Graceβ€’ 23,610

@grace-snow

Posted

And that pop sound just made me chuckle! Love that you've tried to add a bit of extra personality into this. Nice!

0

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@grace-snow

Thanks a lot, Grace! Yeah, I forgot to add type="input to the email input element (thanks for catching that) and those tips about alt text will be very helpful!

I was aware that I was probably breaking some BEM rules, but I did so anyway because I liked the way I was able to nest my Sass using those class names. I'll take a closer look at that and how I can improve!

😊

0

Connor Zβ€’ 5,115

@zuolizhu

Posted

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 πŸ™Œ!

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@zuolizhu

Thanks so much for the feedback, zuolizhu! I also really need to take your advice and get started on a JS framework or something because my code is beginning to get all over the place with these projects! Happy coding, too! 😁

1

tedikoβ€’ 6,170

@tediko

Posted

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! πŸ’ͺ

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tediko

Thanks, tediko! πŸ˜†

I just noticed the placeholder text of the input element isn't centered, too. Good catch!

I actually intentionally allowed users to be able to open multiple tabs at once since that is the default behavior of the HTML <details> element and is sometimes considered to be better for UX because then users don't have to worry about tabs automatically closing when they don't want them to. πŸ˜€

I began "learning" frontend development around the beginning of this year, but I didn't actually do many projects (and so I don't consider that really learning) until I joined Frontend Mentor, which would be about 2 and 1/2 months ago, I think. I have to say though, I'm impressed with how fast you're learning and you inspire me, too! πŸ˜‰

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!