This video is available to students only

Designing Description Page

In this lesson, we're going to design the description page

Designing description page#

It's time to design our description page. Before we start that, I would like to add some more styles to the base.scss class, so just copy it from the code below and paste it inside base.scss file.


We can write our styles now. Let's call our parent div, description-page. Now I want the body on the left and a sidebar on right, so let's write our body, description-page__body. This will have the header on top which will have title of the course on top. I'm just appending it on the previous class so that it's easier to nest. Title will be course.title, and it's using a question mark because it can be undefined as well. Below the title, I would like to add some details such as the author name, course language and course updated date. Let me write the details. I can simply copy the title and replace title with details. Inside details, I want author and author name, so I will write author inside a div and author name inside span. This should be course.instructor. I want "Created By" on top and the name of the author on bottom. Let's copy it two more times, one for language and another one for updated. Let me write language and course.language here, and updated in the bottom one. I don't want to show the date as it is because it also has time with it, so we can write a function which will take the date and change the format. I have created a function called getParsedDate which changes the format for us. Just copy it and pass the lastUpdated property to it.

So this finishes our header part. I have provided a file to you called, \_description.scss. Just copy it and make a new file inside scss pages with same name and paste it here.

getParsedDate Function:

There's nothing much going on here. Our main div has some padding. It has display: flex, because I want to have body on the left and sidebar on the right. Our body also has a background color and flex 1 which means that it takes all the available space. Everything else is quite straightforward. Header has display: flex because of which our title will be on top and other information will be on bottom. That's why I've given flex direction: column to the header. Below the header, I want to add some more info such as category, level and number of students, so I will create description-page__info. First one will be the category, so I will copy it and add a category to it, and copy the className once again and paste it inside the span. Let's copy this once again and replace category with level and once again with enrolled.

Below that, I want to add more information about the course, so I can write description-page__about. It will have title and the content. Inside title, I will write "More about Course" and in the content, we can use our SubTitle. Let's copy this block and replace About with Description. This part will carry the course description; I will write Description here and course.description here.

Start a new discussion. All notification go to the author.