Such a messs!!

Devlog #4 - Artemis App!

Your opinion

Before we begin, I’d like to know your opinion about the images layout. The 3 first screenshoots below shows different layouts.

• Screenshoot 1: This is the first version I coded. But it covers the close button and most importantly - the scroll bar which is so unpractical
• Screenshoot 2: this is how I had imagined it when this idea came to my mind. It also covers the close button and the scroll
• Screenshoot 3: last version I’ve coded. I did not planned this layout but I think it looks great and is the most practical!
  Unfortunately the 3rd option covers the move button but by adding some z-index everything works well, and looks better than when adding z-index to the scroll bar bc the rocket/astronaut is either covered by the scroll or too far away.

Please let me know what you think!

Challange 1

Adjusting these images was such a challange. But I wrote it all down from memory! I added the position: fixed so it can exceed the window and adjusted the position several times! The biggest problem, as I said, was that they were covering the scroll bar and close button and then the move button as well. But I found the solution! I added the appropriate z-index to each of the elements and it worked!! (I’m really surprised tbh it was so easy and didn’t took me that long to figure out! I’m getting good at coding )

So finally, what’s new?

I added the Artemis Mission App!! It’s not an app just about the artemis II. It’s an app where you can learn about the whole mission, the SLS rocket, the Orion capsule and get to know some fun-facts!
Doing the research on all of these thing took me sooo much time! And then writing it down, deciding what is worth the attention and so on… it was kinda exhausting! But I’m so happy with the (not yet) final results!
Yeah, not yet meaning…

Challange 2

On the last screenshoot you can see the biggest mess on this app! Few photos totally without rhyme or reason! I was coding with image slider tutorial. Everything was going smoothly, till the creator of the tutorial said that now we shall see our photo aaaand yup I did not see anything. I was checking several times if I writed down everything the right way, I was looking for solution and eventually I created new repository and copied the whole code which he pasted in the comments (just to clarify - in this project I do NOT copied any code, I writed everything by myself). In this repository everything worked. When I saw the final results in the repository I had also noticed that it’s not really what I wanted to have in the Artemis App. Bc the code did not worked (probably because it already was in several divs and not like raw or sth) and bc it didn’t align with my vision I decided to just delete this whole code. I’ve already found another tutorial, with better design so I will keep you updated on how it’ll turn out!

What’s next?

1. Fixing the mess and finishing the app
2. New app (it’s going to be music app linked to the Artemis II mission!)

Thanks for reading and stay tuned!!