HTML & CSS Full Course 🌎 (𝙁𝙧𝙚𝙚)

hey it's you bro I hope you're doing well and in this playlist I will be teaching you guys HTML and then later on CSS so if you're looking for a career in web development or you're taking college classes and learning hTML is required or perhaps you want to learn to build your own website then look no further because you're in the right place let's get into it what is HTML HTML is an acronym for hypertext markup language it is a declarative language and not a computational one such as Python PHP or JavaScript and there's many more besides those examples HTML is a markup language and it's used to declare what should exist on a web page your browser will take an HTML file read it and then display it as a web page what are the advantages of using HTML it's easy to learn it's easy to use and it's easy to write web developer jobs are high in demand right now you'll want to learn CSS and JavaScript along with HTML though the disadvantages of HTML HTML by itself is ugly there's no style that's why you want to learn CSS after this it's also static in nature there's no animations and that's why you want to learn JavaScript JavaScript will add life and animations to HTML web sites HTML also exhibits unpredictable behavior across certain web browsers because some tags and you'll learn about tags later are supported on some browsers and not on others also along with HTML there are little to no jobs if you only know HTML that's why I emphasize learning CSS as well as JavaScript and possibly other technologies after that - depending on what you're looking for so that's why I'm bringing up the skill tree for beginning front-end developers you'll want to start with HTML then learn CSS and then afterwards I would recommend learning JavaScript each of these languages has a specialty and they work well together think of building a website as being similar to constructing a house so HTML acts as the foundation as the skeletal framework of our house including walls doors roofing however we would want to eventually decorate our house when we are done building it that's when CSS comes in CSS would be us painting decorating and furnishing our house lastly JavaScript adds dynamic life to our webpages in our house analogy this would be similar to us adding electricity gas lighting and plumbing it adds functionality to our website and at some point in time I will have a complete playlist for each of these languages so that's a great reason for you to subscribe so you can always stay up to date just so you're aware there's many more technologies out there besides these three however these will be enough to get you started but you should not settle for just stopping at JavaScript I would continue on to learn more technologies like angular nodejs PHP you should learn some back-end stuff if you want to be a full-stack developer you shouldn't stop just here but this is enough to at least get you to become a front-end developer so what do you need to get started one you'll want to have a web browser I'm assuming you have one since you're watching this video here's a list of a few I would recommend Google Chrome or Firefox or Safari or Microsoft edge there's probably more out there but please do not use internet explorer we will also want to download a text editor as well a text editor is software that allows us to write HTML files and it has some bonus features too instead of using dot txt or docx files we will be working with HTML files your web browser will take that HTML file read it and display it as a web page so I would recommend downloading a text editor so you can write HTML files here's a few recommendations but not a complete list there's sublime text atom visual studio and notepad plus plus there's still more out there than just this list but here's just a few recommendations and you can pick one from here if you have no preference I would recommend a sublime text and I can show you how we can install that and set it up so feel free to use whichever text editor you prefer if you have no preference here's the link to sublime text just go to sublime text calm simple as that and we're going to click this download button alternatively if you go to the download tab there's other download options if you prefer let's just hit the stall mode button and we are going to open this you can browse for a file location I'm going to use the default location under Program Files click Next I guess I'll add to Explorer context menu next install and finish you may have to look to see where that file was downloaded to I just so happen to do that and I created a shortcut for my desktop here so I'm just going to open up this bad boy so here's the home screen for sublime text the first thing we'll want to do is go to view then go to syntax and then change this to HTML so to begin you can type some text on here and it will display on your web page so I think I'll create a title for the top of my web page and I'll say something such as welcome to my website and then I'm going to save this file save as and you can choose a location to save this to I think I'll save it to my desktop and I think I'll create a new folder you don't have to do this but I like to keep everything organized and I'll call this HTML files so make sure that your home page is named index and then make sure it's an HTML file so we're going to save this here here's that file right-click it then open with and pick a web browser to open this file with so let's open it with Chrome and here is our website so this is zoomed in you can zoom in or out one thing you might want to do for ease of use is to have your text editor side-by-side with your web browser so you can easily make any changes to your HTML file save it you can either go to file save or if you're using Windows you can hit ctrl s to automatically save and then you can refresh your web browser and that will change the web page based on the changes you've just made so do you guys remember our analogy where we compared building a website as being similar to building a house well before constructing any house we want to be sure that we're building it on a solid foundation we're going to add a few things to our HTML document so we can build a proper website so what we're going to do is clear this out we'll save it and start fresh in HTML we use a series of tags that describe how we want our website to look and what content we want on it different tags have different effects on our website what we're going to be doing here is creating a skeletal structure of our website think of it as all the support beams of our house in our previous example so at the very top of your file type a set of angle brackets and within these we're going to type exclamation point then doc type all caps and then HTML this defines the document as being of the current version which is currently html5 it tells the web browser that this is an HTML document now on the next line we need to create a set of HTML tags it's the same process as above where you need a set of angle brackets and we're going to type HTML except we also need another one alright so with tags they're usually in pairs think of it as yin and yang there is an opening tag and there's a closing tag and you define the closing tag by adding a forward slash before the tag name so this is the beginning tag and this is the ending tag it lets the web browser know where the effects of this tag should begin and where it should end so we're going to be writing all of our code within these two HTML tags these two tags are going to function as a container that's going to hold all of our tags and text for our web page so if these are acting as a container we'll probably want to have a little more room between these two tags the next set of tags that we need is the head tags and you'll write this within the HTML tags near the top so we're going to write head within a set of angle brackets and then make sure there is a closing tag and then you'll want to be sure that these are indented if they're within another set of tags just because it's easier to read although eyes it still works the same but I find this easier to read speaking of easier to read I'm going to zoom in a little bit alright I would say that's better now this head element contains meta information about this document it describes information about this document to the web browser think of it like the settings for this document and if we have a head element we're also going to want a body element so we're going to put that within the HTML tags but after the head takes here so we're going to write it here so we need an opening tag and then a closing tag within these body tags this is where all of our content is going to go so anything that you want to add to your webpage you'll want to put within the body tag so it can be displayed well this is the skeletal structure of our website it is the minimum requirements to build a solid foundation for our website you'll want this doctype HTML at the very top to let the web browser know that this is an HTML document you'll want a set of HTML tags to let the web browser know that the HTML code starts here and ends here the head tags contain information about what this document is about there's another term for this and it's called metadata and you would put it within the head tags and the body tags contain all of the content for our web page before when we added text display to the web page we'd put it right at the top but now we'll want to put it within these body tags so I'll add that back I think it was something such as welcome to my website let's save this and then refresh the page and here's the text and we can also add a title to this web page you can see it on the tab here it currently says index.html and we can change that within the head tags so let's put that here but we need a set of title tags so we need a opening title tag and a closing title tag I think I'll name this duh best website save it and then we can refresh the page and you can see it no longer says index.html it says duh best web site well those are the very basics of HTML in the next video we will be discussing some basic concepts of the head tags as well as some basic tags for the body but yeah that is everything you need to know to get started in HTML hey you if you enjoyed this lesson then you can help me help you in 3 easy steps by smashing that like button drop a comment down below and subscribe if you'd like to become a fellow bro

Channel: Bro Code

Views: 277,631

Keywords: html, css, html tutorial, css tutorial, tutorial html, tutorial css, html tutorial for beginners, css tutorial for beginners, tutorial for beginners html, tutorial for beginners css, html full course, css full course, full course html, full course css, yt:cc=on

Id: cyuzt1Dp8X8

Length: 295min 12sec (17712 seconds)

Published: Tue Nov 17 2020