Landing Page With CSS Animations, Vanilla JS Effects

Community feedback

• 

  karenefereyan•375

  @karenefereyanPosted over 3 years ago

  I live for these animations. Gosh!!!!

  1

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @karenefereyan

  😄👍🙏

  0
• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted almost 4 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @emestabillo

  Haha, thanks, emestabillo! I'll take a look at those suggestions! Happy coding! 😄

  1
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  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

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  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

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

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

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @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

  @zuolizhuPosted almost 4 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @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
• 

  P

  tediko•6,680

  @tedikoPosted almost 4 years ago

  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

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @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