Designing Description Page

[00:00 - 00:10] It's time to design our description page. Before we start that, I would like to add some more styles to the base.scss file.

[00:11 - 00:18] Just copy it from the code below and paste it inside base.scss files. There are two color variables.

[00:19 - 00:35] So first of all, open base.scss file and inside colors, add color secondary light and color secondary dark. And two borders.

[00:36 - 00:43] One is lighter one and another one is the dark version of it. We can write our styles now.

[00:44 - 00:51] So we can remove the h1. Let's call our parent description page.

[00:52 - 00:59] So description page. So this is our parent div element.

[01:00 - 01:11] Now I want the body on the left and a sidebar on right. So what I can do is copy it and paste it.

[01:12 - 01:23] Now I will add underscore underscore body. So this is how the sas basically works, you know, to the children you just add underscore underscore followed by the name of the children element.

[01:24 - 01:39] So our body will have the header on top, which will have the title of the course. So let's write our header description page underscore underscore header.

[01:40 - 01:52] And our header will have a title. So I can simply copy it and paste it and I will add underscore underscore title to it and inside.

[01:53 - 02:03] I will write cause dot title. Now you might know why we have a question mark here because this can also be undefined.

[02:04 - 02:21] Inside the header, we have the title on top and in the second row, I want to have some details. So what I can do is I can simply copy it and below it, I will replace title with details.

[02:22 - 02:35] And also I can get rid of the course dot title. So inside details, I want to add some information such as the author name, cause language and cause updated date.

[02:36 - 02:39] So we have details. I want the author and the author name.

[02:40 - 03:06] So what I'll do is copy it and paste it. So I will append details and this con disco author and our author can have a title created by and below it, I can basically create a span.

[03:07 - 03:28] And the class name can be author dash dash name and the name of the author is course dot instructor. So basically I want to write created by on top and below that I want the name of the instructor.

[03:29 - 03:36] So course dot instructor. Let's copy it two more times because I want to have the same one for the language and the update date.

[03:37 - 03:51] So we'll copy this part and paste it two more times. I will replace this author by language because here I want to write the language of the course.

[03:52 - 04:21] So I will replace created by with language and inside co-start instructor, I will write cause dot language and the third time I will delete the author and I will instead write updated and updated name should not be there. So it can be updated date.

[04:22 - 04:37] So updated, I can write last updated and inside I can write cause dot. Okay, so we don't see last updated.

[04:38 - 04:57] What we can do is we can go to our cause model and add last updated and this will be of type date. Here I can write cause dot last updated.

[04:58 - 05:09] Here I don't want to show the date as it is because it also has time with it. So what we can do is I have created a function which will take the date and change its format.

[05:10 - 05:19] The function's name is get past date which changes the format of the date for us. Just copy it and paste it on top.

[05:20 - 05:33] Just go on top and here you can paste the function. Basically this is taking a date and first of all making it a string and splitting it by a space.

[05:34 - 05:43] Now it's again converting it into a date by taking the first part. Here it is extracting the date from this date.

[05:44 - 05:56] Here it is extracting the month and here it is extracting the year. And here we are just changing it to string and finally we are returning it as a string format.

[05:57 - 06:10] So we have to use this function inside cause dot last updated. So I can cut it, paste, get past date and pass the value.

[06:11 - 06:17] So this finishes our header part. I have provided you a file called description dot SES.

[06:18 - 06:35] Just copy it and make a new file inside SES pages with the same name and paste it there. We will go to the SAS and let's make a new folder first for pages.

[06:36 - 07:01] And here let's create a new file underscore description dot SES and paste the code. Also inside main dot SES file we will import pages slash description dot SES.

[07:02 - 07:08] If you look at the description file there is nothing much going on here. Our main div has some padding.

[07:09 - 07:20] It has display flex because I want to have a body on the left and sidebar on the right. Our body has a background color and flex one means it takes all the available space.

[07:21 - 07:29] The rest everything is quite straightforward. Header has display flex and the flex direction is column.

[07:30 - 07:39] This is because we want our title to be on top and the other information will be on bottom. Let's go back to our description page and below the header.

[07:40 - 07:49] I want to add info. I want to add some more info such as category level and number of students in the course.

[07:50 - 08:06] So what I can do is when the header is ending I can create a new div but it should be inside the body. So what I can do is simply copy it and where it is ending here.

[08:07 - 08:29] I can paste it here and rather than being header we can call it description page underscore underscore info. The first one here will be the category so I can simply copy it and append underscore underscore category to it.

[08:30 - 09:30] They will write category and inside I can create a span tag so I will simply copy it and inside I will create a span and the class name will be description page info category dash dash name which will take our course dot category property. Let's copy it once again and this time I want to pass the level so I can replace category with level here and here I can take off category and rather write level and here it should be course dot level.

[09:31 - 09:53] Let's copy it again and this time I want to write the number of students that are enrolled in this course. So I can replace level with enrolled and here it should be enrolled dash dash count because we want the count of the students.

[09:54 - 10:07] I can write total enrolled and here it should be course dot students. So that I want to add some more information about the course.

[10:08 - 10:24] So what I can do is write let's see where this is ending. So here I can write description page underscore underscore about.

[10:25 - 10:45] Here I just want the content so we can pass the subtitle. So what I can do is copy it and here I can write about title and more about course.

[10:46 - 11:19] This can be anything really but we have subtitle of the course so we can use it here and here it should be about underscore underscore content and we can write course dot subtitle. Let's copy it one more time because below this I want some description of the course so I can replace about with description.

[11:20 - 11:35] I can write description here and here it should be course dot description. If you see we have written our body let's write code for the sidebar now.

[11:36 - 11:43] So what I can do is check where the body div ends. So here it starts and it is ending here.

[11:44 - 11:59] So here I can write description page underscore underscore sidebar. I want to create a box on top which basically all the e-learning websites usually have.

[12:00 - 12:12] So what I can do is simply copy it and paste it but I will append box to it. This box will have the image on top.

[12:13 - 12:23] This is the place where you know we click and the intro video plays. So what I can do is add video to it.

[12:24 - 12:47] And I will pass the image. This image will have the alternate tag of course underscore underscore image.

[12:48 - 13:05] The source of the video is course dot image and we can write the width to be 100% and height to be 100%. Below this I would like to keep the price.

[13:06 - 13:27] I can create a parent div with basically sidebar and I can add price. Here I can create three spans which will have a real price or a before price and the discount.

[13:28 - 13:34] I will add the real price which we can say is the discounted one. So what can be the name of it?

[13:35 - 13:56] Let me copy it and paste it. Let me call it real and rather than a div I can make it a span and this can be the price of the course and I want to append the dollar sign as well.

[13:57 - 14:10] So I will write write dollar and again which will have our price and another span will be a bigger price so that we can show the discount. Let's make it 100.

[14:11 - 15:10] So what I will do is copy it, paste it here and write price before and this will be 100 so I can write 100 dollars and finally I will create another span which will show the discounted percentage. So first of all let me copy it and replace before with discount and here so if we have the cost data I want to show 100 minus cos dot price and I can also append percent of I can add an exclamation here to make react know that we have this price and it 's not undefined.

[15:11 - 15:41] Below this I want to write learnings so I can copy this because this should be inside our box so I will paste it before it ends and this will be box underscore underscore learning. This will have a title on top so again let me copy it and append the title and the title will be what will you learn?

[15:42 - 16:26] A lot of spelling mistakes. Below the title it will be our content so we can create a div with the name content so again let me copy this and where it ends I can write content and inside content I will create an unordered list so what I will do is copy it and since I want an un ordered list I will write ul dot this class name underscore list and I will press a tab.

[16:27 - 16:51] Now here I want to map our learnings so what I will do is cos dot learnings dot map. Inside it will be learning and a key sorry it should be index.

[16:52 - 17:51] Our learning should be of type learning so what I can do is go to the cos model and create a root interface learning and here we have an id which is type number and name of type string I can copy it again for the requirement paste it and here I can write requirement and inside the learnings rather than passing string of an array I can pass learning and here I can pass requirement. Also inside the description page we will give type of learning and index will be a number.

[17:52 - 18:37] Now here I will return a list item so I can simply take this class name and create a list item here and it should be this. This class name will be this but I will add underscore underscore item it is going out.

[18:38 - 24:13] Also I need to pass the key tell react that it is unique I have passed the index to it inside the list item I can write learning dot name and since I want to pass a checkbox before the learnings name I will create another span so I will create a span which will have that tick mark HTML code so I will copy the class name paste in the span give it a class name underscore underscore span and I will pass the HTML code of the tick mark which is and hash 1003. We also need a button which will take the user to the checkout page so let's create a new div with name button appended to it so I can take this class name and I will add button to it so whenever this ends content yeah so below this learning I can create a div with box button and this will just have a text so let me copy it paste it button underscore underscore text and inside I can write book now this is it for the box we can create the body now which will be sidebar underscore underscore body so first of all let's see where the box is ending so starts here let me copy this class name and the box and here so below this I can paste this and sidebar underscore underscore body so our body for now will only have the requirements so what I can do is create a div which will carry our requirements so it will be body underscore underscore requirements we are almost doing the same thing as learnings so what we can do is copy the developments of the learnings and paste it here so body requirements we want to see the learning so basically I can copy everything inside this portion so I will copy this part and paste it here now we will have to replace box with body first so command D command D command D command D command D or if you are on windows it's control ND let's change it to body and wherever we see learning we need to replace it with requirements so again I will press command D everywhere and replace it with requirements underscore underscore and here as well it should be cause dot requirements dot map and it should be requirement and the type should be requirement which will be imported from our model and inside we want requirement dot name and that's simply it for now and before we move to the browser to check if everything is working fine I would like to make some changes this learnings and requirements should not be in capital like everything else so what I can do is make it a small L and make it a small R we will see some errors here so what I can do is replace capital R with a small R and here it should be small L rather than a capital L and guys it is 1 0 0 0 3 not 1 0 0 3 so just make these changes as well now we can open the browser and check if everything is working fine and this is how our description page looks like right now there can be few changes that we can do but we will look at them later on I just see one change for now to make the discount percentage more approximate so what I can do is put the code and wrap it with the math dot flow block so here I want to wrap this percentage with math dot flow so that we don't see the percentage here math dot flow and inside I will pass the same code it looks better also if we check another one yeah 75% off and here we see 70% of perfect I'll see you in the next one