Introduction

On the previous blog, We have completed the “Sidebar” component. I encountered somr problems on nesting scss, but found a system to follow, so that it’ll be more manageable. I will be resuming with the Youtube tutorial.

Steps

For this day I decided to start with programming the styles (scss) for the ‘Layout’ component. This should help me visualize where my components will be placed.

Fix ‘Layout’ component CSS

Open ’tiukenywil11_portfolio/src/components/Layout/index.scss’

Add style for ‘.page’ class.

.page {
    width: 100%;
    height: 100%;
    position: absolute;
}

Add style for ‘.top-tags’ class.

.top-tags {
    bottom: auto;
    top: 35px;
}

Add style for ‘.tags’ class.

.tags {
    color: #000000;
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    left: 120px;
    font-size: 18px;
    font-family: OpenSans;
}

Add style for ‘.bottom-tag-html’ class.

.bottom-tag-html {
    margin-left: -20px;
}

Open ’tiukenywil11_portfolio/src/components/Layout/index.js’ -Inside ‘Layout’ class’ return statement, Wrap ‘Sidebar’ component with div with class name ‘App’.

<div className='App'>
    <Sidebar />
<div>

Below ‘Sidebar’ component, add div with class name ‘page’

<div className='page'>
</div>

Inside class name ‘page’, add span tag with class name ’tags’ and ’top-tags’.
- This will add the <body> tag on the top of the web page.

<span className='tags top-tags'>&lt;body&gt;</span>

Below class name ’tags’ and ’top-tags’, add an Outlet’ component.
- Note: This will cause an error, so temporarily comment out

{/*<Outlet />*/}

Below ‘Outlet’ component, add span tag with class name ’tags’ and ‘bottom-tags’.
- This will add the </body> tag on the bottom of the web page.

<span className='tags bottom-tags'>&lt;/body&gt;</span>

Inside class name ’tags’ and ’top-tags’, add ay </br>,, then a span tag with class name ‘bottom-tag-html’.
- This will add the </html> tag on the bottom of the web page.

<br />
<span className='bottom-tag-html'>&lt;/html&gt;</span>

Test if ReactJS app is workin.

npm start

The screen should look similar to this.

Outro

The progress I made today adds some helpful features for our ‘Layout’ component. The changes can be found in my GitHub repository here

Introduction#

Steps#

Fix ‘Layout’ component CSS#

Outro#

Introduction

Steps

Fix ‘Layout’ component CSS

Outro