Skip to content
OverviewSolutions
30
Comments
10
Yuko Horita
@Sloth247

All comments

  • Yuko Horitaβ€’645
    @Sloth247Posted over 2 years ago

    Hi Michael,

    Nice work! I like the animation effects and the fancy favicon😁

    I have the following suggestions;

    Issues in Accessibility Report

    • <div> should not be inside <a> tag. You can check from this site
    • In Navbar.js, you include <li> inside <NavLink> however, <NavLink> should be inside <li> and <li> must be directly under <ul>. I think these will fix your issues in the report.

    I am sorry, I maybe a bit of OCD, I think the font weight of h2 in Destination.js needs to be 400 and give more letter-spacing. Also please give more margins/paddings between the planet choice buttons.

    I think the website will be much closer to the design if you utilise the figma file, as this is free+ challenge.

    I appreciate if you give some feedback to my solution too!

    Marked as helpful
    0
  • JibbyCodesβ€’290
    @KijimaiSubmitted almost 3 years ago

    This was an incredibly fun and challenging project to tackle and it gave me opportunities to showcase my knowledge of both SCSS and React. Working with SCSS definitely made this project that much more bearable when it came to organizing all of my styling and responsiveness much easier.

    Questions, critiques, and comments welcome!

    Github User Search App - ReactJS, SCSS, Axios

    1
    Yuko Horitaβ€’645
    @Sloth247Posted almost 3 years ago

    Hi JibbyCodes, this is the best solution that I've ever seen on FEM for this challenge. I may need to revise my coding based on your solution 😁 I'm sorry if I am wrong but the useEffect for the theme in your context file should be "useLayoutEffect". I did a bit of research after finishing my solution and according to official React documentation, "useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.", so this hook might be good to use there.

    I appreciate if you give me feedback on my solution too 😊

    Your solution is really nice.

    Marked as helpful
    0
  • Remus D. Buhaianuβ€’3,125
    @MiculinoSubmitted almost 3 years ago

    Hey guys!

    I'm back with another lovely Frontend Mentor challenge. This is the last Newbiew challenge on my list and I decided to give it my best shot in building it.

    If you're checking out the solution on a laptop / desktop screen, you'll get to see the scroll-based animation that I've implemented. I got the idea for the animations after seeing @ApplePieGiraffe's solution for this challenge. (obviously his solution is much better than mine :D) He's truly an incredible developer and his work has inspired me a lot. If you haven't checked out his work yet, I highly recommend you do.

    I had a lot of fun building this project using Svelte and GSAP, even though it was quite difficult at times because it was my first time using GSAP on such a scale and also, it was my first using the ScrollTrigger plugin. You can imagine how many hours I've spent going through the documentation and watching tutorials ;)

    The animations aren't yet available on the smaller screen sizes because the layout becomes quite messy. I'll need to see how to fix that. On top of that, I think the code for the GSAP animations can be improved, but since I'm still a beginner with this technology, I'm not quite sure how to approach it.

    Any feedback about this or any other aspects of my project would be much appreciated.

    Thanks for checking out my solution. See you in the next challenge! :)

    Meet Landing Page | Svelte + SCSS + GSAP - Animation Powerhouse

    2
    Yuko Horitaβ€’645
    @Sloth247Posted almost 3 years ago

    I like your animation, and would like to use GSAP to my future projects! You included my profile icon which is funny πŸ˜‹

    1
  • Yuko Horitaβ€’645
    @Sloth247Posted about 3 years ago

    This is just a question but why do you use form for the price card?

    0
  • Vanza Setiaβ€’27,775
    @vanzasetiaSubmitted about 3 years ago

    Hello Everyone! πŸ‘‹

    I finally finished the first JavaScript challenge. πŸŽ‰

    After learning JavaScript for about one month. Here's the result! 😎

    Now for the questions:

    • Does this website looks good on your device?
    • For the FAQ, I uppercased the letter on the HTML file instead of doing it on CSS. I'm afraid that the screen reader will pronounce FAQ when it should spell F-A-Q (letter by letter). So, is the screen reader smart enough to spell the faq letter by letter?
    • Please try to navigate this website using your keyboard. If you don't know how to navigate using a keyboard, see the keyboard support section. Do all the keys work based on the functionality?
    • For those of you who have finished this challenge, which text uses a very dark grayish blue color (hsl(237, 12%, 33%))?

    Any questions on the technique that I'm using are very welcome!

    Also if you want me to give my feedback on your solution to this challenge, feel free to give me the link in the community feedback! I will be glad to help you too!

    Hint: Try to disable JavaScript to get the pop-up box that will give you the link to the non-javascript version (using details and summary tag) or just click this.

    Thanks!

    FAQ Accordion Card | HTML CSS Sass JS

    5
    Yuko Horitaβ€’645
    @Sloth247Posted about 3 years ago

    It looks awesome! I like your banner on Github too. I also tried this challenge a while ago and could not close the panels by only HTML and CSS (without JS). I appreciate if you give me a feedback on mine too!

    Marked as helpful
    0
  • Shawnβ€’50
    @shawncocklinSubmitted about 3 years ago

    Howdy folks. The biggest question I have is how to achieve the same color effect for the footer image as shown in the design file. I could not replicate it using the background-blend-mode, so any hints at the direction I should start looking would be greatly appreciated :)

    Mobile first landing page build with flex and grid

    1
    Yuko Horitaβ€’645
    @Sloth247Posted about 3 years ago

    Hey, I have just done the same challenge, I achieved the similar design with the original in footer with psudo element ::after. Please see my solution if you would like! https://www.frontendmentor.io/solutions/meet-landing-page-w-sass-sa598Ef7n

    0
  • Yuko Horitaβ€’645
    @Sloth247Posted about 3 years ago

    Animation looks awesome, but I cannot click the dropdown menu when it's in desktop view size. All interactive elements are focusable by keyboard but menus in nav bar cannot be selected by pressing Enter key. Github link shows error, so I cannot check your coding.

    Marked as helpful
    0
  • θŠ±η«β€’0
    @satabiSubmitted over 3 years ago

    HiπŸ‘‹!

    This project took me 12 days to complete. The project is somewhat difficult but overall I learn a lot.

    Any feedback is appreciated.

    Sunnyside - BEM, Flex Box, Grid

    4
    Yuko Horitaβ€’645
    @Sloth247Posted over 3 years ago

    Hi, it looks good. However I still see the modal is kept open when I move from mobile view to desktop view. I suggest you set up conditions regarding media query in JS or convert navigation to modal in CSS on media query for mobile view.

    Marked as helpful
    0
  • Yuko Horitaβ€’645
    @Sloth247Posted over 3 years ago

    I see the wrong error message "Looks like this is not an email" when I press submit without input anything in email section. This should be "email cannot be blank". Also, after inputting correct information and press submit button, the error messages are still shown.

    0
  • Yuko Horitaβ€’645
    @Sloth247Posted over 3 years ago

    The error message "Looks like this is not an email" in the original design does not show.

    Marked as helpful
    1