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.
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
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!
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.
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
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)
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.
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)