Build a Portfolio Website Using HTML5, CSS3, Bootstrap 4 and Jquery | Dev Gupta | Skillshare

Build a Portfolio Website Using HTML5, CSS3, Bootstrap 4 and Jquery

Dev Gupta, Front End Developer and Designer

Build a Portfolio Website Using HTML5, CSS3, Bootstrap 4 and Jquery

Dev Gupta, Front End Developer and Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
21 Lessons (2h 27m)
    • 1. Introduction to the course

    • 2. Folder structure

    • 3. Plugins

    • 4. Integrating Bootstrap

    • 5. Building the Navbar

    • 6. Building the Header - Part 1

    • 7. Building the Header - Part 2

    • 8. Building the About Section

    • 9. Building the Experience Section - 1

    • 10. Building the Experience Section - 2

    • 11. Building the Experience Section - 3

    • 12. Building the Service Section - 1

    • 13. Building the Service Section - 2

    • 14. Building the Hire Me Section

    • 15. Building the Testimony Section

    • 16. Building the Work Section - 1

    • 17. Building the Work Section - 2

    • 18. Building the Contact Section

    • 19. Building the Footer Section

    • 20. Final Touch - 1

    • 21. Final Touch - 2

16 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


What is this course about?

In this course you will learn how to build a professional looking website  using HTML5, CSS3, Bootstrap and jquery.

Who is this course for?

Aspiring Front End Developer who are curious to enhance their front end skills.

What you will learn from this course?

  • Using and customising a text editor for front end devleopment.
  • Learning new HTML5 tags.
  • Importing Font Awesome icons and Google font.
  • Creating a preloader and cool transition effect.
  • Use of Bootstrap for responsive design
  • Adding and Customizing Open source Javascript libraries.
  • How to implement Owl carousel and Image gallery with filtering option.
  • Adding animation to the website.
  • working with flexbox.
  • etc

Meet Your Teacher

Teacher Profile Image

Dev Gupta

Front End Developer and Designer


Hi Everyone, My name is Dev and i am Software engineer from India. I am active in various programming language and have a passion to learn new emerging technologies and update my knowledge as new things developed.Apart from all these, I love to play the Guitar (Classical) and Piano in my leisure time.

I have found out that by teaching you learn more and this has driven me to create online courses. I aspire to become a full time content creator and maybe some day with your support, i will become one. 

I love to share my knowledge and believe its my duty to give back to the society that has made me the person i am today. 

I know i am not perfect but someone has rightly said that "practice makes perfect". 

I hope that my courses will of ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction to the course: Hello, everyone. Welcome to this coast. My name is Dave and I'm a software engineer by profession. In this course, I will teach you how to build a professional looking website using HTML five CSS three boot shop and J Query. In this course, you will also learn how to use many JavaScript libraries to give you a website a professional touch. Through this course, you will gain the understanding off how to combine html CSS J Query and Bootstrap Bill Professional Looking website. That will be a great addition in your portfolio if you want to become a front end developer . But Darling said No, let's take a look at what we are going to make in the series. So this is a personal portfolio website that we're going to make here. I have used boot shop, which is a very popular CSS framework to build responsive sites. So when the site load, we have this pre order and the smooth transition effect. You will learn how to make this pre law order and a nice open transition. You will also learn how to make sticky navigation so that when you school down the narrow bar stick at the top and remain visible, even if your school to the bottom off the page than this hero section, which consists off a large cover image. And I have used a JAVASCRIPT library to create this typing effect. You will learn how to integrate this type of effort in your side. Then there's a call to action button and when you Hoover, where it the background changes. After this comes to about section, then the skill section with booster progress bars. These bars animates as soon as you schooled on through the about section. This section uses one more JavaScript library to attain this type of effect. Then comes the service section, which consists off customized bootstrap cards to show all the services. Then we had the testimony section, which uses all Corozal. To show that testimony, you will learn how to integrate and customize all causal to make this. Then we have the work section in which there is a imagine gallery with filter option. So when you click any button, you see life filtering without any pastry lord, he also I've used a JAVASCRIPT library to make it. Then we have the contacts section with form elements and finally we have the photo of the site. So this website is fully responsive and it works well in phones and tablet. So this is the overview of the website, and in this course we will make this step by step, so I hope to see you in this course. 2. Folder structure: Hi, everyone. In this video, we are going to set up the folder structure and create different files. It will be necessary for a project, So let's begin create a new folder anywhere you like. I'm going to create a folder in the desktop and name this folder that would This will be the name off website template. So after creating the folder, open it up in the text editor off your choice in the cities I'll be using Active, which is my favorite data. You may choose any editor light brackets off years court at secretary many to choose from. No, just drag and drop this folder on the act. Um, I can hear this will open up atom and also open that folder as well. No, here we are going to make different files and folders for our website. So first create a file called Index Started to gamble. So right click and choose new five in big Star HD Yemen. This fable contain all the html markup for a project no creative for local CSS. And inside this create a file called style. Dorsey says this will be our main CSS file, where we will write the style for a website. Again, create a folder called Yes, Inside This. Create a file and name it Abd or Jess. You can name it whatever you like, but be sure to save it as door Js file. This file will contain all the JavaScript or J query code, which will be required for a website. Now again, create a for local lib in the root directory. This will contain all the library fives that we will use for this project. Like boots. Chef, I'll animate CSS file. All Corozal file that sector No next year. The folder called Images. This will contain all images for the project. So this is the basic Fulda structure and files that require for our website. The next video. We'll take a look at some of the important plug ins that will help us in our development. 3. Plugins: in this video. Let's take a look at some of the plug ins that can help us in our development process. The first plug in is called Emmett Event is available for many text editor. So if you're using another editor, you can get it easily. So, um, it is used for high speed cording and editing in html. So let's first install it, and I will show you how to use it. She cornered him and click on preference. Now click on Install and you search for it. I have m it already installed in my Virgina Factum. That is why I don't see this install button. But when you search for it, you will see this install. But so just click on it and, um, it will be in store. No, Let's see how m it can help us in our development process. Open up index shortage Dimel file and let's work in it. So every HTM if I require some basic tags like HTML head title, meta tags, body and corresponding closing tax. So typically, when you write a stable markup, you do something like this. Float html right, The corresponding closing tag. Inside this you write the hurt tag. Then you like corresponding closing head tag. Then you start writing the body tag, then the end duck. So this is what we generally in store. But after Emmett, it's all changed. So let me show you how am it can help us in this situation? Just float, exclamation sign and press tab. See, here you get the boilerplate html cord that every weapons require older. Different for you the dog type, the meta tags, title body, all the necessity. See, I told you fast according using Emit. Now let's see some other examples where Emma can be useful. So most of the time you need to create a live with a class or I d. He also American. Help us speed up the process suggestion dot followed by either the class name or die again in. So let me write class books and best up. This will create the deal with the class added to it. Likewise, I concluded with an idea attached to it for this rate phone saying, and then the idea name and her top. You can apply class or I d to not only live but to any other tag you want say I want to apply your class in each one time. Second rate, it's one dot Heady. So this will be a class applied to H one type or I can hurt each one don't display. So this will appear tonight. D not one thing. You don't operate the deaf before the dark when you add in class or deport by the four If you just red dot on class name um it will created there for you. But to apply your class or i d to other tag you have paraded its name. I can even add multiple process and I, due to a single tag, say I want to apply a class color and i d repertoire of so I can write not Hello Bone ST grapple and pressed up So this is a large boat The idea in the class to the day like waves . You can change this however you like. So by this time committing, I can easily treat wonder with a class or i d in no time How they limit is helping me the wait for it. I'll show you how. Let's say you want to create tenders with class box apply Put know what you will do. Either you cleared each individually or use copy paste to achieve the result. But here, American helpless victim. So the clear tenders with the class box applied to it, I can just ripe not box. Still do then And this step. So this will clear tenders with class pork supply put No, you see How am it Helps us right court Faster. Now let's take a look at one of my favorite feature. So when you're working on a project most of the time you want dummy text as a filler. So this time you text can be generated using, um, it easily. Let's say I want to create a paragraph but some dummy text for this I can simply right the then a greeted insane lording Then so here a paragraph 10 words off loading Epson will be created for us. So in this case you can also use the multiplication operator to create five battle with Tommy text. So can that be into five, then lording then. So this will create five paragraphs with 10 words in the random 10 words in it Now, one last thing that I'm going to show you is the child and sibling operate tournament say I'm creating a navigation list which consists off you will with allies and inside the l. A. I have attack are typical navigation structure. So to make the structure easily, we can use the child operator which is denoted by the greater than thing. So I can write You will inside this I will have a lie discredited Insane is the child or pretty I want five allies so into five and inside this I want attack Then press step This will clear that you will inside this Finally on inside the l A. We have the attack So the last operator that we're going to see is the sibling operator which is denoted by passing. Say I want to creator there followed by a paragraph followed by a span followed by a heading level one. I can easily create this using the sibling operator second rate doof plus better plus spent plus h one press stop. See, all these tags are created one after another. He also you can use the multiplication operative your wish. Say I want to live then five paragraph and then herding level one element. So I can write Dave plus P until five, then each one. So this will create all the tags. So this is all about Emmett. He had just crashed the surface there, tons of different things that you can do. So if you want to learn more about him, it you can goto dog start Amador, Ill. Now let's see the next plug in that we're going to use. It's called Acting Life's Over. This plugging allows us to see life preview off our website during the development time, so let's first install it like an atom goto preference. Install and search for act um life server. So this is the plugging. Just install it so often. Installation. This plugging is located in the package Manu here, just click on Artem Lifesaver and starts over. This is the life preview off the pitch. The cool thing about this plug in is it's updating feature. So when you make any change in your webpage and save that, changes automatically reflected in the browser without even reloading the pitch. So let's change something that said Hello world and save this and you can see that changes reflector immediately. So let's wrap up this video And in the next video, I will show you how to set a boot shop and its dependency in our project. 4. Integrating Bootstrap: In this video, I will show you how to add bootstrap and its dependency in a project, and we will learn how to link customs seizes and Js file we have created before in core project. So let's start open up index dot html file and at the top, right, an exclamation mark and Kristen. This will insult the required HTML. Boyle appeared cold in 12 5 so let's first examine this template a little bit. The first line here is the document type declaration in short talk tape. It is an instruction to the Broza that we're using html five markup in our pitch. Next is the HTML tag itself. So every weapon is enclosed within that's female type this mark the scoop off your webpage . So whatever you right inside, this will be treated as HTML markup by the brothers. So inside this estimate time we haven't attribute called Lang and its value is in. This tells the browser that whatever content we right inside, different html elements like paragraph, they've herding is in English. So if you're creating a page in another language, say Spanish, you give it a value. Yes, and if you're creating a page in French. You specified value fr. Next, we have the hurt done. So this tag is used to add metadata. Another pitch so metadata means data about data. So here, in this case, data about HTML document itself. So the contender 10 inside the head tag is no displayed in the Web. Rosa when the pages loaded so hit that contained information like page title link were custom CSS or Js Fine link. Brufau Aiken measured it about water description, which is used by search engine keywords, etcetera. So one important matter, Tang added, image to mollify is the view port. This method. I instruct the browser to render our page appropriately in a mobile or a tablet. This sgtp equal tag is to add support for older intended exporter. That is, I mean, I know I eat. You can either have it or you can drop it if you don't want to support older Internet Explorer browser, So one important information that is stored inside the head is the title off pitch. The text written between these title type is shown and the top off the browser or in the tab off the Prozac. This information is also shown in the search result when you do a Google search, so it's very important to choose it wisely to rank your website after the third comes the body tack inside the bullet ivy, right? All our content using HTML tax So this is all about HTML template. Now let's add bootstrapping to a project. So open up room and search for bootstrap and click on this first link here. Get pushed her Broadcom and click on download and then compiles Yeses and Js file play contest only link. So this will get downloaded once it is once it has finished already. Just extract this. And now we want to place the CSS and Js folder into a project. So I'm going to just drag it into a present. Let's move it a little bit and dragged us inside the lib folder. No, we need to download bootstrap dependency. So boots up is dependent on G query and Papa Georges. So we're gonna don't want that in the room. Such for J query. No, thank you. Contesting. Don't know Jake ready And don't know the Compressed Productions Equity 3.4 point. Oh, no. Save this file press commanders and save this fine in the lift pulled off a project. Next, we're going to Don't let the poppet RGs file right, Papa, And click on this link. Papa Georges off click on Install No clear contest unpackaged dot com Papa Georges, I can save this. And so you know, Lib Folder has Papa Darkman gorgeous. So we have added all their dependency. It's timeto now it's time to link it up. So first I'm going to include bootstrap CSS fight this bootstrapped Orteman Dorsey asses. So right, link a trip just right. Click and click on rename and copy the spot. It's an easy it. So I like this way of doing it and just based it. No, we need to include the bootstrap Js file. So it's always good practice to rate all your script file just before the closing body tag Write scrip. So I script colon SRC and here I am going to specify the location off the chairs. Fine. So this file bootstrap Godman dodges, right. Click who's evening? Copy this park and boost it not bootstrap required Aquarian proper. So you need to include J query and proper before this. So here. All right, script. I will include J Query, Click this. Copy it and after the silence. Food proper. No, test it. Let's write a simple each one and give it a class display. One. This is a bootstrap class. Hello would save it. So this is using their displacement boat surplus it's working from. So we have successfully added both strap on its dependency in a template. No, let's also ahead our custom, CS and GS fight. So I see. Is this file sitting inside the CSS Fordo later? The top rate link I see is this style Don't use this similarly, I'm going to include the script file SRC It's sitting inside the Jets folder gorgeous. So this is what our base tempered looks like. He I've added all the required fight. So in the next video, we'll start working on the navigation off a pitch 5. Building the Navbar: in this video, we will make the navigation bar for of upside. So let's done. First, I'm going to add some base tiling toe a project. These telling include adding the phones, choosing the main and extent color setting, foreign size foreign family detector. For this project, I'll be using Mourn Cerak and new new telephone, which are Google phones and can be easily at it. We're project. So open up chrome and search for Google phones to click on this first link and then in this search box such for monster attack not be used. This phone Just look on this card. I can hear likewise. I'm going to search for a new Nieto and click on this icon here. Yeah, I'm also going to customize the phone a little bit to expand this and click on discussed a wise link. So for months that I'm going to choose one great 400 607 100. And for new new toe, I'm going to choose 407 100. No, click on here in bed and just copy this link and is this index shortage team will file. That's it. We have included the phones now we use it. You need to just specify the phone family to open up style Nazi SS file and begin a comment . So CSS common looks like this and inside this right this routes It's always a good practice to properly organize your corn. On using a comment, we can add meaningful text that will help us to stay organized. No, I'm going to add a reset using the universal selector, which is start. And inside this rule, I had, uh, im said the margin No. Zero imparting to zero the browser user agents side sheet by default, Adam Margin to the page, which we don't want. Therefore, I'm resetting it. Next I'm going to set the phone family off heading element. So after this all the heading element I'm going to reset the phone Family edge two or three foreign family more considered, and I will also have to fall back sensitive. Then I asked state to the paragraph all the paragraphs in a project Foreign family will be new Nieto so instead of foreign size, will between d pixel lie night will be 30. Fixing you should keep the late night 122 150% off the phone size. So here I am using 150% of the phone sales, which is 30 pixel. The color off this paragraph, all the paragraph will be great fella. Six c 75 70. So this is our baseball. Now it's time to add the navigation. So what do index started html file and inside the body, I did nothing. And here I am going to give the class off naff bar and a glass off. No, but expand energy. These are both chef classes. The now, but experience LG class will expand the navigation, when seen on large devices, are up and in the rest of the devices like medium, small, extra small or hamburger Aiken will be disputed. Inside this, I'll appear to container. This is also a both shop class. Then I will add the brand or the logo using the airtight so i e. It also needs a class now. But but then that shift here give bone because not going anywhere and he had great route. You can also insert your brand image if you wish. In this ankle tag didn't clear the court for Hamburg Aiken. So after this clear to Burton with the class now, Bart Agua the state will be Burton. This button also required to additional attributes the data total and deter target so they get that often the value will be collapse and the data target Here, you can specify any value, but you should drink the pound sign in front. Off it some good right now. But I did. Inside this button, I'm going to create a span tag. This will contain the Hamburg item. So for this video, I'm going to use the foreign Awesome Hamburg Aiken. So before using it, I have to include the cdn or phone tossem. So go to chrome and search for foreign tossem. Click on this link a no click on. Start using free and just copy the CD in. Go back to your index. Started Stephen Fine. And paste it in the head section. No, to use the hamburger I could have to use I tag I ieave it a class affairs if you don't buzz . So the steel at the Hamburg Aiken after this creative with the class collapse on bar collapse with an i d. Now. But I d So they so this i d must be the same as the I. D you right in the data target. Attribute off button. So in the button is clicked. This stiff gets open or closed Now, inside the I will create a dual element with class Barner. And inside this I will have the links. So create a l A with the class. Now, item on inside this. I'll have the attack with the class knave link. Leave the old boat shed classes. So this is our links. I'm going to copy this five times. And James the country. This will be home. The boat services client port for you One morning contact. Now Save this. And let's see our navigation bar photo package. Artem, life's over, starts over. So this is a navigation, as you can see, that links are pushed to the left. But I want these things to appear here, so I'm going to just simply add a simple class to the U. N M l auto. The still pushed her into the right. Let's start in this navigation bar. First, I'm going to add my own custom plus called our hyphen now and under 21 of element. Then I'll have some style put So go to style your CSS file and create a new comment. Navigation? Yeah, I'm going to target now. Thought on hyphen. Now I'm going to make the background transparent. Starting will be top and bottom 20 pixel and right and left zero and transition will be 0.5 2nd Oh, you'll see that all of this transition later. Don't worry for now. Next, I'm going to stay in the burned the nabob brand. So target this now dot Never brand. The phone size will be 30. Pixel color will be wiped and transition will be 0.5 2nd Or for now, Let me remove this. Allowed this later to show you how exactly that work. Then I'm going to start with the links started that now No barred now and like And then it since all the year times are contained inside now. But now to see well, class. Therefore, I'm targeting this now inside that Nirvana Ally E All right, color rgb proof of to find proof of faith both of 2.0 point it And I have to override this using the important keyword because bootstrap already has applied some color toe the airtime so I am giving my own color. That's why I'm overriding this. Using the important keeper after the cell specified the form size 16 pixel. The letter spacing 0.5 EMS Foreign tweet will be 600. And for my family it will be new Nitto. Now let's see what the navigation looks like. See, now you cannot see the navigation links because it's invite color and the background is also wait. So let's change the body background for the moment to someone other color. Let's sit back and now check. Our links are visible. I'm going to remove the body background later, but just for now, let's keep it to work with the navigation. Now I'm going to add some margin toe the element. So right now Norton of Blood Margin left 15 pixel, so we have added margin left store ally elements. Now let's at that sticky other. So the artistic Ada. It's just a matter off adding and removing the class using J query when the user school the pitch. So let's let the J query for this first Open up, I'm gorgeous and begin the document ready function inside this. All right, on scroll, even so I'm keeping a watch on the school event here. I'm going to write The logic will declare available School dollars Window scored up so this variable school will store how many pixels from the top. The user has called the pitch. I can get this value using the window Dark school top function. So let's say the simple console to see this in action. Consoler dot law school So now open up console, Inspect Console and Traders School. Since we don't have any element our space, we cannot school. So let's add some element to the pitch. Just protester schooling. Go to index after the nap Creative section. Let's style this. Just duplicate this one more time and save it. Go back to Crewe and no Aiken School and you can see that when we school the value changes here in the console. So, for the logic, I want a class to be applied to a navigation bar when the user school a proof of p pixel from the top so back to our court and we're to remove this I like if scroll is created than or equal to 50 I'm going to do something health. I'm going to remove the class. He I'm going to add the class and here, and we'll remove the class. So let me add one more class, your navigation bar called Sticky. So using this class, I'm going to reference this navigation in a J query. So here, Right, Tony, it's Dickie, not close, and I'm going to just copy this one time and chances remove class. Now we don't have any plastic yard in a CSS file, so let's create that. So after all this, I'm going to add the stickier class so this close will be applied for knave element. So right now dot r dot now dot sticky had, as you can see, that there is no spaces in between these classes since we are adding class to the element itself. We have to write like this now here and said the background Blake not to overwrite this using the important keyword parting will be 15 pixel top and bottom zero from left and right book Shadow will be his hero, Warren texutil It picks it she pixel RG view. This value and transition will be 0.5 seconds. All using note No, save this and go back to crew on menu school. Well, it's not getting added. Let me check. Or I missed Oak Door Pia because I'm targeting in class operator daughter. So let's check once again go back to Crume and now for school she can see that a white sticky background is being added. So here I have to change one more thing so that it sticks to the top. So go to act him on in. The index started steaming for you. I'm just going to add a class for shop class fixed stop. So this will fix the position off the navigation bar at the top. Even if the you disclose the pitch, let's check So you know it's working fine. Since all the links are invited color. That's why we cannot see them. So I'm going to change the color off the link when the sticky add class is added to the navigation bar and again going to change the color dealing when the sticky art classes removed from the navigation bar. So let's do that. Open up. Starting CSS. I'm with right now dot sticky yard What? I'm targeting now above ground here I change the color the black foreign stays 40 pixels in transition 0.5 2nd All save this. Go back to Crume and see when the class is added, the phone sales increase and the color changes Also. Now I will change the color of the link. Now, I thought, Sticky yard? I don't know, but no. Now blink. Kelowna will be black important. Save this seen over and the class is added. The color of the knave links became black, and when the class is removed, the color became white. Now, one more thing we have to do. So if I check this or inspectors and see this page in their mobile browser, you can see that the hamburger ICANN is not visible, although it is there. So we have to write styling for this as well. To go to act him Moctar to celebrate now far dot Hamburger. Let's give this class toe hand was Aiken. The color will provide when there is no sticky class back to it. And when we are the sticky close, the color will be black. Save this the check. See? It's right now. If I school, it became black, so it's working fine. So this is all about our navigation 6. Building the Header - Part 1: in this video, we're going to make the header section off a project. So this section will contain the hero image on other information about the O Notre site. So let's start first, I'm going to remove these section which I added to create that space so that we can scroll intestine navigation. But now here are clear to heard element and I'm going to give it a i d him. So this idea lose when I add the smooth scrolling through a pitch inside this creator David it last container. So dark container fluid. So this is a bootstrap class which will make the container full of it. Next, the latter day with the class room and inside this create another day with the class called here. I'm going to add their text center class, which is also a bootstrap plus toe, a line, all the text in the center. So here I am, using the boots tablet system, which consists off a container and inside it we have rope and then inside it, we have columns. You can create well columns inside a room for another section. I will only need one column now inside this column. I create one more. Dealt with the class content box, the select as a rapper, and this will create a responsive box around the Continue using the Maxwell property. Then I late Welcome in Edge four. Tag. After this, I'll have h one element in which I'll use a Js library, which will take the text for now. Just rate John Doe I m. John Doe. I'm going to add the typing effect in a short way after this. Create a paragraph with the Lord on maps. Um, let's say 15 words and then I'm going to create the call to action. But which will be a link, which I'm going to style it as a button and we're to give it a boost. Surplus. Gideon. So this will be a link. And here, right, Don't look. See. So this is a markup off the header section. Now, in the next video, I'm going to style it 7. Building the Header - Part 2: in the previous video, we have added the markup for a header section. In this video, I would like to see a sense 400 section, so go to style Nazi uses and at the bottom do you to comment. Head of section first, I'm going to target tow her dough itself. Tender targets in. I'll have a height off 100 Deitsch with 100% background image. I have already placed all the image in the images folder, and I'm going to use the background or J Peg as a hero image, so have to specify the U. N. And since it is inside this image folder alike dot and forward slash images and then ban drawn thought jpg this would be inside a Corp next day, the property No repeat because I don't want to repeat the here image than background saves cover on background position center. So let's see what it looks like right now for the item like servant starts over. So we have a hero image on the content that goes with it. Now this is too bright. I'm going to add a linear ingredient to create an overly before this right here. Place a coma on before that that it lean your greedy int. Here are GBU zero 0.5. Again comma RGB 000 comma 0.5 No safe and take a look at it. Now we have this black overly on image. So after reading the hero image that style the content for this, I'll use flex box in the outer container to align all the text, particularly and the horizontally in the center. So create a new class. Had a content and addict working dinner. Her does content. Now let's style this. Since it is close dot for the content, the height will be 100. V ich on the street as a flex books flex direction will be. Call him a line item center and justify content center. This feel particularly and horizontally aligned item. So let's see. See all our text is the horizontally as well as vertically aligned. Now I'm going to style individual element. But first I'm going to style this content box, which I added to work on tape as a response of container. So they thought current pill box. I'll specify the max with property 700 pixels, so I contend box there Operable decrees. If you decrease the size off the device and it will increase up to 700 picks it when it to seen on larger device. So I'll give it a color. Wait and now I'll get the H four day. I specify the phone size 30 pixel. The night target. The H one tag foreign saves 52 pixels. Then we have this link which I need to style as a button. So first I'm going to target it. Clinton box. The color will be right. Text decoration will be none. Border will be full person solid and border radius will be granted pixel, and I'm going to give it a party. Grant Ipix Sorry. Five pixels, top and bottom and pretty five pixel of 10. Great. So let's see how it looks like. So this is our but in city a call to action button. Now I'm going to add a hosted so content box you who gullible, become black background will become right and transition 0.5 seconds or so. This will change in 0.5 seconds. So when I over the background became white and the color off, the text became black. So finally I'm going to overwrite the color of this paragraph. So all right, content Box B and Ricardo. Wait. So now let's add that typing of it for that I'm going to use Ah, Jascha. Play very cold type George years. So open up room and search for tape. Just click on this link mad poor dot com and click or download zip. So once it is downloaded, extracted and under the lip folder, just copy or I'm going to move this one lip folder in a project. No, I'm going to link it up in a and exhorted steam if I so that it script under the lip folder We have taped short years. So now to get that typing, if it you need to use a span with the class. So I want this typing effect to be applied on the H one time. So I'll create a span with the class element and then in the Abdur Js file, I need Tunis laser. So if you look at the documentation, do you want to tough? You can read all the documentation here how to initialize it, how we use different options. So these other different options It provides us, like type speed start delay back speed at sector. So back to our code I'm going to miss laid it in the Abdur Js file. So I pulled those cooling function navigations fooling function. I'm going to declare a variable. Okay, equal new tape. And here I'll have parade attacked classing which have given to the span element. So right element and then some parameters. So I have to specify strings that I want. Do we taped So rape John do our developer part is I know of business. That's smart. Backspace will be true and show you in a minute. What it does type speed will be 100 millisecond back speed will be 100. Loop will be true. I want this to go on forever and also have to specify loop Don't infinity And then I specify some deliver. This will look good when we are the animation library to blockage. So smart. So he start did it one second So 1000 milliseconds now this is it. No, let's check our page Looks late. Open up room. See? We have the typing of it. These are the formerly whites from showing up. Let me check or great strings Go back. See Now are typing Effect is working fine and it starts for the dealing for you Fresh sea one second delivery Have So this is all about the header section in the next section will start working on the about section. 8. Building the About Section: in this video, we will work on the about section off a page. So let's start first. I'm going to write the HTML for the about section. So go after the head attack and create a new section with the class about and then I d. I vote inside. This will create a bull shop container, which will contain the room so creative with the class container and inside it clear to live with the classroom in this row, I want to equal with column one to display the person image on other for the country. So let's create poodle with class called L G six. I'm going to do but get this suppress command shift. 20. It will duplicated so on large screening up it will take up half the screen and on small devices. It will span across the entire now inside the first. If I will place the image, so create an image tag, I N g. And in the source attributes specify the part of the image I have seemed it as proof. I dark jpg. Now I'm going to add a bootstrap plus to make this image responsive. It's the reason will start to make that much responsive. Just are the class image forward. And now our image will scale asked other device safe. I'm going to add one more class image Tom name, which will style our image to look like a company. It will add a border, and sometimes next is the old attribute on which are late pro fine picture. So this is about the image. Now let's add the content here inside this devil clear touch to element with content about me. Then I will have its four tag with content. Hola. All right. Um, Jordan, I'm going to style this using a Spanta. This is in lane style. Hello. Will be cash you nine six. If it flavor, then I will clear some paragraph with w text inside it The first paragraph. Enough 10 boats. Sorry. Second better. Let's say 14 words. Thought better. Let's a 15 words and fourth better. Let's it 30 words. So let's see this in a Rosa to go to package at some lakes ever starts over. So this is our design sofa. I added that black color by ground cologne, the body to check on navigation. So I'm going to remove that. So what does style Nazi asses and removed his background color. Save it. Let's see. Finally, I'm going to add the social. I can a dent. So I'm going to create a div inside this, I'll creator, you will with the class list in line. This is a good step class inside the U. N. I'll have four elements with the class list in Lane Fightem and you have your tag. It's good to know there. And inside this I'll have toe formed also, Michael. So find sort of find Aiken. Open off. Want awesome Upstate. And here I am going to search for Facebook. So this is I can that I want nuclear cornered and just copy this. Just click on it. It will get copied, go to Adam and just placed it in between you guys. Now, I'm just going to duplicate this three more times, and I'm going to change the class a ladder. Quicker hiking I learned of be hands Aiken on a larger you do Vikan. So if I check see, I can don't know showing up. Finally, I'm going to add the style toe about section. So go to style. Lord CS is that at the very bottom. Begin a comment. A boat? Us? Yeah. I'm just going to apply style through the So she likens the first targeted a boat ally. Yeah, the color will be black. Display in line block height will be 43 pixels with will be 42 XLs file. Foreign saves will be 20. Pixel border will be to fix him Solid cash and border radius will be 50 person. To make that a circle line height will be 40 picks in percent that I can Inside the circle transition will be let 0.5 2nd all and Dexter Laine center Now I also want to add of overstate dwelling start boat like a Well, I'm just going to change the color, too. E here six a three. Now let's see. I see it the save it, see how color is changing. So let's inspect a page in our different devices, Just right click and even click on Inspect. Click on this. I can move my liking and as you can see that in lower devices, there is no margin between the content and the image. So let's add some class to work contender so as to have that margin back to one distorted steam. A file? No. Here in the Contender. I'm going to add a margin top five. But on large device, the margin will be zero. So we'll have to write empty than their device saves and zero. So in large device, the margin will be zero on. On smaller devices, the model will be five. So let's see. CVS, where did that margin? If I see the spirit all night back, we have that five margin off bootstrap. And finally, I'm going to our parting toe a section, then dive about a section. So I'm going to create a class in the style CSS fight in the baseball Anguilla created our hyphen B and I'll have a party oak. It depicts it and padding bottom Your typical. Now I'm would look like this. Cross toe about section. So yeah, just based it on now. Let's see. See, we held this party off topic, sir. Top on a typical boredom for inspectors. So you have this 80 pixel party on the top and it depicts a party on the bottom. So this is all about the about section on In the next video, I will make the Experience section which will have that progress possible 9. Building the Experience Section - 1: In this video, we will make the experience section for a page. This section will have the bootstrap progress parts, which will show the skill level of the person. So let's start. It's right under the about section. Create a new section with class the XP class in an I. D. The XP I d. Inside this. I'm going to create a different class container. And then inside this, I'm going to create a live with a classroom. This rule will have two columns so creative with a class called MD six. This is a bold step class and not just duplicate this one more time. So our need so on medium devices and up the road will have two column and on devices lower than MD. The column will stretch out to fit the entire screen. So in the first column computer, it's three tag and raped my skins. Now, in the other order, I'm going to create the progress parts, create a label time people inside this raid HTML then additive with the class progress. This is a bullshit class. Inside it, create another David class progress hyphen bar. This is also a bootstrap plus. Now we have to add some attributes toe the stiff. So the first attribute is rule, which will be progress but the next actually, Brutus Tyler to group with 0%. So we're going to change the style Attribute using JavaScript on, we're going to use a JavaScript library called waypoint. So this Vettel specifying the line off the progress for the next attribute is area Well, you know the value will be zero and then a video the human we will be zero a video value max value will be 100. So close the stiff. And now here I'm going to write 95%. So I want the person, you know, 95% of html. So that's 195%. So these attributes are used by the screen reader for visually impaired to increase accessibility off the webpage. So when this page is read by a screen reader, the value in the area value now will be there or will be dictated on the area element on the area. Value Max specified a minimum minimum and the maximum length off the Progress bar. So let's see if this and take a look at our page. So here we have the Progress bar, No, first let's and all the Progress bar. So I'm going to copy it and paste it a few times. - Now , let's see. So these are the progress, but that we have argued. So here. I want to align this at ST Acto, the vertical and the horizontal center inside this column. So there are many ways of doing it, but I'm going to use the flex box method on Bootstrap had his own classes to work in the flex box. So inside the X three, I will first make it a flex container and by ardent class called deflects, then I will underclass justify They never allowed a class called Justify Content Center. This will align the X three horizontally or the main access, and then I'm going to add Elaine Items Center. This will center the item along the vertical axis or the cross excess. No, save it and let's see. So this is how it looks like, So a markup is done for the experience section. Let's add some state school style Lord CS is and after the boat section, create a new comment here. First, I'm going to target the progress class, right E x p class. So I'm targeting this section XP class And then inside this fear of the progress class, we'll give it a height off 10 pixels, border areas off 20 picks in. Forget that your illness and then the phone saves will be 10 pixels. Next, I'm going to change the background color for progress, but so I'm going to target the progress. But so this is the class which I'm targeting progress part change, the background color. Who has e it? 683 I would write important because I'm going to override the default color which boots separate. So I've provided this important here nine first, even see this. He won't see any color because of it. Zero. So if I changed over it, that's a 20 see, So this is the color that I'm going for. Next is I'm going to change the label style, the level so I d XP plus Libin The form size will be 20. Picks him on margin Tim pics of so let Syrian see. So we have added that margin onder changed the phone stays off label. So this is the experience section. And in the next video, I will use javascript and waypoints to animate the progress possible 10. Building the Experience Section - 2: in this video, we're going to animate a progress bars. So let's start open up, Abdur Js file. And after our tape could begin a comment Gold progress. But so all a programs bonds have a class cord progress hyphen. But see, all of progress bus this progress hyphen bar. So I'm going to target this using JavaScript. So declare variable called bar. Let's city document dot queries left a matter query selector all. And then I'm gonna talk about that class progress. But now the query selective Method returns and Eric so I can access each of the progress. But now the only thing that I have to do is to change the width off the bus. So we have a style attribute in the progress, but so I'm going to select it and increase it Changed of it. As I told you, that query select all returns an area containing all the elements with the space five class . So here I'll use the indexes and select the Progress Party. So would I be zero dot said at your group that I'm going to change the style with for the first let's say 100 wasn't and I'm going to give it a transition. Let's of one second or next time. We're just copy and paste this for all our progress bars. I want to see it be one 34 Faith. So that's the end of it, this time to 95% Transition 14 in five seconds. This victory to pipe wasn't let's say transition 1.7 seconds. This with the 99% transition to second. There's for 35% transition. That's a 2.3 2nd This for 2 95 wasn't and transition proof one for a second. I'll save it. Let's see. So I'm going to refresh this. If I schooled on, you'll see the Progress Bus I animating. But But there's a problem here. The animation starts as soon as the page Lord, so this is not what I want. I want this animation to start when the experience section is in view. So this section, when it is in view, I want the animation to start. So to achieve this, I will use 11 recalled very points. This library allows for a function to run when certain sections or parts off of a pitch comes through you so when the user schools the page and reach the experience section. That time, the animation for the Progress bus will done so let's first Advair points to a project. 11. Building the Experience Section - 3: so open up room on DA search for the points toward chairs. So this is the website. Click on this. And now look on this down your button to download the library. So once the download is complete, unzip it. And now we need to include their points in a project. Open it up, Andi. In the lip folder in C D. J. Query the appointment. Gorgeous. So copy this. Onda go to your project folder. So in the left shoulder. Just business. So now we need to add this in our html five open up index storage demon on DA after type Dodgers open a script act. Open up. A script source will be lip. No, I'm going to copy the name. I click rename. Copy the name on business. So we have added the points to a project. So now let's see the documentation to know how to use it. So now let's see the documentation to learn how to use it. So you're in the home page, Click on this side link. So we're going to use the global waypoint class this paper in class on DA and this class needs an option object, which are many properties that we have perceptive. But the two property that we have toe but the two property that a mandatory our element and handler. So we're going to use this court on modify existing code to just copy this Go to abduct Js file And here are based this court. So now what I want is that when experience section comes in view, I want this way Point Toby triggered this function is going to be triggered. So here in the element property, I'm going to target the experience section. So I've given an I d to experience section XP I d this Experian wouldn't I'll get the whole entire experience section and inside this function, what I'm going to do is I'll delete this. I don't want this and I'm going to paste all this inside this function because I want the animation to start when the experience section hit the screen. Because I want an emission to start when the experience section is in view and this function wilder and experience section is in you and goto a pitch and refresh now, still, it will not work. Why? Because our experience section starts from here. So in this part reaches to this part, the Progress Bar will start animating. So for this to work, we need to set the offset property. So here in Tacoma, then offset 90%. See if this go back into fish. Now, if I school down, I don't see our progress. Bar starts animating Went off to value is 90% from the top of the screen. So this is expedient section on in the next video start the service section. 12. Building the Service Section - 1: So in this video we're going to make the service section off the pitch which will list or detail all the services that are provided. So let's begin. So begin a comment after the Experience section and right services. You no open a section, Doug, and give it a class services class and also an I d services. I d Now inside this creator live with the class container inside this container, we're going to create three rows so the first rule will contain the section heading on the other two rules will hold the services card so created over the classroom inside this creative with the class call. Now again inside this, I'm going to create another live with a class called which will group together, our section hurting. So here I begin. It's too bad mind. So this is and then a paragraph tag work to be offer work plans. So here I wonder, is heading and all the cards in the service section. Toby Centerline For this I'm going to use or add the text center class to are contenders next center. So this will move all the things to the center. No operating. I'm going to make the cars here. I'll have to row and each row will contain three cards so creative with the classroom after this rope. Now, inside this rule, I want three columns so right call energy for and we're copy this two more times. And now I like the content which will go inside this. So for the card free to do with the class card this is a boot share. Plus inside this you have to specify toe inside this you have to specify two things One card header and other is card body so creative called Cardo. And inside this inside this card head I'm going to use 4000 Michael. So the court for that is are you fab If it happened, See if this no being creative with the class guard body here I'll have a Frank that with the class scorecard title. This is also a bootstrap class. Let's it up. No elopement then, as a decorative element, I'm going to create a border. It will be a day of let's sit up and I'm going to give it a class service border. This will be a decorative element And then I'm going to clear the paragraph with class card . Next here, I'll use some dumb you text resembled a paste. So this is our first card. So similarly am goingto similarly, I'm going to clear to more cuts. So what I'm going to do is just copy this guard and I'm going to place this in this column . And I would have changed Aiken to our baby open guard and your let's change he call most solutions and jeans the text in the text. Similarly, I'm going to just copy this card one more time and taste this inside this column. You're there. Foreign Desam. He had changed the class. Dr. Zajtman, stop. Let's change this to website development. Change the text. That's it. This Now let's see if this and see how it looks. So we have this heading on. All icons are showing up. So this is not finger. Let's check. I need to change this class safe. I know that I could not swing up. Don't worry, it's not style and well, style it later. But first, let's create all the cards so again go back. What I'm going to do is to copy this entire row. It's contained three cards and based it one more thing and paste it here. So let's see and check. So we have created six cards and know what I'm going to do is let's change something. Changes. I can end this text so that I can will be far f addict. Let's change our development toe has your services. Unless she in the text now for the second card. No fee. WordPress Simple. These are all foreigners Americans. So you can check all these classes when you don't love them individually. Now, here I am, watching the text to what pissed teams. Then the next? No, for the last card. 50. True. No development needs a text. Let's see. Let's take a look. So these are the six cars, and now I'm going to start these cuts. 13. Building the Service Section - 2: So in this video, we're going to style us off a section, so open up style. Odysseus is so the first thing that I'm going to do is to give a background color twice of a section for this. I'm going to create a new class BG sick. The background will be f it f nine f b Now at this class to a section. Yeah, Also, I'm going to add the universal pardoning top, imparting bottom for section. So our hyphen p class, I'm going to add this to a section as well. After this, I'm going toe style the cards in a service section So go to style Nazi SS and off Experience section Beginner comment. So this section Yeah, you have this food surplus door card and God heard Oh, I'm going toe change the background color two f it f nine f e and I will be was the important key word because bootstrap has a default color and I'm going to write this using important and I'm also going to remove the border. Oh, for card Bordeaux will be none. Also, I'm going to write this using important. Then I'm going to style the foreign does a Maiken for this service class. It's chick. So this is class inside this. Guard her down and then I take the foreign size will be depicts. Now we have this styling element, the service border. I'm going to start this scope of this service border. Why it will be to pixel. It will be for tip pixel margin, 15 pixel photo background. It would be e six five f 78 So now let's see how our service section looks like. So we have increased the phone size off this way centered this heading myself. It's for people for toe a plane. And also we have added this light background color toe this section. So this is our service section. In the next video, we're going to create the higher midsection. 14. Building the Hire Me Section: So in this video of your going to make the higher meat section off a page, So after the services, they're gonna comment. Hi, I m e After this, I'm going to create a section with the class. Hire me and then I d Hi. Oh, already. Also, I'm going to give it a class, that universal party inside this. I'm going to clear the container with the class tech center and inside this I'm going to clear Tero. No. Here. I'm going to create a deal with a class called and inside this good on inside this def. Its three with a class margin. Bottom full visible step plus and right, I am. No. I'm going to clear that your tag with the class beauty in and our hyphen beauty in which I'm going to create this will go nowhere. So use pound and in here late. Are you me? Now? Create this class. Are Ivan Beauty in? I'm going to create this style in the universal section on hyphen. Beauty and parting will be five pixels top and bottom 20 pixel left and right by phone. Color will be you. You're six here three. I'm great. Important colors will be right. Also important. Let's see in this check. So this is a hi, um, you section. And in the next video, you're going to make the testimony. 15. Building the Testimony Section : in this video. We're going to make the testimony section off a pitch for this. I'm going to use our charism, which is all closer. First, we need to download it and included in a project. So open up, chrome and in Google search out Groza. So this is a link. Click on it another first you need to download it to click on this link. Don't Lord and then owner Bill start after it's finished already. Except this. Open up this folder another dissed folder which is a distribution folder goto a set folder . And from here we need to add three fires to a present Alcaraz on Windows PCs is our team before dark Windows E Asus and Alcaraz Elmendorf Gs five. So I'm going toe are these file into a library folder? So select these five and dragged this in a library folder. So know that we have added these files in a library folder. It's time to include the reference in and exhorted HTML page. So first I'm going to include the CSS file. So right link and set up will be Thies to file. I'm going to include right click rename Copy this entire part and paste it again. I'm going to link this default team the four or five copy the part Lingus. And now I'm going to add the Js for you. So I will include it in ah J of section here script. This year's fine and peace this So we have added all the required files. Now it's time to create the testimony section. So just talk to the higher me section. I'm going, Toby gonna comment testimony And then I'm gonna clear the section with the class testimony class and then I d i d. I'm going to include two more classes in a section which will be the part in class and the color clothes. Now I'm going to clear narrative with the class container, which is a bootstrap plus and also a class take center. This is also a bootstrap close inside this dude, I'll have a rule, and now I'm going to clear the column, which will span the entire it off the page. So I'll just write Seawell. And here inside this uncleared edge to bag testimony and then a paragraph day more people see seeing this and no, let's take a look starts over. So this is Ah, testimony had a and now I'm going to create the closer. So this is the default container. So inside the stiff, I'm going to create a rule and then a call. And here I'm going toe creative with the class, all who knows him and the class own t. These are all closing classes, which we need to include so that you can clear the krosen. Now let's look at the documentation off all corozal to learn how to use it. There's all grows a home page, click on this docks link and then click on this installation. And under here you'll find how to set up the corrosive. So we need to create a live with a class, all corrosion, and inside this, we're going to have the different items. So these item can also be included within Erdos, which allows us to add different items inside the stuff as well. So after this, you're going to call the plug in using J equity. So this is the record, and this all team class is used to add now buttons which I'm going to show you a little later. So after this and we're clear to deal with the class item, which is also our clothes across and inside. This day, if I'm going to create another day with a class tech center, this is a food shop class. And inside this deaf, I'll have different elements off the testimony. So I'll have. Are you off Wonder Semicon with the class affairs F E Court left? Then I'm going to create a death, and inside this I'll have the image the source will be, and I may just fold up. I have a even image, this girl. So Stephen Dorji PG, and I'm going to give some classes to it. So class equal and next or two push it to the center. A round circle, feasible sir classes. And after this death I will clear the paragraph with the class text muted Disable surplus And I just prayed. Lord him. Let's sit down. After this, I'll have another paragraph. There's a loo. The name off the person. Let's see if this and after this, I have to call the plug in. So I'll copy this line and inside the Abdur Gs folder. Since I've already done the ready function, I'll create a comment. No, is this link? No. First, let's see how worker Rosa looks like. So this is how it looks like right now. As you can see, I can slide it. Since it doesn't leave one item. That's why it's no sliding. So I'm going to include more items in it. But what I'm going to do is I'm going to just copy this item native and Pierce. It cheapens so that we have four testimony one t and I'm going to change the image. Do you do GT Defour? Now let's see if this look see, if you have this when I was in right now by the tournament is not sweet. So it's cheap each. This is the crows. All right now. So if you need toe, add some custom ceases to this corrosive. So open up style or CS is and often service section create a comment. Testimony? Yeah, I'm going to create a class. Does the money close district. Um, I'm going to assign this class poor light ums. So the maxim it will be 500 pixel because right now the items are taking up all the space which I don't want. That's why have assigned Maxwell property and margin. 50 pixel orto left rate will be orto Taborda 56 and then I'm going to add this close to this day. Best item. Copy this. Okay. Studio. Yeah, and you're seeing this. But before this class takes effect, we need to add some properties to all close. And if you go to the old grocery page, you can see different options. Click this link here. We have different properties that we can add to work Rosalie, so we can change the number of items that is displayed. We can add margin. You can set looping toe cruel force like ways. So in the Abdur Js file, I'm going toe a different property. So the Abdur Js file. I'm going to add some properties to across to remove the semi colons. And here inside this, I'm going to add different properties to across it. So the first property that I'm going to set is loop true coma or to play will be true. Or to put it day mope will be 1,004,000 seconds. So four second, the crows will loop. It'll and as you can see right now, we have three items started showing in the Carrousel which I don't want. I want to leave one item to be displayed at a particular time. Before this. I have property items and I consider this to one. No, If I see this, you can see that we have only one item, you know. Close it. And it is also our toppling itself. So now it's time to add some CSS to style the corrosive. So we have created this test item class on. We have added this toe items, right? No image is very big, so I'm going to change this. So in our the class for image dist image, just copy this and pieced it. You know, images, different images. No. Here in the CSS file testimony. Best item. Just image. I'm targeting test image. That will be 50 pixels. Height will be 50 pixels, and I'm going to give it a property object fit. Go. Let's see this. And look who have to wear this testimony class now. Images looks right. What they're teaching is the color of this quotation. Aiken. So what? I'm going to do testimony, class dark test item. I'm targeting the right time. The color It will be clear. Okay, now it's looking good. And finally, I'm going to change the phone size off. This name is looking back. So target just like them be to be done. I'll give it a class. This name one size will be 11 pixels on. We go outside in the class. Did this name Destiny? Copy this. I'll see you. No, it's looking good. So these are the navigation button that I was talking about when we included this hour. I've been team class to all grossing. So if I remove this and see? But these navigation buttons are but here I want to have it so I would place it back. So this is the testimony section off a page. Now, in the next video, we're going to create the work section. 16. Building the Work Section - 1: in this video, you're going to make the work section for of a pitch. This work section will have a magic ality with filtering options. Now here I'm going to use a JavaScript library called Phil Tizer. It is a JavaScript library that such is sort shuffle and apply stunning folders over Responsive Gallery using CSS three transitions. There's also one another, like religious called isotope, but you have to obtain a license for commercial use. So I'm going to use fertilizer, which is a free option before us. We're going to download filled razor and included in a project so up in a room and search for Phil Tizer. And this is the language you have to click, which is your distort net they're against. Look on, just get up. Click here cloning download and know lots of fire. No extract. The file expended another dissed folder. Just drag this one. Jake. Very doubtful. The residue or mental gears it on library folder. No one read the Scripture. Pulling this for script. Some see equal limp right click really in. Just copy it. Copy this whole part and business. So, no, let's understand how to use it by going through its documentation. So this is the website here. If your school down, you will see this Demo Image Gallery which shows all the feature like filtering, sorting, shuffling, searching a texture for a case we're going to use default option on this one here. This is some buttons and the images are tagged toe these buttons. So if I click on cities, all those images which are tagged with this will be shown. So this is the basic working off interruption. Now let's take a look how to implement it in Accord. So click on this tutorial link after Congress getting started here. Of course, we need to add a library in a project which were already done. The second step would be to create those button for filtering, so these Britain will have a data actually group. They're tough filter which decide how the filtering is done. It is like a tag number, which we're going to assign poor images. And when any button is pressed, this tag number is matched with the tag number off the images and then those images are sure. Now, finally, we need to add the images in Art Gallery for this you need to create a group which can be a simple date like this one with class for look and dinner. This day will hold all the images off Galati No, inside this container that we will add the images with actually book their talk category and a class called filter writer. As I've told you earlier, that we need toe tag images and we do this using that group they talk category. So if I click on this button with data category wonderful one, all those images with category one will be shown. So this fund will be shown. This one will be shown as this is also having Category one, and this one will also vision. But if I click on a button with category two later filter to only this one will be shown since to take a degree to is absent in one entry. And finally we need to write the Jake Way or javascript moonwalk it. So let's jump back into court and create our image duality 17. Building the Work Section - 2: in this video, we're going to write the court to implement the image gallery. So begin to comment. And right work. No better per section class with the class. Look, I'm going to also include a class are peaches and Universal parting. No Creator David the class container. And I want to give a class next senator, which is a bootstrap plus two central in the text, not Creator David. A classroom inside this will create a cold plus give margin five bottom and inside. This will create a hurting edge to work on the paragraph fort I have created after this cleared on a Vero inside, this will create all those portal created with a close call. Access 12 mx orto nb five margin bottom faith. I don't say this will create button with the class beauty in and our hyphen button. So these CSS classes for Burton have created already. I'm using it here also. So here, we need to give a troop data for your job on. Oh, I'm just going to copy piece this a few times. He had a change it but one, this will be them. Do. This will be a CEO three. This will be, let's say, graphics and for let's sit ups. Now that we have created the patents, it's time to create the container, which will hold the images. So after this room I would create a class creator, David, a class container inside this all created with the classroom and Phil Tucker dinner and also a mix order and now given to our damages. So the putative with the class multiple boots chef class for responsive saves exist. Six. Call Send four call MD four item and a class guard Rapper vision would write this uses in a short also create a tribute Dido Captivity. Well, this and I will give this image a tag one inside. This dude got so cleared one another date on inside this image images All the images are in the images folder here the new one, not jpg, I know. Unable to give her class, I am deployed. It is a bootstrap. Plus, I'm just going to copy this whole court. Find more times because I want six images and we'll change the image for the blue, too. On the data card. Agree. Let's say four and again it is this. Let's w it do you take out everyone? Four. And okay, is this four, three and two? Let's it W six. Let's of one four and do W five and one more time. Let's have one Done three, and that's when we w seven. Save this and let's take a look. So this is a hoax section. It's not going to work because we need to the RTG Equity to activate this. To write the J query activated Kowtow Abdur Js file And after here and here, right vote. Let's say this is a very building and here I have to write the class off the container, which holds the image. So this is the class filter container. And copy this and the studio. I can walk it. I had a parameter animation dilation born fief. Let's see this. And now let's see for click on Web, all those images with a tag. It's too. So if you see here, the Web tag number is one. So all those images with tag number one are shown you. If I click on this issue sus tag number to all those images with tag number two did that particular two will be sure and finally and he parade. The CS is for the class card rapper, which I used it for. Some which are used to add some parting so it cannot stand or see Assis. And after the testimony, we're gonna comment. Look not target the work class and then guard Ripple here. I'll give a pardon. Top 15 pixel on a starting bottom 15 Texas. Let's see if this the fish. So you have added the party. So this is the work section? No. In the next video, we're going to make contact section. 18. Building the Contact Section: in this video, we're going to make the contact section off a page so the contact section consist off three rows. The first show contender hurting and, uh, text in the second row consist of Aikens and some text in the third row insist on some form elements. So let's create this contact section. So after the book section began to come in Contact Section, he will create a section with class contact. And I'm going to add our parting close and a background plus, which have already declared I'm going to create a class, and I'm going to create a David a class container and extend inside that I'm going to create three rules. So let's creative with a class rope first. Inside this, I'm going to create a class called then it's true that corn us, then a paragraph ter free booze gonna talk me. So this is the first rule No gin and will create a row for the Aiken's creator. Do with the class room. I'm also going to give Imagine margin. Top five inside. This were clear to call him before, so just there's no consent of three column, so we'll divide it for into three, it's gone M d four. And inside this whole place that I can in the text first. That would duplicate this two more times. No, inside this creative with the class our Aiken, I'm going to write the CSS rule a little later. Miss Future do inside this do inside this, Dave, I'm will clear the attack with class F. A s. A fee more by hold. This is a photo Semicon. Let's see. And let's take a look. So we have this icon here. No get. I'm going to create a death with class tech center. Inside this, I'll have a think tank called us and some paragraph time phone number. Save it. Have a look. Okay, It's when Now I did this class are Aiken. So I did this class start. I can using this. I'm going to increase the sites off this phone. So what I'm going to do is just copy this court and paste it here and one more thing. And now I'm gonna jean something. Yeah, I'm gonna change this with this affair, and we look, that's a contact us e. Miller's contact. No. Here. I'm going to change this class to map the These are all photos of Michael. We'll find this court when you don't know the Qantas American or you can reference it from its website. So you would be was it does. You don't know. I'll see you. It Why they even liken is not Cherie. Let me check or miss people. Misspell it. So now let's increase the size of this phone. Also, Michael, we'll go to style of CSS and right after the work section and create a comment. Contact us, and I'm gonna get the section. I've gained a class contact inside this. I have our Aiken foreign. Saiz will be 50 pixels and text Elaine will be center. That's if so. This is a second room. No. We're going to make the third row, which consists of the form element right after this death. Clear to live it class room Also margin. Top fight inside. This day will create a class called and now I'll create the former element like the phone tag. I removed the action, but I don't need it inside. This form does a creative with the class form room. This is a boot shop class form through and inside this we need to create groups, formed groups. Those which is also a bullshit class will create another day class form group and say Skol m d six. This 11 full bottle fixed class will be form. Control is also good surplus and place for it takes feel real name. Then again are prepared. Another form group called 76 This thing I created Put for email class. Field reform Control. Please hold it up, Human. For a minute I pull you. It will call Mt. Six. Let's save this. So this is a decks field for name anemia. After this, I create another death with a close form group. This will be input next class. Philby, form control, please. Florida will be subject after this. I'm I've been going to Creator David Class form group. Now. This time on cleared text area. I would have delayed the name and I d. Let's give it a class form. Control. The rules will be seven. And I'm going to remove this cold also had a placeholder. Your message on the state re saves No. So this will prevent the recital. The text area. Let's say this. So this is the text area and finally going to create the bottle after the text Media Bartoli type filled summit class will be beauty in our begin We were the class floor, right? It's also good shop class and you summit Let's if so, this is the bucket. So this is the contact section off a website on in the next video, I'm going to create the foot. 19. Building the Footer Section : photo section off a pitch so a photo looks something like this it has formed, or some Aiken's and I have used a light tags to display these iPhones. So let's create the foot off the page right after the contact section cleared are common for the and then I'm going to use the photo tag, which is a new HTML five times and inside that I created with a class container. And I will use flex box to align these Aiken in the middle. So first Alou's deflects, which is a boot shop class, and I lose a lying items center and also just differently. Content center inside this device created with a classroom, and then I'll give it a class call. And then lt it today it class are Aiken, which would hold all Lycans and also give a class take center and marching top three in this developed to you for your time and then a life this away will have a class list in line. I think this is a good chef class, and he will use a time inside this. I use I tag with class. If it be, If he Facebook, let's see if this and let's take a look so I can showing you. No one will just copy piece this three times and I will change Facebook to Twitter B. Has you too close Nazi this and have a look. So this is the Aiken's. And finally I'm going to add the paragraph with class. Next. Mutar and I'm also giving enamels, and I'm also will give it a style foreign saves. 14 pixel. This is in line style and for the copyright symbol you need to write and percent copy in the semi colon in the late copy, right? Rude by then fight symbol 20 All use. Let's see if this and have a look. So this is the copy that symbol on the copyright announced. Time to style the for the section. So go to style and right after the contact section and will prevent a comment photo. Then I would have dug it. Photo itself height Really, with 200 pixels on background color will be t 33333 Let's see if this never look to this color and then I'm going to target diet pills are hyping Aiken. Your tag upon size will be 20 picks in the color, it will be it for 8484 Fighting all wrong parting will be 10 pixels. Border will be one pixel, so lid and again the same color hash it for 8484 And for 30 years I will be 50 puzzled so as to give it up around corners. Enough to this, I will create the Khobar State on Steichen's Our Aiken. When the link is over, border will become one pixel, so Lid has e the car level become e and transition. Really 15 seconds all I have not added height. This container. It's a result herbal shop class, which adds 100 pixel height. So 800. And now, if I look, it's vertically aligned. And when I were the color changes as well, and the transition is 0.5 seconds. So this is the photo section offer pH on in the next video. I'm going to add this pre law order of this tradition effect and also some little tweaking like this color change on this animation and emitting up. So these are small little addition to our pictures. I'm going to add in the next thing videos 20. Final Touch - 1: in this video, I'm going to add five American go of a pitch and also change the type two and at that class to a website. Just collect loss. What type element? So let's start. So in the head section we need to create a link and instead of style, shit relations style, shoot, have parade Aiken and then have to specify the edge of So I have the Falcon in the images. Folder five don't like Oh so right images. Feb not ice you. So let's save this and have a look. So a family couldn't appears here, just up. Now let's see in the title portfolio template. So the startled will also be shown here in the top. Now I'm going to add the freeloader that you have seen here. So this pre order to circle and the transition effect to a page. So for this right after the body time and will create a day with class real order. And inside there's our creator, David Close circle that saved this photo style loss uses. Then we'll do right the style for the preorder in the top section here. Are we gonna comment key Florida? No, You're deserted and I'm going to use to pseudo element before and after to create that transition effect. So, freeloader, before confident, will be nothing. Position will be absolute important will get zero because I'm going to divide the entirety of into two parts 1 50% which will come from the bottom and 1 50%. This will come from the top. So this one just before limit, will be so this before the limit will stick to the bottom. That's why bottom zero, what will be 100% and height will be 50% on background color will be black. Then we'll do specify your transition one second. Likewise, I'm gonna create after element. Just copy this one more time and paste it after here Topped will be zero. I want this to come from the top with 300 heart 50 background color. Chris will be seen and after this I'm going to clear the class complete so this class will get applied to the pre order When the page lords completely. This I'm going to check using javascript. So here I'm going toe move before limit minus 50%. And like ways, I'll just copy this one more time and I'm going to move the oft element for the top of the screen minus 50 person so that it is out off the screen and finally on complete. I would change the visibility stupid. And now I'm going to write the court for the SoCal circle Position will be absolute because I want to place it in the center of the screen. Dr will be 50% left with 50% transform. Translate, Translate it minus 50% minus with people send what will be 100 pixels quite fully. Be 100 pixels. Border radius, really 50% to make it a circle, compute circle, border, Saudi borders ideas. Then the border will be 10 pixel soldered and we'll specify the color using RGB value to 55 to 55. 55 because he I can't specify the transparency. Transparency will be 0.1, then border don't then picks him. Solid has e. It's six a three. This will be the small rotating part off the circle. I'm going to specify animation and emit too silly for 1.5 seconds in Finite. And Lena, I'm gonna write the Caesars for this enemy it a little later and finally Z Index, it would be give it up very high value so that it is at the top off a real women. After this I specified I like the key frames rules here at 0%. I want transform Translate it minus 50% minus 50%. The zero G at 100%. I just would have copied this and boosted. Here here 3 60 dignity. We have returned. The sees this part off a pre order. Now it's time to write the Jaqui part. Well, look, it's a very short court which you have paraded Abdur Js file right at the very top I'm going to use equity. Been doing well selectable object one Lord evil. When were you gonna function? I'll select a freeloader and I will add class complete. So when the brother lords the page completely, this class will get added to a pre order and it will get disappeared. This complete class you get added and the visibility will be hidden so it will get disappear so it will be hidden. So no, let's check for save this. Go to a pitch that's three fish, See a transition effect. But you don't see the circle here because it is learning very fast. Just a hint of the circle is being shown some federal work. That's right. Click, click, Inspect, Go to network tab here Changes to Let's just throw three G. This is a distinct alone. Let me change is too fast three d, No one singing I'm gonna do fish off Preorder circle is not moving on all these navigation bar And this content is showing on top off a pre order. You have to do one thing. So here I have mid April two times at the rate symbol. So let's see if this in this check I'm simulating a slow Internet connection to show you the pre order machine. Just only see, our circle is an emitting, but all these texts are shown at the top. I don't want this. I only want to spill orders and emitting circle tradition and the rest or should be done before this have to do one more thing. Try and stay to a prerogative here the position will be fixed, stop will be zero left will be zero. It will be 100% in the stain on going dig, Then dive it height will also be 100% my own color. It will be black and Zealanders, which is the most important thing. Will be 9999 it so ah preorder our circle has those index 99999 So it will be at the top. And after that we'll have this live. Please order with the index 99998 So let's save. No, let's check. I see. No, no Continous Menschel on Don't leave. You see the pre order? We have treated the freeload off a pitch. Let me know style this content here, so go to index dot html. And this is a type element. This is a country which is getting type span. I'm going to style it style. This is in line Stein and will change the color, don't you? It's six it three. It's 6 to 3 on reaching the forint. Vit the board. Let's see if and this chick No, it's looking good. So in the next video, I'm going to add some animation to a page 21. Final Touch - 2: in this video, we're going to add animation toe elements off a page. So I'm going to use CSS Library called Animate Search on Google and emit CSS. So this is the link animal dot CSS. Click on it and click on view on Get Up. So the only thing you need to do is to add the CSS file in the head section, and then you need to add these class name to the limit that you want to anyone. It's just that simple. So what I'm going to do is force. I'm going to download it, click here and download the file. It's a very lightweight fight. Extract it. And this is the final animate Nazi Assis. You just need to drag this lip folder, and now I'm going to link it up in the head section. So here, right after this, I really use the link. Dad, didn't that sheriff lived? And then when thought ceases, now that we have linked the animal DOT sees this file into a project to our animation, it's very easy. You just need back to classes one which is important. The animated class and the second, the type of animation that you want. So let's add on a mission to this. Dave, this one this entire day here, I'm going to add the animated class, which is very important, and then type off an emission lets it feared in up. Say this on va native fresh. You receive that this intersection slightly move from the bottom to the top. So this is how you add animation to the elements. Now I'm not going to add an emission to each and every off element because it's very easy and you can do it by own. So this is all about animation.