All comments

• 

  Anna Leigh•5,135

  @brasspetalsSubmitted over 2 years ago

  Hi, everyone! 👋 It feels great to finally submit this solution. I’ve wanted to do this challenge since I started doing Frontend Mentor projects. It was definitely a learning experience (see: README), and hopefully I’ve made up for the lack of effects in my Sunnyside solution. 😆

  The parallax effect is only on desktop and tablet. It’s also turned off, along with all animations and page transitions, for those who prefer reduced motion. 👍

  Questions:

  • This was my first time implementing a “tabbed” interface. I opted to use button elements for the tabs. Is there a better and/or more accessible way to create tab functionality?
  • I’m concerned that the image animations on the tabbed Events section are getting messed up if the image doesn’t load before the animation triggers. Is there a way to preload images from picture elements in a way that’s responsive and also works with multiple srcsets? Update: I refactored this section a bit, making some tweaks to the animations and putting all content in the DOM rather than dynamically loaded. The flashing issue is now fixed. Huge thanks to Dave and Christopher for their help on this! 🙏
  • How is the form accessibility on the booking page? I don’t believe the second page was included in the report.
  • Sadly, I didn't manage to style the AM/PM selector like the design because I used select and option elements. Do you know of a better method that would be both accessible and match the dropdown in the design?
  • Not sure how I feel about the menu list being parallax on desktop. Does it look too wonky or have I just been staring at it for too long? 😂

  Thanks for taking the time to look at my solution! Feedback is always greatly appreciated. 😄

  

  Dine Restaurant - Svelte, Parallax Effect, CSS Animations

  4

  193
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted over 2 years ago

  Heyy Anna!

  You are back at it again with a wonderful challenge!! This is actually the first time I have had seen someone do this project and I actually really like it~ This made my day better, and I hope these comments make your day better! ^^

  Keep Coding!

  (== ^ . ^ ==)

  1

  This comment has received 1 replyShow
• 

  Anna Leigh•5,135

  @brasspetalsSubmitted over 2 years ago

  Hi, everyone! 👋 This one is a bit of a “simpler” solution - meaning I didn’t add many animations or effects. I had lots of ideas for this one, but most ended up getting tossed. Instead the big focus was on Svelte and component-based development.

  Questions:

  • How would you handle a design like this on large screens (1920px+)? Add a max-width to the entire page and keep it centered? Add another media query? For now I’ve just left it, but letting it expand into oblivion doesn’t look great. 😕 "Solved": Went with max-width.
  • I used a local variable in conjunction with a Svelte variable to determine the color of the "underline" in the LinksUnderlined component (yellow/pink). I feel like there’s probably a simpler way to do this in Svelte? Solved: Used the method in this REPL for a cleaner solution.
  • Is there a way to “disable” a Svelte transition? In order for the transitions I used for the mobile menu to not fire on page load for 800px+ screens, I added a class to disable animations. This feels like a very janky solution to the problem. 😆
  • How’s my Svelte in general? Any input on improvements and best practices?

  

  Sunnyside Agency Landing Page - Svelte, CSS Grid, Keyframes

  4

  120
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted over 2 years ago

  Hey Anna!!

  I'm excited to see another challenge from you! 😃 I happened to access your challenge mobile today, and it fit my screen perfectly! I also love the hamburger 🍔 menu! 😍 But sadly I have no knowledge of Svelte to help you with your code. 😕 I just wanted to drop in and say great job!

  Keep Coding!

         = ^ . ^ =
  

  1

  This comment has received 1 replyShow
• 

  Anna Leigh•5,135

  @brasspetalsSubmitted over 2 years ago

  Hi, everyone! This is my first Svelte project, so I'm sure there's much to be improved upon. Still getting used to component-based structure/development, but so far I like it!

  Safari continues to plague me. In this project, the .invalid and focus styles for the input are not showing up in Safari, and I can't figure out why. Any insight into this will be greatly appreciated! The CSS mouse animation also had some serious issues in Safari, so I opted to have the original svg icon be displayed both in Safari and for those who prefer reduced motion. Solved: Turns out my Safari was out of date! 😅 Everything works in 15.4 👍 Well, almost. Keyboard tabbing doesn't seem to pick up the maker logo in the header as a link. The outlines also display oddly on the attribution links when tabbing through them. 🤦‍♀️

  The animated mouse is heavily inspired by (read: blatantly stolen from and lightly tinkered with) Ryan Mulligan's CSS Site Scroll Micro Animation. Full list of resources in the README.

  Please let me know what you think, especially if you see anything that can be improved upon. Feedback is always welcome! 😄

  

  Maker Landing Page - Svelte, Intersection Observer, CSS Animations

  3

  161
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted over 2 years ago

  Hey Anna!

  I am really happy to see you have posted another project! :) I absolutely love it!!! All of the effects made it even better! I love the mouse animation the best! I enjoy looking at projects from you! Cheers!

  Keep Coding!

    :)
  

  1

  This comment has received 1 replyShow
• 

  Ambreen Akmal•10

  @AmbreenAkmalSubmitted over 2 years ago

  This is my first challenge and I want you to give me a feedback and suggestion about my project. So that it will be helpful. Is there any question you may ask.

  

  QR-CODE Component Using Cards

  1

  30
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted over 2 years ago

  Heyy!

  It's great to see you have completed a challenge! I was looking through your code, and in your CSS I saw colors you did not need such as pink, orange, and many more. Only add colors that you need for the project! 🙂 It keeps the code neat and tidy! 😊

  Keep Coding!

                                                            (==  ^ . ^ ==)
  

  0

  This comment has received 1 replyShow
• 

  Anna Leigh•5,135

  @brasspetalsSubmitted over 2 years ago

  Hi, everyone! It has definitely been a minute, but after a very long coding break I'm back! 👋 I'm excited to be submitting my first premium challenge solution as a Pro member. Having the design files has been a massive time saver! 😄

  Since it's been so long, I decided to stick with plain, old CSS and JS for this project - bit of a "warm up". 😅

  While the project was pretty straightforward, I did run into a rather odd bug. In Safari, I noticed the podcast svgs were blurry. After some testing, it seems that svgs that have a filter and are also in an img tag are blurred. If the filtered svgs are inline, they display just fine. The only suggestions I found online were to add -webkit-transform: translate3d(0,0,0) or -webkit-filter: blur(0px);. Unfortunately, neither worked in this case.

  Since the grey filter on the podcast svgs in the starter code didn't quite match the color in the design files anyway, I ended up editing the svg files directly to remove the filter and manually change the color to match the design. However, if anyone has a simpler solution to the Safari svg blurring issue, please let me know! Have any of you ever encountered it before?

  

  Pod Request Access Landing Page - CSS Animations, JS

  6

  141
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted over 2 years ago

  Hey Anna!!

  I love it when people like you take on big projects and make them look great! It looks amazing and I would love to see more projects from you!!

  Keep Coding! :)

  2

  This comment has received 1 replyShow
• 

  Raphael Nnadi•300

  @raphaelnnadiSubmitted almost 3 years ago

  I really need your suggestions . Thank you

  

  Employed grid and flex

  2

  30
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted almost 3 years ago

  Hello there!

  Amazing job here! You did really well on this challenge! One thing you could add here is a div on the image at the top. Then you can add border-radius to the top corners. Great effort!

  Keep Coding!

  :)

  (If you found this helpful you can let me know by marking this helpful or by giving this a thumbs up!)

  Marked as helpful

  2

  This comment has received 4 repliesShow
• 

  P

  Briuwu•750

  @BriuwuSubmitted almost 3 years ago

  Hello~! (≧∇≦)ﾉ

  I've finally decided to move on to Junior level JS challenge, and this is the first one! I'm really excited to do the other junior level challenges! I still can't do the design pixel perfect, but I'm trying my best!

  Please check this one out, if you have any feedback or suggestions! Please do let me know! Thank you so much!

  

  Responsive Coding Bootcamp Testimonials

  2

  440
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted almost 3 years ago

  Hi!

  I like it, I love it! Amazing job with the JavaScript! I'm still trying to learn JS and you are like a Guru! Looking forward to seeing more projects from you!

  Keep Coding!

  :)

  (If you found this helpful you can let me know by giving this a thumbs up or by marking this helpful!)

  Marked as helpful

  2

  This comment has received 1 replyShow
• 

  Brendan Hyde•330

  @hyde-brendanSubmitted almost 3 years ago

  Just going through all the early challenges – any feedback appreciated!

  

  3-column preview card component

  3

  50
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted almost 3 years ago

  Hello!

  Beautiful code! It even fits every device! I love the hover effects you added on the buttons! I actually learned something new while looking at your code!

  Keep Coding!

  :)

  (If you found this helpful you can let me know by giving this a thumbs up or by marking this helpful!)

  2
• 

  Lennie•70

  @lenniecottrellSubmitted almost 3 years ago

  Please give me advice about better HTML semantics and accessibility best practices!

  

  Stats preview components with React

  1

  50
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted almost 3 years ago

  Hello there!

  Pixel Perfect! It is amazingly close to the original! Beautiful work! I really wish I could give you some advice on code but I'm still learning. Honestly, I think that I could actually learn from your code!

  Keep Coding!

  :)

  (If you found this helpful you could let me know by giving this a thumbs up or by marking this helpful!)

  2
• 

  Alucard•870

  @Alucard2169Submitted almost 3 years ago

  Any kind of Feedback would be appreciated.

  

  HTML and SCSS

  3

  40
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted almost 3 years ago

  Hello!

  I love your work!!! I did the same challenge but you did a much better job! it's very unfortunate but I don't know too much code so I won't be able to help you improve your code. But if this helps you can look at the report above!

  Keep Coding!

  :)

  (If you found my feedback helpful you can let me know by marking this helpful or by giving this a thumbs up!)

  Marked as helpful

  2
• 

  Fai•140

  @FsaneaSubmitted almost 3 years ago

  This is the first challenge I made, please have look on my code and provide feedback. I struggled with Github need lessons on it.

  

  order-summary-component_Challenge using HTML & CSS

  1

  50
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted almost 3 years ago

  Hello!

  I'm very happy to look at your project! I am also currently working on the same challenge! I love it and think it is amazing! You can add the font Red Hat Display to make it more stylish!

  Keep Coding!

  :)

  (if you found my feedback helpful you can let me know by giving this a thumbs up or marking it as helpful!)

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Marc Neumann•60

  @NewMeeDevSubmitted almost 3 years ago

  Hi there,

  feel free to analyse and use my code. Feedback is very welcome.

  Thanks!

  

  css, flexbox, media queries, javascript

  1

  60
  

  P

  The Burrito Doggie•1,260

  @BurritoDoggiePosted almost 3 years ago

  Hello!

  Very Beautiful! I usually have a problem with flexbox but you did a perfect job! Looking forward to seeing more from you!

  Keep Coding!

  1