Web Development Tutorial | Web Development Tutorial For Beginners - HTML, CSS & JavaScript | Edureka

Key Takeaways

[Music] hello everyone and welcome back to ad's YouTube channel in this video on web development tutorial we will start with understanding essential web development tools and Technologies including HTML CSS and JavaScript first we will start with HTML then we will move on to CSS and after learning HTML and CSS we will create this application form along with that we will also apply some JavaScript function to this form such as form validation by the end of this playlist you will also gain hands-on experience in building your first website let's have a look on the website that we are going to create in this playlist this is our interactive and responsive website built entirely with HTML CSS and JavaScript now let's have a quick look at the website starting with the homepage here you'll find various sections that introduce our website and show what we offer next we have meal page as you can see we have organized this meal page into sections for each meal such as breakfast lunch dinner and snack it is super easy to browse through and find exactly what you're craving now one of the exciting feature is add to card functionality for example if you see a dish you like simply you can click to add to card and that items get instantly added let's take a closure look at the card section here you will see all the items that you have added with option to remove any item so once you ready you'll proceed to check out page to complete your order and of course we have added a contact test page where you will find all our contact details with a helpful map so you know exactly where to find this all these features are built using HTML CSS and JavaScript making the website not only functional but also visually engaging as we continue developing this site we can add even more features and functionalities before we get started please subscribe to our YouTube channel and hit the Bell icon to stay updated on latest tech content from edureka also remember to check out edureka website for our web developer Masters program the link is in the description box below now let's outline what we'll be covering in this video we will start this video with why you should learn web development and the value that it brings to your career then we will cover what is web development at its high level providing a clear understanding of this field following that we will dive into overview of front end development explaining the key Technologies and principle involved next we will guide you through setting up your development environment so you are ready to start your coding we will then walk you through writing your first program in HTML followed by creating a form using HTML so once you have mastered the the basics we will move on to learning styling techniques to make your form and web pages visually appealing we will apply these skills to design a form using styling techniques understanding the concept of form validation will be our next Focus ensuring that your form functions correctly and securely then you will get hands-on experience as we build our first website using HTML CSS and JavaScript finally we will introduce you to the concept of backend development giving you a complete picture of web development process now that you know what we will be covering let's start with our first topic why you should consider learning web development so the first thing is it is easy to learn web development tools and Technologies are designed to be friendly and easily accessible for beginners with numerous online resources tutorials and communities you can quickly start building your website and a web application even if you have no Perrier experience the second thing is flexible work environment web development offers a highly flexible work environment you can work from anywhere whether it's home a coffee shop or while traveling this flexibility is ideal for those who value work life balance and prefer to set their schedules and the next is high salary package web developers are high in demand and this demand translates into high salary packages the average salary of a web developer in India is about 10 to 12 lakhs perim and the average salary of a web developer in USA is about $120,000 perom the next thing is freelance opportunities web development opens up numerous freelance opportunities whether you want to work on Project part-time or build a full-time freelance career there is a v market for web development services and next on we have creative and fun web development is a perfect blend of creativity and skills it allows you to express your creativity through design and problem solving while building an interactive and engaging website the process of creating something from scratch can be highly satisfying and enjoyable understanding the reasons of learning web development is just the beginning now let's see what web development actually is web development is a process of creating and maintaining website and web applications that user interact with on internet to understand web development let's have a look on two familiar examples and the first one is Amazon on Amazon everything including responsive design navigation bar product listing shopping cart wish list card and search bar are result of web development these features are designed to create seamless shopping experience for the users now similarly on YouTube the navigation sidebar subscription button playlist creation live streaming video player search bar all are brought together to live through web development offering an interactive and smooth user experience so this is why web development is so important it is used to create applications like Amazon and YouTube if you want to build your web application learning web development will be your first step so now that we know what web development is let's see how it works web development involves two key components the first one is front end frontend is the part user interacts with directly through web browsers it includes all the visual elements you see on the website such as button text and images next next we have backend backend is what happens behind the scenes it involves web servers where all the websites data and files are stored business logic which processes request and handles the application's operation database where all the essential information is stored and together these backend components ensure the website functions smoothly and can handle the user request efficiently now that you understand web development let's move on to the core technologies that make makes it possible first on we have HTML HTML stands for hypertext markup language it is a backbone of any website it structures the content by defining elements like heading paragraph images links basically it forms the skeleton of the web page then on we have CSS CSS stands for cascading stylesheets it is responsible for website's look and feel it controls the layout color fonts and overall visual appearance allowing you to create visually appealing and responsive designs and next on we have JavaScript JavaScript adds interactivity to your website it enables Dynamic features like animation form validation and interactive element making the website more engaging for the users now without any further delay let's set up our developing environment so you can start working on your first HTML program so there are so many code editors in Market but the code editor that we are going to work on is Visual Studio code so to download visual studio code you just have to visit the official website of Visual Studio code and after that you have to just click on the download link in case you using Mac you can download from this link but we are using Windows so I'll just click on this link after clicking on that link my download process has started so after the file gets downloaded we are just going to click here and then we are going to click on I accept the agreement and then next so this basically is the address of your Visual Studio code just let it be as it is and click on next next and here we are going to click on create a desktop icon and open with code open with code then next and then the last step is to install Visual Studio code into our system so the installation process has started so so here I can see that installation has been completed we are just going to click on the Finish button and that will launch our Visual Studio code so now we have successfully downloaded our Visual Studio code so now that we have installed Visual Studio code the next step is to install extension into our vs code so for installing extensions in our vs code we just need to click here and then we are going to search for extensions so these extensions will help you to run HTML CSS and JavaScript code in your vs code so I have been using vs code for such a long time now so these extensions are already installed in my vs code I'll just show you so the first extension that you need is live server so this live server basically will help you to run your HTML and CSS code in your vs code I'll just show you how to install so after you'll click on live server you'll get something like this and you just need to click on install and after installing this go life button will be added to your vs code that's it just like that we are going to add autoclose tag so basically autoclose tag will help you to close the HTML or XML code automatically and after this you need to add Auto rename tag this will also help to rename the HTML paired tag and after this you're going to add es lint so this es link will basically help JavaScript to run into your vs code and after this let us add code formit so this is the code format that we are going to add this will basically format the code and increase the readability of a code in vs code and we are going to add HTML and CSS support so we are going to add this extension as well so for now let's you know move on to creation of file into our Visual Studio code and these extension would be enough for now and for creating a file in your Visual Studio code first thing that you need to do is you need to add one folder in your vs code so for adding a folder you just need to click on file open folder and we can just select any folder from our desktop or anywhere in our PC and we can also create a new folder so what I'm going to do is I'm going to create a new folder here so this new folder would be Basics that's it select folder and this Basics folder has been opened in my vs code so after opening a folder into our vs code first of all we are going to create one file in our folder so to create a file inside a folder we are just going to click here and we are going to choose a name for our file we are going to give it as first. HTML so our HTML file has been created and next we are going to create a CSS file St I I'll just give style. CSS so now CSS file has been created and then we are going to create a Javascript file as well so we are going to give it as a script.js that's it so this is how you create HTML CSS and JavaScript file into your folder so the steps are you first need to add a folder in your vs code and inside that folder you're going to create multiple files that's it now quickly just see how HTML works so I'll just show you the code I'll just run one single code so let me write one head in that's it and you're going to save your code with control s and then you're going to click on go live here you can see your web page and this is the content that I wrote inside my web page that's it and this is how your Visual Studio code functions now let us look at the Overview at the basics of HTML and then we'll again come to our Visual Studio code and we'll learn how to run HTML codes so now just quickly understand the basics of HTML so we use tags in HTML for every specific purpose so now we'll just quickly see what are some basic tags in HTML first one we have is HTML tag so any of the content that we want to include to our web page will be written inside the HTML tag right and after that we have head tag inside the HTML tag first of all we are going to create head and in head tag we basically mention all the headers of our web page for example title so we use title tag to give title to our web document we'll just practically see this within a minute and after that we have as body tab so apart from head section apart from header we need to include every specific thing everything that we need to see on our web page we are going to include it in body section so inside the body section we use heading to give heading to our web page and and after heading we use paragraph to write any paragraph in our web page and that's it these are some basic tags in HTML and now we'll just go to our Visual Studio code and we'll practically apply these tags so we are just going to delete it and from initial we'll understand what are the tags that are essential so the first tag is Doc type HTML we basically use doc type HTML tab to tell the browser that the type of document we are are writing is a hypertext markup language type that's it this is the use of Doc type HTML tag and after doc type HTML we'll open our HTML tab so as I have told you everything that we are going to write will be included in the HTML tab so inside the HTML First tag we are going to create is head tag inside the head tag we are going to mention the title of our web page with the help of title tag right so now in inside the title tag I'm going to give the title my web page that's it and one more thing that we do inside our head tag is we link our CSS file to our HTML file for that we use Link tag so link Arial Styles shet this is basically written to tell that the document that we are linking is a stylesheet and after this we have are going to give the address of the stylesheet so we are just going to mention the name and which is style. CSS that's it this is the sign to close the tag and we have successfully linked at HTML file with CSS file that's it just save the document with control+ s move to the web browser refresh it and the heading has been gone because I have removed it now again we'll go to our Visual Studio code we'll just create so one thing we did not see so this is basically the title of the web page you'll provide a title and that will be appeared here so this is the use of the title tag so after the head tag what we are going to do we are going to create the body section so inside the body section we write headings paragraphs links images and everything first of all we'll see heading so for heading we use H tag and H tag varies from H1 to H6 we are going to see all of them so we are going to write this is my heading right we'll just copy this heading and we are going to paste it that's it and I'm going to change it to H2 H3 H4 and H5 and it's 6 that's it I have written my heading from H1 to H6 and contr S and we'll move to our web page so here you can see H1 to H6 H1 being the biggest and H6 being the smallest so this is how heading tags work and after this we'll see the example of paragraph tag so here paragraph has been included so these are some basic tags which you include in your body section which are heading tags and paragraph tags so after learning heading tags and paragraph tags we are going to learn about link tag so to provide Link in HTML we use anchor tag and it is representing using a first of all I'll write my paragraph I'll write here visit and after that I'm going to open my anchor tag and I'll give the reference so inside this we are going to mention our link I have just pasted my link and after this I'm going to close my anchor tag so here we are going to write something visit let's say Eda that's it contr s and here it is so the link has been created I'm clicking on the link and I have been redirected to the ad's website so that's it this is how you use link tag this is how you use anchor tag in HTML so after learning anchor tag in HTML what we are going to do we are going to learn how to add image so here I'm going to give heading image example so first of all what I'm going to do I'm going to copy one image link so I have copied one image example now let us learn how to add any image so for that we use IMG tag and we give source to that image inside SRC we are going to give the link of the image this is the link that I have copied and after that we are going to give it a alt attribute so alt attribute is basically given just in case your image is not loading so instead of your image that all attribute text will be shown on the website so that's it we are going to close the image tag contrl s again and example so this is the image that I have provided inside my link so we can see the image now let us just take an example how alt attribute works so what I'm going to do is I'm going to remove the image and save so here we can see a cat because I have provided cat as my ALT attribute again here I can see my image so that's how you provide image using HTML so the next thing in HTML that we are going to learn we are going to learn the creation of list so again what we are going to do is we are going to provide a heading so list example that's it and then let us create a list so to create a list I'm going to use UL you will stand for an ordered list likewise if you want to create ordered list you are going to to use O So inside UL Li Li stands for list items so we give list items name inside Alli tag so we are going to give three list items that's it and then contr s and the output the list has been created here you can see now let me give you an example of ordered list just contrl C control V and what we are going to do we are going to change here contr s so this is the example of ordered list you can see here 1 2 3 and in unordered list you can see the dots or pointers so after order list we have description list so description list is represented using DL and inside this we give DT which stands for description terms so we are going to give term one and then inside this we are going to give DD so DD stands for definition description and inside this what we are going to do we are going to write something definition paent of term one that's it and again just copy this contr s now let us look at the output so this is how description list works so these are the three types of list in HTML ordered list unordered list and description list so after covering list in HTML we are going to move on to tables how to create tables in HTML so for that we are going to create one section section tag basically improves the readability of the code so with this section tag what we are going to do first of all we are going to give a class to our section tag so the purpose of giving class is that it will group the multiple elements that share the same style or the behavior so we basically give class ACC to the components and elements of HTML just to Target them into CSS file so I'm giving the class let's say table section that's it closing the section and now we'll create a table in HTML so for that first we'll give a heading table example that's it now after this I'll just format document we just use this so my document has been formatted just because I have this extension in my vs code so that's it after giving heading we are going to start the creation of table we are going to use table tag inside the table tag we are going to create a table row right so inside the table row we are going to mention th which stands for table header we going to provide table header as course right d and duration of the course let's say then one more header let's say instructor that's it these are three headers of of my table after that we are going to create one more table row so for that just copy this and paste it three times so just change the content inside it HTML and one more we are going to create a section for JavaScript that's it contr s and let us look at the output now so you can see the table has been created further we can style this table as we want inside the CSS file so now you know how to create a list how to create a table inside HML document so the next thing that we are going to learn is how to create boxes so this is the most important part because whenever we are going to make a project a form or anything in HTML we are going to need this you know creation of division creation of class creation of boxes so we'll just quickly see how to create boxes for that quickly create a section and then give it a class let's say flexbox container and inside this for creation of One Division I'm going to use div and again we are going to give a class to our division so what we are going to write is flex items that's it and after this let us get give a heading did not close the div inside the div we are going to give a heading so the heading that I'm going to give is this is flex box again I want to format my document so we'll just go format the document that's it and after this what we are going to do is we are going to give paragraph So and that is it the division will get closed so to make one or two more division like this just copy this code paste it two times that's it the class is same for all the division so this is how if I'll style one diff then the styling technique will be applied to the three diffs so just I'll just change the content this is flexbox one two and three that's it so The Division is closed the section is closed save the document and look at the output so this is flexbox one 2 and three so we are going to see The Styling and then there will be a major difference in our web page our web page is currently looking like this and now we'll move on to CSS and then we'll see the difference what it makes to our web page so now we are done with learning basic tags of HTML and now what we are going to do we are going to learn a bit about styling and then we'll style this page only the page we have created right here we are going to style this page only and after that what we'll do we'll just apply our HTML and CSS skills and we'll create a form using HTML and CSS and inside that form we are also going to include some JavaScript functions like form validation and calculation and everything so our first project will be creation of a form using HTML CSS and JavaScript and after that what we are going to do we are going to create one full-fledged project using HTML and CSS JavaScript so let us now move forward and learn about CSS so now let's start with CSS CSS basically stands for casking style sheets and allows us to control control how HTML elements looks on the web page so the syntax structure of the CSS is very simple the first thing we write is a selector then we provide a curly braces and inside the curly braces we mention the property and the value so this is basically called the Declaration and again after the semicolon we can again write the property and then we can give a value to it and at last we have to just close the curly braces so after CSS syntax comes the CSS selectors so CSS selectors are of different types like attribute selector element selector class selector ID selector and Universal selector but among these all class selectors and ID selectors are used the most so class selector is used to apply style to multiple elements that share the same class so you just use dot followed by a class name for example if you have a class name button you are just going to use dot right you are just going to use Dot followed by the class name right and then comes the ID selector after class selector comes the ID selector so ID selector is used when you want to apply style to a unique element on the page each element should have a different ID and the selector uses hash so for class we use Dot and for ID we use hash and followed by the ID name and here we just write the DOT and followed by the class name right so that's it and this is all about class selector and ID selector now comes the Box model so after CSS syntax and selector comes the Box model so CSS Box model is a fundamental concept that describe how elements are displayed on the web page it essentially wraps each HTML inboxes that consist of several layers let's now break it down the first one is content at a core you have the content which is actually the text or the image inside the element after that we have the padding here is the content after that we have the padding the padding surrounds the content it creates spaces between the content and the element border like you know cushioning inside the element so after the padding part we have the border so border surrounds the padding and the content you can customize it to be visible invisible thick thin or style as you want the border part and after the Border part comes the margin finally the outermost layer is the margin which creates the space between the elements B and the other elements around it so that's it about the Box model now we have seen the CSS syntax CSS selectors and the Box model now what we are going to do we are going to learn about the CSS layout so CSS layout is used to arrange and structure web pages element ensuring a visually organized and userfriendly design it helps to create responsive layouts that adapts to different sizes of screen and enhances the overall presentation of the content so basically we have six different types of layout first one we have is flow so flow is a default layout in which elements are arranged in a natural order they appear in HTML from top to bottom then we have flexbox a powerful layout system that arranges item flexibly and dynamically then we have grid it provides two dimensional layout out system perfect for creating complex grid based designs with rows and columns then we have positional it allows you to position elements precisely on the pages using properties like absolute relative and fixed then on we have table it uses table based layout to organize content in rows and columns though it's now mostly replaced by new modern method like Flex boox and grid and then on we have flot so float is basically an older method used to wrap the text around the images or to create a basic layout but it is largely replaced by flexbox and Grid in the modern web design so after the flex box on layout we need to learn about the responsive design so responsive design in CSS ensures that the web pages adapts the different screen sizes and devices it uses media queries flexbox grid like Flex boox or grid and fluid images to create layouts that adjust automatically providing a seamless user experience across all the devices so now let's design out our web page that we have created using HTML using these styling techniques so now we'll just move on to our Visual Studio code and we'll start designing our web page that we have created using HTML so here again I'm on my vs code and I'm going to my style.css first we'll check our style Pages linked with our HTML page yes it is linked and then we are going to our style. CSS here we are going to style our page we'll just learn The Styling techniques one by one and after that we'll move forward and we'll create a form using HTML CSS and JavaScript so now first of all what we are going to do we are going to give a body background so to comment out in HTML or css you are going to give a slash and a star body body background that's it inside this body background first of all I'll Target the body part and we have already seen the syntax that's what I'm following here the synx of CSS which we saw so the first thing that we are going to do is we are going to provide a font family so you can choose any font family here I'm just going to choose aiel and send s that's it after this the line height so CSS is basically all about experiment we are just going to give line height as 1.6 you can just experiment it as you want then comes the Box model which is margin margin I'm going to give zero then comes the pedding pedding also we have already seen what our margin and pedding and we are going to give it zero then comes the color color I want to give is let's say blue okay so as I was saying CSS is all about experiment so whatever styling techniques you want to apply you just need to come to the CSS file and you just need to experiment with that the more you're going to experiment is more you're going to learn in CSS so the background color I want is let's say light green green yellow that's it and after this what we are going to do we are going to Target the box so for that again let me give a comment here it will be content box right so we are going to Target this by dot content box and then again the background color and we can give the max width using Max width styling technique and we can just choose our width here so background color I want is let's say White and the width I want is let's say 1200 so we we are going to give it as 1200 PX PX is basically pixel it is a most common way of defining the unit in CSS okay so I not closed it here so max width that's it PX is our most common way of giving any unit in CSS next we are going to give a margin so margin also we can give top bottom and left right everything so here the margin is auto do we add Auto here we add margin Auto because if the element is having a fixed width then the remaining space will be divided around the element equally so that is why you use Auto here so again we are going to give padding so the padding we are going to give is 20px and then box shadow box Shadow defines itself it's just a shadow around the box and you can Define the pixel of Left Right top bottom by giving it like this and you can also give the color here so for giving the color you just need to write rgba and you can you know decide the color here so you can give color or you know you can give the readings like zero and let's say two 4 and six now it will be just as much surprising for you as much for me I don't know which color is this let us you know run this code and then we'll see after this we are going to give border radius so border radius is basically given to you know see the curves of the element like we have created some square but I want the corners to be round okay so what I'll do I'll just give it a border radius so if you'll give a border radius of 50% then it will become a circle so that's how border radius works so we are going to give 8 PX that's it let it be 9 PX so border radius is basically used for rounding the corners my HTML file is not saved and then we are going to save the CSS file and let us look at the output so for now we have done these things we have provided the color we have provided the text color to Blue the background color to green and these are the things that we have done till now what is the one change that we are going to make we have styled a Content box but we have not created a Content box in our HTML so what we are going to do inside the body we are going to create one div section right we're going to give it a class as content box right we'll close this div andr X and we'll include all this content inside the content box so right here control V that's it contrl s and now let us look at the output so here the content box has been created and this is the Box Shadow you can see around the edges this is the Border radius you can see the curves here and the content is inside the content box so this is how CSS is going to alter your HTML like your HTML is basically the skeleton of the website right it just looks like a skeleton there is no styling no color nothing and using CSS you can style your web page as you want so as for now we have styled this MCH now let us move forward and we are going to style it further so now what we are going to do we are going to style the headings here and so what I want to do I want to give a animation to my heading so for that we are going going to use hover effect hover effect is basically a basic animation that is provided using hover so I'll just add transform so after writing transform here we write what are the features we want to transform like the speed or the scale so we are going to write here scale and to what scale we have to transform it so 1.05 let's say so what this transform does it basically zooms the hover okay when you will select on item it will basically Zoom that item so I'll show you an example so contr s and we have changed the H1 let us look at the H1 so the thing this is doing whenever I'm going on the heading it is zooming the heading this is basically the hover effect using CSS now further what I want to do is style the H2 H3 H4 and H5 H6 so that you can combinely write here from H2 to H6 this is how you can style them together so I want to change the color of every heading just let me give it as let's say this color okay okay then margin let's say Bottom I want to change so margin bottom I'll write you can just give margin top bottom left right anything so 10 PX then padding 15 PX and zero right then text alignment text alignment defines itself it is just basically what is the alignment of the text providing so I'm going to provide Center then transition so transition here I'm going to give is transform so why is transition used so transition is basically used to provide any smooth effect to your heading or anywhere you are applying and the factor here of transition I am providing as EAS so e basically will you know first speed up the transition in Middle it will slow at last slow down the transition now I have applied this transition on every heading except H1 so I have applied this transition on every heading except the H1 so what we are going to do is we are going to give a effect also to every heading so it will be like H2 hover then again H3 hover and likewise H4 H5 H6 so here we are going to give a hover effect that will be transform again scale 1.05 that's it so let us save it and look at the output so you can see this is the hover and transition you can see this is the hover and transition that has been applied to every H2 H3 to H6 right so far we have understand the styling techniques now let's move forward and now what we'll do is we'll style the anchor tag so for that we are going to Target the anchor tag so after targeting the anchor tag first of all we are going to add the color so the color I want to give is let's say I choose this color and after this what we are going to do is we are going to add the text decoration as none so why do we use this text decoration none so by default in some browsers when you are adding a hyperlink whenever you are adding an anchor tag there is a line beneath that link okay so to remove that default styling from that browser from that hyperlink we add text decoration as none right and then again I'll add the transition which will have color we are going to add the color transition and again it will be ease so after this we are going to add the hover effect to our anchor tag and the text decoration here we are going to give is underline so after the Curson is on the hyperlink then I want that hyperlink to have a underline so that's why I have given the text decoration none here and text decoration as underline here right after that the color after the transition I want in my hyperlink is let's say I want it to be red that's it contrl s and here you can see first of all it is hot pink then there is no underline to it because the text decoration is none after I am taking my cursor on hyperlink it is having a underline and the color is red so now you understand the styling technique both hover and text decoration so after this we are going to style our list okay so to style our list we'll Target the list as it is this ul and we have o and we have DL right so now first of all let us give the margin 20 PX then we'll give padding which will be 10 PX then we are going to give border radius now we know what border radius is so water radius is basically used to give the rounded Corners then we are going going to give box Shadow again we know what box Shadow is and after that we are going to give a color to our box Shadow so let us take this only and after this we are going to style our paragraph So in paragraph also we are going to give margin bottom then BX then padding also 10 PX then border radius we are going to give it as 4 PX after this comes our image right so let us style our image an image only I want to give is the max width of the image would be 100% and height of the image will be Auto we already know why we use Auto and the Border radius will be let's say 10px then again we have transition transition is basically the type of Animation that I'm using everywhere just to make you understand how the animation works and after this we are going to style the image animation that is hover so again transform to scale 1.05 is what we are using everywhere so we are going to use that only here right now comes the styling of list so we'll mention UL first of all we are going to do list style type will be square you'll understand this once I'll execute this code you will see the difference in the list then you will understand why I have U square and after this o we have which was our ordered list again L style type will be decimal okay and after this what we are going to do we are going to just execute our code so we can see the transition on my image right the Border radius of my image you can play with the transition like this right and the list items I can see here it is square so if we provide the list style type as Square it will give us like random square or Circle or pointers and if we provide the list styling type as decimal then it is going to give us 1 2 3 4 like this so that's it and now what we are going to do we are going to style our table after the list so for styling our table we are going to Target the table and in table the width will be 100% the Border collapse will be collapse so now again border collapse collapse is now again a new term for you so basically we use border collapse because we want the every item in the table to have its own border so that is why you use border collapse so after this we are going to add the margin top it will be 20px and then the background color which will be white let's say or kind of white and then we are going to add the Box Shadow after this border radius Let It Be 10px that's it inside the table I want to style the table header and the table description so I'll just add border 1 PX and here I can give any color to my border using solid white let's say right after this the padding which will be 10px for me and then text alignment so let's say it will be lift that's it again after this we are going to separately design our table header for background color let's say it will be this in white and then the table row hover I want to give it a effect so it will be antique white that's it the table has been designed let us quickly have a look on the table so this is my table right so the table has been designed here so now next what we are going to do is we are going to design our Flex box so first let me quickly see the class name it is flex box box with small F so it will be Flex box right inside the flex box the first thing will be display flex and justify content will be space around right after that we have margin on top which will be 20 PX and then we have padding which will be 10px right then inside that we have Flex items so inside this we are going to do background color I'll just quickly give the styling so we have provided Flex one here so that means the container can either St link or expand according to the space that is available around the container that's it this is all about the flex item styling and next what I'm going to style is flex item hover Flex item hover so in Flex item hover I'm just is going to give transform and background color that's it and then comes the last thing about our styling which is responsive design so for that we add media queries and here is Max's width which is let's say 77 TPX and the flex box I'm just going to explain it and flex Direction so here I have added media queries so media queries in CSS are essential for creating responsive designs that adjust the different screen sizes and device right so they allow us to apply specific style based on the characteristics of user View New Port for example the media query media Max width which we have written here and the flex boox Flex Direction column whatever we have written here Target the screen size of approximately 7 68 pixels so basically it targets these screen that are of 608 pixels wide or smaller which is typically for tablets or mobile devices so in this case the class. flexbox which is a Flex container will change the flex direction from default horizontal adjustment to Vertical stack these adjustment enhances the readability and accessibility of the content on the smaller skills so we are just going to save our code and let us look at the output so here we have created the three Flex box you can see the hover effect you can see the transition and everything so this is it about styling we have seen what is HTML how HTML works and how do we write HTML after that we moved on to CSS and then we have seen The Styling techniques and we made a web page and we applied The Styling to it so you yourself can examine how the web page was looking without CSS and how the web page is now looking with CSS so now that we have learned HTML and CSS and we have practically applied styling techniques and HTML tags on the web page we'll now move on to creation of a form using HTML and CSS so now let us start with the creation of form using HTML and CSS and after completing the HTML and CSS form what we'll do we'll move on to JavaScript and we'll apply some functions of JavaScript into our form so now first of all we need to do is we need to open a new folder for that I have closed this folder I'll just go on folders and open folder again I'm going to create a new folder here so new folder we'll just name it form okay it already exists so let it be new folder only okay so again inside this folder what we are going to do we are going to create one HTML file let's say form. HTML and one CSS file let's say style do CSS so now that you are familiar with the styling techniques I'm not going to explain the every styling technique again what we'll do we'll just go through the HTML code and then I'll just write the CSS again I'll explain you the JavaScript code but CSS part we are going to skip because I think you have now basic idea of how CSS works and you just need to experiment with the styling techniques so inside the form. HTML again the first thing we are going to write is Doc type HTML and then we are going to start with the HTML tag so now you have basic idea of how to write the tags in HTML after what tag which tag you need to include so I'll just quickly write everything that's it and after this we are going to start our body section inside the body section the first thing will be H1 and the class that we are going to give is form title and the heading that we are going to give is application form after this we'll start the form tag inside the form tag everything that we are going to include in form will be mentioned again to form we are going to give one class because we have to style this form so let me give application form and then we are going to start our form first we'll create one div again we need to give it a class then we need to create a label for the form after creation of label I'll decide the input so input type of the name of course will be text type here you can see I'm giving different different classes for different thing because I want to style them differently and then the most important thing I'll write here required so this required basically works as a validation if this required is mentioned in any section of the form that means user need to fill that section and without filling that section user cannot move forward or user cannot submit that form right so we have created the first name section as it is we are going to copy this and same we are going to paste it for the last name that's it again I'll copy this section for the date of birth and now I need to change here the input type also because for do the input type will be numbers or dates it will be dates right so here I will write date and ID will be do again here to right again I'll copy this code for the next section so my next section will be AG after writing the eth section we'll just quickly look at the output what we have created till now so the age input type will be number that's it let us Save and Go live so so far we have created this form job application form the O is capital I'll just correct it first name last name date of birth here the input type is date so we are getting a calendar here age is mentioned here so by far we have created this okay now let us move forward first I need to change the title which is job application right now what we need to mention we are done with date so again I need to mention one section which is gender so for gender here I need to add labels for male and female right so this is correct we are going to create a radio button here because I want the user to select only one gender here we need to give value so the value here will be mail and again I need to give class which is Radio input that's it we have created one label for male we are going to copy paste for the female section just need to make the minor changes and one more time we paste it for others that's it we have not changed the male female here and then again one more label we have to make here which will be for others right now contr s and let us look at the output here you can see gender male female or others so we can only select either male either female or others so this is how the radio button works so now that we are done with the gender section we are going to move on to the email address for email address again I'm going to copy this and let us paste it again we are going to change the label the input type here will be email and same goes with ID and name that's it and then again we are going to create one more section for the position available because this is a job application so for the position available first label we are going to create for the position available that's it again the input type here I'm going to create is checkbox we are going to remove required from here because it is a checkbox box and here it will be value so the value here will be junior and here again it will be class that's it so the first checkbox has been created for a junior developer but let me give a label here now what we are going to do we are just going to copy this and we are going to paste it for different position levels right so we have pasted it and just the minor changes we are going to do so the first change is midlevel and the value here again will be midlevel okay and the label also will be mid-level developer again here it will be senior and a senior developer that's it contr s and here you can see the checkbox junior developer midlevel developer and Senior developer this is the basic difference between radio button and a checkbox in radio button you can only select one at a time and in checkbox you can select all so after this I want the programming languages input so again for this what we are going to do we are just going to copy this whole Division and we'll just make the changes so we have pasted it the first change would be programming languages the first language will be Java and we are going to change the name and the values the second one will be JavaScript and the third one will be let's say python that's it the languages section is also completed so what is the next section that I want I want the user to fill the password and confirm the password right so now for that what I'm going to do I'm going to copy my older div section and and I'm going to paste it here so again for the password I need here is password so creation of form is very easy you just need to mention the things that you want in your form and you're good to go here in input type will'll of course keep it as a password then only it won't be visible it will be in the form of stars or dots that's it and again this to confirm the password the password section is done now what I'm going to do is I'm going to create a form action so for creation of form action we are going to copy this and paste it so here we only need input type we'll just delete it and let us first change this input type will be reset it here we are creating a button so let me remove this all after this we are going to add a value which again will be reset we are going to give the class which will be button reset button that's it and we'll just copy paste this for our submit button this will be submit that's it now the form is completed the HTML part of the form is completed here we have created two button the submit button and the reset button so you know you are getting this popup this is because we have mentioned required in our HTML code so this is the creation of form using HTML now just quickly move on to CSS and we'll just quickly style our form so I'm just going to provide the styling I'm not going to explain the every part of styling as we already know why do we use everything you can just yourself change the styling and look at the outputs so it will be easy for you to understand the CSS CS is basically the thing which you can never complete because every day there is a new styling technique so you just need to experiment with the styling and then you'll be able to understand the CSS features so after this I'm going to style my form title we have just started with the styling technique and you can see the visible difference that CSS is making to my HTML form and now you can see the output I have applied so many styling techniques here and now my form is looking like a proper well-designed form so this i