[LIVE] DAY 02 - Instagram Clone using HTML, CSS & JavaScript | COMPLETE in 7 - Days

hey guys I hope that I'm live right now you guys are able to listen me properly as well as there's no issues with the audio or the video please let me know hello everyone I hope that I'm live right now guys if you guys are able to listen me properly as well as there's no issues with the audio or the video please let me know no issues with the audio or the video right guys everything is fine okay great awesome how are you guys is it already fine is it already great what is the scenario how is everybody guys good okay so many of you guys are having your exams right now what is the scenario I got to know from some of the candidates that were not able to join the boot camp that some kind of exams something was going on in their college is everybody having some kind of exam or something or what is the scenario right over there yes exams no exams okay exams are going on end semesters are going on Day After Tomorrow internals are there okay so even uh I was in college at one particular point of time so I still remember uh when I was in college me and Ashish B were from the same college so Ashish is the other co-founder at De toown he is a data uh engineer so uh we I still remember the days when it was the end semester exams or even the mid semester exams as well um I would not even know what is the syllabus in the exam like I have no clue like what is the exam what is the syllabus of the exam nothing and I used to uh so if tomorrow morning the exam is starting I will start figuring out the syllabus at six o'clock in the evening the day before that I will go to Ashish I will ask him that dude uh I need the notes and the syllabus I know nothing about what is happening right now he would arrange some girls notes from the class because the girls were the only people who used to write down notes boys did not even care about that so we used to get the notes from them and uh once we got the notes then I used to sleep okay as soon as I got the notes I used to go to my room sleep off I used to wake up at 3: in the night and from 3: in the night to 8: in the morning whatever I'm able to study I'll will just study that that is what I'm going to go and write in the exam that's it because in engineering exams it is really very difficult to fail you have to work very hard to fail in engineering exams you have to understand this if you have not paid attention in the classes you are parting out with your friends every day are smoking up drinking out with your friends itself even before the exams you don't even give a about the exams then in that particular scenario yes definitely you are going to fail there's no other way behind that but if you put a little bit effort just one day effort as well prepare like see the last last four years question papers most of the questions are going to come directly from that please to understand this in engineering colleges professors Don't Give A F about what happens in the exam they will take up the five previous five years papers and give you the same questions from those papers itself so one thing thing you should make sure is before the exams go over through all the five years papers okay see what are the topics that are frequently being asked and just study for that so my now don't take a good advice from me okay this is an advice for those who want to study less time in colleges and get a decent cgpa my cgpa in college was uh 6.9 then it grew up to 7.4 but yeah my cgpa was very bad but again like that also proves a point to you guys that it is not necessary for you guys to have a excellent cgpa to get into good companies I got into Google I got into relance I got into Geo I got into uh freelancing with many of the big firms as well at this point of time Amazon Microsoft Goldin sack JB Morgan Chase are hiring students from me so you need to understand something that cgpa does not matter what matters is your skills what matters is your experience what matters is your knowledge and the right direction itself now if you have a knowledge of which hentai to watch then that is not going to help anybody out right you have to have good knowledge related to the skill set that you're owning and do not be of this mindset that I'm I'm studying uh let's assume front end development so I'm going to get a job in frontend development as well at the end of the day you can even get a job in software engineering companies don't care about what you have studied if they see potential in you if they see that you have been working hard you know how to code you have decent projects under your P then you are going to get selected in the company but you don't have to be that fixed mindset that oh I have studied data science I'm going to get placement only in data science now that does not happen you study data science you study P stack you might be placed into an internal tool that uses something else in its entirety itself so please don't be of that fixed mindset this is just something that I'm explaining to you guys making sure that you are ready for what is going to happen next to you you okay nevertheless without wasting any further time we'll start with HTML shall we start with HTML guys shall we start with HTML guys please let me know yes okay so let's get started right away I will share my screen first otherwise like every single boot cam I just forget to do that so let me do that first right over here share my screen okay now it looks a little bit more pretty than usual and I will pop up the chat as well okay the first thing is notes okay so notes are something that we have already created for you guys okay and they are available in the Discord server at def toown So Def toown um is currently one of the largest Discord communities in India related to development so right now I think so we have somewhere around 78,500 members which is the largest in the country right now so we are very proud of that so also thankful to you guys that you guys have joined here so if you are joining the Discord Channel inside of that channel you will see a particular section called as boot camps and inside of that you will find all the notes that you ire as of this particular point of time for example this is a boot camp on HTML CSS so this is the HTML CSS notes that I have created for you guys you can just open this up there is Python and deep learning there's Python and data visualization backend web development HTML CSS front end web development so multiple nodes are there but of course for this particular boot camp we're going to utilize the basics of web development so it's in a format of a PDF itself so if you guys want the noes you guys can download it from the Discord server itself okay that is up to you guys if you guys want to go there or not okay so the nodes have been created I know it's not very pretty looking okay but the point of the notes is to make sure that whatever topics that are being covered in the class you guys are able to revise it immediately itself okay uh at the end of the boot camp I will be giving you guys a particular cheat sheet on HTML as well so it will cover up all the cheat codes related to HTML not of GTA V or something like that but yeah you definitely try it out are you guys able to understand this please let me know are you guys able to understand this guys please let me know so the Discord server link will be somewhere down the description of the video itself you guys can join from right over there otherwise tomorrow I'll provide you guys with the new link so the Discord link is down the description of the video itself nevertheless let's start out with C uh HTML now imagine this okay you are somewhere in 1980s 1960s okay at that point of time uh if I am a particular person so let's assume I'm going to take up one particular person uh from you guys okay as an example do not take it up on your mind itself so let's take up satam okay so let's take up satam as our particular example so satam is a researcher based in US s you lives in us and he's a researcher right over there and I am a researcher that lives here in India in Bangalore now satam has done an amazing research in us that basically breaks through the field of artificial intelligence or something like that he has written a great paper on it a research paper now if satam wants to share his research paper with me this is a time before internet guys internet did not exist at that point of time so what will sat have to do s will have to write down the research paper now in the research paper there are a lot of different mentions and references to other research papers to other textbooks to other uh articles okay so multiple different references are there in the research paper now satam will then uh like ship that entire research paper to me in Bangalore now it will take almost 30 days because there's no internet right you will have to give it to a ker service that ker service will then take it through a ship to India and then it will arrive to B it will take 30 days for that research paper to come to me now even when I re receive that research paper to understand that paper properly I need to get all the books all the other research papers all the Articles mentioned in that particular paper itself now what will I do I will go to my nearest library I will ask them whether you have these books these research papers and these articles and most of the time they'll just say n we don't have it right so this became a huge problem between like sharing researches with the other countries and other people across across the country as well and that is what was Sol by people at UC berley so UC berley one of a largest universities in us they initiated something called as the worldwide web that was created with just one sole purpose of sharing research papers with other peers itself now if you have ever seen a research paper it's usually a lot of text okay let me show you guys some research paper let us go to um open ai's research paper upon something let's let's see open AI research papers okay let's see so if you if you don't know uh who is you guys know who is open AI right you have an idea about open AI anybody guys guys do you have an idea about who is open a I I don't want to be the one who should be explaining you guys who is open AI right you guys know chat GPT and all this is basically D3 all this basically open AI gift to the humanity maybe right now okay so let's see gbd4 okay let's see the research paper on gbd4 itself guys um let me get the research paper cited at where is the okay let's download the PDF it will take a second or two guys to load up give me a second or two I wanted to show you guys how a research paper actually looks like okay so this is actually the research paper of chat gbd4 okay and this is the mon monstrosity that it looks like okay it looks like it's just text text text always some diagrams are there again text text text text text a lot of texts are there right over here a lot of different like for example links are there okay some references are there right over here okay this is a long as you're able to see these are all references all these are nothing else but just references to other articles other research papers maybe some website maybe some books okay so these are all references right over here some understanding about some of the topics that are there and so on and so forth now this is how a resarch paper looks like and that is the reason why when the worldwide web was initially created the sole Focus was on transferring data transferring information from one point to the other and that is the reason why this is the picture of the world's first web page okay so this is actually the picture of the world's first web page guys this is how it actually looked like as you're able to see there is not a lot of colors there is not a lot of um like images or something like that mostly it is just text and links as you able to see these are all links if you click on it it will take you to to another page if you guys have ever used Wikipedia so most of the internet you look like Wikipedia itself like you just had text and links you click on a link it will take you to a second page and so on and so forth now again guys this is not something that you have to read you just have to see it okay if you are not able to read it properly do not worry about it I'm not telling you to read it okay at the end of the day it's just about that how did it look like okay it's just text it's just links that is all that you need to understand right over here okay so this entire internet was based upon HTML or hyper text markup language we'll try to understand what is this meaning of hyper text markup language later on but yeah the entire internet was just created using HTML itself now when we go a little bit further this is the Microsoft's original website so Microsoft one of the top uh companies in the it companies in the entire world this was Microsoft website initial website that was created using just HTML as as you're able to see this is not a very pretty looking website it looks like okay the text are all over the place the image is not clear a lot okay it does not look nice okay the websites did not look good now as the time progressed no matter how much information you are able to rally on your website if your website does not look good your website does not look appealing no user is going to use it let's assume there are two websites okay one is Netflix and the other one is f net okay there are two websites Netflix and flixnet now Netflix is a very beautiful looking website great UI great interactions and flixnet has a very shitty ass website like it's just made up of HTML itself which one would you prefer we'll of course go further with Netflix because it's much more appealing to the user itself that is where CSS came into picture CSS said that these type of websites are not going to be used by people that's need to look good it should look appealing to the users for example this is Yahoo's website from 1998 when CSS was introduced to the World guyses 1998 as you able to see this website was made using both HTML and CSS so it had a decent layout okay the layouts were good the images were a little bit better everything looked a little bit better than before are you guys able to understand this please let me know are you guys able to understand this guys please let me know are guys able to understand the intuition behind HTML and CSS guys okay great so moving further let's try to understand what is this HTML okay this is a very important terminology to understand guys uh let me open up one note for you guys for those students who are not able to understand where to access the notes from the not notes are available on Discord if you don't have a Discord profile you can just create one it takes less than two minutes to create a Discord profile at any particular point of time it can open up on the web as well on your mobile phone as well so you don't have to download any app or something like that you can just create a profile it takes two minutes just verify your email and that's it okay so yeah so right over here let me open up one note for [Music] you let me put up on the left hand side and a little bit smaller than before delete full screen okay so let's get started with it so like I said guys once again HTML or hyper text markup language now what is the meaning of this markup language first let's try to understand what is this markup language guys mark up language now some examples of markup language is basically like emojis the meaning of markup language is basically that you have some text okay can you use something else to increase the amount of knowledge being transferred using the exact same text let me repeat that can you use something to increase the amount of knowledge being transferred through the exact same text for example let's have a a example let's take up an example what are you doing now if I put up a laughing emoji in front of it I don't know how to create a laughing emoji if I put a laughing emoji in front of it the meaning of this term is like I'm teasing you like I'm just like I'm like what are you doing okay don't do this right what are you doing right over there so it's in a playful manner if I put up a smirk right over there if I put up a smirk right over there for example I do something like this okay if I put up a smoke right over there like what are you doing huh what are you doing right over there I'm teasing you right now I'm teasing you the text is the same I'm just changing the Emojis right over there and the knowledge and the meaning of the term is changing right now if I'm making it like an angry particular one okay I'm making it like an angry one itself okay like I'm angry right over here so what are you doing okay what are youing I'm angry right over there okay don't do this what are you doing I'm scolding you right now right so that is the thing with changing the Emojis right over there you are able to change the knowledge being transferred as well through the same text I'm not changing the text right over here guys I'm just changing the Emojis right so emojis are also one type of markup language only they're also a type of Mark markup language only guys another example of markup language is Egyptian halograph how many of you guys have seen moonight or am I the only Marvel geek that is here right now okay how many of you guys have seen [Music] moonight you have seen like maybe you have seen movie like The Mummy or something like that or maybe you have seen uh moonight or something like that right so in that you might have seen such type of uh images right you might have seen such type of images at some particular point of time these are called as Egyptian holographs now similar to an emoji these also when added to a particular text enhance the meaning of that text itself this is not a recent thing it's not as if like the 20th century people just found out 21st century people just found out about emojis and we are the ones who invented markup languages itself it has been in existence for a very very very long period of time guys now in HTML instead of using emojis or drawing out pigeons on your code itself you use something called as semantic tags or just tags in general okay so instead of using emojis or uh these birds and legs and people to increase the knowledge being transferred we use tags to do that now some of the simplest tags we'll be learning it in our today's class just to understand how these tags work usually when we use a tag again this is something not always usually when you create a tag it will have something called as an opening and a closing tag guys let's see one of these tags this is called as an heading tag or the H1 tag guys okay heading tag or an H1 tag this is how a particular tag looks like there will be some content this is content so it has an opening H1 tab okay and a closing H1 tab now the use of this is because like we want to say that whatever content is present between the opening and the closing tag whatever content is present between the opening and the closing tag make it big and bold that is what the H1 tag does or the heading tag as the name suggest it makes the text look like a heading that is big and bold guys okay are you guys able to understand this please do let me know nikil I know you know everything even I know this this is like teaching a second standard student how to teach how to say ABCD for me but I have to still do this because not everybody knows HTML like you do right for example not you don't know what is the like kuber what is C clusters how to put it up inside of AWS so you don't know that if I start teaching that to you right over here what I know then you will be like oh this is not something that I'm able to understand be with the class be with everybody else okay try to understand on your own p as well I'm not saying that but not everybody knows everything okay so my job right here is to make sure that everybody no matter from which background they're coming in from they're able to understand the topics and then build the project as okay so be with the class okay so right over here as you're able to see the H1 The Heading tag the opening and the closing whatever text will be there inside of it it will make it big and bold let us go to our coding environment and let us see this now I able to understand many of you guys might not be having a laptop due to that reason we are going to use an online IDE and online coding environment itself so for that in this boot cam will use Reit okay you can just search for repit all on Google okay repit and just go for the very first link itself uh you can just log in to the platform so I'll just log in right over here uh in front of you guys continue with Google uh let us log into this again guys one more thing I want you guys to remind just like evil X Esports have written I'm never going to answer such type of questions why because I don't believe in the fact of repeating myself if I something once if I tell it again as well you're not if you are not able to understand it in the first go you're not going to understand it in the second go as well but if you let me know what exactly were you not able to understand what was the concept that went over your head that okay markup language I'm not able to understand what are emojis then I can help you out right that you don't know what are emojis then I can help you out with that but if you are asking me to repeat the entire topic that took 15 minutes to complete then that is not something that I'm going to do okay so you you will have to tell me exactly what you are not able to understand instead of writing repeat okay that is not going to happen in my uh scenario itself okay but yes if you're not able to understand something let me know exactly what you are not able to understand I'll help you guys out with that okay so I've opened up repel right over here in front of you guys I forgot to show you guys how to open it up okay then let me go [Music] back okay so right over here guys once you log to repel it this is something that you can use from your mobile phone as well if you don't have a laptop or a computer you can use it from your computer as well if you want to use BS code you can use BS code I'm not saying that you have to use this this just to make sure that everybody is able to learn okay so now once you open up repit or vs or whatever the case is there this a plus button called as create Rebel this plus button called as create create rippel itself just click on that select HTML CSS JavaScript as the template and just create that rippel as simple as that as simple as that guys that will open up the entire repple for you this is where we are going to write our code as simple as that guys on the left hand side there are three different okay there are three different uh categories tabs that are opened up for us on the left hand side we have all the files that are currently present inside of this particular repet okay in the middle you are having the index.html file the HTML file that you're going to write our code in and then you are having this hello world that is the website that you will be building so you will be able to see the website from right over here as well the first thing that we'll be doing is we'll be opening up the website in a new tab so if you make it a little bit bigger you will see this button called as new tab guys you will see this button called as new tab right over here this click on this will button it will open up the website in the new tab so you can share this with your friends as well whatever website so the Instagram website that you will be creating you can actually share it with your friends you can put it up on your resume and anybody will be able to open up your Instagram website clo itself so you don't have to worry about that okay uh now once you have done that let us make this smaller okay we don't require it anymore we don't require the files as well so we'll just make that smaller as well right now only thing that we require is index.html now it has come up with some boiler template itself we don't require that we'll be writing everything from the basics because we want to learn from the basics so just look at this guys uh for a second or two you don't need to remember anything just look at this so that later on I'll be teaching you guys some of the stuff so that you guys will be able to remember it from there okay uh we'll just delete everything from here and we'll start writing the code from scratch okay the first thing that you guys need to understand about HTML is the file name okay index.html usually your main page of the website so a website might have multiple pages right when you go to Google you have Google images Google News Google uh photos Google so on and so forth okay a lot of different Google shopping uh about us and all these different pages are there but www.google.com is the main page right usually the main page is also reference to as the index of the website itself so usually the main page of your website will be called as index you can name it as anything you can name it as sh. HTML as well but mostly then people will be calling you a Lube because you don't even know the basics right that is the reason why I'm telling you guys this so usually your main page of your website will be named as index.html just like PDF is there PPT is there docs is there this is the HTML typ now the first thing that we're going to do is inside of this file we're going to use the tab called as HTML tab okay whatever HTML code that you want to write it will go in between these opening and the closing HTML tab it's basically like saying that inside of this file all the HT HML tag all what is going to go inside of your website is going to be contained within these two opening and the closing HTML tag guys so let us create that okay so HTML I hope so the okay it is not working so I will have to write it on my own itself so HTML complete that so as you able to see you are having the opening HTML tag and the closing STL tag itself s Jan you will teach STL and CSS project we'll have to on our own s then what kind of boot camp am I running if I am the one who's teaching you just HTML Cs and telling you that oh go and make Instagram on your own then what have I taught in the entire boot camp no of course not I'm going to code the entire project live in front of you explaining you guys every single line of code so you don't have to worry about that okay that is the reason why it is called as an Instagram clone boot camp not do it yourself boot camp okay um so right over here guys whatever code that you want to write that will go inside of the opening and the closing HTML tab the next thing that we have done with our HTML code is divide the code into two separate halves called as the head and the body think about the website as a human being a head and the body of the human itself so let us create those tags and then I'll explain to you guys what is the requirement of the head and the body tag guys so we'll start with the head tag so I'll just create the H ad head [Music] and then the body [Music] tag okay so these are the two tags that I've created right over here guys the head tag and the body tag now what is the meaning of these TS why have we created them please try to understand something uh when you create a particular website you want to tell the world that okay this who has created this website when was this website created what is the name of this particular website itself all this details should be there about the website right think about it as uh when you go and buy an iPhone okay what would you like when you let's assume I went to buy this particular iPhone from Apple um I I'm like yes I know I have to buy the 512 gigs I want to get the blue color and all these kind of crap I already know that but I go to buy the uh like iPhone itself would you like it if on the back of the iPhone it was written that okay this is 512 gigs this is like 150,000 this has like uh the latest processor this was made in uh China assembled in California designed in California whatever the case is all that detail about this iPhone all that detail about his iPhone if it was there behind your iPhone imprinted would you like that that would make the look and the design of that iPhone look like am I right or wrong guys guys even to understand this it will make the look and feel of the iPhone like like if you don't like that iPhone anymore we like the iPhone because of how well it looks many of the people many of the people like it because it's costly I don't know why but yeah you would like that that is the reason why when you go to a particular shop they give you a box on the box although we know what is present inside of the like inside of the Box we know that there is a iPhone we just selected it we knew that it is a blue color will open it up check it as well but still on the box all these details will be written that it was made by Apple it was designed in California assembled in China this is the price this is the color this is the number of the iPhone and so on and so all that detail is still there in the box so that is the exact same thing that happens with websites as well you want to have that information that what is the name of this particular website who created this website when was this website created all this information you want to have it within your website but you you don't want to showcase on your website itself you don't want to showcase this particular information about the website on the website like when you open up the website it is coming up in big bold letter created this website like that would look like that would not look good right so that is what we call as metadata the technical term for this is metadata or information about your product or data about data information about data information about information itself okay basically there are a lot of different terms to like Define metadata for us we'll be defining as information about our product so who created what is the name of this particular website that would be called as metadata are you guys able to understand what the concept of metadata guys are you guys able to understand what is the concept of metadata patan if you are here to do this then I will remove you from the class itself please do remember that we're here to study can spend time to study this is not tender or bubble that you are going to use students are here to study not to get harassed please you remember that I don't like these type of behaviors especially when I'm like there I will have fun with you I will even curse with you I will have awesome time with you but if you guys do this kind of crappy creepy ass Behavior writing something to a girl I don't like that please okay uh this is our country India in India you should respect a woman okay and you shouldn't do this this is not something that your parents have taught you and if your parents are teaching you this then that's up man that's really up okay very bad these type of things are something that really triggers me a lot but no issues in that okay I'm very sorry to whoever he wrote that kind of crap okay but yeah we'll continue with the class so that is basically uh it's a compliment to then I will give you a compliment as well please off from my class that's a very good compliment that I can give you because you're not here to study right you're here to message a lady right so I think so you should spend much more time complimenting people on Instagram and Facebook and Tinder and Linkedin and Linkedin as well you guys I know you guys are not even ashamed of anything you'll go on LinkedIn and do this CRA of crap okay uh so you continue doing that do not study okay she will get a placement she will go into a good comp and you then try to get back to her as well give her a compliment she'll slap the out of you okay don't act smart in front of me I Know What You Did You Know What You Did You Know I Know What You Did sit quietly and study properly okay okay leaving that out guys so metadata okay so you want to give this information about your website and any particular point of time guys now to do that that is where the head comes in all the metadata about your website goes inside of your head all the metadata about your website goes inside of the head itself think about it as the packaging box for your iPhone all the metadata about our iPhone what it is color is what is the price what is the chipset all this kind of information was put up on the Box on the packaging of our on of our iPhone right the exact same way for a website all that metadata will go inside of the head tag itself let us try to do that okay we'll come right over here and we will put up the particular information right here guys that is Let's uh take up title that is the name of the website so name of the website is something that you call as title T title okay and we'll name this title as uh let's name it as my first website okay so this is the title that I'm giving to this particular website guys that is the name of the website so title is basically the title tag basically tells you the name of your website guys so that is something that you don't want to showcase on your website if I save this and I go back to my website and refresh the page as you're able to see there's nothing on our website coming up there's nothing no information coming up on our website guys it's completely empty but if you go to the tab section if you go and look at the tab you will be able to see my first website that is the name of this website that is coming up inside the tab itself the information the tab new tab you are having my first website coming up right over there okay are you guys able to understand this if for those people who have still not able to understand what is metadata it is basically like what is your name okay your name is let's assume stre yes do you keep it like written right over here on your forehead that my name is r no right you just keep a photo identity card that okay my name is please look at this so that is what metadata is information about you who are you what is your age all that kind of information is information about you in a similar manner information about our website is metadata here what is the name of the website that is metadata right over there so that you keep it separately inside of head now whatever you want to showcase on the website whatever you want to showcase on the website that will be called as your body that will go inside of the body itself guys so right here again guys I'm not going to explain it okay for those who are not able to understand right exactly what you are not able to understand I'm not going to repeat things guys I'm not going to repeat it because if you are not able to understand the first B you not going to understand in the second b as well that's just wasting time please do not mess up the class okay if you're not able to understand something write exactly what you are not able to understand okay so right over here guys whatever you want to showcase on your website for example I'll just write this is a simple text inside of the body tag guys inside of the body tag I've have written this is a simple text guys I'll save this I'll go back to my website and whatever I had written within the particular uh body tag itself it is going to show up on your website this is a simple test whatever you want to showcase on your website not information about the website whatever you want to showcase on your website that goes inside the body tag that is the body of your website that is what you're going to show on your website itself this is a simple text that I put up inside of the body tag uh let's learn about the H1 tag we just learned about the H1 tag you guys remember right The Heading tag whatever I'll put inside of it it will become big and bold so let us put this this is simple text in a H1 tag guys so we'll put up an H1 tag right over here we'll introduce this in an H1 tag guys so now our particular this is a simple text has been put up inside of an H1 tag an opening H1 tag guys and the closing H1 tag just like what we have done in the one note guys if we go to our website and refresh the page right over here as you able to see the same text is now bigger and Bolder the same text that was showcased to our screen just a few seconds ago is now big and bold guys are you guys able to understand this please let me know are you guys able to understand this guys please let me know yes okay so the next thing that we're going to do right now is that we going to see what are the different heading tags so there are six heading tags that exist okay from H1 to H2 H3 H4 H5 and H6 let's check all of them this is H1 okay and I'll just copy this five more times I'll change the numbers right here that you guys are able to [Music] see I'll change numbers here as [Music] well and the closing so please don't not forget to change the closing tag many people just forget to change the closing tag right over here guys so they changing both the opening tag and the closing tag so here we are having six H tags heading tags from H1 to H6 let us see how they look like okay opening tag and the closing tag change both of them okay uh we'll save this and then we'll go back to our website we refresh our page so these are the six heading tags ways as you're able to see right over here h one is the biggest and the boldest okay H2 then H3 and then H6 is the smallest and the lightest out of them are you guys able to understand this please let me know now please don't ask me why there is no h zero or why there is no H7 because there is it okay there's just S1 to H6 now why is that not there the person who created HTML you can just go and ask him I don't have any idea about that but these are the six head tags that exist okay so now that you guys are able to understand heading tags there is something called as the paragraph tag as well for example right over here let us create one Whatever info that you want to put up on your website you can just put it up inside of a paragraph tab [Music] okay I'll just write some down right [Music] here I'll just see save it I'll go back to my website refresh the page so this all the text that has been put up inside of a paragraph tag will start appearing as paragraphs on your screen like it's as simple as that whatever text you put up in between a opening P tag and a closing P tag that is a paragraph tag it will appear like a paragraph on your screen guys for example if I make multiple paragraphs right over here let me put up a particular closing vtag here and then opening vtag here let save this now we'll have two paragraphs on our screen guys as you're able to see the first paragraph ends and then the second paragraph is starting right in there so again that is again an example of a paragraph tag you can have headings you can have paragraphs okay the next thing is your particular uh let's assume you want to have lists on your screen guys there are two kind of lists that are there okay ordered list and an unordered list let's try to understand them as well here we'll be understanding something about attributes okay a very important terminology in HTML guys attributes that is what we'll be understanding right now okay so let us go back to our drawing board okay we will close this up okay so now this concept of the lists are pretty simple for example if we are going to the uh let's assume our mother is telling us to go and buy some vegetables or some items from the grocery store so she will give us a list right we'll take up a paper okay we'll take up a paper right over here and we'll start putting down the items that we want to purchase for example lemon or onion let's assume chips Coke okay so we have got a list right over here so this is going to be called as the list okay because this paper that contains the list has the list items inside of it so we'll call this sheet of paper as a list and all these items all these individual items right over here as list items we'll call them as list items guys why list items because on the sheet of paper that is the list itself you're having all these list items that are present now you can create this list into two separate parts this is what we call as an unordered list because we don't know which is first okay is first okay should we buy lemon first should we buy chips first should we buy onions first should we buy coke first we don't know there's no priority level given right over there like everything is like leemon onion chips pork so there is no order between them nobody's first nobody's last everybody is on the same page everybody is together there's no kind of numbering or some kind of hierarchy within them that is the reason why we call them as unordered list another type of list that might exist in the exact same way is your ordered list one two three four let's assume the same list lemon okay onion chips and Coke okay the same list right now exists but now this is numbered guys now this is numbered right here that lemon is the first one that you have to buy then you have to buy onion then you have to buy chips and last you have to buy the co okay that is ordered right now so this is what we call as an ordered list guys are you guys able to understand the difference between an ordered list and an unordered list guys are you guys able to understand the difference between an ordered list and an unordered list guys please let me know yes now okay somebody asked me what is the difference between a paragraph tag and directly just writing text without using a paragraph tag so for example the as the name suggests you when you're writing your text directly without using a paragraph tag how will you create paragraphs when you read an article or a book does all that text is like in the same or something like that no right it is divided into paragraphs the first paragraph is for something an introduction the second paragraph is diving deeper into the topic the third paragraph is an outro from the topic itself so you divide it into paragraphs now when you're using when you're not using the paragraph tag everything will appear in the same paragraph itself you canot divide it into multiple paragraphs that is the reason why you use a paragraph tag okay so let's uh understand this again please do remember in the ordered list as well the sheet of pap paper the sheet of paper is called as a list guys the sheet of paper is called as a list okay so to create this unordered list okay it's pretty simple what you have to do is you just have to first create the sheet of paper okay inside of HTML okay I want to create this ordered list inside unordered list inside of HTML so first we need the sheet of paper itself right so to do that you just write UL or the unordered list okay and the closing UL tab so this opening UL tag and the closing UL tag okay I'll just write it down like this that you guys are able to understand that is L the opening UL tag the closing UL tag is basically your sheet of paper guys now you want to put up the list items inside of it for example the first list item is 11 so you want to put that up so you'll be using the LI tag or the list item okay list items l e m o n Lon you want to end this particular list item right over here the second list item that is your onion okay then your third list item right over here that is your chips then your fourth list item right over there that is your Coke right so that is how you basically create the exact same unordered list but using htable let us recreate that on our website as well guys so just delete everything and we'll start recreating the unordered list right over here so start what the first thing guys what do we want the first thing that we want is the paper we want the list paper itself that is the unordered list tab okay that is the opening UL Tab and the closing UL tab whatever items you want to put on this list that will go inside of this tag itself guys there the first tag that is the lii tag we'll have to create list it item tag right over here inside of the list item tag we'll put up lemon and the same way we'll create the other list items as well uh that is onion then we'll have the chips right over [Music] there and then we are going to have the cke the C in chips will make it capital just to make sure that everything looks fine okay we'll save this what is Li if you are still not able to understand what is Li then I think so you should pay a little bit more attention list items as I've already explained every single one of the items present on the list is called going to be call as a list item guys okay so lemon is one list item you're having onion and so on and so forth okay again pay a little bit more attention guys you will eventually understand everything so press enter right over here and as you able to see we are getting an unordered list on our screen guys getting an unordered list on our screen right over here guys okay in the exact same manner if I want to create an ordered list okay in the exact same manner if I want to create an ordered list out of this I have to first create the list page itself that is going to be the o tag right the ordered list so opening tag and the closing tag for the ordered list right over there and then in the exact same manner I just have to use the exact same lii tag contrl c contrl v shift it right with here will put up the closing lii tag here guys that is how you create an ordered list as simple as that you just say that this sheet of paper this particular sheet of paper is going to be o that is whatever list items are going to be contained on this particular sheet of paper is going to be of unordered list type and then the exact same thing all the list items present inside of it it's the exact same right of there for example if I go back and I change this to Let's assume the o tag right over here okay I'll change this to the o tag and I will save this contr s I'll go back to my website and refresh the page as you able to see now I'm having an ordered list on my screen I'm having an ordered list on my scen guys now I don't like this I want I want it to be ABCD not 1 2 3 4 I want it to be AB CD I don't want it to be one two three four guys can I do that yes absolutely this is where attributes come into picture now attributes are basically like a tag every tag will have certain attributes attached to it these attributes change some of the properties of those tags itself for example by default we get what two 2 3 4 on our screen guys we want to change the attribute we want to change the type to ABCD okay instead of having 1 2 3 4 we want to have ABCD right over here so what we going to do right now is we're going to go back and we're going to change the attribute that is the type attribute of the o tag so t p type and we're going to change that to Small okay we going to change the type attribute to small so we have changing one of the settings think about it as changing one of the settings of your tags okay think about it as changing of the settings of your tag here I've changed the setting of the tag to start with type A okay uh if you want to go you can go I'm not foring you to stay right over here but the class is going to be of 90 minutes long because we have a lot to study and only seven days to do so we have to finish up the project we have to learn HTML CSS JavaScript a lot is going to be taught to you guys so classes are going to be 90 minutes long even I can't do anything about it if you don't want to study you can definitely leave there's no point on being here if you are not here to study at the end of the day certific cicat don't have any value certificate only has value if you have the right knowledge associated with that if you don't have the knowledge associated with the certificate the certificate has zero value on your resume so you're not learning here just here about the certificates putting down attendance I can guarantee you one thing is still not going to get the certificates because I have some fallproof plans that are there throughout the boot Gams okay like for example putting up some McQ questions in the edance sheet and that questions will be based on the examples that I use in the class so you're not going to get it you're not going to Google it up and get it for example I can ask a particular question that for explaining um like the topic of let's assume metadata what example did shya use did he explain to you guys about the iPhone did he explain to you guys about the MacBook did he explain to you guys about the iPad or did he explain to you guys about the iatch if you are not paid attention in the class then you will not be able to answer these type of questions and this is not going to get you on the internet and you will have just five minutes or seven minutes to answer the question after that the link will be closed so guys again if you're not paying attention to the class there's no way that you can get the certificates as well okay so right over here as you're able to see the TS have been changed to the type has been changed from 1 to 34 to a b c d right over here guys okay to a b c d right over here let's assum I don't want that I want it to be changed into capital A B C D so I can just change the tab to Capital a guys I can just change the tab to capital a right over here I can go back and as you will be able to see now it is capital A BCD right over here I want to use Roman numerals I want to use ran numerals then I change the T type to small I I'll change the type to small I guys I'll save it I'll go back to my website I will reload the page as you able to see now it is coming up as Roman numerals I want to use Capital Roman numerals I'll again go back I will again change this to Capital I right over here I will save this I will go back to my website refresh the page and as you're able to see now everything is capital Roman numerals I want it to start counting from five right now it is starting to count from one then two then three then four I wanted to start counting from five five then six then seven then eight so I can just change another attribute of the O category itself that is the start attribute start attribute I'll change it to five okay so now it will start counting from five now it will start counting from Five Guys instead of one so I go back to my website and refresh the page as you're able to see now the counting is five six 7even and eight okay I want you to start counting from five but in the reverse direction that is 5 4 32 that is how I wanted to count I wanted to count starting from five but in the reverse Direction itself 5 432 that is how I wanted to count I'll change another attribute right over here and I'll just write reversed I just write reverse right over here so that will count start counting from five but in the reverse Direction okay so I go back to my website and refresh my page as you able to see now it is 5432 right so changing these attributes there are multiple attribute for every single tag itself you get to know these by practice this isn't something that you are born with this is something that you can memorize at the end of the day there's something that you learn with practice the more that you practice programming the better you get at it there's no shortcut to doing that okay so that is what are attributes are you guys able to understand attributes in general guys please let me know are you guys able to understand attributes in general guys please let me know yes okay great now that you guys have understood attributes you guys have understood what are semantic t okay tags in general itself okay you have understood about the heading tags the paragraph tags the um tags itself the next thing that we going to continue learning further is something that I told you guys to look for in the stting okay if you guys paid attention or those people who already know HTML there was something called as the dog type HTML right over here who was that fellow who was shouting a lot in the class that when I be going to start with CSS okay I want that fellow to answer this what is the meaning of this particular line and why have I not written it in most of the code that you will see at any particular point of time you will see this particular line being written at any particular point of time should we write this particular line of code should we not write this particular line of code what should be the Kee what is the meaning why what is the utilization of this line of code guys can somebody explain that the type of the document is HTML so the name of the document is also HTML that is Justified right over there version of HTML but why how is this telling you the version of HTML and why do we want to tell the version of HTML like it's it's already written right over here if you guys are not able to see it index.html already showcases an HTML file logo so it is already HTML file why do we need to write this particular line of code guys again all of you guys are 20% right only 20% the rest 80% of the logic is gone now this is the reason why you should start from the basics this is a very very very frequently Asked interview questions for internships in most of the companies like what is the meaning of this particular line of code and why do we use it okay these are very famous interview questions in frontend uh internships okay in the interiew inters for internships itself now the original reason for this particular line of code was to tell the version of HTML that this is HTML version five but why I'm already able to see this right then why do I need to tell that okay this is the latest version of HTML again the reason for that is because when HTML 5 was introduced to the world okay when the STL 5 was introduced your most of the browsers throughout the world whether it be your Chrome browser your edge browser your Opera Mini browser all these browsers that were there the default understanding for these browsers was for HTML version 4 and not HTML version 5 although you will be writing your code in HTML version 5 but the browsers will interpret it as the version four of HTML and not the latest version of HTML itself that is the reason why you put this particular line of code right over there to tell the browser this is not to tell you guys again that is where you guys are lacking in your knowledge this is to tell the browser that dude do not treat this as HTML version four all this code is the latest version of HTML itself that is HTML version five so you treat it as such you tweet it as the latest version of HTML now right now the current scenario is that almost every single browser has adopted HTML version 5 and by default they see the websites in the version five of HTML so right now if you write this code if you don't write in this code it does not matter because for most of the browsers you are writing htl version 5 they already understand by default htl version 5 they have also upgraded themselves so if you're writing this code or you're not writing this code it is the exact same thing are you guys able to understand this please let me know are you guys able to understand this guys please let me know so as soon as I completed and teaching you guys this I saw somebody's comment sir can you please explain what is dop I like oh I explained the entirety of ramayana to you and you guys are asking who is ramayan or who is Ram I'm like nice work man nice work okay so that is what you guys need to understand okay uh this is a very important interview question as well not important but frequently asked this for fun so you should know this okay uh okay so we'll stop right over here for today I don't want to overburden you tomorrow we'll start with images okay what are images border property of images how to make an image look like 3D all this kind of of image related stuff we'll be doing tomorrow and again we will not see my aim is not to spend a lot of time on HTML CSS and JavaScript my is to spend as much time as possible teaching guys the project and in the project itself whatever new things that will be coming up I'll be teaching guys right over there itself so we are able to learn both the project as well as HTML CSS JavaScript a little bit in advance together because we don't have a lot of time that's the reason why from Tomorrow onwards say we'll start with the basics of Cs understanding classes IDs we'll try to understand a little bit of CSS right over there and then day after tomorrow we'll start with JavaScript we design the basics of JavaScript right over there guys and then we'll immediately start with our project because we don't have a lot of time guys and our priority is the project our priority is to understand the project properly every single line of code so that is how I'm going to handle that for you guys will that be fine please let me know will that be fine guys please let me know yes okay how was today's class I know a little bit of BT happened in the middle but how was today's class did you guys like it or you guys enjoy it were you able to find like were you able to understand most of the stuff being taught in the class please let me know was it okay good or something like that you enjoyed it right now I am able to see many of you guys have still not connected with us on Instagram guys it is a humble request from ourn because connecting these free boot camps conducting these free events we want to make sure that we are able to create a community around it that is the aim of these boot camps to inculcate the habit of learning within you to inculcate a ideology within you that you can learn at any particular point of time right so we are really pushing forward to create a community where whatever you guys have suggested to us for example somebody suggested python basic to advance we already have done that course we already have conducted a boot camp on that we'll conduct a boot camp on it on future as well data structures and algorithms boot camp computer programming boot camp C++ Java language boot camps that you have your full stack boot camps your data science boot camp cyber security boot camps we are continuously pursuing ourselves to bring more content to you guys so Project based video and certification uh videos on YouTube for free we also going to bring that forward for you guys where you will be working on full stack CL of websites like Twitter like basically X then we are going to we are currently working on a Discord clone then we are going to work upon a lot many number of clones right over there almost I think so we have collected 50 60 clones as of this point of time we're going to work up on data science projects slowly and steadly all that will be fully available on YouTube as well as that will be free and you can get certified for that as well by submitting your project so all that we are continuously giving it for you guys we've also started pushing up such type of reals as well as well as more content will be pushing up very soon so if uh you guys I that is a humble request from find please do connect with us on uh Instagram LinkedIn or whatever the cas is whatever you guys feel comfortable with I pinned up the link to the Instagram page in the live chat before uh sharing the attendance with you guys if you guys can give two minutes of your time first to connect with us on LinkedIn or on Instagram whatever the cas is it will be great for us okay so uh like I said guys before giving the attendance I'll be giving the attendance in the next two minutes okay so even if you write attendance for the next two minutes it's not going to help you guys out and at the last day of the boot camp the attendance will only be shared on the Instagram page itself so if you guys are not connected with us on Instagram you'll miss out on the attendance as well like I said it is the interconnected thing so please do connect with us on Instagram do look at the reals try to see if there is some kind of knowledge that you are able to gain from it or something like that okay uh so I've already provided you guys with the Instagram link in the live chat please do connect with us I'll be giving out the attendance link right now in the next minute or so okay so in the meanwhile please do connect uh on with us on Instagram okay for those who don't use Instagram you can still create an account and just connect with us right there it will take less than two minutes for you to do that like I explained earlier as well the notes for The Bootcamp is already provided in the Discord server the link to the Discord server is down the description of the video itself all the notes related to the boot Camp all the PDF that we'll be using and everything will be provided on the Discord server as well okay as well as the project so whatever project that we going to build the code for that will also be provided on the Discord Channel okay so I've already sent you guys uh the attendance sorry the Instagram link now I'll be sharing the attendance link with you guys give me a second okay send link shorten URL copy right here guys I have provided you guys with the attendance Link in the live chat you guys can start filling up the attendance link as well guys so what about HML forms if we are using it in our project we'll be explaining you guys so we will be using it to create the uh login and sign up pages right so we'll be explaining in HTML forms right over there you don't have to worry about that so I provided you guys with the attendance link I've also pinned up the Instagram link as well so you guys can follow us on Instagram from right over there also I provided you guys with the attendance uh Link in the live chat so please start filling up your attendance also do let us know what are your thoughts on the reals okay if you guys are liking it or not just put it down in the comment section or something like that we'll definitely love to hear a little bit more from you guys so that uh we are able to improve ourselves to giving you guys what you guys need at the end of the day okay so that is the aim with the boot camps guys that we are able to understand what you guys need what you guys want from us and we are able to deliver upon that as well right so please do go through the reals okay let us know your thought proc on the scene okay and I've also provided you guys with the attendance Link in the live chat the attendance link is there in the live chat right over here all these links that I'm putting up is the attendance link please start fting up the attendance guys we'll meet in our tomorrow's class and will continue from right over there will that be fine guys please let me know we'll meet in our tomorrow's class and we'll continue from right over there will that be fine guys shy can just create an Instagram account yes guys for those who have ped up the attendance you guys can leave the class please not forget to subscribe the uh particular Instagram profile itself okay before going okay so thank you so much guys and we'll meet in our tomorrow's class and we'll continue from right over there thank you guys bye-bye bye-bye bye-bye uh commity because my Discord account has was disabled you can create a new account right over there it takes two minutes to create a new [Music] account yes you can definitely do that in your college project as a mini project itself you don't have to worry about that okay thank you so much guys we'll meet you at tomorrow's class and we continue from right there guys this L is in the live chat thank you guys thank you bye guys

Channel: DevTown

Views: 8,687

Keywords:

Id: VNWoqueSLy8

Length: 70min 53sec (4253 seconds)

Published: Sat Dec 16 2023