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

Space tourism website built with tailwind css

#tailwind-css#jss
Yehia• 50

@Yoha30

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'd appreciate having any feedback regarding this submission.

Community feedback

Mojtaba Mosavi• 3,760

@MojtabaMosavi

Posted

1- I don't know what kind of styles framework you are using but it really makes the markup unreadable, for instance if you are working with something like BEM a look at markup tells alot about how everything is working togather. I recomand you get solid grasp on css before moving on to frameworks.

2- Limit the with of you top-level container so it doesn't grow too big on large screen because the aligment of content gets inconsistent.

3- Transition help to create a more natural changes in a UI, I no expert in motion design but usage of some basic transition would make quite a differece in some sections like the navbar's underline.

4- It also a good practice if you get into habit of using landmark elements like <main>, <header> and <footer> because they standard structure of many pages and you gain some accessibility feature like allowing the user to go directly to main content with scape link. You could do something like:

<body>
    <header></header>
    <main>
        <div class="block"></div>
   </main>
</body>

Keep coding :=)

Marked as helpful

1
P
AK• 6,700

@skyv26

Posted

Hi! Yehla,

First of all, you forgot to add class on "Destination" menu, because when we hover on menu then except Destination menu, rest all looking exactly what was required (Fix it )

Because you have set height 100vh, in mobile view at some media query your text is going outside the flow of your container (blue background basically)

This are the little issue and I hope you will soon solve it.

Overall 8/10 . Best of luck..

Marked as helpful

0

Yehia• 50

@Yoha30

Posted

@skyv26 thanks for this feedback. I fixed it you can see now🌷

1
P
AK• 6,700

@skyv26

Posted

@Yoha30 🤘 Yo It is rocking now 🥳

Marked as helpful

1

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