First, we would want to create a skeleton UI of the application, and then we can create a store, connect the UI to the store, make the app more functional, and add CSS styling.
The `Main` component will create two components, namely, `DetailsSection` and `PostsSection`.

```js
function DetailsSection(props) {
  return (<div></div>);
}

function PostsSection(props) {
  return (<div></div>);
}

function Main(props) {
  return (
    <div id="main">
      <DetailsSection />
      <PostsSection />
    </div>
  );
} 
```

In our final product, the `DetailsSection` and `PostsSection` will be as follows:

We will create very basic versions of `DetailsSection` and `PostsSection`, which we will improve later. The code should be something like [this](https://pastebin.com/g02FCYRK).

```js
function DetailsSection(props) {
  return (
    <div>
      <div>
        <h2>Profile</h2>
        
        <label htmlFor="name">Name: </label>
        <input id="name" />
        <button>Change</button>
 
        <p>Posts: </p>
      </div>
 
      <div>
        <h2>App</h2>
 
        <p>Users: </p>
        <p>Total Posts: </p>
      </div>
    </div>
  );
}
 
function PostsSection(props) {
  return (
    <div>
      <textarea />
      <button>Post</button>
    </div>
  );
}
```

With the above code, our app should look like this:



We need the `DetailsSection` and `PostsSection` shown in the form of two columns, for that, we will create a grid using CSS. Create a new `index.css` file in the `src` folder and write the code for creating a grid inside the `#main` element. 

```js
#main {
    display: grid;
    grid-template-columns: 30% auto;
    grid-gap: 1px;
}

```

We can import the CSS files using the JS `import` statements in `index.js`:

```js
import './index.css'
```

Now the app should be looking something like this:

In this course, the user will learn how to use Redux and React to create powerful applications.

In this section we will learn what Redux is, why it is useful, and most importantly when it is useful. We will also learn how to set up a basic react-redux application.

In this section we will go through the fundamental concepts of Redux that are necessary to understand the workings of a Redux application. We will use code examples to understand the concepts and in the following section we will use them practically.

In the previous section we looked at the basic concepts. In this section we use those basic concepts to understand some more complicated concepts and the structure of a Redux application. In the end we will also look at the Counter application to put together all the pieces of our knowledge together.

This chapter is focused on practice hence we will utilize the knowledge we acquired in previous sections to create a practical application using Redux along with React.

Introduction to Redux

Creating the UI Skeleton