Space Tourism Website

Space Tourism Website Used AI

7 devlogs
21h 38m
•  Ship certified
Created by Miguel

This is a challenge from Frontend Mentor.

The challenge is to build out a multi-page space tourism website and get it looking as close to the design as possible. I'm a beginner in Front-End programming, so this is a challenge that allows me to test my skills.

I'm only using HTML5, TailwindCSS and VanillaJS.

Timeline

Ship 1

1 payout of shell 144.0 shells

Miguel

about 1 month ago

Miguel Covers 7 devlogs and 21h 38m

Well, that's it.
It's not 1000000% faithful to the prototype I used, but these are things you only realize if you really compare each piece.
It was a very challenging journey, I'm sure I could have done a site like this in much less time. But as I said in the project description, I'm still learning. Time will make me faster and more efficient.
Anyway, in the last few hours I've finished the responsiveness for the desktop, and further optimized the code for better readability (if I'd done this earlier I'd have saved myself a lot of headache). Unfortunately I couldn't fix the transition between pages issue, so I just removed them.
I've tested everything there is to test in the three viewports, and as far as I can see I haven't found any errors. But if you find something, I apologize.
And thanks to you who are reading this far, and let me know if you like the end result. I'm TOTALLY open to criticism and help, so if you can contribute anything to my knowledge, feel free.
Thanks again!

Update attachment
unowen unowen about 1 month ago
Hello, I don’t know if that’s indented or something (hopefully not), but the I am unable to scroll on the website at all. The multiple sections do show up when I go to them using the nav bar, but scrolling is somehow not allowed.P.S the design is great!

Hello. In the last few hours I've done half of the desktop responsiveness, but there came a point where I was getting completely lost in my code, the supposed organization I did to be able to read tailwind was making everything worse. So I had to ask AI to help me refactor the code and set some standards. The way the code works has now changed:

Before, I had the body with 4 separate mains, each representing a page that would be loaded as needed. Now, the body has a main with 4 sections inside it that will basically do the same thing, but have eliminated a certain amount of configuration work for each page.

The only thing I still don't like is the transition between pages, which due to a conflict between the section classes is causing the screen to flicker when changing pages.

Otherwise, I've added individual IDs to each text to be loaded within each page, added a navbar indication of the current page, and made some general corrections.

I think the only things left to do are the rest of the desktop responsiveness and fixing this transition.

Update attachment
unc lav unc lav about 2 months ago
Dang bro ui looks so cool !!!

So, in the last few hours I've made the sections responsive for tablets. Only God knows what misfortunes happened to me in the middle of the process and only He knows what's written in the code... I tried to leave it as tidy as possible :(

Well, now all that's left is desktop responsiveness and a few general corrections

Update attachment

I just finished the animations. The only thing left is the responsivity (help)

Update attachment

So, now I've finalized the navigation between all the sections of the page, and I've also added the content to be displayed dynamically via the .json file (I asked the IA to create the constants for all the text elements that were going to be changed, because I was too lazy to create several IDs for each one. I'll add them at the end of the project)

Update attachment

In the last few hours I've finished the mobile layouts of all the sections, now all that's left is to load the contents of the sections dynamically via a .json file, and make them responsive.

Update attachment

In those first few hours of coding, I made the website's homepage and navbar using the mobile-first method. (I can only send 1 image, so it will be only the homepage)

Update attachment