Day 3 - Redesigning Nasa's Picture of the Day Webpage

Hello again 👋🏽, I have come back with some more news for this project. Yesterday, have made 4 projects in the Github to which I’ll be setting any sort of goals to accomplish and stay organized. You can see in the link below.

Today I have quickly looked back at the APOD site to check all of the main things needed for this webpage. I have them written down, and consists of a:

• Date
• IMG
• Title
• IMG Credit
• Explanation
• Other Credits

These are the main things I will be adding to the project.

For the Design, I have improved of the look of the secondary responsive version (on the right) where the width is 1080p, so then most of the monitors should have no problem.

Finally! I have started with coding the project! this was exciting as I have begun the process to completing the webpage with the actual code. I am satisfied with how the mock ups were, and how not so much has changed fro the first one. This is what the I have completed so far:

As you can see, the navigation is looking pretty good especially on the first day of coding this project. Here how I started off:

1. You first begin your React project with npm start. This will initiate a local server on your machine. With this, and the barebones project, you will see the React logo spinning as it is live. This is a good thing as it means that nothing went wrong with the project itself.

2. I then deleted all of the Css code from the App.css file because I will not using it anytime soon. All of the styling will disappear. I also deleted the JSX code from App.tsx (or in javascript, App.js) file. (One thing that helps with making a site is to always set the margin and padding to 0 and make the box-sizing to border-box in the App.css file).

3. After that, I got to listen to music. Great for me as I can stay in my mode.

4. Now onto the producing, since I. have been deleting stuff. I now structure my navigation like how I have from my previous projects. At first, I thought I would have the title the Home link as well, but that won't work and I decided to have the title there as is and be an H3 tag.
   How I imported the svg logo was to look it up. What I found and forgot, was to include it as a React Component.
   

import {ReactComponent as NasaLogo} from './NasaLogo-96.svg'

<div className="logo__title">
  <NasaLogo />
  <h3>Astronomy Picture of the Day</h3>
</div>

• NasaLogo is what I named the React Component in the code while the path to it is on the right.

• I have used flexbox for the CSS side of the project. It is super handy to have and I try to minimize it as it can be cumbersome when you have so many flexboxes. This ordered and lined the links to one side, making it looks like actual navigation.

So that is pretty much it. There isn't much to talk about besides checking out my repo on Github as you will be able to see more detail.

I would like to thank everybody reading my posts and those liking it. It really helps but I'm gonna be honest, I don't know if this works like Youtube where you like, comment and subscribe to gain a larger following 😅. See you till next time. Cya! 👋🏽

Here are some things I have used so far

• Flat Icon - Free Icons
• Google Fonts
• How to import an SVG in React