CSS in React - A simple Homepage

Of all the things we do to build an app and utilize our creativity, I think styling the CSS is my personal favorite. I love the instant gratification of changing the visual aspect of the page with only a few keystrokes.

Here is a BASIC style guide to create the page above:

1) Add a background image

Be sure to choose a high definition image that is large enough to fill the screen without blurring. You want to maintain the sharpness of the image on your page. I typically look for images that are at least 1600 x 900. 

Save the image to your "public" folder within your React app with a simple name that describes it, like "glacierbackground.jpg"

In the component where you want the background image to render, create a div with a class name that you can refer to for CSS styling.

In your App.css file, refer to that class name for all of the styling details related to that background.

I used the following code in my app to set and style the background image. I made sure that it was the only image on the page and would be centered and fixed so that the page would not scroll.

2) Add a Nav Bar

Create a component for your Nav Bar so that you can utilize it throughout your app. A Nav Bar can be as simple as a list of links.

Now you can style the Nav Bar in App.css:

3) Add a "Welcome Sign"

This is a simple design for a home page, but feel free to get creative here! You may have noticed this line in the ExampleComponent above. This is how I simply render the words "Hello World" onto the page:

Lastly, style the words in App.css to make them big, bold and centered:

This was a simple tutorial for a basic home page and nav bar. For more information and detailed CSS tutorials, visit w3schools.com/css