Wow, what a progress I have made! Good to meet you all, I’ll run you down on all that I have done quickly, then get down to the detailed things. Here we go..
For a few days I have split my work load to fit in with other tasks I had to do. On those days I have, made the closest replication to my designs and are pleased with the results. I have made only one card and all of the needed parts for that part.
This is currently what the navigation looks like. I have fixed the alignment by using
position: relative;
and decreasing the top portion by using -10px. This has aligned things nicely and I have previously added an animation with the logo. I forgot to mention this but it is not a huge deal. I think it looks cool and adds liveliness to the webpage. More animations will soon to come. The Logo moves up whenever you hover over it.
Here is the full illustration of what I see if the site were to be completed. It id obviously not done, but what you see here will most likely be the first thing you will see. I am willing to upscale and downscale this webpage, from a larger monitor, to a mobile device to accommodate most or all users.
As you can see here, the card itself is rather large for my screen. I have said before that I would have a 1920p version and a 1080p version. I thought that the 1920p version would be great for my display, but it is huge which I would need a larger screen. So I have been making this project in the 1080p scale. I know I said that I would go for the 1920p version as the main one, then scale down, but because I have chosen the 1080p version, I can still increase the scale plus decrease the scale and make everything responsive. I just changed the order I am going at. So I hope that makes sense.
I have reached an issue which I did think about but did not know when I will meet this problem again. The heart right now in the code is a png (which explains the blurriness), and to include the function where once you have clicked on it, the whole animation thing plays, I don't know how to do that and keep the state of a users "like". I am not interested in making a social media app for Nasa's APOD site, I just want to make things more modern and less like research where the information may be disregarded since it's far below the picture. I think making the experience more attractive for people to learn more about the photos.
This isn't a fully integrated webpage with all accommodation where people can make accounts and do things like DEV.to. That would increase the API calls significantly to where I might need to pay and if I strive for more viewers and clout towards this site.
🚀 What I have learned:
So recently when working on this project, I have remembered that I have to organize the project files at some point. What I have found was that us React Devs must organize our code the way we think is great for the project and there are no right answer to how the project should be organized. I do have a few thoughts.
I don't like the thought of having all CSS file in one spot, then tsx or jsx files in another. It just seems more time to find that specific file whereas putting both css and jsx/tsx file together would be a reliable choice because you find these file by its purpose or component. Instead of searching based on what file you want to edit, you can search for the navigation folder or the navigation component (which would already be organized in the navigation folder). It is best to take your time and then commit to it and not make any drastic change in the file structure. It can be a pain to change all of the imports to a different directory. Even if VScode can do it a bit faster, it can take long.
Right now, I have not made any new directories yet but they will come soon as I am stacking each component up. Oh! I also separated the code from one App.tsx (or App.js for others) into it's own components to give more readability since both css and tsx file have gotten longer.
Once again, thank you all for reading this. It is late for me but I did procrastinate at the end for today and a bit yesterday so Feb 19 should be the time this will be published, but Feb 17-18 my work so far is done. See you again! 👋🏽
Top comments (0)