Conquering freeCodeCamp - Basic HTML and HTML5 - Live Stream #1

hello well welcome everyone to the conquering freakout camp curriculum challenge oh boy that's a long name how is everybody excited for this new challenge and the little nervous at the same time but it should be a lot of fun in today's episode we are going to learn HTML and html5 on the free code camp platform if you want to follow along which I highly suggest you can go to wicked chem that or / learn and also it might be a good idea for you to do it on your own and then maybe come back and watch me do it so basically this way you can get your hands dirty and you can learn the most out of it but in the meantime let's see who joined the chat hello everyone Jessica Jenna leerin everyone who joined good in this episode we are going to have 28 lessons I'm planning on covering all the HTML and html5 the basic section which is part of the responsive web designs justification they say to take $300 but maybe we can do it faster okay then tomorrow we're going to look into basic CSS we should also be fun I'm going to read there's a lot of explanation also so I'm going to kind of mix it up so maybe a radiates all for some sections and for others no I'm going to also give you my input on what these elements should do and when we'll do use it and stuff like that so yeah I haven't gone through this section yet because I wanted to keep it like in the first time I said although I completed it two years or three years ago in the last livestream I recited my progress and they might have added something new in the meantime I'm not 100% sure so basically this should be beginner friendly for everyone who joined in the meantime and I think we can get started okay so basic HTML and html5 first of all let me know if the text is big enough for you it's at 130% you should see fine if you have it on full screen I wouldn't want to zoom in even more because it might be disruptive when we get to decoding and life could be also but okay let's see so HTML or hypertext markup language is a markup language used to describe the structure of a web page I usually call it like the bones in a human body because all the websites are built with HTML and then you wrap it so basically there's the bones and then you add CSS to add styling of the page so there's the ski and all that and later you can add JavaScript to make it functional so HTML think of it like paying the bones of the bare bones of a web site and we have here an example there are different tags in HTML we're going to cover all of them or at least the most important ones in this episode of the challenge here we have an h1 which is a heading a top level heading there are six of them but I guess we'll cover that too we have a paragraph and here we have a list and ordinated list with three list items so basically this code translates to what you can see here all right let's see hypertech's part of HTML comes from the early days of the web and its original use case pages usually contain static documents that contain reference to other document these references contained hypertext links used by the browser to navigate to the reference document so the user could read the reference document without having to manually search for it okay as the web page a web application grew more complex the w3 consortium updates the HTML specification to ensure that a web page can be shown reliably on any browser the latest version is html5 oh right so that's pretty much the introduction so let's go to our first lesson okay so you can see here this is basically how difficult camp is constructed on the left you have the description here on the middle you can write the text sorry the code and then on the right you can see live okay the first lesson is say hello to HTML elements welcome to the free code conditional coding challenge this will work you through web development step by step first you start by building a simple web page using HTML you can edit code in a code editor so here we can write code which is embedded into the webpage do you see the code editor put the code in the code editor that says hello yes I can see it good that's an HTML element most HTML elements have an opening tag and the closing tag so this is an opening tag and the closing tag with a forward slash if challenge has tests you can run at any time by clicking the run tests button when it was when you pass all tests you will be prompted to submit your solution and go to the next coding challenge alright so the first one to pass the test on this challenge change your h1 elements text to say hello world so as you can see now it says hello and we need to add here world if we run the test look at the head we finished our first challenge awesome submit anger to the next one good with the h2 element over the next few lessons we'll build an html5 cat photo web app is by piece the h2 element we'll be adding in this step we'll add a level 2 heading to the web page okay and there are a total of eight so six headings which basically indicate different levels of subheading so h1 to h6 okay let's see add an h2 tag that says happy photo app to create a second HTML element below your hello world alright so h2 and here we can say cat photo app eh oh yeah it will run automatically run the test array one more down awesome good inform with the paragraph element the elements are the preferred element for paragraph tax on website he is short for paragraph you can create the paragraph element like this ah some good create a P element below your h2 element and give you the text hello paragraph alright so that pretty simple right yeah and we can space it out so it will be cleaner the tests look at that it works this is pretty fun and easy at the same time let's see what we have next fill in the blank with placeholder text web developers traditionally used lorem ipsum text as a placeholder text the lorem ipsum text is randomly scraped from a famous message by cicero of ancient rome that's named her if some text has been used as a place for the text by types sitters since the 16th century oh look at that I'm learning something new today and this tradition continues on the web well five centuries long enough since we're building up cat photo app let's use something called key tips in text hmm that's nice replace the text inside your P element with the first few words of this kitty hip some text the first few like that many let's see run the test oh look at that awesome good good good whoo look at that they commented our code yet uncomment HTML commenting is a way that you can leave comments for other developers or for you in the future within your code without affecting the resulting output that is displayed to the end-user commenting is also a convenient way to make on inactive without having to delete it entirely yep that's right committed HTML outweigh this lower what's that our sign an exclamation point and double minuses and end with double minuses and a greater sign oh that was hard to explain okay uncomment your h1 h2 and P elements so basically we need to deal with these and you can see now that the text appeared again okay let's run a test yay whoa well already 80 percent complete and only ten minutes best that's nice good comment out HTML remember that in order to start a comment you need to use this yeah and then at the end you need this here you'll need to end the comment before your h2 element begins mmm comment out your h1 element and your P element but not your h2 okay so basically we want to comment out the h1 and we want to comment out the P tag so we have an opening and closing around the P tag and around the h1 element run tests and it's completed delete HTML elements whoo that's it our phone doesn't have much vertical space let's remove the unnecessary elements so we can start building our cat photo app delete your h1 element so we can simplify our view all right oh this one okay so we get rid of hello world perfect now we are a quarter away that's nice html5 elements these are fun right html5 introduces more descriptive HTML tags these include main header footer Navy do articles section and a couple of other yep and I highly suggest you to use them these tags give a descriptive structure to your HTML make your HTML easier to read and help with search engine optimization or CEO if you're having a blog or a website and you want to rank on Google you might want to take care of this and also accessibility the main html5 tag helps search engine and other developers find the main content of your page example usage a main element with two child elements nested inside it okay so you can see here it's the main tag it's wrapping the other two tags note many of the new html5 tags and their benefits are covered in the applied accessibility section okay so we're going to focus on that later a good let's see create a second P element after the existing P element with the following Kitty lorem ipsum text or whatever all let's copy days let's sit then create a main element and that's the two P elements inside the main element okay so we need to create another be tag and we want to wrap it around the main tag me okay and let's in death date in that did oh that's a funny word but you can see we basically give it a tab so it goes a little to the right so it's much more visible that this main tag is wrapping the inner tags let's run the test and it's completed perfect hello to everyone who joined in the meantime I won't focus very much on the chat so if something is wrong you can spam the chat or let me know but other than that I'm going to focus to finish the challenge okay good the next one add images to your website hello now something visual you can add images to your website by using the IMG element and point to a specific URL by using the source attribute okay so we're learning a new tag and an attribute and here's an example so we have image and inside the tag you can see here we have the source and we say the URL of the image note that the image elements are self enclosing so we don't have an opening and the closing pack all image elements must have an alt attribute the text inside the alt attribute is used for screen readers to improve accessibility and is displayed in the image fails to load okay if the image is purely decorative using an empty alt attribute is best practice okay ideally the alt attribute should not contain special characters unless needed let's add alt attribute to our image example of that above okay so along with the source attribute there is an alt attribute now let's try to add an image to our website within the existing main element so this one insert an image element before the existing P element okay so here they apparently give us some space yeah okay now set the source attribute so that it points to this URL all right let's use it so image and the source should be this URL look at that we have a pretty kitty appearing there finally don't forget to give your image element an alt attribute oh whatever and it should say let's see kitty perfect so basically if the image you want work you can see that there is this icon of the failed image and the kitty word next to it so what we put here in the out so that's why we need to use the alt attribute run the test all right let's move to the other one link to external page with anchor elements all right so that's interesting now you can use an anchor or a tag to link to content outside of your web page anchor elements need to destination web address called an F or not an F href attribute they also need anchor text here is an example so we have the a tag with a giraffe attribute which specifies the link and inside the tag the opening and the closing tags here we have the text we want the link to say okay then your browser will display the text these links to free coconut org as a link you can click alright good create an age element that links to pre cat photo app comm and has cat photos as its anchor text all right and I think we need to edit here so a href and we need this link all right we closed it and also we closed the a closing day and here we can say cat photos good now if we would click this like not found that's interesting all right run the tests perfect next one right ask me later to donate good link to internal section of a page with anchor elements all right so basically we can use the age that sorry the a tag to give it an anchor or the a track property we can give an ID of an element on the page let's see to create an internal link you can assign a link href attribute to a hash symbol so the hash tag here plus the value of the ID attribute for the element that you want to internally need to all right an ID is an attribute that is uniquely describes that uniquely describes an element so basically you can have an ID or any element on the website but it has to be unique as you can see here the h2 has an idea of contacts header and then you can add the what's this called the ash and the hash symbol followed by the ID and when you're going to click the link it will jump to this section okay so yeah what I said when user clicks the contact link they'll be given to the section of the webpage with the contacts header element okay let's see what we have to do for this challenge change your external link to an internal link by changing the ref attribute to a footer okay so we change this to put ID all right and the text from cat photos to jump to button but jump to button all right remove the dark yet blanket from our anchor tag scenes that cause the linked document open in a new window well we don't have oh yes we do look at that so they added target blank so basically this what this does is when you have a link on your website and you want that link to open in a new tab you will add this property target this had to be a target with the property of blank for value okay so let's delete that good then add an ID attribute with a value of footer to the footer today apparently added the footer here copyright cat photo app and we need to give it an ID of footer like death so now if we click the jump to button and look at that it will jump to the bottom which is the footer all right run the tests perfect mm okay let's see lest an anchor element within a paragraph hmm.you connects no you can nest links within other text elements so here we have an example of the P tag and here's a link okay [Music] it let's break down the example normal text is wrapped in the P element so we have your example next is an anchor element which requires a closing a tag target is an anchor text anchor tag attribute that specifies where to open the link okay and we give the HF top on to the link probably the final output of the example will look like this so basically this is the entire paragraph and inside it we want to have a link all right now nesting the existing a element within a P element just after the eggs listing main element so this one the new paragraph should have the text that says few more cat photos where cat photos is a link and the rest is the plain text okay so we open and close the egg here around the a tag and we are going to save you more and it already says cat photos because we had this before so now you have a text and a link inside awesome than the test perfect we're almost halfway there make dead links using the hash symbol okay sometimes you want to add eight elements to your website before you know where they link they will link that's interesting this is also handy when you're changing the behavior of a link is in JavaScript which we'll learn about later this is like a spoiler alert the current value of the href attribute is a link that points to freak add photo and calm replace the H ref attribute with a hash symbol and also known as action Mafia to create a dead link for example a giraffe is hash so we have this and we want this to be like that yeah this is usually used when you want to have a link on the page but you don't want it to link anywhere you just want it to trigger something like model or basically you'll use this as a button on the page so you want to trigger an event or something but we're going to learn more about it in the JavaScript section all right all good so far chat is this at the moment HTML maybe most of you're familiar with so it's not something you know but we're going to get to the harder parts also in the future good let's go to the next one turn an image into a link that's something we can do you can make elements into links by nesting them within an a element so you can see an example we have the image which has the source of the image and alt tag and it's wrapped inside an a tag okay remember to use I keep forgetting this is a hash symbol okay as you attack each rep property in order to turn it into a dead link are raised the existing image element within an a on anchor element once you've done this hover over your image with your cursor your cursor normal pointer should become the link clicking pointer so yeah as you can see now if we hover over a tag it will change our cursor from the normal one to the pointer one but it's not the same fold a image because the image is not clickable so we want to have an a tag with a half of e hash symbol let's close the tag and indent this would give it a tab like that and now look at that when we hover over the image it changes the pointer all right put the yet the point the cursor okay on the pocket changes the cursor to pointer all right next look at that we're 50% complete in 28 minutes oh that went fast okay create a bullet did a nerd on it at least alright sober with lists now HTML has a special element for creating an ordinate at lists or bullet point styled lists an ordinate at least start with an opening the UL element follow it follow it follow it what were boy okay allowed by any number of li elements finally another naked list close with an UL tag so basically we have the opening tag the closing tag and inside here we have as many Li tags we want okay remove the last two elements and create an unordered list of three things that cats love at the bottom of the page okay what do cats live so we have a ul opening and closing and here we're going to have the allies let's copy it and paste it here it so what do CAD gets love milk uhh and biting placed like this okay the tests perfect next one Ping's cats love ethnic laser pointers lasagna that's what okay great an order ordered list list angular HTML has another special element for creating ordinate or the red lists English or numbered lists ordered lists start with an opening Oh L so when we have another night at least is ul and when it's ordinated is oh L followed by any number of Li elements so basically is the same just change the UL to Oh L okay create an organist of the top three things cats hate the most okay cats hate what do they hate what and maybe dogs I don't know ice because oh well when okay oh I forgot I forgot to explain good so basically you can see now that with the u UL we have the dot lists but when we change it to Oh L we have one two three and if we would have to add I don't know how many more it will automatically add the numbers yeah so as we said they ate cucumber okay run the tests perfect rate a textfield now let's create a webform input elements are a convenient way to get input from the user you can create a text input like this also like the image tag the input tag is a self closing tag create an input element of the type text below your lists also as a spoiler word the input text sorry the input tag have multiple types so for now we have input of type text so this is used to gather text from in the user and you can see now this input appearing and we can type inside it which is low correct next one add the placeholder text to text field placeholder text is what is displayed on your input element before your user has input identity you can create placeholder text like so we have the input tag the type of it and then we have a placeholder attribute and decide it you can write whatever you want to be displayed before the user enters something note remember that input elements are self closing okay set the place hood placeholder value of your text input to cat photo URL all right let's see placeholder will be kept for to URL and look at that now this faded text appeared on top of the input but if we click and write something it will disappear and we stay like that until we delete it run the tests perfect submitting go to the next challenge a to form element you can build web forms that actually submit data to a server using nothing more than pure HTML you can do this by sole specifying an action on your form element for example form action and we have the URL next your text field inside the four element formula and add the action submit cat photo attribute to the formula all right so around the input or and far like that let's nest this and we have the action be submit at photo like that all right so basically now if we would have a submit button I think we need then this form will be submitted to this link so the data will be passed to that link all right next one at the submit button to our form yeah so basically what they said before let's say the submit button to your form clicking this button will send the data from your form to that URL you specified with your forms action attribute here is an example of a submit button so we have the button tag now which has a type of submit also the input could be a type of submit and we will act the same as a button all right let's see what we have to do and the button as well as the last element of your form element with a type of submit and submit as it's text okay under the input we have button let's close it inside it we are going to have a Texas submit and we have a type of submit like that so now if we click this button it should submit of the form yeah they probably have a way around maybe they added a prevent default on the form of something but usually when you click a button other types of meat inside the form it will submit it and you can see that the page below door goes to anchors yeah 71% completed let's see use html5 to require field okay this one is a good one you can require specific form fields so that the user will not be able to submit your form until he or she has filled them out for example if you want to make a text input field required you can just add the attribute required within your input element like this yeah so this usually goes to the inputs like if you have a forum you want the user to enter an email and the password or something and you want them to make sure that they add something in those fields you add the required property or attribute alright let's make your text input a required field so that your user can submit the form without completing this field then try to submit the form without inputting any text see how your html5 form notifies you that the field is required okay let's see some are we can pretty much submit it but if we go to the input and add required now look at that so we have a message appearing please fill in this field and if we fill in the field then we can submit it perfect let's go to the next one you okay great a set of radio buttons you you can iterate the buttons for questions where you want the user to only give you one answer out of multiple options great the buttons are our type of input as I said before there are multiple types for the input each of your ADA buttons can be nest within its own label by wrapping an input element inside of a label element it will automatically associate the radio button input with the label elements from the gate so basically the label is used to give your radio button a name or soul a text near it because if you're going to see on the webpage reiterate the buttons or three circles and it won't be very I mean how would you know what they mean right so next to each other I mean next them it must have a text so you know that you want to select one of the other all right yeah here is an example of a ready button so we have the label and inside it we have the input of type radio' and the name indoor/outdoor the name attribute is required so you can see here are related radio buttons should have the same name attribute basically if you have multiple radios but type inputs you want them to have the same name to that the website knows that they are on the same type okay by creating a group selecting any single radio button which will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user here's an example okay so we saw it it is considered best practice to set a four attribute on the label with a value that matches the value of the ID of the input alright yeah this is also used so even if the input it's not inside a label if you keep a for attribute on the label it will know that it's related to that input okay let's see our challenge add a pair of radio buttons to your form each nested in its own label okay one should have the option of indoor and the other should have the option of outdoor both should share the name attribute of indoor/outdoor to create a radio group okay let's copy this because it's easier and we can place it here above the button and let's indent it okay so we have the label for indoor which is a type of radio and it has the name indoor outdoor and it says indoor yeah and then we need the other one to say outdoor rather just endure it should say outdoor like that yeah indoor/outdoor and you can see now that if we click on one of them it will be active and it will dis deactivate the other one all right good run the tests seventy-nine percent completed perfect you'd create a set of checkboxes so yeah basically the main difference between the radio and checkboxes is that on radios you can only have one active at the time while on checkboxes you can have multiple checked okay let's see what they say here forums commonly used checkboxes for questions that may have more than one answer okay checkboxes are a type of input the same at the radio it's nested they say the label all related checkboxes input should have the same name attribute okay it is considered bad practice to explicitly define the relationship between a checkbox and it's gone the corresponding label by setting the for attribute so basically the same as above add to your form a set of three check boxes each check box should be nested between its own label all three should share the name attribute of personality all right so let's copy this code and again above the button maybe let's paste it in three times personality what personality should Arquette have loving is the first one playful is that thing let's do it anyway playful and then I didn't hungry oops it should be lowercase on really like that I guess that's a personality nowadays yeah so now you can see let's see there is a mentor there's somewhere input labeling book label Oh playful oh it did add a little bug okay so let's put these three oh and there is a breaker Oh that's what it stands for right break or just break I forgot so basically if we had the three labels here you can see now that the radio button will only be active one while the checkbox can be at the same time all of them active or checked okay run the tests two percent perfect how far 46 minutes that's insane yes it's faster than I thought use the value attribute with radium buttons and checkboxes okay let's see when the form gets submitted the data is sent to the server and includes entries for the options selected inputs of type radiant checkbox report their values from the value attribute for example we have the first label and the input and it says value indoor so if this one is selected and we're clicking the submit button the value for the indoor-outdoor is that's the name of our radio group will be Indore if this one is selected obviously it will be out the door [Music] if you mean the value tribute the submitted form data uses the default value which is on in this scenario gives the user click the interruption and submitted the form the resulting form data would be indoor/outdoor on on interesting which is not useful so the value attribute needs to be set to something to eat then divide the option give each of the radio and checkbox inputs the value attribute use the input label text in lowercase as the value for the attribute okay yeah this is something you would usually do I still don't like the fact that here is not space so you can see clearly that these are radio buttons sorry inputs and these are the checkboxes all right so we need to add we have the type and the name and let's say the value for this one is the endure and value for this one will be outdoor here we're going to have a value of loving lazy and energetic okay those are much better lazy and energy good basically this property won't do much for our front end so we can't see it here but when we submit the form you will be able to see it on the server side all right good we are pretty close check radio buttons and checkboxes by default you can set a checkbox or a button to be checked by default using the checked attribute to do this just add the word checked the inside of an input element alright so if by default you want the input to be checked you will give this attribute all checked this is used when you want to create an account and they will ask you do you want to receive emails from us and they will do the input to be checked by default yeah that's a that's a hacky thing okay said the first of your radio buttons and the first of your checkboxes to both be checked by default okay let me clean this up a little bit so the first radio will be checked and also the first checkbox look at that so you can see by default xf1 yeah run the tests complete I think we only have a couple more next many elements within a single death alright so we arrived to the div element which is probably the most used element on web pages basically when you don't know although you should or when you don't have like an exact tag to use to wrap your content you will put it inside the div but you should try avoiding it as much as possible because it's not very semantic so the development also known as the division element is a general-purpose container for other elements the development is probably the most commonly used HTML of all yeah so what I said okay just like any other non self closing elements you can open a development and close it yeah next your things cats love and things get hate lists all within a single deep element I put in your opening div tag above your tight things cats love both within one day okay so basically this should be wrapped inside a div although maybe you want to use a section tag a div it's fine in this case the next one declared the doctype of an HTML element right one second okay the challenges so far have covered specific HTML elements and their uses however there are a few elements that give overall structure to your page and should be included in every HTML document at the top of their document you need to tell the browser which version of HTML your pages using HTML is an evolving language and is updated regularly most major browsers support the lays of specific latest specification which is html5 however older web pages may use previous web versions of the language you tell the browser this information by adding a duck type on your first line where that the duct part is the version of HTML or html5 you will use doctype HTML well in reality hmm maybe you will lose something like Emmet and when you will generate your HTML it will be added by default so although you it's good for you to know what this does you will probably not write it your own very much okay the exclamation point mark and uppercase duct-tape is important especially for the browser the HTML is not cases next the rates the rest of the HTML code needs to be wrapped in HTML tags the opening HTML goes directly below the doctype and closing HTML okay here's an as if here's an example of the page structure good yeah that's good so basically we'll tell which type of the HTML is on the first line and then we wrap everything inside the HTML tag okay the challenge add the doctype tag for html5 to the top of your of the blank HTML document in the code editor under it open add opening and closing HTML tags which wrap around an h1 element the heading can include any text okay so well we can copy this because why not and here inside the h1 sorry the HTML tag they need to add an h1 tag and it can say hello world all right that's pretty much it we have the duck type the opening and closing HTML and inside it the h1 we are also going to have the head and body which are important but I guess they'll tell us more about in the future let's see yeah look at that so now we have handy buddy good define the head and body of your HTML document you can add another level of organization in your HTML document within the HTML tags with the head and body elements any markup with information about your page would go inside their head then any markup with the content of the page we'd go inside the body exactly so inside the HTML you had other two tags which probably going to edit in this exercise edit the markups of there's an eight head and body the header Matt must should only include the title and the body elements should only include h1 and B okay so think about the head tag to be everything that's not it won't show on the page so you have the title which will basically be this part here so the text which appears on the tab also you have the meta tags which will tell the browser you can add Co there so like the description of the website the author and all the Co part the search engine optimisation part then it will there you can add the meta tag for when you want to create a responsive website and there you also going to add the link to the CSS yeah that's big basically because you want the CSS to load fast so it will land in the ad park the head tag yeah and think those are the most important tanks ahead there might be a couple more but these are the general ones okay so let's add the head tag around the title and let's add a body tag around the h1 and VTEC all day like that we're inventing it because we want it to be pretty and we can test it oh look at that 100% that's nice great so basically we know HTML now HTML geniuses now look at that that's fun oh boy I really thought it will be much longer but apparently we finish it within an hour which is pretty nice although it will it was a little easier for me probably but it should be easy for you to even if you're starting up you just need to be to focus a little bit to understand heat tags but if you're going to code then you're going to use the tags it will get easier and easier because all the tags are pretty semantic so if you want a paragraph so it's text on your website it's obvious that you if you want to use the P tag if you want a list with something then you're going to use one of the two uh nor donate at least an order naked list depending if you want it to be bullets in the front or if you want to be numbers if you want to form a button and all that there are specific tags or that okay up club nice welcome alright so in the chat now if you have questions let me know so I can answer these them and it could be like the second part of this episode I think for those of you who want to see the basic CSS that will come up morrow morning morrow my morning but 10:00 a.m. UTC +2 and for those of you who are watching in the future the recording of this livestream the next episode should be alive already probably depending on when you're watching okay yeah so if any of you have any questions related to HTML we can color now if not and that's it it much in an hour we completed and we learned HTML HTML so basically the web pages are built using HTML CSS and JavaScript mostly along I mean the bare bones of the web sites the HTML is the most simple of all of them okay so we have a question what's the difference between name and ID attributes in a neighborhood tag right yeah that's a good question so I always wondered death too but basically with the name you can specify for example if we have the the radio box the radio buttons or how they call them the check boxes you can see that with the name you can give them the group name so all of the radio buttons and check boxes you want to have be in the same group to give them the same name and then the IT is something unique if you're going to use an ID on an element on a page you won't use it on any other element that has to be unique so for example if you're thinking about having three check boxes of them will have the same name because they're in the same group and then they'll have different IDs oh yeah that's pretty much different yes we tidy you can style sazu easy I recommend that you use classes to style I usually use ID to target the tags in JavaScript so basically if you have a button on a page which you want to do something specific you edit an ID and you can add an event listener in JavaScript targeting that ID yeah that's a topic for a future episode of the series but that's what I use the ID for and then you can use classes to style B tags usually you want although you can style an ID in CSS I usually recommend you use classic okay i watch Kevin's Paulo's lecture he uses classes all the time exactly I use classes all the time myself so classes for CSS IDs for JavaScript that that's a not really a rule I mean you can use IDs in CSS but I don't know maybe a nice to have like something so it it's easier if we follow this as I said it's not necessarily a rule but a nice to have or do or whatever right if and if you have any questions if not we're going to up here and we're going to continue tomorrow with the CSS so basically we're going to take the HTML and we're going to apply some nice styling on top of it to make it beautiful all right thank you all for joining I hope you find this useful and I see you in the next episode take care bye you

Channel: Florin Pop

Views: 29,190

Keywords: freecodecamp, learn programming, programming for beginners, live coding, live, live stream, programming tutorial, freecodecamp curriculum, florin pop, coding, coding for beginners, planning, coding tutorial, basic html, basic html5, basic html and html5, learn html, html for beginners, html tutorial

Id: pACOweChpEU

Length: 64min 31sec (3871 seconds)

Published: Sun Feb 16 2020