I live for these animations. Gosh!!!!
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! 😜
Hey APG! This is really good! I really like the dashed outlines. Just a couple of things:
.disable-scrollis applied, and on ios, the
Xlooks 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 😅😅
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:
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__liston 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__navon the nav element, then
Hope that's helpful ideas anyway. Keep going, you're doing a great job 👍
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.
And that pop sound just made me chuckle! Love that you've tried to add a bit of extra personality into this. Nice!
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!
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 🙌!
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__inputplaceholder isn't align center.
Good luck with that, have fun coding! 💪
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! 😉