Skip to content
Submitted about 2 years ago

Space Tourism with NextJS, TailwindCSS and framer-motion

Quang Hung Pham•470
@pqhung3007
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Space tourism multi-page website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

This is the first time I have worked with NextJS. The challenge itself is also by far the most creative one I've ever dealt with in Frontend Mentor. Quite satisfied but there's a problem I'm confusing 🤔:

  • I fetch the data from this GitHub link which belongs to my repo. So when you load the website for the first time, it takes about half a second for the images to load, which may damage the page layout (the text now covers the entire screen width). Now I'm asking you if you have any suggestions for fetching the local data more efficiently.

Apart from that issue, I'd appreciate other feedback relating to the code comprehensiveness (with Tailwind) or the performance. Thanks and happy coding 🤲💻

Community feedback

  • Sahand Masoleh•1,210
    @sahand-masolehPosted about 2 years ago

    Hi there!

    Images always take time to load, or they may even fail to load, so you need to have a place holder to avoid layout shifts. Put your images in a container and give it a specific size and a neutral color.

    Also, you can set a dark color on your body element to avoid the white flashes when switching pages for the first time.

    Marked as helpful
    1
    Quang Hung Pham•470
    @pqhung3007Posted about 2 years ago

    @sahand-masoleh Thank you for the first suggestion, in terms of the image's size!

    But for the second one, could you tell me how the dark color is supposed to be set? I just also searched the internet and no one gave an answer that is clear enough for me.

    0
    Sahand Masoleh•1,210
    @sahand-masolehPosted about 2 years ago

    @pqhung3007 Sure. Just put a background-color: black on your body element for example.

    0
  • Adriano•38,310
    @AdrianoEscarabotePosted about 2 years ago

    Hi Quang Hung Pham, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    • <html> element must have a lang attribute [link to read more about it](https://dequeuniversity.com/rules/axe/4.3/html-has-lang?application=axeAPI)

    The rest is great!

    I hope it helps... 👍

    0
    Quang Hung Pham•470
    @pqhung3007Posted about 2 years ago

    @AdrianoEscarabote Thank you for your additional tips! I'm doing great and I hope you are as well.

    1

Please log in to post a comment

Log in with GitHub

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