Portfolio Website Using HTML CSS Project

1. Portfolio Website Project Introduction: Welcome everyone to the complete course of portfolio website using HTML and CSS. So this course consists of two modules. In the first model, we are going to see about how to design our portfolio website using HH TML and CSS with different sections like home section, A section, and contact section. In the second model, we are going to see about how to deploy our project using Netfi website. So this course is very, very, very useful for the beginners who are trying to create portfolio website using HTML and CSS for the first time. Also, you have to familiarize yourself with Netlify website for deploying front end websites. So let's get started. 2. Portfolio Class 1 : HTML CSS Introduction: Come, everyone, before going to the project, we are going to discuss about what is HHTML and CSS. First, we are going to discuss about HHDML. So you need to know about the full form for HTML. So the full form is nothing but hypertext markup language. So HHTML is a standard language that can be useful for creating the structure of the website. So if we want to create any website, first, you need to understand HTML. And then beginners can easily understand HTML because the syntax is very, very simple compared to other programming languages. So that's the third point. So after you master HTML, then you can study about CSS and JavaScript for creating your project. So that's the simple introduction to HHTML. So after that, we are going to discuss about HTML syntax. So HTML contains elements and tags. So elements are nothing but the head, body, HTML. So these are all the elements. And then tags are nothing but opening tag and then closing tag. So this is the syntax for opening tag. So this is the syntax for closing tag. So HTML contains elements and tags. So this is the simple syntax for HHTML. First, you ought to create HTML tag. Then you ought to type head tag. Inside the head tag, you have to type the title of your website. So I can type HTML tutorial. You can type your own website name. After that, you ought to close the head tag. So then you have to open the body tag. Inside the body tag, we can type our own content. So after that, you have to close the body tag, and then you have to close the HTML tag. So this is the simple syntax for HTML. So attributes are nothing, but it is like a properties. So for example, image contains the properties like height and width. So that's the attributes. So attributes are nothing, but it is an additional information about the element. So element has nothing but paragraph, body, head. So these are all the elements. So after that, we are going to discuss about Hah DML elements and tags. There are many tags in HTML, but we are going to discuss about important tags. So the first one will be heading tag. So there are six heading tags like Hatch one, hatch, two, hatch three, hatch four, hatch five, hatch six, so there will be six heading tags. The sizes will be different in every heading. After that, you can see the paragraph. So if you want to create any paragraph, any sentence, you can use paragraph tag. And then you can see image tag. So image, if you want to insert any image background image for your website, you can use image tag. And then you can see the Link tag. So if you want to link any website in your own website, you can use Link tag. So these are all the important tags. So there are many tags, you have to understand that. So now we are going to discuss about what is CSS. So CSS stands for cascading style sheet. So if you want to create the structure of the website, you ought to use HHTML. If you want to create the design of the website, you ought to use CSS. So design can be light changing the background color or changing the font color or changing the font size. That will be the design of the website. So there are three types of CSS, inline CSS, external CSS, and then internal CSS. For our project, we are going to use external CSS. So now we are going to discuss about the CSS syntax and how to create external CSS and include the external CSS inside our HTML file. So for that, you have to create the HTML file. You can type your own HTML file name. After that, you have to type the basic elements in the HTML. So you have to type HTML tag, head tag, and then you have to close the head tag, and then you have to create the body tag paragraph tag and closing the body tag and then HTML tag. So if you want to include your external CSS file inside the HTML, you are to use the link so inside the head tag, you have to type link tag. And then you have to type the attributes like relays and equal to style st and then reference equal. And then you have to tie the external CSS file name. So style dot CSS will be our external CSS. So this is the syntax for including the external CSS inside our HTML. So after that, you have to create the external CSS file. So you have to create a new file, and then you have to type the name same name, you have to type the same name. That is tile dot CSS. And then inside that, you can type the styles. If you want to change the background color or if you want to change the height and width of the image video, you can type your own style in the external CSS. So this is the syntax. So after that, we are going to discuss about some of the CSS properties. So the first one will be font style. So if you want to change your font family or font size or font weight, whether it can be italic bold, that can be the font styles. And then you can see the second property, that is the color. So if you want to change your background color or image color or border color, so you can use the color properties. And then you can see the third option, that is the layout. So if you want to change the paddings merge in borders for your website, you can use the layout properties. So this is the simple properties in CSS, but there are many properties you ought to understand that. So now we are going to discuss about what are all the job opportunities that you can make when you learn HTML and CSS. So if you learn HTML and CSS, you can become a front end developer or rex designer. So there are many job opportunities when you learn HTML and CSS. So that's it guys we have successfully completed our HTML and CSS introduction. Now we can create our portfolio website. 3. Portfolio Class 2 : Running HTML CSS in VScode: Welcome, everyone to the first class. In today's class, we are going to discuss about how to create portfolio website using HTML, CSS, and Netlifi. For the first, we have to create a folder for our project. So after creating the folder for your portfolio website, you have to open that folder using VS code or any other IDE for HTML and CSS. For the basic, we have to use VS code for our portfolio website. So after opening your VS code, you have to create a new file for the HHTML. So for creating the new file, you have to select Control end creating the new file, you have to select the language. So we are going to type HTML. So you have to type HTML. So after that, you have to save your file, you have to type Control. And then you can type your own file name. I'm going to type index dot HTML. For the basic, we are going to type index dot HTML. So you have to save the file, and then you can see index dot HTML file created. So after that, we are going to create CSS file also. So and then you have to type the CSS file name. So we are going to type style dot CSS. So we have created two files HTML and CSS. So HHTML is very, very useful for the body and the structure of the website, and then CSS is further designed. So for our portfolio website, we have to copy our profile picture and then paste in our portfolio website folder. So for that, I have created my profile picture for my portfolio website, and then I'm going to copy paste in my portfolio. Project folder. And then you can rename your PNG R JPG, anything you want. So you have to copy paste your image. So we are going to use icons for our project. For that, we are going to use box icons. So you have to open the link. So box icons contains all icons for our project, like Facebook, YouTube, Instagram, all icons will be generated in the box icons. So you have to select the UCH so for our HTML and CSS, we have to select USHe and then you can see the code for the usage of HHTML so you have to scroll down. So you have to copy this link for your project. So you have to copy that link, and then you have to paste that link in your HHTML. So we are going to copy that. So before copy paste our box icons, we are going to type the basic elements of HTML. So first, we are going to type type HTML. So that's the common in HTML, you have to type doc type. So that's the tag, and then you can type language English. HTML language will be English. You can type Russian. If you want Russian, you can use Russian also or any other languages. I'm going to use English. And then head tag. So inside the head type, I'm going to type the title for my project. So you have to use the title tag. So you have to type title so inside that, you have to type your portfolio. So you can type your own name. So I'm going to type portfolio. So after that, you have to copy paste that link. So you have to copy paste the CSS link. So you have to copy paste inside the head tag. So you have to remember that you have to copy paste inside the head tag. So after that, I'm going to type my CSS file. So I'm going to link my CSS file for that oto type. Link relation equal to stylesheet. So attribute will be relation style sheet. And then you have to type the reference. So reference will be style dot CSS. That's your CSS file name. So these are all the link which can be used for our portfolio project. So that's it. In today's class, we are discussed about the basics of HTML and CSSI for our portfolio website. In the upcoming class, we are going to design our portfolio website like home page, About page, and contact page. So let's see in the next class. 4. Portfolio Class 3 : Create Navbar : Welcome, everyone. In today's class, we are going to discuss about how to create navigation bar for our portfolio website using HTML and CSS. So before that, we are going to see an example for how to run our project in the website. And then you have to select Open with Live Server. So you can see your server is started at the port 5,500 and also you can see the Local host and then your HTML file, index dot HTML. So that's the way of running our output in the website. So for that, you have to download an extension, so you have to type Live server in VS code. So you have to type Live server, and then you have to select the first link so there are many link you ought to select first the link. And then you have to install the live server for your VS code HTML. So after that only, you can see your output in the website. So for that, you have to select open with live server. So that's the concept of running our project in the website. So after that, we are going to create our body elements for our HTML. So you have to type body tag. Inside the body tag, we are going to create a new section or header class. You have to type head there tag, and then we are going to create a class. So inside the quotation, you have to type the class name, headdre and then you have to close the tag. You have to remember the closing tag and opening tag. So inside that, we are going to create an anchor tag. So anchor is used for link. So HadufHdof is nothing but relation or reference. And then we are going to create a class that is logo. Logo for our portfolio. And then we are going to create a span tag for the name of the logo. So for the name, I'm going to use my full name Run. So I'm going to use my name Run. So after that, I'm going to create a navigation bar for my portfolio. For that, you have to create a Nav and then class name will be nav bar. So inside the nav bar, we are going to create anchor tag. So Hutufy has for the same page class equal active active class for our portfolio navigation bar. So I'm going to type portfolio. So portfolio will be active. And then I'm going to create other anchor tag for the links like home section, A section, project, contact. For the basics, I'm going to create four section only. If you want more, you can use more options. So I'm going to type A and then I'm going to type contact. So these are all the three sections we are going to design for our portfolio website. So if you want more section, you can also design that. So, furthermore, you can use project, education, certifications, or any other portfolio you can use. So the nav bar is completed. We are going to create an button for the contact. So we have to type HatufPAS will be contact. We're going to create a contact contact me. So it will be considered as a button for contact. So if I run the code, you can see automatically generated in your HTML website. So we are going to design our HTML using the style dot CSS, so Hach t is for the structure, CSS is for the design. So default to type this code, and also you have to remember the syntax. First, the margin will be zero, and also padding will be zero. There will be no margin and padding, and box sizing will be border box. And then font family will be SNSerif pop ins. You can also use your font. There will be times new Roman Aerial SNSerif many other font family, you can use your own font. And then text decoration will be Nne. So text decoration like underline cross, there will be no text decoration. And then list style is also none. So list style like underline. So if I type none, it automatically remove all the list style. So you can see underline are removed. So these are all the default. So after that, we are going to create a design for each class. So first we are going to create a class for head there. So inside that, you have to type. Dot head there. So the syntax is for the class is dot head there. So class name head there. And then curly brackets. Inside that, you have to type the position will be fixed because the navigation bar will be fixed. So head there is completed. So inside the head there, we can see the elements like anchor tag, nav class, and then button. So we are going to design one by one. So you have to open the class CSS again. We are going to type top will be zero and then left will be zero. And then width. So width will be 100 percentage. Padding will be 35 pixel 12 percentage, top and bottom right and left. And then background color. So we are going to create color with RGBA, so red, green, blue, and Alpha. You have to type the value for four elements. So first, I'm going to time zero, zero, for the green, also, I'm going to time zero. So I'm going to need the help of black color for that only R zero. If I time 0.2, it will consider as black color. And then we are going to need the help of bag drop filter. It is blur. We are going to need the blur option. So inside the bracket, you have to type the pixel ten pixel. And then we are going to need the help of display display will be inline block or flux. Whatever you want, you can use that. I'm going to need the help of flux. For flex, you have to type, justify content will be center. A space between. If you want space between your elements, you can type space between. So I'm going to type space between. So space between portfolio about project and contact. Align items will be center. So all the items will be in the center position. So East index is like stack of the elements. So 100. So these are all the design for our header section. So if I run this code, you can see our design is automatically generated for our HTML. So this is the design for our navigation bar. So after that, we are going to design our logo class for that to type dot logo. And then we are going to type the designs of the logo. So first, we are going to use the font size. So you can type your own font size. I'm going to use 25 pixel and then color. So color will be white. So I'm going to use white color So after that, I'm going to use the font weight. Whether it is bold or italics, you can use font weight. 600 will be considered as bold option. So you can see the thickness of your font and then transitions. So it is one of the graphic options. So I'm going to type three point is E. So you have to remember what is E, what is E in, and then what is is in and out. So I have to remember the concept of E so you can see the graphics like Run, you can see in the element Run, you can see the transition 0.3 is Es. So Es is nothing but slow mo option. So the motion will be slow. So we have completed our logo, so that's the Run. So logo is nothing but Run. So after that, we are going to design the logo with the Hover. So Her is nothing but a pseudo class. You have to remember what is the pseudo class. So Her is nothing, but if we touch the element, it will generate a new design. So that's the use of Hover. First, I'm going to type the color. So if I change the color to R insured, so white will be changed to R insided. If I move my cursor towards the Run, the white color will be changed to R incred. And then text Shadow. So you can use two shadows. The first one is the text Sado and then second one will be the box shadow. For the RN, it is a text. For that only we are using the text sado. So we can type zero, zero, 25 pixel, R and Crate. Shadow of my text will be red. So after that, we are going to use transform how to use the scale option also. So you have to type inside the bracket, you have to type the value that is 1.1. So for the beginners, you have to understand the scaling option is nothing but zoom in and Zoom out opsons like zoom in and zoom out. So you can see the Her design is generated in our HTML. So white is changed to Ngute and also with scaling option 1.1. So you can see it gives more beautiful to our project. So that's the use of Hover. So if you don't want Her, you can also delete that. So Texas Sado also Net. You can see the Sado of Run so with the pixel and then transform. So that's the use of H. So after that, we are going to design. So after that, I'm going to design the span tag, so span tag. So inside the span tag, I'm going to use my full name with ICL, so RLRS. So that's my ICL, so I'm going to insert that RS in the span tag. So I'm going to color my span tag with RN red or you can type white or black, whatever you want. So you can see RNRg with white. So that's the use of Span tag. So color is changed for my initial and also my full name. So that's that were completed the span tag. After that, we are going to design for our navigation bar, so you can see the class nav bar. So we're going to design that so inside that, you can see the links. We can also we are going to design that out. So first, we are going to use the nav bar. So N bar is a class. You have to use dot N bar, and then A will be link. So that's the A link, and then we are going to design for our links. So first, so you can see VS code is suggesting the code. So you can also trust VS code. So I'm going to change the pixel. Okay, it's good. I'm going to change it at 15. Okay. It's not bad. So I'm going to change the font size to 15 pixel, and then color will be white, or you can type your own colors. I'm going to type white. You can see the change of the color, and then you can say, font weight, so you can see the thickness of the font. So there are many font weight options. You can choose any one of them, 500, 600 bold italics. You can type your own font weight. I'm going to type Margin option. So you can type top bottom, left and right. Or two optonsT options is nothing but top and bottom right and left. So you can see the gap between the elements. So so it gives more elegant future for our project. After that, we are going to type bot or bottom. So we have to type three pixel, solid, transparent. We are completed the border bottom for our project, and then we are going to use transition. Again, I'm going to use the seconds three point seconds es. So you can see the transition my element. So if I save and run the project, you can see transition. So that's it. And then we are going to type O for my nav bar. So if I touch that, you can see some design. So for that only we are going to use the four. So we are to use O for active elements, and then non active elements also. For that only, we are going to use a dot over and then and then N bar A dot active. So inside that, we are going to design. So I'm going to type the color orange red. And then border bottom again, I'm going to tie three pixel or two pixel you can tie. I'm going to tie three pixel solid orange red. So you can see the active element color is changed to portfolio from white to orange red. So portfolio is my active element in the navigation bar. So you can see the underline for my four properties, also you can change the color from white to orange red. So we are completed our design for the N bar A. So after that, we are going to design for the contact. So that also belongs to the header section. So I'm going to type contact dot contact. So that's the class. So I'm going to type the design for my contact. I'm going to create a button like contact. So for the button like contact, you have to type the padding first, ten pixel, 20 pixel, top and bottom right and left. And then background color. So I'm going to type white. So it looks like a button. So that's why you have to use background color. After that, you have to use the border radius so you can type border radius or color for the font. So if you type black, so font will be changed to black. So you can see, contact me is color font changed to black. And then I'm going to type border two pixel solid transparent. So after that, I'm going to type the font size. So you can type your own font size. So I'm going to type ten or 16 pixel. And then I'm going to type border radius. So I'm going to type eight pixel, 20 pixel. If I type 20 pixel, you can see more cur. So if I type ten pixel, you can see less amount of curve. So based on your own design, you can type the border radius. If you want more val Spar circle, you have to increase the pixel. If you want square or rectangle, you have to type less amount of pixel. And then letter spacing between each letter C space O space NT space. So that's the use of letter spacing. So to type the pixel in less amount. If you type 20 pixel, so C will be in the left, and then O will be in the right. So that's why you have to type less amount of pixel. So one pixel is enough for the contact me. And then font weight will be bold. So if you want more bold, you have to type 600. So you can see, contact me, thickness is changed. So after that, I'm going to use the transision. So if you want any other transitions, you have to use that. So I'm going to use the as option again. If I save the run the code, you can see the transition. So these are all the contact designs. So after that, I'm going to use the Her option again for the contact. So I'm going to type contact. So contact is the class, and then Her is a pseudo class, I'm going to type the background color first. So background color will be changed to orange red, and then box shadow. So the previous section I told there are two types of sadoFs tone is the text sado and then second one is the box sado. So contact me is on box, so that's why we are using the box sado. So Sado will be orange and then font color will be white. So you can see the design change in my contact me buttal. So if you want any other color, you can use that. So based on my portfolio, I'm using orange red and white. If you want purple, you can use purple. So that's it, guys. In today's class, we are discussed about how to design the navigation bar for our portfolio website. So in upcoming class, we are going to design our portfolio website sections about contact. So let's see in the next class. 5. Portfolio Class 4 : Home Page: Welcome, everyone. In today's class, we are going to discuss about how to design our home section for our portfolio website. For that, we are going to create a new section within the class home. So that will be our home section for our portfolio website. So how to open and close the tag of the section. So inside that, we are going to type the HTML elements for our home section. So first, we are going to create a class home content. So that's the shortcut for creating the DV so you have to type dot class name home content. So our class will be foam content. So after that, we are going to create a HH three tag that is heading, so I'm going to type Hi or o you can type your own heading. So I'm going to type my name. So for that, I'm going to use H one tag. So you have to type IM I'm going to type IM you can type your own words. So then I'm going to use the span tag. RN RS. So that's my full name. So I'm going to type Spantank as my full name. And then break. If you want break, you can use break option. So and then I'm going to type my profession, so you can type your own profession in your portfolio website. So I'm going to type cybersecurity Analyst. So after that, I'm going to type the paragraph. For the common paragraph, you have to use the low um. So if you type low um, it automatically generates some paragraph in the VS code. So this will be our default paragraph for our bio section. So if you want you have to type your own paragraph for your bio. So I'm going to type the common paragraph so I'm going to create a new button, resume or CV file. So I'm going to create a button to download my CV or resume. So for the portfolio, it must contain a resume. So for that only, I'm going to create button for downloading my resume. And the button class will be button one. So it will be in the one div section. So and then I'm going to create a new classes for my project. I'm going to type image. So image is for my portfolio website. So you have to input your image in your project folder. And then I'm going to insert my image in the HTML. So you have to remember that tag that is image source, and then you have to type the image name home dot PNG. So it contains my portfolio picture. So you can see your picture is generated in your website. And then you can see, also the CV file download button. So these are all the factors we are going to need for our Com section. And then after that, we are going to discuss about how to design our Com section for our portfolio website using the CSS. So you have to open the CSS, we are going to design one by one. So foam. So that's the class. So the starting class for our home. So for that, we are going to design one by one. So I'm going to type width will be 100 percentage, and then height. So if you want height, you can use height or minimum height. I'm going to use minimum height will be 100 VH. Every time every time you have to save your file, so you have to save your file every time. After that, I'm going to change my background, you have to type the RGB. I'm not going to use RGBA, I'm going to use RGB. So there will be three values. So and then I'm going to use display option, so flux can see all changes and then align items. So center, I'm going to align all the items in the center and then I'm going to gap between the elements, so you have to type the value or EM or EM. I'm going to use EM, so you can see gap between the elements. And then padding, so padding, I'm going to type top and bottom with a tatty pixel, left and right with a total percentage. So padding is completed. So that's it. So that's it. We are completed the code for our home section. So after that, we are going to create a design for the home contents. So contents will be like Hutch three, Hach one paragraph. So these are all the contents between our home class. So we are going to see that how to design the contents for our portfolio website. So you have to type home content and then max how to t the width of your contents, 800 pixel. So we are going to create designs for home content elements. So the first one will be three tag, so heading three. So how to that three element. You have to type the font size for your element. If you want more bicker size of high, you can tap more bicker size. So you can see so it's not suitable for my project. If you want big size, you can use that. And then home content H one. So Hach one will be I am my user name and then my profession. So if you want to change the font size, you have to type font size. So it is not suitable. So I'm going to change. So it is one of the bigger one, so I'm going to change to smaller one. So I'm going to type 32. So you can see it is suitable for my portfolio. So Hutch one and Hach three are completed. So if you want lines high, you can also use line height 1.2. So Hach one and three are completed. So after that, we are going to design the paragraph for our home content. So I'm going to type the font size. Font size will be 18 pixel. So it is okay. And then if you want font family or font weight, you can also use that. So margin between the elements for that, you have to use the margin for the convenience of paragraph up and down left. So you can see it is more elegant for our project. So I'm going to use font weight. If you want more thickness, you can use font weight. So I'm going to type 500 or 600. So you don't have to type the pixels. So font weight does not have any units. So width will be 345 pixel display will be flux. And then gap will be two em So after that, we are going to design the CV button. So we have to open the CSS. We have to type the code for the button. So button one. So that's the class. So we are going to change the color, font size, font family, Her all other options for our CV file. So I'm going to type padding 15 pixel, 20 pixel. So top and bottom left and right. So padding have four elements, top bottom, right, left. So it goes around clockwise direction, first, top, second, right, third, bottom, last one will be left. So you have to remember the concept also. Margin also is same as padding top, bottom, right, left. Border is also same as padding top, bottom, right, left in clockwise direction. So if you type single line code also or multi line code also. So multiline code will be considered as padding top, padding bottom, padding right, padding left. So you can type in single line. So single line is nothing but 15 pixel and 28 pixel. So border radius, if you want more curve, you can use more pixel. If you want square or rectangle, you can use less amount of pixel. So I'm going to type the font size. So font six will be 18 pixel. So you can see our button is ready for our chom section to download our resume. And then letter spacing, if you want letter spacing between elements, so you can use less amount of pixels. You don't have to type ten pixel or 100 pixels. It will not be convenient for our button. So we designed our button almost completed. So I'm going to increase the thickness of my button, so we can see the thickness 600. And also, I'm going to use graphics that is transition 3.3 is 3 seconds, that is and then cursor will be pointer. So if you click that, you can see the cursor is pointer. So we have completed our design for the button. So after that, I'm going to type hover. So hover is nothing but a pseudo class. So I'm going to tie the background color, so white. And then color will be black. So background color is for the background. Color is for the font. So border two pixels solid and transparent. Okay, see the four graphics. So the colors and fonts are changed. So that's the four for our button. After that, I'm going to change the button to below the paragraph. So for that, you have to change the sum of the codes, so you have to remove that die. So I'm going to remove that de, so you can see the button is below the paragraph. So it will be more beautiful for my portfolio website. So if it is in the center, it is not very beautiful. For that only I've changed the code. So you can see it is more beautiful for my portfolio website. So our com section is completed. So after that, we are going to design for our image. So we are going to create a design for the image. You have to type the class name image box image. That is the element, HTML element. So and then you have to type border radius for more vowel shape, you have to type more percentage. So you can see val shape of your portfolio picture. And then with 550 pixels. No, no, it is very larger for my portfolio. So how to change the pixels. So I'm going to type 450 or 350. So I'm going to type 400. So 400 is not also 300. Okay, 300 is suitable for my portfolio. So also, I'm going to change the border radius. So border radius will be 30 percentage. So it is more good for my portfolio. So after that, we completed the image. We are going to create the scrolling option for our website. For that, you have to use the web tit scroller. So that's one of the element in CSS. We are going to change the width of our scroller 25 pixel. So you can see our scrolling option is changed. I'm going to use the second option that is thumb. We're going to change the color of our scroll, so I'm going to change orange red. So you can see white is changed to orange red. And then I'm going to use the whip stick scroller again. I'm going to use tracking option. I'm going to change the color. Background color will be black or any other gray color. And then I'm going to change the width of my scroll. Fatty pixel. So you can see Fatty pixel is suitable for the scrolling option. If you want, you can also increase and decrease. So that's it. In today's class, we will discuss about the design of our home section. In the upcoming class, we are going to design our A section. So let's see in the next class. 6. Portfolio Class 5 : About Page: Welcome, everyone. In today's class, we are going to design our About section. So for our portfolio website, we are going to need the A section for our biodtails like email address or any other details of our portfolio. So we are going to use the image for the portfolio, A section, SanguoType dot Image, hyphen, and then I'm going to use Home or A I'm going to use the image for the About. So if you type, it automatically generates a dive in the VS code. So that's the speciality of VS code. And then I'm going to use the image tag for inserting the image. You have to type the attribute source, and then you have to type the image name that is png, home dot PNG. So after that, I'm going to need some of the paragraph and then some of elements for my about exon. So for that, I'm going to create a next class that is content of my about. So inside that, I'm going to create some of the contents. First, I'm going to create a heading for my content about. So also I'm going to use the span tag for me about me. So heating is completed, and then we are going to use H three tag for my name or my professon you can use Professon or name, whatever you want in your above section. I'm going to type my profession in H three tag. So you have to remember the concept of H one, Hh two, H three, H four, Hach five, and H six. So only difference is size of the headings will be different. And then I'm going to use the paragraph, the default paragraph Lam Epsm dos so that's the default paragraph. If you type low um in VS code, it automatically generates other sentences. So inside that, I'm going to use the link for my above section. I'm going to create the classes button. So I'm going to create a button for my class. So inside the quotation, only have to type the button name or class name button Read More. So I'm going to create a new button for Read More. So you can see all the elements of about section is completed. Then we are going to design our About section. So that elements are completed now, we are going to design that. So for that, you have to open the CSS. You have to type the class name about dot inside that I'm going to type the display. So display will be flex. So we can see all changed. And then justify content center. If you want center, you can use center. If you want space between space around, you can also use that based on your own choice. Align items center, if you want center, you can use center, or you can use or you can use left or right. Padding padding will be told percentage. Eight percentage, top and bottom right and left. Gap between the elements. So you have to time the gap 10:00 A.M. So you can see gap between the elements. And then background color of my about section. Black So a section is completed, we are going to create the elements for the content in the A section. So we have to type image about. So first, we are going to design the image in the A. So we have to type the same concept we are used in the form section. The position will be relative and then width 400 pixel And then box shadow, it'll be zero, zero, 26 pixel. For the image, also, you have to use the box shadow orange. If you want that, you can use border radius. So I'm going to use 40 percentage or 37 percentage. So it will be good for my portfolio picture. So our image is completed. After that, we are going to design the Hatch one, Hach three paragraph, and other elements. So we are going to use about content class with elements like Hutch one or H two. So H two, font size or text, align center or left. And then we have to type the color also. Color will be white. So you can see white color. Font size, if you want increase, you have to type 43 pixel. So 43 pixel is larger size, I think. So if you want more, you can use that. And then we are going to type H three for the PrefersonFont size will be 50 pixel, and then you have to type the color also. So color is also same as white. So if you want any other color, you can use different colors. So 20 pixel is very, very small. So tatty pixel is also good for my H three. So after that, we are going to create a design for paragraph. So color will be white. And then font size will be 20 Pixari Margin, top bottom, 2:00 A.M. Zero, 3:00 A.M. Top right bottom. So I can see the gap between the elements. So it is very good for my paragraph. So I'm going to type class for my button that is read mode for contact. So that design will be converted to that read mode button. So that's the use of class. So class will be used by all elements. Idntifier can be used by only one element, but class can be used by every element. So that design will be applied to Read Me button. So previous we created home section, now we are created about section. So in the next class, we are going to design our contact section. So let's see on the next. 7. Portfolio Class 6 : Contact Page: However, everyone. In today's class, we are going to design our contact section for our portfolio website. So for the contact, you have to remember the form tag in HTML. So let's see that. So first, we are going to create a new section, and with class that is contact. So contact form. First, we are going to create the H two class for the heading, contact me. So contact me. So form, action will be identifier as same section. It will be in the same section. That's why we are using as for action and then input box class. So we have to type the input for our classes like username, password, or email, phone number. So that's the contacts. So first, we are going to type the text for the name, and then we have to type the placeholder, enter name or name. So the first input will be the user name. So you have to type input type Ecltic text. Text will be ABCD. Or you can also type number if you type number one, two, three. Or you can also type email. For email, you to type at symbol. So if you don't write at n will be considered as error. So that's why you have to type t. And then we are going to use the input for the buttons. So I'm going to type the class again, and then I'm going to use the button and then text area and then phone number. So you can also use any other inputs for your contact. So I'm going to type the phone number. So if you type number, it will consider as number values. So and then I'm going to type the subject. So subject of your contact. And then we have to type the text area. So text area, name, ID, and then row and column. Column will be 30, and then Row ten. Placeholder, Enter ever command or Enter ever subject or any other you want or Enter message. So that's the use of text area. So after that, we are going to create a input type for the summit. So we don't have to create a button. We have to create a summit option using the input, so you have to type input type equal to summit and then value send message. So it will be consider button class BTN hyphen one. So it will be same class were created in the previous section. That design will be applied to our send message button. So you can see Haobson is also applied. So we have completed our elements using the HTML. We are going to see about the design of our contact. So let's open the style dot CSS for the design. So you have to time the class contact form, form, and then you have to type the maximum width 15:00 A.M. And then marge in one RM automatically, your changes. And then text align will be center automatically changes your text to center, and then margin bath will be 3:00 A.M. So form is completed. We are going to use the elements in the form input. So first, we are going to use the Hatch two. After that, we are using the input. So text align will be center. Contact me in the center. And then margin between the up and down and then left and right. First, we are using the top because top is not same for that only, we are using top and then margin bottom one EM. So our contact me h two is completed. So after that, we are using the form input, design, or that only using the input box or input. Display flux justify content center. If you use flex, you to use justify content. And then align items are flex wrap wrap. So input is completed. Input box is completed. We are going to use input. I then text the area. So width will be 100 percentage, and then padding. 1.5 am. And then font size 118 pixel. And then color black background color, RCB 241241, 241, white color. And then border radius 0.8 REM. And then margin. Margin between the input elements will be one RM zero. And then resize Nan so none. So after that, you can see your elements are changed. So you have to type one REM. So after that, you can see. So contact section is almost Phoenix. So you can type the name. So user name, the first one will be the user name and then email and then phone number. And then subject, you can type your own subject. If you send send message, you can see at symbol must be present in the email. So you have to type at the gmail.com, or any other. So that's it. We are completed our contact miss section. So in the upcoming class, we are going to design our footer section. So in the footer, we can see our social media contacts. So let's see on the next 8. Portfolio Class 7 : Footer Page: Welcome, everyone. In today's class, we are going to discuss our footer section for our portfolio website. In the footer segen we are going to see about the social media links like Instagram, YouTube. For that, we are going to see the footer section, so you have to create a footer section in the HTML with a class Footer. So inside that, we are going to create the text for our Potas. So we are going to create the elements, DT social social elements. So for the social, we are going to create a links for links, we are going to use anchor tag, Ashraf. And then we are going to type first, we are going to copy more than five times and past the five times. So inside that, you can type your own social media links, YouTube, Instagram, Facebook, whatever you want, you can type. So after that, we are going to create a link under Links class will be List LA star f. We are going to create List so inside that, we are going to use the anchor tag again for the link. So we have to type the list of names like privacy policy or copyright or costing answer, and then services, and then home portfolio projects, whatever you want, you have to type the link. So after that, we are going to create a paragraph for our footer. So copyright informations for that we are going to create a class for the paragraph RRS copyright. So we have almost completed our foot elements. So we have to open the box icons for the Fore icons like the social media icons. You have to copy and paste one by one in your class. So first, we are going to search for the Facebook so you have to type Facebook. So you can use the Facebook icon. You have to select font option in the box icon. And then you have to copy that tag, that is the I tag, you have to copy that, and then you have to paste inside your social due. And then you have to copy one by one. So whatever social media you want, you have to copy paste inside the anchor tag with I elements. So you can see all elements are generated. So our section is almost completed. We're going to design our footer section. So we have to type the class name footer, and then position will be relative and then bottom zero with hundred percentage. Padding, 40 background color, black Footer, social, so we are going to design the social elements like Link in Facebook. Text align will be center. Padding bottom, 24 pixel. Color will be white. And then we are going to design for the anchor elements form size will be 24 pixel and then color will be white. So you can see the elements of icons are changed to white color. And then border will be two pixels solid, orange red. After that, we are going to use the border radius for more circle option. Before that, we are going to use the width for the pixel with height line height line height will be 35 pixel, and then display inline block. Look. If you want padding, you can also use padding. I'm going to use border radius 30 percentage. 50 percentage will be more circle. Percentage, 45 percentage will be suitable for our project. If you want more circle, you can type 50 percentage 60 percentage. So if you change line height, you can see center position of elements. So our social elements are almost completed. So if you want sado you can also use Sado for your elements. So I'm going to use the sado 0010 pixel or insert. So you can see, your sado option is available for your elements. And then we are going to use the transition again, Es option within 0.3 seconds. So our social elements are completed. So we are going to time the Her for our project, so hover graphics for our social elements. So we are going to use Hover. So you have to use Her OpsonF we are going to transform that is Zoom option, scale of 1.2 translate OEAxs minus ten pixel. Vaxis is nothing but upright topson. And then color will be orange. Brer will be two pixels, solid orange red. So after that, we are going to see the footer for list. So first, we are going to use the marging tab will be zero, and then padding, padding will be zero. And then font size font size will be 18 pixel. Line height will be 1.6. Margin, bottom. Zero. Text, line will be center. So you can see center position. So under list is completed. We are going to design for under list with list. So we have to type the color white, and then border bottom will be three pixel, solid, transparent. And then transition again 0.3 uses after that, we are going to design for the list. List display will be inline block, and then padding 015 pixel. At last, we are going to complete our photo section with the design of paragraph. So first one will be margin. Margin will be 15 pixel. That is the top. And then text align will be center. Need center option. The color, we are going to color for our paragraph. Before that, I'm going to type font size tool pixel. And then color for my font that is white. So you can see the font color. If you want more font size, you can increase that. So our paragraph copyright is completed. So we have completed our footer section. So our project is almost completed. Before completing our project, we are going to need the help of how to change our section from one section to another section. If I click Contact, it will go to the contact page. If I click About page, it will go to the above section. So for that we are going to see the example. First, we have to create an ID. So ID will be form one, and then you have to type the name of the ID in that option. And then we are going to create ID for the A section about one, and then you have to type the name about one in the Nab A elements, anchor elements. And then we are going to create contact one, so you have to type ID in the contact contact one. So after creating the ID only, you can navigate the NaBr elements. Navigation, you have to use ID. So if I click A, it will navigate to the A section. If I click portfolio, it will navigate to the portfolio. If I click a contact, it will navigate to the contact section. So you can also copy the link for your social media. So if you have any YouTube channel, you have to copy that YouTube channel link and then paste inside the anchor tag. So that's the use of anchor tag inside the link for your social media. So I'm going to copy the social media link of my Gitub and then I'm going to paste that link in my social media icon. So you have to navigate that. So you have to paste that link. Inside the anchor tag. So I'm going to paste the Git up link. You have to remove the HTIC symbol. So if I type Get up, you can see my Gu page. So that's the use of anchor tag. If I type Target element, that is target attribute. Blank, it goes to next page or new page. So that's the use of blank. If I select Github, it will open in new page. If I type self, it will generate in the same page. So that's the difference between self target and blank target. So that's it, guys. In today's class, we discussed about the design of our photo shen, and also we discussed about how to insert the link of our social media. In the upcoming class, we are going to complete our project with the deploy of our portfolio website using Netlify. So let's see in the next 9. Portfolio Class 8 : Host Website: Me, everyone. In today's class, we are going to discuss about how to deploy our portfolio website using Netlify. For that, you have to type Netlify drag and drop option in Google. And then you have to open the first option in the Google. So you have to select that. So you have to drag and drop your folder. That is portfolio website folder with the HH TML and CSS file. So you have to drag and drop your portfolio website in Netlify. You can see your portfolio is deployed using the Netlify website. So you can also copy the link and paste in the Google. You can see your portfolio website. So before that, you have to create an account in the Netlify using your Github or GMI. So after creating only, you can see the link of your portfolio website. So after creating the account, you can see your portfolio website link. If you click that link, you can see your portfolio is deployed in the website. So you can see your home page, contact all options are deployed in your website. So if you select contact, so all will be generated in the website using the Netlify website. So that's the use of Netlify. You can deploy your front end website using that. So that's it. In today's class were discussed about how to deploy our portfolio website using Netlify. So that's it, guys. We have completed our portfolio website using HTML, CSS, and Netlif. So if you learn something from this course, put positive review in the command section. So let's assume the next course teached by me. Thank you.