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

Fylo dark theme landing page (React JS + Tailwind CSS + Framer Motion)

#accessibility#framer-motion#lighthouse#react#tailwind-css
Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

🎁 Features:

πŸ› οΈ Built With:

  • React JS. βš›οΈ
  • React Hook Form. πŸ“
  • Framer Motion. 🎬
  • TailwindCSS. 🎨
  • npm - prettier - prettier-plugin-tailwindcss. πŸ“¦

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. 😊✌️

Community feedback

Arseniyβ€’ 170

@ArseniyX

Posted

Hello, its looks awesome! Design looks incredible so I don't have any suggestions

Code improvements:

  1. You have hardcoded static data inside HeroSection.jsx and other components
  2. You have code comment in Illustration.jsx that need to be removed
  3. in utils you have file name motion.js its just animation utils not necessarily for motion so it need be renamed
  4. instead of doing {/* prettier-ignore */} you can make svg as component in this case you can put it like independent file .svg in assets

Marked as helpful

1

@MelvinAguilar

Posted

@ArseniyX Hello! Thank you very much for taking the time to review my solution. I really appreciate your feedback.

  1. According to you, should all information be generated dynamically? Even the headings, or am I getting confused? Could you provide me with some reference to learn better?
  2. I just deleted the comment. Thank you.
  3. I used this project as a reference for the file name. Any suggestion for naming the file? "animation.js"?
  4. Noted.

Once again, thank you very much for reviewing this solution. It is very helpful and I learn a lot.

1
Arseniyβ€’ 170

@ArseniyX

Posted

@MelvinAguilar

  1. Well its seems like landing page for company, right? For example if you give/sell this landing and the customer will want to make changes to the content. Its would be better if all content exist inside data.json or something, instead of .js files everywhere. JSON can be modified by no dev oriented person, so it's make it much better for the customer.
  2. You can called animationUtils.js Always appreciate to give feedback

Marked as helpful

1
Arseniyβ€’ 170

@ArseniyX

Posted

@MelvinAguilar btw, you can rewrite getMaxWith function like that:

const getMaxWidth = (index) => 
    ["max-w-card-1", "max-w-card-2"][index] || "max-w-card-default"

if you want

Marked as helpful

0
Aruj Joshiβ€’ 290

@gtalin

Posted

This is beautiful. You have matched the design perfectly.

The subtle animations you have used are are just right. This must have taken hours of diligent work.

Love the input field validation and how on typing a valid email the error message disappears.

I have one small question/suggestion. Right now when the user submits the form, an error message is displayed. The error message then does not disappear when the user abandons the form and focuses away from the input field. Maybe the error message can be removed when a user focuses away from the input field. This is just a suggestion. And you might have consciously designed it that way.

Marked as helpful

0

@MelvinAguilar

Posted

@gtalin Hello,

Thank you for your suggestion regarding the behavior of error messages on my form. I appreciate your feedback and am always looking for ways to improve the user experience.

In regards to your suggestion, I have designed the error messages to remain visible even after the user has focused away from the input field, as this can serve as a helpful reminder to the user that there is an issue that needs to be addressed.

In my humble opinion, it can be detrimental if you have a form with multiple inputs like in this challenge. For example, let's say there are three input fields on the form, and the user has entered incorrect information in all three fields. If I were to remove the error messages when the user focused away from each input field, the user may not remember which fields had errors, and they may forget to correct one or more of the errors before submitting the form. By keeping the error messages visible, the user is reminded of all the errors that need to be addressed and can correct them before submitting the form.

However, I understand that different users may have different preferences and behaviors, and I appreciate your feedback on this matter. I will continue to evaluate and improve my form design to ensure the best possible user experience for all of my users.

Best regards, Melvin

1
Kehindeβ€’ 660

@jonathan401

Posted

Wonderful solution as always πŸŽ‰πŸŽ‰. Just curious though, how do you match the design exactly. It's always eluded me πŸ˜…. I'll like to make my solution match the design but since I'm a free subscriber, it's really hard achieving that πŸ˜…. Any tips on how I could match the mobile and desktop design 'perfectly'?

4

Ahmed Alhareesβ€’ 360

@AhmedAlharees

Posted

@jonathan401 Honestly, it amazes me how can someone get the design pixel perfect like this!!πŸ˜…

1

@MelvinAguilar

Posted

@jonathan401 Sure, I use an extension called PerfectPixel. That extension allow you to overlay an image of the design onto your website, so you can compare your implementation to the design and make adjustments accordingly.

Note: The shadow values are impossible to know exactly without a Premium account, and I have only used Figma in the last two projects. This is my first time as a subscriber.

Screenshot.

And I'm sorry for the late reply.

4
Kehindeβ€’ 660

@jonathan401

Posted

@MelvinAguilar Thank you!. And no need to apologize.

0
Arman karimiβ€’ 80

@iArmanKarimi

Posted

Great job on your solution. The design looks fantastic, and you've done an excellent job recreating it. The animations using Framer Motion add a nice touch, and your use of React JS, Tailwind CSS, and React Hook Form is impressive. It's also worth mentioning that your attention to performance optimization is commendable, as reflected in your high scores on the lighthouse report and PageSpeed Insights. Overall, your work is highly professional and visually appealing. Keep up the good work.

1

@MelvinAguilar

Posted

@iArmanKarimi Sorry for the late reply, and thank you so much for your kind words! I'm glad my efforts in performance optimization were noticeable. Thanks again

1
cjrdelosreyesβ€’ 40

@cjroma0199

Posted

This is just fantastic, and it's pixel-perfect. I'm really loving it. It's inspiring me to work hard and reach this level of skill and talent too :).

1

@MelvinAguilar

Posted

@cjroma0199 Sorry for the late reply. Thank you so much for the compliment! However, I still have so much to learn and improve on. It's all about continuous growth. I'm sure you have incredible talents too. 🌟

0
Dylan Guaquierβ€’ 210

@dylanguaquier

Posted

Wow, that's impressive, congratulations

1

@MelvinAguilar

Posted

@Fullpacki Thank you for your kind words! I still have a lot to learn, though. Your encouragement means a lot. Apologies for the late response! πŸ™ŒπŸΌ

1
Nature Sonβ€’ 990

@NatureSon22

Posted

Wow, your works never fail to amaze me! I hope I can also be as good as you someday <3

1

@MelvinAguilar

Posted

@NatureSon22 Oh, thank you for your kind words! However, I must admit I'm still learning and have my own challenges to tackle. But that's the beauty of it - we're all on this journey of continuous improvement together! Happy coding! 😊

0
Pouria Zamehranβ€’ 260

@pouripz

Posted

How many days did it take you to make this? it is so beautiful 🀩

1

@MelvinAguilar

Posted

@pouripz Thank you for the compliment! It took me around 3 hours to set up the basic structure and appearance, but making it look just right and close to the design took a couple more hours of fine-tuning. Happy coding! 🌟

0
Lucas πŸ‘Ύβ€’ 104,540

@correlucas

Posted

Keep going bro! You gotta won this year. 😎

1

@MelvinAguilar

Posted

@correlucas Thank you so much for the reminder and encouragement! πŸ˜„ Despite having a few projects, I'll do my best to aim for a spot in the top 3. Apologies for the delayed response. Have a fantastic day! 🌞

0
Bilal TΓΌrkmenβ€’ 340

@bilalturkmen

Posted

nice and meticulous work.

Custom scrollbar is a nice detail. I liked framer motion, want to try too πŸ™‚

1

@MelvinAguilar

Posted

@bilalturkmen Thank you for your comment! It's always great to hear positive feedback on one's work. Also, I have to say that I like your solutions because not only do you create them very similarly, but they also have incredible customization.

Good luck with trying out Framer Motion, it's a powerful animation library with a lot of possibilities!

And I'm sorry for the late reply.

1
marko-zivanicβ€’ 60

@marko-zivanic

Posted

you're amazing, do you have a personal website?

0

@AbdulahadIKramov

Posted

Very cool you have completed the given assignments 1 = 1 How did you achieve this

0
Nelson Guiambaβ€’ 140

@NelsonGuiamba

Posted

Amazing job, how did you make it so pixel perfect I have some problems with font sizes and widths

0
SURU EMMANUELβ€’ 390

@suruaino

Posted

Hello, I have no correction rather than a question. To me as an up-coming, you have done it perfectly well to match the given design.

my question is; how did you manage to match it so well and almost perfectly?

0

@MelvinAguilar

Posted

@suruaino Thank you for your kind words! I apologize for the late response. I used the PerfectPixel browser extension and a lot of trial and error to get it as close as possible. Happy coding! 😊

0
SURU EMMANUELβ€’ 390

@suruaino

Posted

@MelvinAguilar PerfectPixel, thanks for the clue. I am 100% happy to hear from you again, and I will be trying it in my next challenge. Just need to learn something quickly as my chosen challenge required.

Thanks once again.

0
Syed Bilalβ€’ 260

@syed-bilal205

Posted

Your Work is fantastic from where did you all learn this any youtube channel for recommendations am also doing projects.....

0

@MelvinAguilar

Posted

@syed-bilal205 Thank you for your kind words about my work! In terms of learning resources, I personally enjoy creating custom solutions for challenges rather than relying solely on tutorials. However, if you're interested in some YouTube channels that may be helpful for you, I would recommend checking out the Kevin Powell channel. He covers a wide range of front-end development topics, including CSS and responsive design. If you're looking for more JavaScript-focused projects, the JavaScript Mastery channel might be a good fit.

Finally, if you're interested in learning more about creating inclusive and accessible components, I highly recommend checking out the Inclusive Components website. Also, you can read some tips from Grace Snow's article that may be helpful in building inclusive solutions.

1
Uwd7xtβ€’ 20

@Uwd7xt

Posted

@MelvinAguilar this beautifull

Marked as helpful

0
Gerardo Roloffβ€’ 20

@groloff

Posted

great job on this. very precise, to pixel perfection level one question: did you use React for any particular reason? I mean, whatΒ΄s the advantage of using React instead of simple HTML, CSS and JS for this project?

0

@matusalab-dev

Posted

@groloff I think for practice purpose on react

1

@MelvinAguilar

Posted

@groloff Thank you for the compliment! To answer your question, No, I used React for this project because I wanted to practice using react-hook-form and frame-motion. I am not using simple JavaScript validations or @keyframes or any other library for animations because I am practicing to create much more complex animations with Framer Motion in new challenges. Regards.

2

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord