Build a Website using ReactJs and Contentful (Headless CMS) | Sarfaraz K | Skillshare

Build a Website using ReactJs and Contentful (Headless CMS)

Sarfaraz K, Front End Developer and Digital Marketer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
46 Lessons (5h 41m)
    • 1. Welcome to the course

      2:15
    • 2. What is Contentful

      0:33
    • 3. What all you need for this course

      1:50
    • 4. ES6 Overview

      0:40
    • 5. ES6 var vs let (Optional)

      9:06
    • 6. ES6 let vs const (Optional)

      5:08
    • 7. ES6 Arrow Function

      5:34
    • 8. ES6 Template Strings

      3:51
    • 9. Prototype Methods

      4:50
    • 10. ES6 Classes

      3:07
    • 11. Spread Operator

      6:06
    • 12. React intro overview

      1:26
    • 13. Create React App

      7:11
    • 14. Elements

      10:52
    • 15. JSX

      7:18
    • 16. Components

      4:27
    • 17. Props

      3:53
    • 18. Refactor

      4:27
    • 19. Component Architecture

      1:15
    • 20. State Management

      3:31
    • 21. Update State

      7:18
    • 22. Lifecycle Methods

      6:38
    • 23. React Routing Overview

      0:50
    • 24. UI Setup (Bootstrap 4)

      2:17
    • 25. Adding Header Navigation and Footer

      12:50
    • 26. Component State Navigation

      7:16
    • 27. Browser-Router(Routing all pages)

      10:15
    • 28. Creating Home page Part 1

      29:04
    • 29. Creating Home page Part 2

      12:21
    • 30. Creating About us page

      4:51
    • 31. Creating Service page

      19:29
    • 32. Creating Blog page

      11:30
    • 33. Creating Contact us page

      5:36
    • 34. Create space id in contentful

      3:08
    • 35. Set up the client

      3:52
    • 36. About us - Part 1

      9:26
    • 37. About us - Part 2

      8:49
    • 38. Service page - Part 1

      4:19
    • 39. Service page - Part 2

      16:59
    • 40. Blog page - Part 1

      7:35
    • 41. Blog page - Part 2

      9:53
    • 42. Blog page - Part 3

      23:07
    • 43. Home page - Part 1

      11:51
    • 44. Home page - Part 2

      7:27
    • 45. Home page - Part 3

      8:56
    • 46. Home page - Part 4

      7:56

About This Class

ReactJS is a very popular JavaScript library created by Facebook and used by many other industry leaders like Netflix, Airbnb, etc. 

Contentful is a content infrastructure. It lets you create, manage and distribute content to any platform. Unlike a CMS, it gives you total freedom to create your own content model so you can decide which content you want to manage. It provides you RESTful APIs so you can deliver your content across multiple channels such as websites, mobile apps (iOS, Android and Windows Phone) or any other platform you can imagine.

Transcripts

1. Welcome to the course: Okay. Welcome to the course for stuff. All I want to thank you so much for choosing. This goes to learn about contentment. And I'm really glad that you're here with me today. What are we going to learn in this course? We will make a website using reactors and content. Full great content model in content. Full creating country model is a four step to structuring your content properly. Add entries in a city. Entries refer to content itself. Entries could be blocked, posed banners except and last but not the least, Deliver your content to a PM. So who am I? I'm sure the first cost money and I'm going to be your instructor. Toe of the course. I started my career seven years ago, and I'm super cute is to learn more about front end development. And I want to share my knowledge. Uh, video in this goes. I want you to feel free to contact me and ask me anything you want. I have made a Facebook group so you can join this group and you can even contact me through my email. I d. And of course, through the forum of Discourse. So let me show you. What are we going to build? We're going to build this website. If you can see, this is the home page. This is the banner featured portfolio. Except for f Accuse all these are all this is coming through content ful. Okay. And let me go to about us About is this paragraph is coming from content. Full. This is a service page. This is also coming from content. Full. I made a blocked page and want to click on this block. It will show you the detail of the ah particular block. And this is the contact beach and I've used ah Google contact form. Okay, so this is the website which we are going to build throughout the course from scratch. So that's enough talk for no. And let's go to the next lecture and start learning about content full. Thank you. 2. What is Contentful: Hello, everyone. In this lecture, we will see what is contained. Full content. Feliz A content infrastructure. It lets you to create, manage and distribute content to any platform content. Full. Provide us full of AP eyes so you can deliver your content across multiple channels like iPhones. Android phones website Exit content Full is an effective tool for creating and managing your content online. 3. What all you need for this course: So what? All you need for this course? Just go on Google on this type in Norges on, um, when two type no, chase it. Retake uto? No, just this is the first link. So just click on this no chase and click on other downloads, so make sure that you on current Ah, current tap on If you are Windows users, So just recon windows. Andi, your download will gets doctor. So once you know, load the package files, you can install it on your PC. I have already done it, so I will not do it again. On if you're Mac users. You can just click Congress time and your download will get started and you can just installed on your PC. So I have just installed it, So I will not do it against just pausing it. And the next thing what we want is a text editors. So just type in visual studio Cool. Once you type visual studio code, you will see this link on the very first page. Just click on it. So I have already download and install it amusing windows. So I have installed this field of my accusers you installed okay, you can know Nordic American. Install it. So these other two things we need for a project, So just go ahead and, uh, no, no, no order that started I receive in the next election. 4. ES6 Overview: Welcome to Year six Crash course and let's see, what are we going to go in this course? So first we'll see the difference between while and let a label, and then we'll see the difference between leg and cons. And after finishing this, we will see the year six out of function on. After that women T ear, six templates string on. Then we'll see the prototype and then years six classes and last but not the least, we'll see the spread of critters. See you in the next we do. 5. ES6 var vs let (Optional): Hello, everyone. Welcome to the U. S. Six Crash course for writing the cold. We need to goto j has been dot com on here. We need toe uncheck html tab and output that on. We need to check our strip, have and console them. And before we start writing year six scored. We need toe right one line off gold. That is slash s district Jay's hand. He is next fallen through Estrich. Hannah slash What? This line off board means the easiest next option. Those days him that you're bored Uses year six features Specifics, Index. For that reason, we need to set this option so Jason doesn't raise any unnecessary warnings. I'll show you an example. Let's say I take leg name. It was Do so for us. My name. And if I don't write this line so it will give me a warning. So do a white this morning. We need to write this line. So let's start a lecture. So before explaining you about let very But let me explain you about why available for that reason we're going to declare available bar name. He was two said, which is my name, and we need to control this name. And while we're able that year saying to reassign this way But we need to write name equals two Summit and we need to control it again. So let's run this school. And here you can see that it prints my name, sell for us first, and then it prints something. So the value off name has been the value off. This variable has been reassigned. Okay, So, like, when? Delete this, clear this and let me delete this. So now let's talk about scoop. For that, I'm going to declare a function function, bring name with no arguments. And inside this function school inside this curly braces, we need to declare a variable name equals toe set for us on. We need to control this. I mean, and to execute this function, meaning to write print. I mean on let's done this gold on it will print my name. So what would happen if I tried to print this variable outside its scope? So what do I mean by school? Well, this while be variable is declared inside the inside this block and it is locking you. We cannot exist it anywhere else. Suppose I try to do so Let me try logging this name. Let me try this. Try logging this name outside, off in school. Make me cut and let me copy this year on, let's comment it out Dysfunction by pressing control slash and let's run this gold so you can see it does not printing my name. It is giving an editor so you cannot access a variable outside off its school. It is only school toe that function if you declare outside the function. Suppose if I declare it outside the function. Let me copy this. Let me paste it here on. Let's clear this and let lenders so it will print my name. In this case, you can access anywhere in the file. It is best to our global variables because as your court become little complex, it is. It becomes harder to figure out which functions are reading or writing toe This very so try to keep valuable insider function and if you need to access that will evil value, I will turn off its school simply gave that function of return value and excess it accordingly. This is a basic concept off function school. Let's delete all this and let me clear this out. Let's re declare a variable. All of our name equals to sell for us. And let me like that You've statement if name equal to said finance. Sorry If the statement is true, then I want to trigger this block off court such that I want to create a new variable. What fulling? It was toe for us this money on. We need to cancel this for a man. Where does it underscored? And it went out my full name. As I said earlier, what we labels are function school. They are not limited to the closure off if statement so they're not limited to the closure off this if statement I can access this. We're able outside office. If statement let's console or dot log outside the school. Let me put this and let me paste it outside this holy places. Let's clear this and then this again. And you can see the sprinting my name as there is no function. So this variable is accessible to the entire window. It is basically a global available. What if I want to access only in the if statement as we know that what we're able. They're not block scope. There are function school. So year six came up with a let statement. Let us replace this world with leg on. Let me cut this on. Let these two here. Let's clear orders and let's run the core on. Everything works fine. What is? Let let is a block scoop. What is a block when you see locally braces one opening and one closing. That is a block. And you're the leg variable values are and clothes inside off the scope of this block. They only accessible inside of this. Took a lib races. So as you can see that it prints my name. Okay? Everything works fine. And let's so let's then this cold outside the school Let me practice on. Let me pay straight Here, let me clear this and let's run it again. And as you can see, it is giving me in. So we cannot use this. We're able outside office school on This is the end, that is. And that is the common difference between wiring leg. So always tried to use leg and stood off. What? Let me do you do all this and let me clear this let's declare available Wild name. It was to set for us on a game just type widening the U. S. I need do some meat. No, and console God Glogg name and let's run this court so it will bring some it it should display in and we should not be allowed to use the variable that can cause a lot off bugs and confusion in the application. So if I try to do this with leg video, but let's replace war with leg on, let's clear the stuff on Let's run So it will give me an error sometime. It might happen that you give the same variable names which can cause a bug. In this kind of situation, Let will be very helpful. So I hope you got there difference between the wild variable and let variable. So, in the next video we will look at the difference between let and const. So if you like this video, please, like share and come in and please subscribe to my channel. I'll see you in the next video. Let's take care. Bye bye. 6. ES6 let vs const (Optional): Welcome back to another video in this video we are going to talk about let in constant as we discussed earlier, that let is a block scope. It means it's well, you can be excess inside of the block and the glaring available with our makes it function School such that it will use is confined to that function that it was declaring. So gone, just like leg is also block scope. For example, in tired of the block instead of this blob. Let's declare a const is which is equal to 21. I can only access this inside off this block since it is a block scope. If I tried to excess it outside its scope, let's control this copy This age on, let me console not block eight on. If I don't this it will give me in Adam. So what is the difference between let and cons? The compiler allows you to abate leg available. However, with const once you assign a value, it's over. You cannot update it. For example, if I try to change this age from 21 2 41 let me live with this. That's clear this and literally so it will not allow me to change the well. And you're also you can see that attempting toe right? Eight, which is a constant. So I'm gon stand so in const. We cannot abdicate the value so when to choose lead and when to use. Const. When you're declaring a variable and you feel its value is not going to change, then always go with constant. Otherwise, if you're declaring a variable whose values going toe update er, then go with let let's see an example. Let's declare a very let me clear this. Let me get this as well. Let's declare a variable, const. But Sen, with which is equal to an object, said Stack, the person has ah name, which is a photo don't and gender. So he will be called and then general will be mill. So let us control this. Let's in the court and it will print the object gender, male and name John. So everything will explain. What if I want to update this person object equal to New Optic? For that, we need to ride person. Is it going toe name. I sat up and gender just Google Colin female, but quickly loses and liquid on this so it will give me in header here. Also, you can see that attempting toe over a person with Visa const. If I change this guns to let and let's run the gold again so it will change it though female and the name will be son I it is allowing it to up data values. So let's go back to Const. And instead of changing the entire value of a person only changes property. For that we do right person dark name in Quito. So on a person s gender, he's going to do female. That's clear this and let's run so you can see it is allowing to update our property. So with Const, we are never allowed to change the value of an object. But we can stay in this property and that is all for late and cons. In the next video, we will discuss about Arab function 7. ES6 Arrow Function: In this video, we will discuss about year six arrow function, let us declare, and Eric Const in teaches, which is a quinto and added often digits. 12 three. Now I want to modify all its value, said Stat. Every element is going toe have a value that one plus higher than the current intelligible . So instead of one toe, three make it 234 the way of doing it. This true map functionality, it will go through, eat single element off this area and updated accordingly to what we want. Our it on value, Toby. So the glad a new const of date into just which is a Quito indigenous, not man, which takes enough function containing each number in the added. Now we're going to modify in this block off court it is going to look to every single number in the areas such that we can access it through this we're able which will return updated number with one added to it. For that we need to write. They've done number plastic. What do one. So it takes this number correct while you add one adds one to it and this updated number will become our abducted value off on adding to say they should now have the value off 23 and four. As we looked through every element of this area and incriminated by one returning the updated value, let's control this soul thought Lord of did and teachers. Let's run the court and we are getting 23 and four. So now instead of this function, let's use Year six at a function. So copy this goal on based it and let me commend it out by pressing control and slash So it will. You can have a reference off this code to declare the arrow function. Just remove this function key and Island edl right after your argument. This ad was also known as fractal. Let's then the cold. Let's clear this and then the gold and you can see that everything is working fine. We can make this into one line off court. So entire off your function entire off your function in turn off this block, you are pretending a value so we don't actually need this scope. This took early braces. You can return your ability and value direct directly through your fight at all. So he moved into 10. Statement done on remote. This too curly braces as well on make everything in one line. This is known as implicit Britain. And explosive return is when you explicitly specify that you're returning something. And since we're having only one perimeter that's been spars, that that has been passed into our map insanity. You can remove this barrier to seize and everything will be fine. Let's clear this and literally look. Oh, and you can see that would put the same. What if we want to change all of this element toe a random string. So map it looked through all of this element and for each element updated value toe. John, In this case, we don't actually need this number parameter. So we're not really making use offered. So just remove this number and stood off this number. Put plastic ones to one, and instead of this number plus equals to one, we need to write a string Joan inara function. If you don't intend to specify any argument, you must have to parenthesis. So we need toe give to parentis. Is Andi that would just clear this, uh, gold And let's run the board and you can see it is sprinting. Joan, John and John. So that took about at a function 8. ES6 Template Strings: No. In this video we are talking about template. String them place during a replacement for years by string concatenation. For that, we need to declare a const name, which is a call to Joan Andi Konst eight, because it will do 30 on. We need to declare one more variable bond sentence, which is a big toe. My name is blank on in that plan, we need to have this variable name. Um I am blank years or so in this gang. We need to add this variable age. So before years, six introduced templates string In order to play string we need to stop this dream. Add a plus sign and places variable called name This way label We need to adhere and again at a plus sign against onto string on and same goes for age. We need to stop this drink. I had a blessed time. Had a real evil name Age again, minute with a place and we need to start a string. So let's run the gold. So we need to control it over to console sentences. Sentence on that trend, the gold and you can see that pretty spending. My name is John on. I am 13 years or thank you again and I'm 30 years old. So? So we contacted nated. Some variable on your string. Sure, this is a tedious process. So JavaScript introduced Template string. So let me comment on this court pressing control and slash on we need toe declare const sentence which is a window for them blistering. We need to use back Tiki Vitter's about their tacky So let's first the back Tiki and your we need to write My name is on We need to put a dollar sign on We need to act locally bases inside This calibrates is we need to light the way But the name of the variable which is name and I, um And I am again another saying with roupoli basis age Here's for you Oh, who let run the core and you can see that it is sprinting the same thing which was printing before my name is John and I'm 30 years old, so intended template string You can actually modified output off it, for example, if I put deer is into that's good is and that in the code so you can see that my name is Joan and 9 60 years old. So this is all about template string on In the next video, we'll take a look on spread operators. 9. Prototype Methods: Welcome to another. With you in this video, we're going to talk about prototypes. For that, we need to make a variable go on person. Which is it going to an object on in that object? We are having properties off. Name Joan on a judge 50 that is controlled this on. Let's run the core. So we will rent out the object with the property off name John and age 50. So now let's come in on this. And our goal is to create the same object using a function constructor. So to start with, we need to create a constructor function function with named person with 10 of it to arguments name and each and inside this function, we're going to write this start name in questo name on this dark age going toe age. So we're going to use this constructor function to create a new object of person. The new object that we are creating with this constructor is having a property name which is equal to whatever name that was just passed in. And the same thing goes with the age. So now how do we actually create this object with the constructor? So they guns, John equal to a new person. But just having a name John on aged 50. So we created a new object just like this one, which has a name John. And age 50. Whenever you're creating an object using a function constructor, you must declare the new operator. Now, if I control log this new object that we consoled this new object for Joan on. Let's clear this and let stand this. So it is giving me the object with the property off name John and 8 50 So we successfully created a new object using constructor. What if I want to have my objects on matters? What do I mean by this? Let's quickly see an example. I create an area. Let numbers equal to an area off numbers one toe. Three. As soon as we declare this Harry, we get access to all sorts off methods like filter numbers. Dog. Great dad. Numbers don't matter. So this numbers were able was created from the global constructor Ari, which contains all sort of prototype, mattered. Like Peter and Matt. All of these methods are now received by this variable numbers. We want to do the same with our person Constructor, We are going to give a prototype matter as soon as we declared the object from this constructor. So it will receive those methods. So right, person, Don't prototype not welcome. Which is in Quito function with no argument and inciters were going toe control. Log our templates String for that we need to write in the back. Tiki. Hi. My name is on, like the dollar sign on Opened the girly basis this dog name. So your vitamins down my third now, right? Just remove this control long John and ride john dot Welcome. Yeah, on let's clear this And let's underscore. So it printed out. Hi, my name is John. This is all about prototypes. On in the next window, we will talk about S X classes. 10. ES6 Classes: to declare the class right glass Whitney person and every class has a block with do braces do curly braces. It is the body off your class and inside the body we have to declare our constructor. We have a constructor in the last video to create object. We can declared it inside the body by writing Constructed, which takes name on a judge. So how do we create an object from this constructor? It is the exact same good that we did in the function constructor this dot name on the start each let me carpenters and let me paste it on a Let's remove this coming This constructor function will use to create new object off person. But how do we actually declared an object from this constructor? It is exact same thing as before. Gougne's John, which is a Quentin knew person, which, which is having a name. John on aged 50. And let's control Low John on. Let's run the court so they have forgotten this. That's clear this and let's run the gold and everything works fine. So we just created an object John from Essex class constructor. Remember earlier we gave a function constructor a prototype matter off welcome, and our and our object was able to receive it. We are going to do the same thing with the Essex class to give our class constructor a prototype of welcome. Simply right. Welcome. But brackets with drone Brackett's on locally places, so it is more easier than before, entire our matter. Just copy this line control log. So you so you and I'm able to right John not welcome on Let's remove this console, not block. Let's clear this and letter and this so it is working fine, and so were successfully able to create an object with Essex class construct. 11. Spread Operator: where you come to one of the video. In this video, we will talk about spread operators. We will look how we can expand our is an object with the spread operators. For this we need to declare to Aires. So let's do it, const names. But to record two and a day off name, which is which have John Sam on Bill and we have one more const more names. It is quite dull on adult names, Mike for on running. So how do we use spread operator on these two values? What does print off better? Will you do? It will take every single element from our ready and it expands and Harry into its element . This element will appear unusually. Let's control not log name. So let's controller and what it does. It will print out the normal ladies. So let's around the court and you can see it printed out normal. What if I add Spirit operator before this? That's clear this and natural this. It printed out these elements. Individual records are gone and it has spread it. So how it is useful. What if I want to combine them and in between I need to write a name off. Johnny, let me show you a result off this area. It will be just based it on in between. I need Johnny. Let me competence as well. So I want something like this. I want the results would be like this and everything should be in a single Added John time Bill. Johnny, my ball run. Okay, so let me clear this on. So how would we do it with CS five? So we will, Right? Let me. All names, which is equipped to a blank Added an empty area. Let's go on, cat. The elaborating all names you could do on names, not going rules. Semi pulling on your delivery will be John Salmon. But in between we knew Johnny. So So I like all names. Start Bush, Johnny. And now the result will be Johnny. And again I have to do right on names, which is a great toe. All names. I got one guy on more names, so finally we really can't deserted off all the names. So finally we will get the little tub, all the names, So let's console this clog all names. It's under code and you can see it printed out all the names with Jones and Bill Johnny in between on my ball running. So this we have done with yes five and let's do it with he s explained. Operators spread. Operator allows us to do all off this in a single line off gold toe. Let's delete this and it's commenters coming this out with control on slash on here. We need to give Gougne's on names equal toe on addi. An insider a day. We need to put this at it off. Names on before this we need to write. We need to give spring operator and after the names we need to write, we need to add Johnny. And then we need to write more names on before more names being dragged to spread operator on. Let's control this on the names. It's good is and let's run this so forget to come in this out clear on you will get the same result which were getting a little So how simple it is with by using spirit operator, we can simply write all this in one line off course. So this is it all about spreader proteccion The next video 12. React intro overview: Hello everyone, welcome back to another video in this section. We are finally going to start working with the act. What does it react? The act is a library used to create user interfaces. What makes react unique to any other library is that everything is done with competence. Imagine each component has a building block for your website and all of this component combined together to make a complex competent which builds up all the U. N. For your website, for example, imagine one competent built up the your wife or a number on your webpage. This component will be present it to No, but don't worry too much about this. Index will go on it in more depth once we start writing the cool and you also have another competent which builds up the U Y for the block post on your webpage, that component will be presented as block post. By taking both this component and combining them together, we can create a more complex competent that builds up your entire webpage. This webpage component is made up off to sub company now bad hand block post which combined together makeups and their webpage. This is also known as compositional model. And this is what we are going to use to make our entire user interface. Thank you. 13. Create React App: Hello, everyone. Welcome back to another video. In the last video, we had overview off for two reactors. In this video, we're finally going to start working with react. To do this, we will use a set up call create react app. So go to Google on diaper. Create the act app on. You will see the very first link. Just click on it and it will take you to this page. So why have you using creativity? Act nap? Why I be using this kind of sector so well normally working with react takes a lot of boilerplate configuration to get everything up and running before you actually start tracking The echoed normally dead border played configuration involves setting up off babble and so Bevers. What babble does is that it can watch the year six gold in two years. Five as if he act. Is it done with EA six hours JavaScript which all the brother does not support. You saw another tool between require toe get our react application upend Dunning is if we don't have create reactive is we're back. We're pension rates. All are called into a bundle such that the JSX School that we write with react Iskan Warder toe browser compatible This sounds too much off work late. So to make our react application up and running soon and over all this conflagration we use creator react up. So if you are building a react application, always start with this creatively active, so to get started. But did he with created the act app? Just open up your visual studio court and to get the terminal Ah, bless control and back Tiki So you can see their terminal is open and you can start writing Ah, CD start, start I just wanted to go in my for love So all my projects on in g gave and I made a fool out off reactors where I normally I put all my i d act is, um projects So if you can see ah So if you can see ah what we have to write us and be excrete React up on the name off your app so and b x d eight the act app on and we can get Give the name off a project you can give the name as spell your choice. Ah, I'm giving a name off react and painful. So now it will start building our project. So right now it it didn't stalling out app, but then stylish. And you can see it is ah, the act. It doesn't starting in the act with the AG dome. So the AG dome is responsible for rendering our webpage, and we also get react script. So the X script install Babel for us, which transpired our year six scored two years. Why? For browser compatibility on it installed model bundle wept back, Which is we? What we needed to bundle all our assets into one file and finally give us over Pegged observer. So the ex script does all the heavy lifting for us and say a lot of time and troubles for boilerplate configuration. All right, so now you have ah, finished installing your react application. We have given a set off instruction, uh, to go to our application directory by writing CD Onda projecting. So my project name is react content full. So I'll type CD react content full and press enter. Sorry. Spending mystique CD. The on Thankful. Okay, so now to start the developments are well, we need to write and b m start so what it does. It opens our browser to the part. Local host 3000. This is where our application is being hosted and currently running so we could start. So it has opened the browser with the part local host 3000. This is where the application is being hosted on currently running. So this is the initial state off our the act application and it's being hosted on the Given Pat. This webpage you see right now is react cold that's been running on the browser. So you might be wondering where is the board? According to this, the court lives in the source slash ab Georges in our react project. So let open the project. Go to a judge to the court on go to file Open Fuller. So it still years the project react content full. I'm selecting the polar so we need to goto source on slick conab dodges. So this is the cold which is running in the browser 14. Elements: Hello and welcome to the next lecture. In this lecture we will start writing the board. But before writing the board, let me delete the files which are not required, so logo dot svg does not required. So let me delete it on. Let me relieve discord. Okay, let me save this on in index Dodgers by Let me delete all this cold. Well, so I started writing this court so inside our index dodges while we're going to import YAC library for that were being should write board the act from the act and we are importing the react library such that we are given access toe this libraries matter to this variable called React on before we make use off this variable. It is important to note that react make use off elements to describe the user interface off our application and react elements are simply objects. So how do we create react element to modify to modify our user interface? So let's take a variable const element. Is it going toe and yeah, we're going to use this. We're able react dot create element and you're in the first argument. We can give our tax. I'll give I'll be giving his actual tech on. What is that? One day get your take is also known as head writer can. It indicates the title and it is the largest piece off the way, which stands out on a webpage. So whatever element, whatever takes we give in, this element will be shown as a very big, large text on the page. So this is about it on and in the second argument is where the props have been specified to right now. Vividly Keep it has no, don't worry about it. I'll be coming back, Bird. And in total agreement, the third argument is the content that takes itself. So let me keep it as hello world. So this element described that the weapons would have a very large text off. Hello. So how do we show this? Hello. Where? On our beach. Remember what I said earlier is Dad. React element only describes how the webpage is going to look. But what actually rendered over pages there don't For that we need to import the act, go on board for the act. I don't from yeah, no on to render this element on a webpage, But I the act don't dot Brenda Element and the element that we need to And there is this element okay on, we're going to render it on a dome. Note call root for that. We need to write document, not get element by i d. On Drew and we're using render method to display this element on the page. So let me show you one thing. Let me go in a public folder on Let's Check in Next Artist, Team and Fire and this index started. Steam will find So doesn't template for our browser, and it is responsible to show this blank screen off our way. Busy at the moment on and the body off. The estimate is completely empty, and it has only one bag, which is having an I d off gold route and our you is going to render on a single room dome element. Let's try. Let's save this on the paid showed reload and you can see hello world. So you for one day on the page, reload with Hello. We can even change the title of hello World. So let me change it toe Hello on Let me see everything. Let's go on the problem on If you can see you, you can see that Hello has been displayed on the webpage on even you can change this. It would take to a paragraph back for paragraph bag. We need to write. Be on, Let me save it and let the page defense. And if you can see this Hello has been changed to a paragraph Change it into a better grab bags. So even if you want to make this hello as board decks So instead off you convey strong Just save it on You can see that Hello has been born, Andi, even you can nest element inside other elements say, for example, let's create a list which is denoted by boil on what is a well well stands for D list ordered list on inside We are going to have three list items so we need to remove this Hello on May need But I create the act good here element on in the first argument we will right away, which is which is denoted by list item on your in the second argument, we will keep the props. Esnal on third is denoted as our text content itself. So we can buy dusting, right? A name. I give, uh, name of students like John on. Let me save this on. Let me put some space for this on. Let us give us a semi colon here on. Let us copy this lane off course on basic ways on. You need to give a coma. I need to change the name Smith on your given name off and let's just see everything. Let's go to the closer on. You can see that all the three named are been displayed. Jones made them happy. So instead of writing this one by one, we are going to use an area to declare. And today we should write const. And the name of that. It will be names equal toe square bracket. It is an area off name says that the first element will be John. Second will be Smith on third will be happy. Let me give us Semi Colon Andi and you're in the third argument. We are going to write a JavaScript code, which can Manu played the content off the list. So for that, we need to remove this three lines on. We're going to map this Eddie off names So we need to write names. Dark map such that it loops through eat single name. And when it looked through each single name it will give us, it will return us a new element with to the act start create element on each element will be in alive with no crops And the content for this ally will be the name which has been inserted by the added. So let me see if this on let's check the browser, it will show the same results which we were having earlier. Let me open our developer tool toe. Open it just right. Click on the browser and click on Inspect on Just Goto console and you're you can see aborning such as E Child in an Eddie or director should have a unique G problem. This editor referred toe this second argument To solve this issue, we need to give each one off this element and then at a unique keep rocks by opening curly places. Just delete Disney on Dwight D Colon on the glad turkey, which is something unique for each element. So you are. We can give it as name because all this names are unique. OK, And if we saved this on if you go to the browser, you can see that the area has been gone. Andi, it is okay now. So it is possible that some entries will be duplicated. Okay, so let me writer duplicate entry Supposed put this name the same. On if we go to the browser on again. This issue has been come To avoid this issue, we need to use an A next. It is safer to use the index often added to the present. Your key, The index of an area is created by the map functionality in the second argument. So here we need to give index on instead of me just died Index. And if you save this and if you go here, the other will be sorry. So why we need to give each element a unique? The reason is that it helps react to keep track off our changes and your elements. Just remember that while using an added to the present your child element every element of an area should be presented by a unique key props. So right now, this creed element nesting can get pretty tedious as it gets more complex putting child element upon parent element. For that reason, react came up with the ASX. It is more concise and we'll look more into it in the next video. 15. JSX: in the previous video, we got the list item through create element. This, however, can get tedious. So for that reason, we will using ta six j six. Looks like HTM in we will recreate this order list with the JSX Index. First, we need to delete this the react create element. So let me delete it. And just that I did with the opening tag. Well on, let's close this take with Well, okay, inside are intact. This will we need to insert. We need to declare a list item and lie with the opening tag and a closing tag off Ally. And inside this ally, we will write our text as hello. Let me save this on Goto the browser and you can see that hello world has been printed successfully through JSX. We can add more like those. Let me just copy this on. Let's put an ender So on, let me give an interview. It also just copy to more time and let's take the browser and you can see this three items has been listed on the webpage. Our goal is to get this three names from our area. So this list item so let me try to excess each item from the area in the list. I don't take. Let's write it as names And the first Eddie his Beetle Let me go, Peters based. It would be one Here, let me save this on. Let me go to the browser and you can see that it has printed the same takes which everything there. So to write our script gored inside this tags simply enclosed them with do curly braces. I like to do it and let's just save it And they just go to the browser on the baby live fish and you can see the name has been printed. These three names has been I didn't do it. Let me just change it to Smith. And we don't want to hard court this three list item on our list. We have to get this names from an Eddie for this. We need to write the JavaScript expression in our ordered list, so we need to enclose two curly braces and you every night. Every year. We need to write the name of the edit names dot man and such that it looks through each name. And when it looked through each name. It should return a GSX element, which is a lie just open and like back and close it on. Each ally should have that perspective name. So your people write name and we need toe. Delete this three items on. Let me save this and let's go to the browser and you can see the three names I've been displayed on the process the browser. So open up our developer tool by rightly condom browser. Click on inspect and go to Console, and you can see the same matter which we were getting earlier. Each child in an area or a litter should have a unique approach. So let me go to the board in JSX, declaring Your key props is done in the opening takeoff eat list item Such dead. Its key is going to equal the name itself when I save it and I go to the browser. The edit has been gone, but there is a possibility off having a duplicate name who let me copy this name John and paste it here and let's go to the browser and you can see the same edit so it is better to re present them with the index off the area indexes provided by the map functionality In the second argument, Select Let's letters Right index year on a copy on this basted here. And if you go to the browser, you can see that the end has been gone. What if we want to have a title call? Name off the students, Let's go to the court and for doing that, we need to write, uh, had the bag off each one and we need to. Writer takes name off students on Disclose that one back on. We need to wrap this boat the some element in the round Bracker that's just savored on Go to the browser. Yo! Beyond getting in headed Edison, JSX Element must be wrapped in an enclosing tag. It means that this around record will not work and stood off this. We need to wrap it with Do that. Just save it on. Let's go so you can see that name on the student has been displayed. Onda name of the students John Smith, then had it has been displayed on the webpage. So the reason for this having a big bag is that we cannot have this element equal toe to separate J six element. So for that reason, we need to wrap it in the bag such that this to some elements, this Etch One and this oil ordered list, this to serve element should make up the meaning that we are going to render on of a bitch . So in the next video, we will see how we can display more reactive. 16. Components: Welcome back to another lecture. In this video. We'll talk about competent. So this two elements that we have created the student title on the list of the students. They will make up two separate components off this entire page title is declared as once up competent off for Paige and listers declared as once a competent off a pit. So we will combine them together into a main component and render them all at once. Let's go toe, which will studio gold and glad a glass list class list. We need to make this class as competent. So for us, we need to import the competent. So your we need to write comer toe curly braces and you need to write confident. And then we need to extend it into extents and do a competent so now we can use it mattered . Surrender is one of them. Under and rendered method returns react element describing watch would appear on this screen, so we want our list to display JSX Element that would declare pally previously. So copy the poor premier on based it Here, make sure due to tender day six now we need toe do exact same thing for our title. So let's declared a class tightly fixed in competent on you, we need to write and in a matter and on a group render and what it will be done The title that led off the beach. That's copy this and it's based on here and now We don't need this constant element. So let us remove this on that received us. So now we need to combine this competence into a main company. So for that, we need to declare class on the name of the glass. We will give his app to the extent confident on we need to write in the rendered mattered on it done. It will return to sub component that we made so before that we need to write a div. This different actors a container and now we can ride I d on list on your we need to change the element and do app. So what we did is like we render this collection off competent through the dome by declaring an instant the at company as on argument. This is the competition model. Let me say this and let's see the result. You will see it is the same as before, but now we have running through confidence. I'm seeing the next video. Very big. Discuss about props. 17. Props: Welcome back to on the Dillinger in the last lecture we have created to sub competent and render it through our app component. That Wantage of doing this is we can't reuse this competent as many times as we want. For example, if I want to display multiple copies off our student list, so what I'll do is capitalist and based it. One time normal people list shows up on our webpage. So let's see this. So now you can see that multiple list has been shown. All the list uses this area so we can change the list item by giving them each different props. So this list item have been populated based on this heart Gordon any. Instead, they will be populated based on the props given by them. Instead, they will be populated based on the props given to them by competent instance. So let's try with the first list. Let's give the name off props as students equals toe and ari off names, which is having Sam on the second name will be built. Great course I can lives. The problem will be the same. Students on the list off today will be different with have will have a different names, my ongoing. So now, instead of passing the data from Hartke ordered Eddie, we will populate the list item with the data that was passed in as a prop from the competent instance. So let us come in this added, and to excess this prob and to exist. It's probably need to ride this dark props Nord students and let's check in the browser. So everything is working fine. And you can see that the first list is mapping out items off salmon bills, and the second list is mapping out the named Off My Again Tony. So yet is the challenge for you dying? What if either Tiger Brian What if either I do components. Instead, it has a title off student list instead of this name off student. So just pause the video and tried yourself. So you have real Pazar title props. The name title, which is a quite do the title, which we wanted to give a student list students lists and to access. This probably need to write this so door drops darts students. So it's our title. Let me save this and let's see the closet and you can see that the title has been changed to student list. So in the previous two lectures, we was successfully able to replace a sex element with competent and combine all the sub competent and been rendered them all through the APP company. So we were also able to use the subcontinent sets that each one is gonna figure differently . Why have props? So this is about com print and I'll see you in the next lecture. 18. Refactor: So one more thing we have to do is instead of having all this competent in single file, we need to split them up into different files and export them all back into index torches. So let's create a folder but the name competent and inside the competent older we need to create two files with the name list. Charges on the second trial will be Thank you. Start just and we also require the third file for, um, incompetent on. But that file is already being made with the name off Abd Arges, so we don't need to create Abdur Js file. It has already been created. So right, So let's go to list RJ's file and you're we need to importantly act and it's company from the act. Let's save this. Let's go be this line and based it on all the fights. So in the list charges filed, we need to copy the list company. So let's goto indexed RJ's and just good. This four on go to list RJ's file on basted here on. We need to do the same thing for title, so let's go to index indexed or Js file letters. Cut this court on Goto title Larges Copy this on. Same goes with the AB competent lead. Let us cut this court on. Let's go toe ab Georges and basted here. So in abd urges file all this instant is are not been defined their undefined To define that, we need to export the list Arges and battled RJ. So let's go to let starches and simply like export d Ford on the name of the company in this list. So we need to give it list. Okay? And see him goes for title. Simply write Export the Ford Thank you on Let's go toe abd ar Js file and we need to import list from as it is incompetent for those. So let's right guard slash on name of the four letters company slash on the name of the finders list on same good poor title in port. Thank you from confident. No slash badly on even. We need to export this app competent on toe imported in index charges five. So let us go. Laters. Export. This deformed up on. We need to import an index charges by violating import, uh, from as it is outside, the competence for low. So We just need to write dot Slash. So this is all about creating different files on def incompetent and rendering it in index or Js file. So let us go to the browser and you can see everything is working. Fine. So this is all about re factoring our fight on defecting? All off are competent. So this is it. I'll see you in the next lecture. 19. Component Architecture: Welcome back to one of the video Let's go toe index charges filed on Let's God, this addy and save the file and let's Goto Abdo urges and paste the idea. And let's UN commented by pressing control and slash t and you're you're not going to use to list off instances we are going to usually one less. So let's delete this list and instead, off hard quarter names. We will use this addy off names. So let's copy this name on. Let's delete this and based it here. So this property off students, we have going to use it, and now only starches, which is already been written in my earlier lectures. I have shown you how to map this list to display their names. So let's go to the browser and check it if everything is working fine or not. So here it is. We are getting all the name of students through this area off names John Smith and Heady joins me 10 heavy. So this is all about in this lecture. In the next lecture, we're going to talk about state management 20. State Management: when it comes to another lecture, all dropped the course. We have learned how to create competent and how to pass data toe competent wire props. In our case, we have passed down an area containing a bunch off names, which map out three names inside our list. Competent, but props are considered to be really immutable later. It's not meant to be changed over time. For example, what if I want to delete one off the student name from the list? How would we do it? Well, that's where state management comes in. Totally state re present data that can reach in your time. It's new David, for example. If I were to click a certain button on a bit, we would be using that. But to change the state off her company, and by changing the state off her competent, we can change the U. N. So to remove the name upon the click off a burden, we need state management in our application. How they react. Know that upon morning, find the any we want to reach trigger. That is a big names. How do we make it so that every time of day people react to know about Enrique bigger than matter and delete that name for that declared constructor. In fact, the constructor be initialized the state off our company. So how do we have state do a confident instance like this is simply an aerial names. So we really glammed this area as a distinct piece off state for any instance off the inside the constructor start by calling Super. Since we are extending toe under the class, we are extending company. So we must go on super in order to be able to use this. This is pointing toward competent instance that really play in the company Instance that we are enduring toe Ardo that are confident we are going to initial list that the state by state property state we did a quick Glenn object this object here, the president of state off competent Inside this object, people declare our state names which will simply be our initial Any off names on Let me just affect this. Let's paste it here. Let's just eat this. You don't require this Novica existing name property off state But acting this thought stayed Now I never be obtained The every people pitching in the state over confident the act will know about this and automatically make the necessary of Dave to the peace by triggering that ended matter. So if you go to the browser, everything we've been working fine. You can see that in our next lecture we will trigger some. You watch changes by actually updating their state over company. 21. Update State: welcome back to win the election in the last video, we have added state to our competence. In this video, we will look at how we can update the state and thereby update our competency where we will be looking at updating our list such that whenever we pressed delete. But it removes a name from our list. So for that we need to add a delete button in less starches. So let's do it. Let's go to list Arges and here we need to add a button. The elite. Let's save this on. Let's go to the browser. And, as you can see, delete Button has been added. So now the button is in our list component, and our state competent isn't Noah at company. So how we will get our but all the way over here to invoke some kind of function to update our state. So we're going to have a mature inside our APP company class that mattered will be gold removed name. So let's ride the matter. The move name and open the bracket. So you were given argument as name removed. We are going to use this argument to update our state by removing that specific name art off our name, which will trigger the render, matured and update our list with the new area off names That does not include the name we just elected. For now, however, our own legal is to invoke this mattered such that it takes as an argument a name that we chose to lead and controlled. Outlaw the name removed. So let's ride console Not wrong. Name removed. We will pass dysfunction as a prop down to our list company so lets us right on removed. Name. E Quito. Curly braces this Lord every morning. So now inside a list competent in total is competent. We have to write on click mature on delete button. So let's invited. So let's ride on Click, which is a good win at a function and inside title function. We want to call this start props Dog on removed. I mean, on inside the round record, you need to write name. Basically, we are calling this May 3rd that was passed all the way down as a props off on removed name , and this proper is going to call this method such tag. It passes in the proper name, and it should concern oclock the name which we click to remove. Let's try it out. Let's go to the browser. Bet right. Click on Let's click on the Inspect and here we need to go to console on. We need to click on delete. It is not during the name because you're I have done a mistake. Uh, it should be on the moon name. Let me save this on. Let's go back to the browser and let's click on Delete. And as you can see, it is sprinting out the name so we are able to access the name whenever we press delete. Now we want to update the state with new area. So for that simply light, let's go toe Abd RJ's and you're being into, like this start, said Steve. And inside off said State, we're going to pass a function Dad function is going to return a new object, which is going to so as our updated state. The first argument that has passed into our function is the current state off are confident so right I stayed. We want to update this gun states such that it removes one of the name that we clicked on to do that, we can return a new list off name. So died names Colon, and we want to remove a certain name from the current state off names Airy. So to get the current state they stayed dot and get the list of names associated with that current state right dot right names and from the name they filter out the names that we just passing the name that we play still it. So I don't on filter takes any functions that loops through every single name. And we are going to figure out the name. Were we clicked from the name Jerry by specifying a return value. Let's update the name that is such that we want all names that do not equal Terry mooning. So for that, we need to write names which is not equal. Big will do name removed and inside the constructor we need to write this start removed name, which is which is a window. This star remove name dark Buying this and let's save this fight and let's check it in the browser. Let me click on this delete button on. It works fine. So this is all about updating state, and I'll see you in the next video 22. Lifecycle Methods: welcome back to another video in the last couple of videos we were able to add state your company and update that by figuring out the name that we decide to remove from the names Ari off or competent in this video, we're going to look at different life cycle. May 3rd off are competent. The first life cycle may 3rd. Is the constructor matter the constructor. My third gets called one once before our company instances even mounted before it is even inserted into their dog in the constructor, you don't. They will want to include any side effect off that logic by changing the value off, available, writing to it or triggering a change in our, um the constructor should only be used to initialize the state off our company or bind up methods to proper context. However, when our first ran and stood off generating names from an area, what if we wanted to fetch them from a database? We're not actually going to set up in databases just to explain the concept like how we would fetch data from a database and then rendered it go a screen? Let's just assume that this any isn't takes um, date of is therefore, we wouldn't initially have access to it. He wouldn't need to fetch it. So the names property off our initial components, which simply be in empty area. Let's keep this area as an empty area to let me that this No, let's just right out. Some functions function simulate phage from data. This and this function should return the a day off. Names, Children, done any off names, it really move this. This is not a choir Just assumed that this data was inside off some external a pia inside off some database somewhere And we're calling this function. Let's assume that it is making an STP request to fetch that data and bring it back and returning the doors. So where would we then make that request? So the FBI request should be done after the competent dismounted after it is inserted in the dome and attitude of you. So we need to use lifecycle method called complimented Mark. So let us right here. Competent did Mom, because component did mountains involved immediately after the component is being inserted into the dome. The pattern is before the competent is inserted into their dorm. The constructor is involved and initialize the competent state with the name property offense I M did often empty, aiding the render. My third would then get gold passing in an empty area to map out the names. Obviously, the is empty, so it's not really mapping out anything. Let's take the frozen and we get nothing. We have empty page because off are empty area, which maps over nothing. So the render method renders nothing first, but then right after component is inserted into their dorm. Confident. Did Mount Company in Did mount get involved? And it is supposed to fetch our data prominent form from an external A p A, which would then update the competent state property names with the data that is just fetch So set of cons they die, which is equal to return value off our function, which is simulate fed from the movies. And once we are done, fetching their data from our database is evil of data competent state. By writing. This start said stayed. And inside this at state, we are just posse. An object declared the property, which you want to update. So it is names and which is a quinto the data that we want to face from our AP. Let's save this file and let's go to the browser and you can see that everything is working fine. To further illustrate the sequins off even put a console log controlled outlaw inside the constructor. So let us put it here console dot law constructor and then put the control, not log inside. Competent. Did mount Mental D'Argo combined big moment and then put a control not long inside rendered mental. So let's go to the browser on just right. Click and inspect, click on inspect for look and sold just with fresh. So you ve noted, if I let me save it and let's go to the brother And here you can see the first of constructor is get cold and then they render mid thirties, get cold and then component it mountains being called and everything is reading. So whenever fetching that data from the database is, it is best to do it after the competent is mounted and make sure it did inside the company Dickman. So there are many other lifecycle mattered and react in this course we will mostly be using Competent did mount on If you are curious about all the other life cycle, it has been well documented in the react documentation. So this is for now. And in the next lecture we will talk about the act out. 23. React Routing Overview: will you come back to another video in this video? We're just going to looked a website that we're going to build. So here is the website that we're going to build and if you can see this navigations about services log, all this navigations are coming through the act hoping I have used reactor hoping for this navigations and I have used boots Step forward for us structure. So we are going to use Bootstrap before. So in my next video I'll show you how to install Bootstrapped for on before making the website pages, we will make the header and the photo. So this was just an overview of the website that we're going to obey, so I'll see in the next video. 24. UI Setup (Bootstrap 4): Welcome back to another video in this video. We are going to install Bootstrap four. For that. Just go to a new dad on goto, Get bootstrap dot com Once you are on this page, just scroll down and you can see here is a city in which we need to copy. So just competence script files. Just copy them on. Go to your index, start HTML, which is in public for the so go to your index nordex TML on before the body ends. You just based in there on Let me form it. Let me for meant it. Um, Then again, just go do that. Great bootstrap dot com on you can just copy those CSS ling just got paid on. Go to your legs, start html file and you're at the top, just based. You see, it's this link. So once that is done, you we need to check that bootstrap has installed properly. You know, just go to your abd orgy. Is fighting on your in the deal? We can just very class name, which is equally do kind of Dana, which is one of this class name in boots. Trifle. Just save your fights on go the go do your and just right Click on it on inspect. Click on Inspector Andi, You can see the CSS plasma to of give and dinner and you're here. You can see the class container so we have successfully installed bootstrapped for And now we can use boots for for for our U S structure. So the Cizik for this lecture. And in the next video, we will make their head and food for our website. 25. Adding Header Navigation and Footer: we'll come back to on a W in this video, we are going to make this had a navigation on the foot. So for that, we need to goto our application on in the competence folder. We need toe create two files. One will be now by George is on the next file would be for her Gorgeous. Okay, so let's Goto barred RJ's and you have the need to write import the act competent from the Yank and your Benito Give a class with the name of God which extends confident and you need to write render on Deng gsx Do we need to give a live die on entire narrative time? We'll write our cold so we need to goto get bootstrap gone on We need to click on examples and when you scroll down you can see now but static Just click on it And just look on this black part on they can inspect on your if you can see it now a glass now by just click on that now And just if I click on it on and we'll copy, just copy out there. It's table so that we have copied our core on Let's go to our application. Let's be a state here. So So we have basted, but it is giving some error. So let's remove this form. We don't require this farm, so now it is fine on. We need to format it. There's one chart good. He which we need to use that days are shift. And if so, your gold is or maker on. This is public. Goes on for Mac. You can use option ship death so that for for mating the gold. So I have form entered it on your wanting before board is we need to export the Ford on It isn't now, but so just right now. But let's save this pile on now. Once we have exported now let's go to the hour. Let's goto abd arches fight and you're meaning to imported import. No, but from on you have a need to write confident flash on yet it just now. So we have important it on now we have we want to show I need to show it here. So now by slash close it and just remove this container. We don't require this class anymore so that we need to save this file and let's goto our browser on. You can see that the never has been displayed, but we wanted something like this on the on. Navigation should be on the right side and a little should be on the left side. So what we can do is we can go toe Neve R J s and instead of top now just write Lugou. Save this on, then What we want to do is like it's weekends. If you can see it is margin right auto justify camel or job? It is much left auto to save the file and let go toe the Rosa and you can see that Lobo is showing on the left and the links answering on the right. But the things we need to change we need our links as home about services long and contact . So your we need to change our link. We need to remove this disabled on. We need to know this as well. Let's remove this active glass to Skopje this ally and based it on your We need to do one more thing, which, for God does remove this ban which is not required for years. It is home on your it is about on. Let's go beat this Bay State. So this is law than contacts. So this will be services. There's been a big logs and this will be contact. Let me save this and let's go back. So right now African see, links are enjoying home about services, blood and contact. So top navigation has been done on Let's do the Footer part. So let 11 small Bordeaux. Get bootstrap dot com Example. Disclosure. Let's go back. And if you can scroll little up, you can see your sticky. For that, just click on it. So here is a sticky for they're just right Click on it on Inspect on your you can see for class for just right Click on it Go to copy and copy out the HTML goto our application on in application. We need to go to footer. So again we need doing board everything in boat React confident from, he added, and we need to they were glass name for good. It extends company on any fruit vendors on when you when you do the time on yeah, we need to give a live, uh and inside of the time, the Colby copy. We need to paste and many performance by formatted by pressing arch of F and windows and Mac, you can use option ship death. So here it is. Our goal. So your we need to re voters and the auto and be by iPhone three. You need to remove this on. Let's see, just refreshing. No, Sorry. We need toe. I have about one thing we need toe import this porter and our Abd arches. So let's imported import. We're done from confidence slash For them on your you need to give for death so that no before. Okay, so you're very forward to the export. So please remember, whenever we make class, we need to export that. So export footers explored the Ford. But don't that you received this. We need to go back to a frozen and you can see that hotel is coming up. It should be. It should come at the bottom like this trick. Lament the bottom like this. So we need to act. Some see aces. For that, we need to go to our application and in the conference border. We need to add one more files with just four North Sea yeses on deck. Two years as we need to light CSS for are for them. So this is the class which is already being there. So just copy this class. Go do a portrait, Ortiz says. I got in the last name and your we need to write. Um, ceases for that and that this position fix on. After that, we need to give a bit off 100 buzzing and it should. The bottom. It should be zero from the Barton. And then we need to give some padding, which is 10 pixels from top and bottom, an zero from right and left, so on. Be sure to give up back. Don't cut it off. We need to give a background off color for us. I just said we can just check it. I'm just saving this file and it's refreshing. The cold, refreshing API's Still it is not showing me. We need to import the CSS. So you're in the photo charges we need to import footer from for her. I don't see it says, so we need to import or leader file so important for the Nazi says deceived. This fine on it is compiling, so we need to be dominated. So yes, it is done. Let's go with browser. And it is a fresh and you can see it is in the courtroom on that. We have completed our header on navigation. But on foot, part of one more thing we need to do is that you can see that the space from left and right . And here it is showing that it is touching the right and the left. Ghana. So what you have to do is we have to goto never, never tortillas fight. And before this logo. Okay, before this logo, we need to add a death on a last name. You have a need to, right, Dana? Um, this is after. Now this David. After now on before you have any too close to Steve so that guys on you can see Does he just been fresh? But there's a spelling mistake. It should be container. A small c on. If I go back to my brother, he can see like we are getting this piece from the left and the right on. We are also having the foot. So this part is done on a still we need to work on other pages like you click on a bar. There's nothing. There is nothing happening, so we need to work on that. We need to make the pages for about of his clothes than contact. So in the next lecture, we'll work on that and see you next week. 26. Component State Navigation: Welcome back to another video, and this week we are going to make all the pages related to our website like home about Mrs Blondes and gone back. For that, we need to go to our application on in the Source folder the source world of any toe. Make a new folder with the name pages on Inside the pages we need toe create the fines which are required as like home gorgeous on about dodges. So this is yes. Log start iss on. There's one move I called contact kiss. Okay, so let's go toe home dodges on that's import He act confident from b act and we need toe give a glass with name pool which extents confident on during those and want you render We need to return GSX So you know we need to give do back on your I'm just giving one each one bag and inside each one day I'm just writing Let's export d Ford. Okay, So as I created the home we need to did he did the same thing for about services blawg and contact. So if you want, you can dispose of video and you can just try it out for the beaches on I don't be doing it . Okay, so this pause a video and let's just try it, uh, to do or on the basis. So let's go to about us page on Do same thing for about Import the Act company. Yeah, the OSCE extending its company I don do You can do one bag with the name about. You need to export this be part about so I understand That's good service. Let me copy this. It's copied this because the rest of the thing that scene. So that's based on services on and still about just like services. This service is back to Mrs Corporate again for the blog's to speed is dead Blog's Give it logs, logs called Big One More Time School Going back, you can contact Skopje based So we have created for the pages. Now we have to import all these pages on I'm Dr So let's go toe Abd Arges on your we can import on the pages Inboard home on your We need to give pages class on the name of the fetus home on your unique toe. Give home Gosh. Okay, so let's go to the browser on you can see that home has been displayed. Okay, let's go toe. Let's import all the other pages, like about So the I've just got the but on just changing the name from home. About on your have toe, right about charge. Start showing the about us. You continue to showing about but all the stuff right now it will be shown on one page. Then once we do the rounding, then equity show the particular title to that beach. Okay, so let me import on the pages on this. Been services copy changed on. This is blog's. This is contact. It's based this on. Same thing. We have to do it right. We need to write services here. Your meaning Tonight. Logs on Joe. We need the right time saved us photo browser, and you can see on the patterns are enjoying on the same page. So once we do that outing, then everything will be sorted out. So this is it. Uh, in the next lecture, we will work on the routing part, so I'll see you in the next election. 27. Browser-Router(Routing all pages): Welcome back on and overdue. And this video, we are going to work on the rotting part. But before working on it, let me clear all the stuff which is not required for that. We need toe make one for good on here. We need to give name as practice. You can give what they were name you want on this list entitle is not required. So what I do is I just drag it to the practice for her on saying goes with that on baggage toe the practice for it. So I've removed those two files on Yeah, in the Abd Arches by We need to remove this. Would this instances We need to rebel The important part as well. On I think there are a few more things we need to remove than that is complemented Mount you don't required. We don't require this. My third. We don't require this as well on. We don't require this, so let's keep it constructed. And so let's get back. I just don't think I think this control lowering that is also not required. So I think I have removed all the stuff which is not required on. We can start with the routing part. So before starting on one more thing, this function is also required. So let's start with the routing part on before starting their outing part. We need toe inboard. So let me first stop this terminal by pressing control. See if you ain't Windows pressed. Controls controls your refueling. Mac used Comanche. You you can use command. See on you can tell me the job by pressing Yes. Okay, so now you we need toe and we do end them. So you're now we have to do npm install the act out there. I don't, um, but his anger. So it installed the act out. Or don't. It will take some time, so we need to wait for a while. So is, uh the reactor out? Odom has been installed, so we need to again. But I'd end being start. But that sort of what has been a doctor so are several has been started. So let's get back through the fights. On on the top, we need to write been bored, browse as you know that still, instead of writing browser out, we will write as it out and put a coma and right round on right out from B AG. No, they don't. So to save this on come down. I received this, and you're after now, but we need to write No. Sorry. Year after we're done, we need to write out on after the state. We need to close, so we need to just fall mattered by pressing or shift f Okay, on, Let's go. In the name of our dodgy s on here, we need to import link. Strong the act. No, I don't on and stood off a We need to write link. So just copied us on. Just replace wherever there is a you can just replace it. So individuals to do code there is an option to select on the words with Justin Miller. Suppose I want to select all the is, so I just need toe press control. D So you just We just need to replace the aid with the link, So, yes, you need to do that onslaught on instead, off area we need to write to. So let me copy this to baste it. Whatever that is. Johnny F on your way to give a slash on your we need to give flash about flash services. The name of the competent blog's slash card back. So this part is over now, coming back toe and Georgie s. Yeah, we don't require this and stood out. This we need to write out on your we need to write XX on the body will be part which is a great do slash On your you need to give competent name, which is home. You need toe, we need your minuto closed. I don't competent with just going home. And the saying goes toe about services on contact. So letters one this on be right. Oh, about beach. But it just equal to about you're going burning, which is equal to about. So let me copy on this for services, clothes and contact. So we just need to change. So this is you need to be so this is you need to give blog's longs on you. We need to give contact. Let's just save this file and let's go to the browser on. Yes, we are getting some headed. You must specify the to property. Let's go to done by G s on your way for the right to I think this was the issue with back. So you're it. This we are on the home page and it is showing the home title on Let's go Toe about any lecturing about title that go to services showing services logs that fishing blood Pokemon bag showing contact once once again will go to the home page and additional in the home page. So yes, this is all about outing part. I hope you understood how the routing part has been done for all the website, all the applications. So this is the common format which every one does it for outing. So I hope you understand on. I'll see you in the next video and I'll see in the next with you. 28. Creating Home page Part 1: welcome back to one and ever dio in this video, we're going to create homepage html. So for us, we need first we will create this Carrousel and then we will create this feature section and then portfolio section and then a figure section So do able to get this goes away. We need to go toe right now. If you can see our home page, it is only having a home pitched. I don't So get this council. We need to go toe. Get bootstrap dot com Because I am using Bootstrap Kuroda, you have a need to goto documentation on your we need to go to competent. And if you get Teoh the corrosion section. So let's click on it. I mean, it took I'm going a little, and here you can see the corrosion, which I'm using. So for that, we need to just copy this HTML part on. We need to go to our fights on your efficiency. We need to go to our home Dodgers. And here is the title which has been showing here. If you can see that home here it is showing this hole. So we need to just remove this turned back on, we need to paste the board, which we have got. You might be seeing this, uh, at us because we need to add a slash after that Tomatoes. So you're really driver's lash. And then once we do it and my sexual is gone and to format the court, we need to press on shift F. So the goal is for my head on. I'm just saving this fight on. Let's go to the browser and you will see nothing. The majors, you will see you will not see any any means because you're in the source. There's no image part, so we need toe. Add that part for that. We need to add images, so we need to goto the folder. But the project has been saved in my case that there's been saved in my g. Dr protects the edges on your logistic contain full on. We need to go to source folder and you're going to create a new for lead with the name images on here in this folder, we need to based the bandit image. So I already have this image in the stop just copied on. I'll just based it here so So you don't worry about the images I have attached on the source file and images in the next lecture so you can just get it from there. That's it about the images. And let's go to our home. Georgie s at the top. We need to inboard. We need to give a name off that image. I give it that's like that one from Bennett to imported from images. Flash Andi his name off the image waas later. One. So you need to give slide that and the school one dark jpg. So, yes, we need to save that on. This is the name of the image between have greater So we need to remove this gold and we need to put that do curly braces on. We need to put the calibrates is on. We need to write slider So under one which is on the move image on Let's just do it for this. All three made this right. Normally keep on the hideous Plato's spending off later is wrong has 90 Slade Everybody just meaning to call these later when we need to place her here on even you're going to do the same thing. Okay, So this is all about meat and let's goto our browser. And if you can see the immediate still the image No spiritist So yes, we so yes, the images has come but right now you'll see all the immediate the same because I have put only one image on this is a little static content on one will implement this and contain full. Then we can fetch dynamic images from content full. So I'm just making the extreme less static. It's demon and in the next future lectures in the coming lectures we will having up and drink full checkup. And there we can, uh, user dynamic fetching off the majors and the content from content. So so the major partners, then Onda, we have shown Look a house. It's a year. I'm putting a coming oh, controlling slash and just got this good. I just got this lane on your big toe based it cut out a section ends here. So this was about Carozza. So now we want to add this feature section in our home bit, so let's go to our bait. And after this Karajan section engineer, we need toe start writing section on your We need to give Heidi with the name Peter so we can act some see, it's a slash seizes class, but that ignited and you're the section will be ended. So in between that, we need to add, uh, html So many during class Name on the glass name will be going dinner, and this container is bootstrapping Been class, so we just need to right there on. We need to close that in between the container we need to on the edge door. Thank you for a night out. Features on believe to close that edge today on. Then we need to give a beat that on in that day we need to Assam takes some damn, it takes. So what? I go for the tech salable through the browser with a new plan on just regular old gypsum on Lord, I'm upset. Mr Don't mean decks. So it is the first to you and significance e so let's just click on it on it regenerates some dummy text borders. You need to click on generate some. So just copy. Uh, one lane on that. Just based it between the p t I. So you see that? And once took on dinner. Do this part is over. Then we need to add one more death. And just like glass name. What is a great deal gonna be in that on? Just need to close out there. On between that, does we need to give a row? This is altering in big clients for bootstrap. Oh, and in between grow, we need toe, give class name, cause anything Food on your toe give and I do with the gross tag on inside that column before Call 24 is also any big class for food stamp. It is used for column. So your great the Bootstrap. Three days off columns. So we need three. But we need the 31 toe and three parts. So do well. The white, but is for four plus four is eight plus forest trail. So we need to calculate if we need to regulated in this way. So and in between this live, many dredged class name, we need to give a glass thing as feature. This is an apple, and this is the last thing which I have given. This is not in Bootstrap Bill. Plus, this is the name which I have given to act some CSS for that on in between that we need to add i glass name goes to f A failed left off on a daily world business me to close this I This is useful for awesome And I have used formed awesome for this item that I have not used images. So for that we need to write this line off court and on after that being too right Kids do today on some dummy takes like blew him This is the title Awesome! So here you can see this is the title Let me just copy this Freshen clean on Let me this straight here for this is our title and the sister dome it takes after the actual Let me call Pittis on for that We need to write at ST Just Beast Don't you taste so let's us go there and check how there's being how it has been looking So you're it is a feature on the the Fondo Semicon has not bean displayed. So for that we need to goto phoned Awesome way need toe goto funders and website and we need to click on start using free So a good uh, come on this page and on if you can t this, um, we just need to carpet issue early on. We need to goto our indexed or html page, and we need to baste it right here and let us see in a browser on if you can see the laptop remains has been displayed. So once again, we need to goto our home Georges. And this is the class which we have added this idea. We have added this feature that we have, I added, So we need to add some CSS class for that. For that, we need to make a CSS file in a beach holder for Let's create Act. Let's click on Beach just for later and let's create on new file and year. We need to write main doors yeses and then this man Dorsey aces many to write glass the CSS part. So you have given an ideal feature to let us copy this feature on Let's just based it here , and we need to add some plants for that. So we need to edit a background color for that back home. On the color it is have to have to have you it is a like a regular on. We need to add padding landing from Wharton from Bordeaux. Which is what did the X once docs is, has been written. We need to We'll do a home, Georges. And we need to import that CSS. So let us in court that CS is in port. He made it. Sorry. Inboard. This is in the same porter. So we need to give everyone north and slash on. We need to write me. Nazis is led to save this and let's go to the browser on. You can see that great Magadan has been displayed. So we need to goto our main door. CS is on. We need to give CSS class toe this feature rap. So we need to just copy that on your we need to give dark feature. And between this curly braces, we need to give, uh, padding from Wharton. It just 55 p x. Let's just say this fine on. Let's just go to the ground before writing all this glasses and all this years is what we have to do is like, we have to make a structure like this. Okay for that. What? One thing which have forward is then we need to just competence there from starting from your in ending from here. And we need to paste it five more times because CNN show you 2345 and six. So these other six blocks between required. So right now, if you can see 123456 and you're ready. 123456 Ok, designers, Six blocks which we required. And for that we need to write some CSS. You look exactly like this. So this is my gold toe. All right. This ES is which looks like this. Eso What? I didn't have a copy on the same sex. Um, blocks. So right now we are on home. George's let's go domain or North Sea asses and let me like some CS is for this edge to image three. So let's rated feature for that x two on between the Scully Press. We need to give us CSS off margin top, then be X and for in size off grain ebx andi for its streaming to give feature. Yeah, at three. Do your phone size 16 legs. Gonna is 78 77. It and fourth grade. Being 400 line height would be greeny full. Phoenix It just seemed this. That's called the brother, and you can see it is not looking the same. But it is like we have completed for people sent off. Our sees this part and we need to give us the SS for this. I can just looking like this on for that we need to write some more serious is. So let's go to our main North Sea Aces and your we need to write Lord feature. Thank you on a need to give the name of effect. I mean, which is I? Which it's which starts from that guy. So here we need to write for in size off 48 fixes on the height off bad image will be I've been really 110 pixels on Did will be under Clinton, so it's led to save it and let's go to the brother. And if you can see that it is doing some changing the showing that phoned sizes 48 Ideas 110 with under 10 on, then we need to give a margin off three pixels. I need to give up married on good banking on is white. Let's go there and let's see if you can t The background has bean coming up and we need a circle like this. We need a circle like this before that, we need to give border radius Rich's off 100%. Okay, okay. On the line. Hi. It will be so let's set the border radius. So it into you that it is a round shape has been coming up And then we need to give a line height off on an authentic cells. So you can see it is the image has been coming in the center and we need toe put. We need to write checks. My line sender So that this ICANN has been coming in the single. Okay, so now we need ah, border like this. So what? I have seen too, right? Border three D X solid ever Floyd. So there's one more thing which we need to entitle. Border What? Shadow on board shadow it is off instead 0005 p x and the calories afterward. Grave too. Let's go back and see. You can see that border has been showing that book shadow through a book Shadow on. We need to add a color like this, this yellow color orange color before that meeting tonight Color and it sent me. See? You know, so you can see that color has been displayed on it is on the top and the Texas balloon. And so for that we need to write float left literacy. Even it's a school. You can see that the text has been coming on the right side and there is no happen between for that. We need to write margin right? 25 bx Did you see this at and concede? There's Ah, now there's a space in between the item image and the text on all we need to give you know that we are done with it. Uh, anything else is remaining. No, nothing is remaining. Everything has been coming up in the proper way. But there's one more thing which we need to change status. That is all there, Tex, if you can see and there's one mooting the text that you can see there and the items and even like in their different and one more thing, which we need is that this lower MIPs and many features all this is there, but the alignment and the foreign ties and everything is different. So we need to match up with that. So for that, we need to write. We need to go to our home, George J s five, and your in the container there many to write checks. Center for water we could do is like it will make this feature takes coming in the center and we need a padding from top. So for that, we there the glass in bootstrap PD hyphen food pairing dog for And this tech Sanders. Also any good step class. So you can see that depending on the top on dressed Other thing I think on this text you need toe match up with this. Before that, we need to add a glass. Gosh me I need and it just seem it. Yes. So I think we have match everything or leaders I can't the name of night and they're different. S o what? We have to do this. So we need to change this. I can so for that and to go to home Lord Js file and you're everything is laptop laptop. So you're instead of like Bob, I will write comments. They just say this and let's goto the closer on here. You can see that the I can has been changed to come and taken on. And I think you have this reading already. So it is just our dummy part of the it's human need to goto formed on some. You should Yeah, we need This is the first link. So in this link you will find all the points on the iTunes. There are different Aikens. So just click on regular on here. You can see that a lot off Aiken's. Okay, so let me search for coming yet it does comments. So what we have to do is like after this FAA on awesome for dozen hyphen cummings here is a laptop. So in straight off laptop, if you want us, uh, use this leave. So what we need to do is like, we need to search for Leaf. You're a tous leaf. Let me just copy this on stuff laptop. Just pieced it. Leave on that. He can just change the fire. I believe you can if you can see this, believe he's been at it. So you can change all the Aikens if you want even Just check Dykan from your animal dive in which I have with me. So let's just do it. Leave on when this dogs. Ah, the other is download. So let's go to the browser. And here it is. You can see all the media has been changed on there is one more image which a car tractors aren't. Okay, so here does. So this is dummy text which will be changed according to the and thankful so that all this text and I will come dynamically so we don't have to worry a border right now, it is just a U. N structure which I want to create on one more thing which I want you guys to let you know that I just This is not an Stephen and she is a schools. So mostly I'll be doing a copy pasting. All right, just such on. Well, what I did for mine this website and I just I only have so much from Google, and I have implemented it. But this image is this images coming from a country in food. So my major for God's is like toe show you the contract foot back. But we need that Stephen Sexual for that. So that is the reason Land Just who will it and I just copied that structure. And I just based it. And I have you for sees this, okay? And you're also if you can see, I have not explained everything in detail because my foot president contract fuel and reactors on, not on HTML and CSS. I'm no, not even on bootstrap. Okay, so this are on a bootstrap in bill passes. Bootstrap is a framework for which we use what you are. And it is ah, is ah ah objecting to understand in this few lectures. So So in my future, reviews are in my not in future videos, but in my future courses. I definitely make a Postwar bootstrapped four on even. I'll make a separate goes for Stephen Ta says and journalist grip. So but right now my focus is on the edges and ungrateful So that what I am I'm really I wanted you guys toe concentrate on and not just in northern. It's TML in CS is because of I assume that you should know some basic. You should have a basic knowledge of esteem, unity and says So this is This is the two sections which we have completed. The girls in section in the feature section in the next election. Erica with a portfolio section. And if accusation so that guys I see in the next video. Thank you. 29. Creating Home page Part 2: another video In this video we are going toe complete. The two sections which are remaining one is a portfolio section and there is a fictive section. So your we need toe add the two sections which is a portfolio and affect you. So for that we need to go to a new dam on. We need to search for pure she is this for the reality with image lightbox And yet you can see the 3rd 1 the 31 back we need I'll put this a link in the description so you can get this down or directly from there. So this is the gallery which I have used in my website. So let us just down notice. So it is downloading who? Let me go to the polar and let us extract this. So let me right click on it and I will open it with the package. This is also an I d. You can open it in visual studio code as well. Okay, so you're at the top. You can t The CSS on you're is the xdm it bob. So before copping it, I will go to my home door Jeers and here we need to add one more section on. We need to give an idea off portfolio. No, Right on your again. We need toe give a live with a glass name, which is a good look on dinner. And it disclosed stiff back. And here we need to give a title off portfolio. So if we can go up a little, you can see this is the same thing which we have given for features. So letters this I copied the whole section. I just copy the whole section on. Let me paste it here on, start off each other. Be just right Portfolio Andre, stop hitting is ok. Let us to save this. And let's just momentous all shift f with this whole matter on your we need to give one more depth that the glass name Gardina just close to step back. And here we need to copy the HTML. So let us got a beard from your year. Just go, Peter court and just go to our home. Georgie's be studio. And just for matter if Okay, so and now we need to see Is this as well? So you copied from label and good majors. So let's just copy this and let's just go to Amino. JCs may notice this pain. Just Peaster on before saving. Let me come in a couple of things which are not required, so heading body is not required. We don't need a back on colorful body on your B in the great section. In the great class, we don't require position fixed. Let's coming just by pressing controls last and even we don't need the background color for that. So control and slash and even this media screen we don't required because we are not, uh, doing it for my language. So let's just come into let us satisfy and letters of the smile as well on home. Dodgy. Yes, let's go to the browser and see whether a man let's see, it's coming or not. So let me to fresh turkey. So as you can see, all the images have been displayed. Let me click on it on this. So you know legally is to turn the 30 meters not showing because the girl is not correct. So what we can do is like we can change it toe 21 on. You're all so we can just change it to instead of to 24. We can just print even and let's go back to a poser and let's check it. So, yeah, we are getting the in major. So this is all a static image. These are coming from this u R l These are coming from this U S largest copy this you are. Let me just show it on. So you do you on the process? So if I based it so all the images are coming through this you early on, there's always static. So what we'll do is like one to set up. Once we set up our painful Then all these images will be coming down a big from country for So so this portfolio section is over on now just really complete our ethical section as well. Unethical section. We need to add who we need to act. Section one more section for F A Q for religious. Do it a section time on your been in polite I d have a use on your again. The title we needed so we can just copied from here. I just need to copy this on inside the section we need to place to and instead of portfolio , we just need to write f A traffic use on Just need to format by placing all chip death. Andi, To get this accordion, we need to go to a new tab on minute type. Bootstrap happen. Snippet. Accordion on. This is the first length which we wondered, So just click gone back and this is the first block. Uh, just click on it. So this is the style which I have used in my website. So let's go do the estimate part, and this one taken images. It is there, dem or three. So let's go toe that Jamil and let's go to the cemetery thistles. The demo three. So just copy that will part the whole live on. Let's just go through the home, Torchia says. Home dodge a story on below. This, too, just based it on. You can find him enters because off the center we don't require the center. So let's remove this on. We even don't require this Call Mt. Six. So letters removed. I do as well. But before they're just for mentored by pressing all job f, and now if you click on it, it will show the very depending so just removed, active on removed the from here as well. Just go toe the browser on and let's just refresh it. If you can see the Korean is coming and it is the functionality is also working. But we are missing the CSS part. Let us go toe the tap and just click koncius system on. If you can come down little if you can come down a little, you can see that according them or to. But we won't according the mood. So just compete this according them or three. Uh, let us copy this copy on Let's just Goto our main 40 years says, And your we need to be is that CS is on wanting, which we don't require this that their legs one which is not required. Time just coming, taking our by pressing on Cold slash and let's just go through the browser on. You can see that we are able to say this, but the year there's a problem, it is overlapping the motor parts. So for that, we need to add one sees this class that is spacer. So let me do it. Just add a class with the name spacer on and give a minimum I'd off 100 BX and just copy this glass and go to our home Dorsey and says, And below the section maker Dave on product Last name just be stood here The glass between may just see event and let's go to the browser again. Uh, you can see that the because of that space And we can now it is not a laughing And yeah, if you can see once If I fresher, you can see that this is a minus sign coming, which is actually not correct. It should be a plus sign. So for that, we need to go to our home. George is on. Um, yeah, uh, in the eighties, we need to add a glass last name collapse And let's just say this pile and just go to a browser and your difficulty. Now it is working Fine. Issuing the plus sign. When I click on it, it will give me my same. So this is all about the portfolio. Sorry. The epicure section on. We have completed the portfolio section as well as the effort you section in this video and we just need to remove this accordion style demos. Three. For that we need to go on home, George years and remove this export. Take just save it and go back to oppose it. So now they're figure section has been computed. So you're begins here. We can see that alike audience working and on this static HTML code. But we will do a dynamic by using content for so the hope it's over. And in the next window, we will complete our about this speech. Okay, so thank you. 30. Creating About us page: Welcome back to on a video in this video we will complete our about a section right now a totally title showing. But before going to about us like me, show you one thing which we have to do it like here, every everywhere I have copied the classy at stemming from Google. So what happened? Just like you're even see the issue in class. But in react, we need class name. So instead of class, we need toe. Um, I last me. So I do it from my end. But in your course, you have to change it. So wherever there is a class, you need to change it to class. Name. So, David one, there's a shortcut key for that to select all the class at once and change it for that. We need to select one class on press on. Goldie, control the control D Jordi, make sure us electorally class and no class name. So you're I am gonna miss takeoff selecting the class name as well. So there's a shortcut key for in visual studio court by selecting on the glass at once by pressing conformity. So if you can see that if I changed it This? I mean, the glass mention took last name. It is a mistake so unjust to it. So rest of that thing, I do it. So you also make sure that you also do it from your end If you can see your notice Class name sort of cars. Oh, I just changing toe class Name on your just by mistake in this class in name so that I've changed here also, you can see press control. Really? So I think I have completed all the class to class name. Let me search it again if there's any class Meaning you just have to be so that I think I have completely the class. James took lives, took last name. So let's go toe about this page and here we need to add one on. We need to write a class name here. We need to give a containers class and you have any good closed and year instead of that one. We need to give it to die on your We need to write about us on in at two time. We need to give a class name, which is equal to fix saying those because we needed in single. So let to save this file. And let's just go to the project and let's see, So you're it is about Does is coming in the center and we need some more text. So let us right he die on that. Just close this Pitak Onda. We need some dummy text So let's go toe Lauren. If so, just click on that loadem Epsom you are. Let's click on gender and let just copy to span a ground plan. Let's go back to our about us. It's just save this on. Go back to our How's it? So you directors were getting their text business tactics. This is a static text on. Obviously it will come from painful, which is which will be a dynamic so tattered for about a speech on gun. In the next video, we will see we will complete our services page. So a tip for motors That's it for now. I will see in the next with you. No 31. Creating Service page: Welcome back to on a video in this video, we will complete our service page on. It should look something like this on like, No, we only having this service title. So for that. So for that we need to hold us over start years on here. We need to remove this. It's too at one time. And instead we need to write section on. We need to close that. Such a type on your we need to give an i d. With the name services and inside the section, we need to give their time with the classmate gun dinner. And it just goes a step back on your We need to give one more div on inside that do we will be having our nightly edge to on could be our services. Okay, that's close this day. And let me say this on. Let's go to our browser and you can see the services is coming here, but we want the services to come in the middle. So what we have to do is like we have a class name here on your people, like take single once we see if this when we go to the Georgia you can see the text has come in the same time. And this is a bootstrap bootstrap class. But if you want to have a look about this class what What it does you just goto food stamps , get good step dot com and your you're in the bootstrapped outcome. You just need to goto documentation and your unit toe. So for tex happen, Sentelle on. You can see this is for text alignment and then I different alignment classes like for if you want that takes should be shown in the left. So you need to read text left for center. You need to give tech center for I do need to give text. Right? So you just you can just have a have a look at this Documentation. So right now, coming back to a court on coming back toe goes dessert title which is coming in the middle and I dont be one text like this. So for that, we need to goto loadem. Gibson is dummy text. So we need to generate Artemis. Tex. Let's s click on it on. We need to generate this Lord and medicine. Does this copy? One lane. The first line cool on your We need to give a free time. He's dead, lane. Those that you die, Cruz, that beat back. And here we need to give a glass. I mean, so this is also a bootstrap class. If you want to have a look and this, you can just search it Lead on what it does it like if you can just, uh okay, need makeup paragraph stand out by adding lead darkly class. So our techs will look something like this after reading this class so you can just have a look in the documentation or both for so let me just refresh it. I have not seen the fight. So let me just say the final and let's go back to a closet and you can see this because of that CS is it is doing it is standing out OK on. So now this title in this of the heading and this title has been entered full right now What? I lose. I had this background he made. Okay, So So we need a backbone image without so what? I do know I have made a fortune off services and that I've added only me just like the background meat on all the service I can, which we need. So what I'm doing, I'm just copping this folder and on I'm basting it in my majors for the okay. In my project May just boarded up. So what we could do is like, I like that on the court on him majors in the in the next video, you can get on local and finds from the So now what we have to do is like, we have to go to our main dot CS and you're going to write that i d which we give services on your We need to add that background image. So bag on on background would be like black, and you may image you on it will be inside this. So let me like the but, uh, don't watch Lassie majors slash. So this is close. And what is the name of Vietnamese meaning to see that? Where does PG underscore Services door J p. G. So, um, I have I have given this i d s over. Says you can if you don't want to use idea, you can use class name, but when we used last name, so you have to give a doctor and not a has. If you are using idea, then you have to use has so I will use the idea. So I keep it has it depends upon what you want to use a last name already. So I have used idea. Okay, so let's go to the frozen and let's check So you can see that images coming in the background. It was just coming in the back on one mooting, which I have done is like I have born. I don't know about charges on there was a margin bottom four. So you might be having the same margin burden for what? Closing. Like it was telling a space here, so I just removed it from the jays. You also demoted from your toe removed from our tortillas. So once you remove that, it would not show the space I wanted those who were showing before a white space. Okay, so, no, this is over. So what? We have to lose. Like we have to make this white color instead of black, meaning the white. So toe me lords, he says, okay. And one more thing. We need to add a background size going. So what is background ties going? Just ka Penis on Goto you die. And so it's what I don't say. Let's go with Frederick over the whole section. I show you example for that People go back on his MD in. So you know, you can see in Major. If I click on background checks cover, it would cover the whole section. So that is the reason why I'm using back room terrace covered in a different background size. You can just take it if you want. I'm using the wrong ice cover so that it covers the whole section. Cover this whole section on like No, if you can see it just totally covering this part because the content is this much. Only if I add more contained support vilifying carpenters. He's dead for five times. And if I go here so you can see that image coming, it is showing more inmates so so you can see be getting major. So I'm just wondering that we got we've enlarged more more contended this so so like I only want to end this white color. Will you go back to our mean doxy aces on your What we can do is like we can even I d. We can use that i d and then inside that I d ignorant such edge to on act this glass. She is his property. All right, let's go back so you can see that it is showing a white color. So you might be thinking, Why have used hash this idea And then it's too because if I give if I remove this and if I give only edged win, it will even show this because now it is Now this property has been added to this edge to as globally. Now, if I go too about that speech, see your about us type is ongoing white color. But we don't want that. We wandered in black. Other photo away this we need to act this services i d. And that's over society result. It's too, and it will give this CSS toe that extra Lee and notice about it So you can see you know about that this plaque on So this is a wait so that studies and I am using decided and inside that I'd been searched. Seeing whose oneness. Right. So let me just copy this. No, on survives till we just need to. Rightly. And it wouldn't think that. So now we need a parting for the whole section like this. We need a padding. So what we can do is like, we can go to our main door service dot Js file for parenting class. His name on fighting will be seen happen. Four. If you're going, you can just go be this before on. You can go to the commendation and search for people. So, Joe, you can have a look at the documentation it is given the different sizes off. Padding on. Imagine. So you can just like from 0 to 5. Even it is like Otto also So you can just have a look you want. I'm not explaining much on who shot, because then it will take a lot off so you can just have a look under no commendations. So now the fighting has been added to our section. So let's go back here on. So this part is over the battle and some more title has been added for that. So now we want us blocks for that. We need to go to us over. Start despite on inside this container. Do we need to act? Sorry. You need to add one more there for the last name. And inside the rule, we need to add a deal with the glass name. Call MD full. These are bootstrap classes. Okay. Inside. Call him before we need to do on intact active. We will have our image. So it's in the bag. Closed us? You mean it? And your money. Write the name of the image. So first we have to import the image item. So? So this one. Home images last services slash Just go to the Foreland. And so this one okay. And this office one we need to give it. Yeah, so we have added Oh, it means for that. Let's go toe, brother. Let's check. So this I can have been coming up. That I can is not to see, but this is just an example Toe. You can see that There I can has bean coming up here. Now what we want. Where did this title? Digital marketing and this some dummy text. So we have to add one more on just close it. Stupid. Okay. So so distant. And this there we need to wrap it in one. I mean, which is called media. I likes being your this. Okay, so this has been handed this media on. Yeah, You have to add a last name, Do you know? And inside the media body you will have to wear the next three class digital marketing on your Pitak with her dummy text. So even this corporatist let me takes from here on. Just be a stickier. Throws the speed time, and you really need to be able class is all who step in classes. Who? Yeah, reading. So let's just search for this media, okay? So you can just have a look at this. This is the media and the media. Bony media reading. Okay, so you can just go through this example and you can have a look. So let me go back. I received it. Let me just profession so you can see that discipline video and at 11 drink. So, you know, coming back to the court, we need us spacing between this too. So for that, we need to Okay, look, last name writing tonight, can you getting knifed. So now it is giving us peace. And now we don't know at this weight I'm blogging. So for that to let the service that this is my own classes in order who's traveling? Let me call for this on goto indoors uses and you're going to like dot service wrap your We need to give background. That would be white. Okay, let me see if this you can see that white villain has been coming up on. We need a batting for 40 Phoenix. So it really give a padding off TPX for the digs. What is spokeo? You need to get a little less deviates is mine on then we have toe. You were born a tedious water does is like it gives the golf. Maybe, but it iss I mean, getting used is 26. We can see the goes off, please. Okay. Yeah. No, this is almost done. Let's go back to us and we start to see a smile And your You need to just copy the whole call him the full competence on Let's just based it. Uh 1234 on two more times, even six. So right now, if you can see there is no gapping between this two blocks So you have in your cloud margin Morton 30 p x. That just saved us and go back. So right now you can see that margin has been added. Oh, decision. So we have completed the speech on we need to change is I can off this. So the speed and the text. So this is a challenge for you can just do it on your own. I'll be doing it on. But you just trying to do it. What were part of it is like you have toe. I can show anyone services service to from service to because this image has been on. You have any toe copies? But we need competence, always through the name of the mid and year and stood up. So this one will tow service. We need to play service to. And if you go to the browser frequency, that image has been changed and serve digital marketing. We need email marketing. So she has email marketing. See if this pie on this digital marketing will change the email marketing. Okay. On your efficiency, the foreign sizes. Little less self. Then this. So yes, we will do it. We have to go. I mean Jordan CSS. And you're willing to give service for that? Yeah. And inside this over is that I have at three. Either you can give history or you just give me your heading. Not media heading for in size. But that will be doing TPX The letters go to the bother, and you can see that for inside has been decreased on. If you don't want to give media heading so you can just give each tree. Thank you. So it is also working. So whatever you want to give, I am giving media hiding. Oh, on your you need to change all the title on the images. So this is a challenge for you. You can do it on your own on. Just tried. I'm seeing the next week you 32. Creating Blog page: welcome back to another video, and this would you will complete our block, pay this team help. So we want a blocked page to look something like this. So right now, if you see a little issue in the title of the block So for that we need to goto abroad or Janus pile and you're just go this actual attack. And instead, we need to write section on, disclosed this section tack on every time. We don't need to give Heidi and then we need to write blow. It is just when I want to use this Islay. For some CS is mentally ill. I give this idea otherwise not required. Then there's no need to give this idea. So in the section, I don't require the i d block, so I have not attended. So your people on a Duke guy with the last name Dana and disclose of the bag on in time for dinner, We'll have a live on interactive. We want tohave. It's to tag with the title. Those and you're meaning to give glass name take center. So let's just go to our brother and you can see the bloggers coming in the center but we need a batting. So intersection we need a class fighting don't for So let me say this and let's go back to our brother. So now the batting has been going on on the speech on the section. So this was about the title. And one more thing we need went that a Pete Dye on. You need to give a last name me on. We need some room index. So let's goto loading someone State And this copy the first line on my face that year so we can have the second for that. I love like it. So that's, uh so we have completed just I mean Ritalin. That's apparently and now we want this two columns. But which having any major title description and more Burton, let's go to our torches and in the container There we won't find one more day it a class name, but all on just closes to that. And in that role, we need $2 call and the six This is the first column 50% kind of a second column of 50%. And in this and in this corner, we need inmate source. It is goingto really This is hard slash closers in each time. Andi, the source. We need to write that image. So for that, we need we need images. So So I have made a He made this holder like I made a block folder with a major is up along in it. So let me show you on the other images on the globe. Let me just copy this on. Baste it in the image holder in the project on. Then we can go back long Dodgers on your We need to import the image. Uh, so important. Log one from on your we need to give the bath in. Major slash block glass on. We need to give the name of the image. So long, Long one, The name of the image. One door gpt okay on you. You need to just stop in this and tasted here for the local people people Name based idea on. Let's goto our browser on. You can see that emit us come up on the page and I'm turning after this and be neither title. So let's go back on your be neither title. Who That will be three. Let's close to the street time and populous one lane on, please take you on. You're it is we go into slightly and we need a link for that to a child. I know we keep it as a literal. We will change Dooling. So right now let's keep it as a on that's closed is a night. So now if you see the galloping link has been changed and then we need a feet time screws to stay and we need a better for that. So let's just go on and hastily looked. OK, so your letters Let's go to the ground, check it you were getting the better. Let's go back on a button. The name of the Buccaneers agreed more and you have any toe act some booster classes. So last name is Dan Median family. So it really give some seen it. Really? Give some Axum collected. Okay, so right now it is hiding behind this foot. So for that, we need to work on our CSS spike. So let me give a name. You blow pointing on this block on, angry with this really belittled me and doctor says on well, right, some CSS give some planning when you place all right batting for time. I need my fix. Let's just go back. So now the burden is being there. But still it is hiding in Italy. So let me give some planning for that. Some more we need? No, but it's completely seen on Still, we need some more CSS. The side of the cycle is too long. Well, that we need to way need to do something for this. So this is a three day Let's right glove. I've been contact on it will look for the extreme time and really give the phone size as 23 X. Let's say this and that C for now, it is their news toe. Still, it is really quiet. Okay. Hi. Number So yes. No, it is okay about this image. We need some radius and we need a one of padding. Obviously needs. So we need to give a class name for this on you will give a class name. These are all my own classes. So image float so in its blood, in this competence in his blood, you need to give him his stroke and you find other ideas. Five p eggs on batting bottom. Really get fighting more than off grainy B. It's Let's see him. Let's go So you can see that fighting has been around for more than 50 Coming up for this image. One more thing, really grand. But before that, we'll just lubricated this. So even just copy this and interesting place with this died on. Let's see. So now if you can see that I go. But this is not looking good, not looking as we want it. So for that we need toe go back toe long, dark tears on your meaning toe One more class which is a food striving because inmates flute okay on this image on Yeah, and you can see the gap on look and feel has bean perfectly fine. And what does the media saying? You can change the nature I do it But the electricity whether they needs fluid so it makes that you need the beloved They need 100%. So if people would stand documentation and if you go toe that means blue so you can see maybe name image irresponsibly me you first it waas the name of the glass was image responsive. Now this So it makes of it without the image 100 person. So now this dream ages are saying so what we do is like goto the blowtorches coffee this on Based on the reconnect group, I think we'll check the name off. It is blocked, so no. So you need to give love to let us say this while and go back to a powder and you can see that they made a change. The image has been changed. So we have completed the plug. Pay that steaming. And in the next video, we'll complete the contractors, so I would see in the next year. 33. Creating Contact us page: Welcome back to on a video, and this week we will complete our contact us page. So we need something like this title and subtitle and that this form this form I have used Google forms for that. So let's complete this pace. Let's go to our contact charges and year instead of each one. We were very section. Okay, Andi, your toe clothes section tag And again the same uniter live with a glass name. It is equal to container on. We need to close the stupid time on your inside. Discuss in this step back, we will have one more day on you're meaning to give the edge to tag close to. That's true time on your we can get the message a stroke, your message below. That's that's true. Today we need a bean bag. On that day we will have some dummy title Subtitle for that. So yes, we can just paste it here and you have a need. A glass. I mean lead. So yesterday Spanish and yes, we need a glass name, which is a critical. Um, thanks. Single. And you have been either class. So the year we need a glass squiggle banning dark for Let me see reason. Let's go to the browser. And yet you can see Phil texting That is not coming tech center class. Me? Yeah, it should work. So now it is coming in the middle, and this is another possible form. I have just logging into my humility. And I went, Oh, my drive. And once you logging into your Jimmy lady, you will find my grab your just click on that and you will end up on this page on this. My bag. Just click on my drive and go on goto more section and here you can find mobile form. Just click on it on. This is a blind form, so we need to give a name on the form. So you have a light contact on your, um, we don't need any description. So your we need re leader name on its top multiple choice. We will keep picked. That has shot uncertain. He is granted, and the spirit is required on that. We need toe click on same. We need to click on this icon year on. We can get this free. Let's go back to a connect our Js file on your we need. We need to add one more death on. Just need to close and tight on your beaning case there. I mean, let's save this on. Go back to our roses and you can see the contact form as being sure. Let's go to the goal and let's fix this issue. So you're hiding 91 so it should be for 90. Let's say this and let's go back on the frozen. So now the form, we can see them from form and still we can decrease a little height for it. If I will be fine on its check it now. So now it is showing. But still it is hiding a little. So we will give a planning. And still this bomb is not coming in the center. For that. We need to add a class in just every. You ran a class just going back form, and they just copy this class name on. Let's go to Main Door TSS and your unit dot contact form and your we need to act some class . Some seizes property for that on doctors like text online saying on We need a planning from working. Does that grief I P X would be fine. Let's just see if this by then. Go back. So you know, even see, It is not hiding behind that quarterback on and even the farmers come in the center. So this is We have a decision. We have finished the attacker speech. So in the next we do we will work on the Pontifical setting. We will work on the fetching data from contract I don't see in the next with you. 34. Create space id in contentful: Welcome back to another video. This we do. We will create space and content for dot com. So let's goto our browser on. Let's go on content for dot com. So you have many to click on Logan. I have already created his account, so I logged in. If you are, If you're new content full, then just click on sign up and your You need to fill your details. Your first thing last time. Company name email lady. Okay, on, Just fill this woman signed up. I have already signed up, so I'll just go Logan and I logging into my account and I'll come back. So I'm loved in my account On As you can see, I really created one space for my earlier website which I creator. All this content is coming from from this space which I have created earlier. You can see that Contra immortal on a low country model I've created for that home. Contractors block about everything and yeah, you can see the space so we will create one more space for the new pours. Okay, so let's click on this. I can You want to click on this icon on this space has already been created on Let's create a new space I create a new space. In your case, you might not facing this kind off space So you need to click on this create space on you will see this pop up on your If you see Eurydice return back free one used We get to space ideas. I've used one for my liver upside on Now I use one more for the new course which I'm meeting. So let's click on this and we need to give a name so I give the name as upside. Okay, Um not forgetting the name. Click on, proceed to conform on And it really tell you to confirm a conformance create space So we have created a space on your you can see it has changed from from SK two website on If you click on this, we have to space like first it was sk and now it is the website I've created a new space on If I click on content model, it will be empty because right now there is no point in model and there is no content. Okay, so we will create the content model and content for this new clothes. The new website. Okay, I will see in the next video where we will make the bonding model on. We lacked some content for our business, So seeing the next with you 35. Set up the client: Welcome back to another video. In this video, we will set up the client for that. We need to go to a page for the pages, Fuller and your We need to make a new file with the name claimed I don t s. And once we are in the client RJ's, I will show you what to write inside the client, RJ. So let me go toe the browser on. Just click on the new tab on here. You need to go to contact for dot com. And here we need to go to the humanization 1 300 or communication. Just click on the platform on what platform you're using. We're using JavaScript. So let's create. Let's click on our strip on your we need to goto Orioles, and we need to click this to do it the year If we go down, we need toe installed for setting up the client. We need to install this contain full. So just copy the score. Let's go to our visual studio code and your we need toe. Stop this by pressing control. See your command. See if you're using Mac on your we need to dominate it and you know we need toe based what we have copied and being installed. But let's just installed content full so the content full has been installed and we need to goto the browser. And if we go little down here, it is written initialized plane. So just copy the school on. Go back to the client George years and before pasting it, we just need to write import, create, find from Continental. Okay on. You ever need to pace that cool on instead of our I'll, I'll write Constant on. We don't require this content for dot as we are making a separate conference. So we don't require that on your we need to export gland export export deformed claimed and you ever need to give us peace I d on your we need to give up excess stupid. Okay, so for that we need to go to our content for dashboard and I have already logged in You also Longden on select those pace which you have created okay, and in the settings just click on the setting tab on click on the eighties Want to click on it? It come to this page on you need to click this example given And if you come down you're here the space year. You can find the space I d Just copy that space. I d go back to your client, George is And you're you need to pace that pace. I d And once I can go back on, just copy this continually AP access token. So we need this token just basic. And we have set up the client for our application. And now we can use use this competent wherever we want. Suppose we want to turn about this pain so we need to import the time and we can use that. So in my next video, I'll be will create out about the speech. We will create a continent model and we will enter. They die in content. Full for about a speech and we'll fetch. The reader will see in the next video. 36. About us - Part 1: Welcome back down in the video. In this video, we're going to add content model for our about about US page on. But before doing that, we just need to import disclaimed competent in about Dodgers. So let's go on a board gorges and your we need to write import claimed chrome flamed. And once it is done, let's go to our content. Full die sport. I'm already long thing. So you have We need to go to content model and you need to click on add content type and you're going to write about you can give any name. I'm just giving because it is about us Page I'm giving about. Let's get this And once it is created, then we need to click on add field on your when he took the context on you ever need to give the name as text I'm giving us. I am giving the name is about description. You can give any name you want on. Just look on long text and just created once it is created. Let's save this fight so you can see that content type safe successfully. Okay, Once the content model has been created, you can just take the Jason preview. So you're it Is there this playful, visible description on the ideas we need this I d Okay, so we will see once we like the cold. Okay, so let me go on content. Let's add one content for a motor speed. Here, you can see that the content type is about and once we'll add more content type like for services Home log. So you're the list will be a long list off. Blawg home on and services. So right now, it is only one. So it is. We have a really one content for issuing, really one on. Let's add the content for about a speech. Okay, so you're I need some dummy text. So let me go to Lauren Gibson website and you're going into this. Copy this. Let's go back and based it on. Let let's publish. So it is showing that it is published successfully, and we have added the content in our content full for about this page successfully. And this is our content mortal. Okay, so now let's go toe about dodges Page. Yeah, We need to write constructor on inside the constructor willing to write super. And you're going to read this start state it which is a quinto an object which is having a property about page. You can give any name I'm giving about Paige on it is having a blanket. Okay, so now once this is done, we need to We need to fetch that a p a. So for fetching the a p a. In the lectures, I am told that we need to use component. It mounts. So we need toe. You need to write component there moment on your in the company ended Mount we need to write some called. So let me go toe documentation. So you're This is the same page The black phone page which we have seen for the installation. We have set up the flying for that. We have initialize decline Now coming little down. You can see that you're is the court which we need. Okay, lets go. Let me copy this cold on. Let me go toe about about dodgy space here. We need to pace that cool on this we don't require instead of being required contact type underscore type, which is about okay and let me could this lane here and instead of a normal function. We will use our function. So let's remove this function and your we need to give an adult okay. And instead of concerned outlaw, we need to write this start sex date, which is Quito. Sorry, not equal do in the bracket. We need to give curly braces. And you We need to write about beach colon entries Item on your we don't need lend. So we need because it is only having one feel so your we need to write zero. So the year the part is wrong, it should be darts. Last line. So? So now we have returned the gold in the competent did more. Let me just make it bigger. Your text Ecstatic. So we just need to re motors on instead of any too right This third state lord about bait. Okay, this is stuff about beach. You have any toe right? About Paige and Joe? We need to write dot fields not about prescription on. We need toe close the bracket and this content I One thing I want Oh, tell you guys, is that this content type you might be thinking very this content type coming from So go back to your dashboard on. Let's click on this. See your is a content site. We just need to copy this on. You need to paste it. So about is coming from here. So this about this coming from here? Okay. And before going to the browser and looking at the, um, content, which we want you to fetch, we need a loader. So before writing a loader, we need toe write a statement, internally operative. So for that, I'll But I did. Yeah. We need toe. Put this in your piece. Okay, so you're many tonight. Does start stayed not about Beach Dark lend, which is equipped to zero. Then we're done loading or else return this content. Let me save this and let's go on. Go to the product. So you're is a data be affecting from content full to let steam some data. Let's go on our passport and you're in the content. Let's click on the content which we rode on. Let's like something. This is about this speech. Let me publish it. So what about a space published success with less? Let's go toe a nap on Let's reloaded. Let me check this for the year the spending is It's taken. So let me go back on. Here it is. This is about Paige. Okay, so whatever you want to change, you can change it. This is about a space. Like when I This is about Paige. And let's just see if this on your vehicle this is about peach. So this is a way we can fetch the data from content. Full. I hope you brought this on how to add the daytime content full and how to fetch the data from content full. And in my next we do I'll in my next video we will and a content for service page. And we will get the data from contract. So see you in the next with you. 37. About us - Part 2: Welcome back to another video in this video, I'm going to discuss a few more things about about page because before going to service page, I want toe show you A few things you may be thinking very is is about description and feel is coming from So let me go toe the transport off content full and let's click on content model on and let's click on about So you're we can click on Jason Preview and here you can see the feel So this field, this field is coming from here on this about description is coming from you. So let me go to the feeling section on it. We will click on settings. See this about field ideas about description. So this about description is to say which we have returned there. So don't don't get confused. Whatever name you give you have tow based it There you Maybe you might have given about text. So you're dead. You have to write about next. OK, but I hope that confusion you are not having confusion in this. OK, it's on. This is one thing which I want to discuss on the second thing is loaded into your operating only loading. We need to give one image s. So what I did is I made two images and I kept her in my life. Stop! Let me cut this on. Let's go to the image for letting our product and let's paste it. So when is the white loaded and one is a black? Right now we want black loaded because our pages white on page is white in color So we might be the quiet Oh, black loaded. Okay, So, like letters import black in order from partners slash images clash on Let me check the name Black I found in order and it is a defiant So right if let me say this on your toe into love lording we need We just need to remove this loading and you have the right image Image source on in source. We need to write. Oh, black loader. Okay, on your we need to give an order bag. Well, black only get loader and just close the bag. Okay, so and here We need to give a class name which is going to do on you have any to write a line? Okay, let's segue now. The Lord is coming in the center. Okay, so this is it. We need to add a loader. Me? I have a little order and I'm sold this Palin about description on one more thing, which I need toe. Explain this time if you go to our content full last board And if I click on content And if I go on this content off about Paige What if I want to add a It's one tag the heading against me in a good way. Anderson heading on. This is heading when and let miss published This changes this Changes have been published. Let me go here and let me refreshers see this heading is not coming. We want a bull heading. So in my we are using amount Don't as a text editor in content full. So you're listed document for that. But you don't need to go If you want. You can just read it the way that is not required on just showing you that this in content . Full. My gun has been used. Other text editor. So what we have to do is we have toe install Marge's against. So for that we need to go to go to this year, and we need to install this. So let's copy this and let's go to our major. It's really cold. And let's stop this. But present Control CEO, Come on scene. Just don't need this. And XP Estes, we'll give once it is done, then we need to install Mark and save it. So after finishing this being toe in port Mark from Mark Okay, Andi, then we need to like some cold here that doesn't gag bars. Come on down about description. So this is the i D. For which we needed that of all description we're done on. We need do it down at Gmail. Golan. Mark being about prescription on a coma on you're winning tonight. Senate dies through on. Let me come in on this. And instead of this, we need to light do dangerously set in our HTML. It's his acquittal. Curly braces and this thought Get bus. My don't And your We need to write this start. Stayed about beach. Not feel not about description on your we need. Do close the deep bag on. Let's just save this, okay? I think everything is fine. And let's run this and being start So let's go year. It's closed us. It is still working. So right now you can see they're heading one has come on again if you want. Suppose we want heading three. So heading three Republicans have seen this go back and fish So heading three on if you want heading to So click on this heading toe. So this all actually in its to wait three tax OK, but it's refreshing. And here it is. Had telling toe me Let me right Click on it Inspect on the American sietch one, this is etched three and this is edge to Okay, so I hope this is clear. Why are we using my down on for using this text editor We need to install among down Js on . We need toe right The cold like this on dangerously said in an HTML they start get past mine down and instead that we need to write are cool which Waas written here. You need to write it here. So I hope this is good and and we have completed about a speech successfully and in the next video we will work on this on this page. So see in the next video 38. Service page - Part 1: Welcome back to another video in this video. We're going to add a date out for our service page and content full For that, we need to go to content. Feel nice board here. I'm already logged in on your We need to go on content Model Tab and your Benito click on Add Content type so we are adding their data poor service paid. So let's write services on Let's create it and we need to add three fields. One is the title on When is the description and when it does the service I can. So let's on this three field. First is a short legs off service title. Let's read this on the next. We will be with a long text service description. Let's create this on the 3rd 1 will be Medio, so service I happen. Let's create this and let's see this once it received, you need to go to your content tab and your we need to add content for that. So select a content type. It is services on Joe. We need to act entries. Okay, so there is a digital marketing email, marketing and few more. We need to act. So let's right digital marketing you have been Etem Don't take so we go on loading. Okay, Click on this generated. Let's go play in the first paragraph and for service I can. We need toe click on Create New A certain link on If you want to give her title You you can give like I'm giving service. I can one. If you want to give the description, you can just give their description. I'm not giving it on. We need toe open the file to select. So what I did is like in the image folder. I have really good for you, Aikins. On this, I will be using it. Who here? We can click on this open fire selector and we can add damage. Or we can just drag and drop the file couple. Let's click on open file selector and let's click on this place I can so your we need to goto on my project. So you go in my project uring projects. I go doing me just servicers on. This is the part which I need. It's uploading now it is upload er I mean it is in process. Minorities applauded. So now we need toe click on Publish is now It is published successfully and disclosed That way we can go back now. We need to publish this content, so just be come back on. Just taking the content. Yeah, We got this digital marketing on it is published three minutes Election. I'll show you how to fester Data from content Full and poor service page in the eighties. So I see in the next video. 39. Service page - Part 2: Welcome back to another video in this video. We're going to fetch this data from content. Full in the act is for our service speed. So you're if you can see this data. Is this blotter static blocks? So first meaning Togo to us of is gorgeous. And we need to remove this five blocks and we'll just keep this one and they look it okay, through map matter. So let's go here on. Let's remove this column. Then let's remove this one on removed us. Still, there is one more will be removed. So let's see if this fight on go back on the browser, you can see there's only one block on. Let's now right the court for that below pit. So first we need to right? Instructor on you have any right? Super. And this starts state, which is a quick toe on object which is having a property. So this page seven in an empty 80 on after this willing to write competent Big Mount and incompetent did mount. We need to goto our documentation and your we need to just copy this entry plan. Don't get entries as I've soon in about the space we need to copy, and we need to paste it here on. We just need to remove this stuff on here. We need to write going 10 type services. Let me check the content type for this. So let's click on services. So Joel is a continent are type diet E. So it is services. So let's copy editors on go back of his page. Um, then you're going to get this up on. We need to remove this function on instead. We need toe given adult function and you we need to interrupt control not long. When did this start Sex State on? You ever need to give entry stored items because you need all items. So let's remove. This has been and one more thing we need toe inborn declined. OK, so we just heard that. So let's import blank from it's So you mean to think the part this pages slash Okay, so Okay, so now we have added the plant entries and your one more thing we need to add is service page for countries. So this is it for client countries. We have a little client and recall on then Joe, we need the service which should come from content full. But before that, we need toe Mathis. Call him this column. We need to map it. So we need to Lubick. Okay, So for that we need to write. Describe this on it based on you, and you need to write this Start stayed nor service peach, not map. So dark matter. Uh, you're This should come. Yeah, you're inside this. We need I on adult function, which will We're done. The whole live on in the source for image. We need to raise image from corn. Painful for that. We need to remove to solve this one on. We need to write item not feel. I thought so. This I can name between given that not I feel not fine. Start you on it. Let me take this of his Aiken name with described the Lord. So go to settings and it is only service. I can So So this taken ok. And your This is the title. So for that we need to fight this Sorry item not feel dot So this close this on for the further description we need to write item not feeling so this description It took close this and so this is done. But before that, we need toe add a loader for that. So you need to write some cold year as well. So you may need to write this thought. State not service pete dot Lent. This is a quinto zero thing. Show this bill Just a line saying good and you're in the image. So was you need to give no less. We need to close a little time for else. We need to show this. No. So we need to copy this entire row. We need to pay. Sit here on the loaded is missing. So let me go on about the speech. Let's complete this law order. But here, we need a white loaded, so I just need to go to. So let's remove this. We know required this andan sued off Black Loader way. We need to give no, no on your We need to change the part in majors slash Let me check the name. It's not only it's literally toe, Lord er thought so. We have We're done with this. So let's go on the process on Let's check to find Yeah, I just coming. But the text is too long, so we just need to cut some text. So let's go toe on Dent explica on this. Ah, let's see mold this planet out. Don't drive myself description. So let's published again. Sorry, fish it. So now you can see the guys coming from content full on. Let's add some more content the next look. So let's do it. Uh, let's evidently it. So first entry was digital marketing, So now we can write email marketing. So let's give it a title s email marketing. So let's click on, Create New I said on your many took click on open file. Let's elect us 2nd 1 Uh huh. So it is loading Bay meets. Okay, so let's click on Publish. It is published. Let's go back on. Let's publish them content. So yes, it is done. Now that's go back on the thank Me Appreciate is showing. Published. Who? Lets refresh it. So now you can have a Lord to add their descriptions, so let's go back and let's click on it. So before the eyes, I'm sodium forward to the description for that. So yet here it is. Let's publish it, Let's go back, and it's a pleasure So you notice. But still, there's too much of XTO. Let's remove this. Let's publish it again. That's a fish. Okay, Now it is okay. And one more thing we need to do is like whatever we add, it is showing in the first blow. First position, but what is? We want this digital marketing should come first and rest. Everything should come afterwards. So for that, we need to goto documentation in here. You can see the order. So let's copy this order and let's go on. So this is and you're we need to have a calmer on. You ever need to give order and you need to give up my in the same so that if you can't agree, Lord, you can see So I have done a mistake. Uh, we don't require this minus sign. So now it's really fresh. Their digital marketing is coming first and less of the things will come after it. So suppose if I had one more point ain't like, let me ask this one more. So let's duplicate this, okay? And we'll change the content for that. So night on right now it is a draft. It means that this has been replicated. So you're we can change from email marketing to SMS marketing on this Kitson. Let's keep it and it is. And yet we can end it that you made. So let's really this image on on a 30 minute. Okay, let's publish this change. You're you need like essence marketing probably changes starting. So now let's publish this content. Let's go back in and let's take So now okay, I can is not showing your likeness. Come the boat sank on the scene Check Go back, You're onto it during the scene for that contractors this monetary mutuals published to changes This is cool even in marketing on one more thing we need to read it still mean market So it's publish changes. Okay, it has been seen. Let's fresh Still, it is showing. I think it is because we have duplicated through the images not able to change. Let's go back here on that's specter to delete on. Do it again. You're going to do with s Ennis marketing. Click on on This is SMS marketing to publish it school back. It changes. Okay, not really fresh. I hope this Yeah. Now it is showing the connect images. Okay, So now if if you can see, digital marketing is the 1st 1 with three added than even Margaret them sms marketing. And if you want the latest to be shown first suppose the last one we decided was SMS marketing. If you want this to come first and then email marketing and then digital marketing. So then you have to put up minus here on No, If you get this now, it is inefficient. You can see that SMS marketing is closed and email marketing and then digital marketing. So whatever anti we put the last Italy show on first. So in this way you can make you ascending and descending order. You can add the remaining three blocks. OK, so I hope this page is done And, uh, you understood how to get down from content full force on this page. So in the next lecture, we really completely blocked page I don't see in the next with you 40. Blog page - Part 1: welcome back to another. We do. In this video, we will add contained model for block page. But before that, I want to show you something. Until this page v forward. One thing you're let me go to our brother on. Let's very click and inspect and you're if you can see in the console. We are getting this world in each aisle in an area, or regulators should have a unique keep lock. So we forgot toe key crop year. So yet after that, I don't We need to write index on years you need to write. He require toe calibrate braces, curly braces and your index. So if I save this and if I go again and so the warning has gone on, one more thing which I wanted to show you is. And you might be thinking why I brought, uh, I dumped feeds so that I can feel you filed out where ill later this coming from. So what I'm going to do is like, uh, I'm going to copy this part on your So you're before the return. I blew up until love on, Let me save this on. Let's remove this contests. Let me like. Let me save this. So this dot state dot I don't feel so Let's see, Let's refresh it. And you're if you can see in the control there are three Cherries which is suing you. So this title Okay, which is those SMS marketing on their description and your data service? I can. So if I click on service, I can You can see there's a field and inside the field there's a file, and you are so I don't feel dot We need to write this service. I can write we need because we have given the name as service I can. So a second and then in the service. Aiken, we having a fee? Correct. And inside the field, we have a file and inside of file, we have a You are. So if I give this part and if I go back here, you can see the images. The part of the images is coming here. So that is the reason why we have to give this item not feel you dot service. I can. This is the name of the So he's taken OK on. Yeah, this is the name of the 80 which were everyone for service I can on your the parties we thought filed out the world. So I hope you are clear about this. So now let's go back to our content Full dashboard and your We need to add content for blog's so we'll write it as gloves and click on Create. We need to add four fields so the 1st 1 would be Let me go year and let's click here. So this is a block come nail and then it is a title and description. So media love thumbnail on its some male created on Adam. One more field, uh, which is us? Look, I'll delivered its luck. So let's united slug on your click on creating configure just going appearance and your you need to select as a slug. Save this by on your we need a title. So the title created on a plot description again. Long text on blawg description. Let's see this. So let's let go on content and add some content for that. So, yeah, we need to select blawg on your winning toe. Added entry for blog's So you're there's a block time name, so let's click on it, so you need to click on open fight selector, Just click Congress and here is a plug. Have said the images in the block or less so that's going click on it. That's publisher go pack and you know we need to give the title. So my first love, as you can see that slug is already is automatically Gin noted. So what is this lug? Actually, two sluggers likes a 45 year, and if I click here, so what happens? It's like it's redirect to the same piece. But I want electability directed toward new piece where I can see the whole article. So that is the reason why we have to make this look on for once weekly going this title. Are this read more? It will take you up. It will take us to this page, which is having a new adult off my first block. Okay, so your, uh, I need to give a description. Let populace on, let's paste it and then to see this. So this is successfully. Could you get it out? First article and let's just create the second article read on Click Create Music, Open Fight and a great conductor, a fish school back on your we can give back less. My second love on your We need to give a description. So let's just copy this. They stood here on Let us publish it. So now if you go to contain and this two articles has Bean published. So in the next lecture we will see how to fester data from contract full for a block pitch so we'll see in the next election. 41. Blog page - Part 2: Welcome back to another video. In this video, we will fester data from content full for a block pay. So we have successfully created this too Content to articles on Let's go on blogged R J s on your direct to static files. Let me go, You There are two static blog's do articles who let me remove one. We don't require this on. We'll work on this on before that. Your we need to write constructor. Okay, on in the instructor, we need super and you have to write this Don't state which is required to Long Beach, which is a quinto object which is having a property and that is having a blank area on After that we need to write component Mt on in the conference did mount. We have to write the client entry toe. Let's go to our documentation and let computers Let's photo of long lunches on your minute to delete this And instead of being the right content by school longs Onda In my previous lectures for about and post offices, I have return something like this. It is not necessary to write like this. We can write this also we can write in this way also. So So this is one thing which I wanted to tell you on. Now we can take this line up on you need toe, remove this function on your toe given adult function. So your list of controlled are clogging it'll right? That starts that stayed on your meaning. Like give a curly places. And inside the Columbus is we need to light log page on. Just remove this door, Nerd. We don't require this. Let me save this file. And Euro took line does not define so we just need to import plant from it is smash. Thanks. So as this is done, we don't require this block. Kamajors, let's go down. And uh yeah, your We need to look this. Yeah, we need to look this column through a matte matters. So for that, we need to write this not stayed, not blocked. Page not map inside this and this. You need to cut this and any to I could tell and you need to give item right on the right, and we need to give in and next. This should be the mood and it should come here after index. We need to given at a function on intertidal function. We need to return this one just fomented by placing all chip that's and you're in the still we need the key problem. It is equipped with curly places. Index, let's leave this fine. And you're in the metals we even invade will remove this globe one and we'll write item not feel not blocked from name, not feel not fine. I thought you wanted Missy emphasis on and you're in Stood off a We need to give Winnetou writers link. So you're also we need to right wing on at the top. We need to import the link import link from react route. OK, so yeah, we need toe Jean stow a time on. We need to give a link on instead of h r e e Free to write to and your We need to link the slug. Okay, We need to link this look. So what we have to do is like we have to and I love writing in double goals. We need to write it with a back tiki. So, uh huh. Like the back tiki. Give her back to Key and your benito daughter slash blog's slash on the dollar. It should be no bracket. Columbus is so dollar on. After a dollar, we need to give again. Carly places soberly braces on inside. That calibrates is we need to write item thought feel are slim. So this is a matter which we need to write for redirecting Tow us. Look on. We need to remove this title on instead. We need to write item, not fears. Not a lot lighter. Okay, on your also, we need to remove this description on instead of we need to night ready to give. We need to give locally braces and your we need to write item not feel not block description. I received this on your also in really more. We need to just copy this link basted here because we need the same link for you to more section so pastry. Okay, I returned the court for not fit on. Let's go in shake. Okay. And when voting minuto give a loader for that on for that, we need to give locally places. And inside this we need to write this start state not blocked. Beat, not length. It's equal to zero. Pushing much. So done. We just need to copy this. I do. The case is formatted. So we could have done this. Oh, Black law Order on. Otherwise they will alert on this little so looking competence and title on which pasted here. So that it your we need toe hit the black loaded. So let me just go business. Go back. Let's paste it. It's cool back here. And one more thing we need to do is like, we need to create one more page for our entire tactical. So what I'm going to do is like, I'm goingto pay this. I click and make a new file single article. Every single article launches why? And inside that we need to write the court for the single article so that I do in my next lecture. So seeing the next video 42. Blog page - Part 3: Welcome back to another video and this would you? We will create the single tactical page. We have already created a single article page. You're single article page, and we have to write the code for that. But before that, we were getting this error in the plot pitch, so I have just rectified it. So you're is the block Dodge a speech and your dispelling is wrong. It should be lent and the n g th okay on here. We don't require length, so let's just save it and let's go back to the powder. Let's a fresh it so you can see this, too. Blog's are coming from contain full and year. If you can see the Lakers bloggers here on the the first block which retired is here. So if I click on the second blawg does this, you actually been generated. So my second love, But what year? It is empty. So we need toe, right? Of course. So that single article the so the whole article should display. And so let me go back here and I actually one more thing If I control this until dark, log on. If I write called Putin's and I fight based on. And if I go back here and if I expected, let me console on here. You can see the where is right and if I click on this, you can see my second block, which is this clock on the block back to lose my second longer in their description on here it is the first law who the slug is. My first log on block tackle is my first block and their description. So this is Disa saving an Addy. So that's the reason why we have to keep There's an empty area. Then when the say status state, then we can get the entries through the AP in. So this is how it works. And now we will start writing the court for a single article. So let's start. So before writing the cool, we just need to goto after a genius and year we need to import are we need to import a single article. So you have you need to hurt single article from just a single act, OK? And yeah, we need to cooperate this on tasted good and your we need to rate slum and now let's go on to Galactica Dodgers. And you need to write import react from from the act on here. We need link grown. If he act out there. Don't, uh, then we need to import plan home going. You're any tonight, peter slash Good. So and then we also need full. We need to import Mark as we have done this in about this page. So you're required this smart. I was just going to tell you that guys in about the speed they go to a lot of space in a motor speeds. I have used this get past month down on Gillislee said it's team, but in So this is Page. I have not used that. But we can use that. It is not attack. We can we can. I have not used it. If you want, you can use it. I also show new Why do we need that? My don't so yes. So in this case, I relighting I use this mark. Okay, so let me close the service page and then we require loaded put black Lueder from you mean just slash black loaded on your Benito. My class single article extends competent. You need to read constructor. Yeah, super on. Ah, and you are We need to write this start state nor article because we will be writing the article, uh, for a little start state, which is a good do and I think on which is having an empty Eddie and again to fetch that the a p i Any tonight, competent big mountain on inside the competent. That moment we need to write the end, please. OK, but before that, let me complete html page. Okay, so you're evil, right? Rendered on and inside that we will be right there. Done on it will return do way We can get class Name Argentina's and inside it Sorry. And in time the dinner we will have Ah, rope Inside the rule you will have one column my entire column We will have its true plank and year We will have the title okay? And your your description close this time And we need one more thing. We need a button to go back toe your we will you will be dying and we will be right back. So this is esteem and this is the human of half Completed that steaming So let's complete the according parties well, so incompetent did mount. We need the entry. So go back to your documentation. That's computers. Andi, go back on your We need to pay. Stand on. Let's settle this. We don't require Institute of this year. We need content type logs. And after this, we will require field my friends love. So the darts love. Thank you, Colon. Slug. Okay, this is very important. We need this. Go get this leg. Okay. Uh, this will be in one line on you. We need to remove the function as usual on your and into writing. Ara, function on your instead of control dot long. We need to write set state and trees dot item on your we need to write. And, you know, we need to write zero because there will be only one Harry. So that will be the 1st 1 So that's what we want. Okay. And before I move, heard uh, what we will do is like this. Look, how do we get this leg? So your we need to defining and a We need to declare an edit const plug, which is equal to this dot Probes not match north pants. Knox look okay on you ever need to give a condition that if slug it's true of this language through, then you run this gold so you don't dysfunction. Okay, so you'll be a getting some said. State is not defined. You have any tonight? One more thing. Articles on here it is article. Really, Sewing said. State does not define who. Let's go ahead and we'll see what the other is right now Let's complete the page. So your we need to write get paused. My don't way need to write blow description because it is a description which need to be returning John. So which needs to be returning among down a little. So your money to return underscoring the school. HTM men well, and mark your toe block description. Then you're you need to write sanitize according to once this is finished, we need to give a loader. So that's like 30 years. This thought state. No actor could not lend, uh, equipped to zero way needed. Give eso Let's goto about and let's go. Openness live. Let's go back here based on yeah, on If it is no through fan page This so this don't state your article. Docklands wants to see Because giving some I think we need a view on We need a You got the edit has gone on your stuff fighting this battle. It's no writing block title. We need this start Stayed, not article, not feel dot Blot title. It's close this on your we need right thing. Gillislee sick, you know HD many Quito. This start. Okay, fast down on your way tonight. This aren't stood. Don't go look feeding dot Long description. Yeah, way don't require this. So on here. This is also very important. So we need to link this. So let me write link. Go on your will be a hashtag and we need to write a function on click function which is going toe. And you have a need to close the link time. And inside this function we need to write the name of the function which is just are we need to create this function. But before that I'm just writing the name link to interrogate. Okay, so here we need to cooperate dysfunction on years after this, we need to write dysfunction him. So, griffin, at a function paddle which will return this start props, not history. not push. No, no. Let me see if this still would be a getting some head. Let's go on the ground and let's take it. The same state is not defined. Let me check it once along with Di, we're getting this center because I forgot to write this start said state on a still there is one more thing was in this is blocked and known log And if you go to abduct es your we need this article instead Off blocks on and single article we need to write export deformed single market Let me save this on. Let's go back Go. Once we export here in ab Georges, we need toe put us last year Let's save it and let's check working or not And yes, it is giving an editor. So let's check What is the weather? So you're dispelling off sanitizers Incorrect on below, you dispelling on description and incoming. So if pickle were on Letty, you're getting this. So when I click on my second law, so it'll show the second look on the back link is also working, and it was my first block. So you're done with this block page on that is some serious is glitches. So let me fix that. So, yeah, if if if you want given in lane styling. So what we have to do is like so your we need to write style, which is equal toe double. Create places on inside that we need to write text, align, so in react. This is the way to rate in 19 says, do you have any too right? Excellent. Right. Okay, I gotta soon it's pointed on falling. Wait, which will be forward. One quit. Should be boring on. Then. We need some margin. No, that's fine. Be done with that. Let's see it. Isn't it? Back here? You can see the banquet in the Great State and you're in two time. We need some top margin toe a class name margin come for So here we got the margin food on and I think we need to go back. And yet more button we inspect. So you have a bag. I want to click on the word you click it Still the calories, The color which we wanted the white. But here it is blue. So what will I do is like a corporatist part in primary I go on, I'll goto after Errico toe we Norcia says, And you're at the bottom. All right? What I do is I just based this. No. Well, this yeah, for what we need should be white. So let's sick and still be unknown. Painting it. Let's try click on it. Gone over. General, we need to put dot because it is a class now because so we go back swing wide color. But we need, uh so just remove this. So the aid bag, Let's cooperate this on that basis on this A should be white in color With this through that this is not required, but it might require Let's see, it's not required. Once weekly, Conry more it will take You are and once weekly going back, back toe in page So this is all about blocked page on In my next lecture, I'll work on the home peach. So see you in the next video 43. Home page - Part 1: Welcome back to one and a video. In this video, we will work on our home page. So before I start the homepage what I did is like I'll be dividing this home page in for content model. Okay, if you take your so if you can see this there is one country model for every page like for about his one for bloggers one for services days one So you can make only one model content model for home page. But I divide this in four section the first country What will the first content model will be? Home banner on. Then it will be home feature, then home portfolio and then home attic you So in this video will complete the home banner part. So let's go to our continent full die sport and your we need to add a content type It is it will be home banners. I would like to see if this and there will be only one feeling that is media because we need only one image. I mean, we need three images, but Billy one for so home banner image on. Let's create this. Let's save this. Let's go to our content and you're winning toe add Fighting rages, so let's go to home banner. Let's at the entry for manner that's click on Create New Estate and link. Let's click on open find selector. Click on the act written and years in the images I've saved three images toe selected Slider one. Let's Published Us. Let's go back. That's published process. May I think we'll go content So the first image has been published. Let's add two more images. Click on Open France Elected Slater image to We can't publish back, click on publish. Go back to our country. You're going to add 1/3 1 Skip Congress. You can give it. You can give the title if you want. I'm not giving it on. This is slated in history. Oh, okay, let's click on publish. Let's go back. Let's publish this. Let's go back. So all the three images are being uploaded on content For now, we need to go to our Home gorges on your we need to write. Start writing are called First important thing. We need to import line from PGE's claim. Okay, this is the first important thing. Then we also need a loader. So what I lose like goto about on I copy this in order and I go to the whole vision. I just paste it here. Okay. On your we need to write instructor and inside the constructor. We need to write super on your we need to write. This starts I stayed equals do on your we need to write form Banner equals Glenn and MDs Let me say this after the constructor, you have a need to write component that I won't on inside the I intend to company did mount . We need to write the client entry. So let's go back to our commendation. Let's go, Pittis basted. Let's remove this on your right to start to say so. You two my content type with tears. Boom. Just be needed. This I take it up on here, I need to the motor function. You need to write at a function and instead of concerned outlaw when we need this thought. Sexted, we don't need this. Let Okay, So let me say this. And your thighs. Other three static in May this way, which we have done before. So let me remove this too. We don't required all three. Really. I need this one Toe o Matic. You're We need to write whom manner? Korea. On here. We need to grow to like it, and then you're inside the We need to look this so this third state dot home banner Dark matter on your we need to write item. Come on, Index. And your we need an adult function on inside out of function. We need written on inside it written We need this stuff. So let me of torment gored by pressing or shift half Let's receive this on your we need to write He equals two index. Let's see if this unless second the process this starts Did spending mistake Still really getting some header? So whom banner? I think it should be like this. So yes. Uh, we are getting the banner, but that is an issue. This girl is not working because because off this active class we need tactic Lasto only for the first image. One stay made the first image which is active then once the school that we should come on the second and it should be removed from the first image. For that, we need to writer function, so yeah, we need to write a function. So you have We need to remove this class story. You need to cut this control legs on your We need to light the function Start sect class. I need to make this function said class. Okay, so what I'm going to do is like sick glass, which is equalled, went at a function. I give this as index on here. We need to given an a function on inside tired of function. We will write a condition if index is it. Quickly, quickly, quickly. Zero. Then underdone this glass or else they're done. Lettuce. Karada happen, right? So now let's go back and let's check. It's working or not. So we forward the super important thing, which is? I wields. Start. Oh, manner. Midge, I don't feel not file. Thought you wanted that saved this on. Let's go to the broader on. Let's check if it's working or not. No, we are getting some better. So let's check. What is that? I think we want to fight. Do you have a need? An index Onda. We need a loader as well. So you're really too right. ID this thought stayed no home banner dot Lent equal to zero question mark on. I need that death off Boluda. So Skopje this. Go to the home base, Paste it here else. We need the whole Let's got this on, please. Chip you. So I think this is 10 on. Let's go to the grounder in this sacred Let's check quarter of the issue. So you're there spelling mistake. We need to write a banner. Let's go back on your images. Yes, we wanted. So let's click on this on. We got the Carrousel on and all The state is coming from containable. So our whole section of Saudi are banned. Detection has been done. See, on this majors, which we have uploaded on content full but right now, official in year in the front line. So in the next lecture, I complete the feature home features. So I'll see you in the next with you. 44. Home page - Part 2: Welcome back on the lecture in this lecture will finish the feature section off Home page. We have finished Banner Home Banner. Now let's finish the feature. So let's goto content. More content will Die sport and your Let's click on content model on. We need to create a new content model for home features, so let's do it. Let's add content. Type on your we will write home features. Let's create this and let's add the fee So your we need three feels one is the title and when this is not an emeritus is on. But I can't. So this is also will be a next week, and this will be a description. So first, oh, feature table created on when What will feature Heiken on the Third is a long description. The charges come from Team this. Let's see this. Let's go to content on your meaning to act content for home pizza. Let's and some content. So in the future title, let's take this fresh and clean on feature I can feature I could let's go to our home Dodgers and here we need to the scope of this FAA fail. It's based it on description again, it's Ah, tell me taste. It's going based it on. Let's publish this. Go back and add one morning. Let's add one more that you know on for Latina. We need a fair, these older me. You can put whatever you want. Whatever happens you need on, Let's go beat this. That's based it that's published this, so I have to content. Okay, so let's go to the court on So this hour static. So let's remove Wallace on this one. Let's say this and your there's only one toe we will map. We look every call him. So first, let's a state home feature. Okay, on being it one more client and trickled back. So what we can do is like begin this core Pittis on your meaning to paste on your you need to write home. Okay, home features. So this home efforts capital feature and you're it is home feature. Just a moment that we're going to buy. Let's see this. Okay. And let's go little down and your, uh and this you need to map. So let's right the court. This thought state not home feature. I thought Matt on your right item on a mix, we'll give you which returns This column. Let Homer by pressing control shift s that's building up on your We need the loader. So that's right this dark. Let's hope it from about us. This start stayed. Let me complete the stuff on Let's go on home page be stood here. Suit off about Right Home pizza. Infrequent zero. It's Let's copy this. Continue. Let's cut this on a case took yet formatted. Let's save this on. You have any change? Everything. So don't forget to do this stuff. Your we need to. They moved the stuff on and stood out. There's going to put up Alibris on your we need to write item, not feel. Unity is really start Feature bacon and let's remove this as well. And you really this I didn't are feeling not feature title X. Close this on its copy. This is this feature description. So remember this feature description t of this and let's go to the browser. We'll check on that issue. Sure. I mean, he it's a little next. Where does that take? So years? There was a spelling mistakes. We hear his own features so you can see that this to increase, which we have done. It is showing up so you can add all the remaining in place. So this part is also And in my next election, I complete a portfolio, so I'll see you in the next video. 45. Home page - Part 3: we'll come back down in the video, and this would be really complete support full of section off home page. So let's go to work on Painful Dashboard and your Benito. Click on content model on Let's create a content type on your be bill. Very calorie majors. Oh, no, really to write home gallery. So let's create this Ananda fee on. We need only one free, that is Galati image. That's creators and let's see this on. Let's go to content on Let's Go, Go Home gallery, Let's add. We made this free concrete. New asset and link. Let's click on this click on the plus ankle on Here in the majors. Let me check. I have not seen the images. Frugality. So what we can do is like will go on the home page and your you need to complete this on. No, I have saved those images on my desktop. Yes, this is the gallery holders. Let's cut it and let's face that year from their friends and let's go back. Let's click on this on your letters on. This is the first teammate here that's click on publish. Let's go back on. It's publish, So let's go back and add one more image. 911 Click on Create new s I tend link, Click on this guy on the place I can click on Publish scored the content and I think we have added to images So let's they have the good for that. So good school up on your we need toe on hold Galati in an empty 80 on your we need to go see this money More pain. So you're this full vanity on? Yeah, it is Maliti that it to sustained. So let's come down and your we need to make some changes. So let me make it bigger. Sure doesn't seeing images, this image and this immediacy. So what we can do is like, First of all, we will remove all this images which are not required because now it will come dynamically . A minute longer stuff. Let's eat this. Only one. And this too requires. Let's got it from your let's be studio. So you know, we can have this one on June. We need to do we need to write a last name and this glass lean be this and to change this class me and not glass bringing this stuff. Uh, you do this, do that closer this time it's a press controlled for for mating. So this is the thing we need to do in html. And now we will map it. So for mapping, feeling too right after the good. Do we need to write this? No, I stayed not whom Reality. Not Matt on we will match item on Duren stood off Index, we will write numb, I tell you, White reuniting them on. Yeah. No. Which is equal to zero. So let me like this on your and you have a need to given an a conscience which will return this This will really done this. So let me be stood here. Let's former on. Yeah, and sit up forward. We need to write That's Tiemann for you're also because in reactor it is chewing and warning. So for it is not a proper Ford is not property. It should be its demand for on your instead off I d we will, right? You know, on we're on to reveal hope. It isn, um and like this because every time we need a different I d. So that is the reason we need to write this number on your you need to write t which is a Quito and, um, okay and Germany to right now I think we're doing them plus one. So whenever I could look first day, next will be zero. And then it will add one to this idea. So every time the majors will be different, so we will not there any issue relating that. So let's move this on your we need to write. I don't dark fee. Don't reality it made. I don't feel dark filed. Thought you on and say anything when he took appear on You need to pay. Study has been things I've seen on. We need to add a loader as well. So let's and loaded. Yeah, so I didn't know that We just need to goto about papers. Let's go to home based here and instead of about pace, right? Whole vanity, the link to zero and this Let's calm acted that savers and let's check. It's working or not. Yes, it's working. You can see the put the images are different and we have success will be presidency is this issue. So I think this is a leading next issue So let's check it out. What is the issue? That's what good. I mean, don't uses for your in this year says in this class dot great great hyphen item. We need to increase capacity by one instead of 0.75. We need to write one politically fresh oysters on. Let's check it now. It's working fine on I think this portfolio section in the world. You can add more images, remaining majors, you can add, so I'll see in the next election where we will complete their contention or. 46. Home page - Part 4: Welcome back to another video. In this video, we will complete the effective section part of home page. So let's create the content model for home page F. A. Q. So let me create home Big Home. I thank you. Let's save it created on on the field. So we need a title on description. So I think you title on one more field, which will be a long text. I thank you prescription description create. Let's say this. So now we need to and a content for that. Let's go toe home. I thank you on Let's have an entry So first with resection War one. But I think you want You can tape it, take you one on your in your description. So let's go over here, dummy Prescription. Let's go back pasted. Publish. Let's go back on. Add one more entry. I thank you too. Publish it. So we have published two entries, So let's go in the hole in home Dodgers on your we need toe the fine for ethic use on way need to live in India. So you have any toe act plain entry, So yeah, we need home. I thank you's on your being a night. I think it was. Let's just say this on. Let's come little down your medicine. We right now if we can see your this tactic text. Okay, so let's remove that on your also. Let's remove this. So right now, Crucially, one section. I mean, when I figure so. We need to map it on so many critical dynamically. So we will map it here. So you are. We need to write this start stayed, not home f accuse dark map. And you have you, like, item on your again. We've seen right now same as sort of rally on. You really need to get more and your a narrow function which will return the entire live. So let's Countess on less. Billy. Strict here. Okay, um, we need to change this Section one. Go item, dark field. We start on. This is ethic. I thank you. Title on your fist, Carpenters. Just from all this. Next on their we need a faith. You description yet saved this on. Yeah, we need a loader. So let's had a loaded. You're really noted container before the container. So let's add a load of this outstayed. Let's do one thing. Let copy this. That's coca homepage that's basted here on instead of about right home. Thank you's on after the container toe and this and orchard has perform it for on your we need to change the idea. So once a disc clicked equipped regardless, I really so if you loop, if we use a map better every time, the idea will be seem to make a difference. We need the same thing which we don't for poor fool you. So this will be no, which is a little less one. Okay, let's go up and check the It's about Britain. So let's cut this on Hastert here. So now Yeah, we need one on a less number. Okay. On this will be in early basis on your also, we need to change this tube saving, So just be the one. Yes. So I'm done with this. Let's check. So here you can see a fake you want, and I think to still it is not working, but let's inspect and check, but one and you know So the idea is one. If you click, it should work. Let me check. So you're number should be zero on. There's one mistake, uh, this way. Need to basted that HIV is on later than it does not require. So it may be mothers on. I think we're done. That's check it. That's depression. Yes, it is working. So that took If you can see this, inspect. And if you can see this, I d one hash 11 on decided. Seem on. Gets me check. Yeah, this hash want to in this month using that way It's looking and we're getting different, Eddie dynamically. So I hope I hope you're under starter's affect you part on. I have completed all the lessons and I have completed all the pages. Thank you.