How to Stop Preparing and Build

Welcome Back!

Where we left off - GitHub

What we're doing today:

• Building the base layer application

Start at the back

As discussed in the last chapter, we deconstructed the design into a hierarchy of components. All components within the design are built on top of 1 component... the App component.

The App component will act as the background for the webpage and will provide context across the application.

The main feature of the webpage is the light to dark vertical gradient, so we'll start there.

We'll create a new directory called Styles with the new App.css file within. We'll now import that into the App component.

import './styles/App.css'

function App() {
  return (
    <>
      Hello World!
    </>
  );
}

Using a neat website called CSS Gradient we can generate the CSS easily to create the background:

body {
  background: linear-gradient(0deg, rgba(0, 3, 10, 1) 0%, rgba(0, 25, 34, 1) 100%);
  height: 2779px;
}

Until we start adding the components I have hard coded the height in which the design specifies.

We need structure

Now we've completed the background we can start by adding the Body component into the mix.

For this we'll create a new Body component within the component directory.

The body will house the main components within the application and will be the centrepiece in which the user browses the site. However, for the mean time we'll be implementing the CSS for it for now.

Within the Body component we must first import the Body.css file, something which I forgot to do for 10 minutes. As per the Figma specification we must then create a centred black background with 80% opacity. To achieve this we implement the following:

.frame {
  background: rgba(0, 0, 0, .8);
  height: 2779px;
  width: 720px;
}

.x-center {
  margin: auto;
}

function Body() {
  return (
    <div className='frame x-center'>

    </div>
  )
}

This will product the following:

The Final Footer

Just before we finish up we'll add the framing for the footer. Following a similar process we end up with this:

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: rgba(0, 71, 98, 0.2);
  height: 79px;
  width: 100%;
}

import '../styles/Footer.css'

function Footer() {
  return (
    <>
      <div className='footer'></div>
    </>
  )
}

The final design should look something like this currently (this is zoomed out):

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!