HTML & CSS Crash Course Tutorial #1 - Introduction

hey young and welcome to your very first step in becoming an HTML and CSS and ninja ok the gang so I've decided to do a complete update of my HTML and CSS series and bundle them into one complete beginner friendly course because I think the old playlists are a bit out of date now about 4 years old and I wanted to rebuff them to include some more modern features and I also want to keep this channel really accessible to new developers and I wanted to create a kind of entry point a series for new front end developers to come along and get the basics the lowdown of HTML and CSS so if you're a new web developer this is the place to start so rather than do a whole course for HTML and a whole separate course for CSS I've bundled these two together because they do go hand-in-hand very much so this course is designed to get you up and running with both of these HTML and CSS in no time so that pretty soon you can start making your own awesome websites so that in this course we're going to be working from the ground up and I presume that you don't have any or you have at least very little experience with coding so we're going to cover all of the basics from the start what HTML and CSS actually are and I'm also going to show you how to set up a development environment on your computer I'm going to show you how to make your first HTML web page and also how to make that web page look awesome with CSS now we're also going to be talking about newer more modern html5 features to bring your code up into the present day and we're gonna be touching our responsive mobile design as well and then finally we're going to bundle everything together that we've learned to make a web project from scratch and that project is gonna look something like this it's called Mario Club and features Mario over here and it's a nice modern simple website uses loads of different HTML features loads of different CSS features as well and it's also fully responsive so it looks pretty good on mobile screens as well as larger screens so we're going to be putting everything together that we learn throughout this course into this final project over here so without further ado let's dive writing okay then so before we start to code anything whatsoever I just want to take a few minutes to talk about what hTML actually is and also what CSS is just so we've got a vague overview of what these two things are before we dive into the code so HTML first of all it stands for hypertext markup language HTML that's where we get the name from and it's a markup language not a programming language so we use HTML to structure content on a web page things like text images and forms and all that kind of just and we do that by using what's known as HTML tags now text represent different types of contents or information on a web page for example we'd have a certain tag for an image a certain tag for a form or paragraph text etc now you might also hear these being described as HTML elements but they are pretty much one and the same thing now if we take a look at some sample text we can see some of them like the paragraph tag they have an opening tag and a closing tag with some information in between them so that's the opening and closing same with the anchor tag these are four links opening and closing and the closing tag has this forward slash before the letter that represents that tag now a lot of tags use this opening and closing tag structure but some of them just have one tag for example the image tag right here now don't worry about remembering all of these different tags at the minute we're going to do all of that later on I'm just giving you a quick overview so imagine this is the HTML content that makes up a part of a web page if we were to view that in a browser it could look something like this so the paragraph text is rendered at the top like that the link is right here and the image is at the bottom so when we view a web page in a browser it's just an HTML file that we're viewing so we use these different kinds of tags inside the HTML file to tell the browser what type of content we want each part of the document to be and the order that it should be in then the browser renders that HTML content into a viewable web page that we can browse online so hTML is the core language that provides the backbone of a website and it's all to do with how we store content using these different types of tags now CSS is the second part of the puzzle when it comes to building websites on web pages and it stands for cascading style sheets now we'll talk about why it's called this later on but essentially CSS is a separate language that goes hand-in-hand with HTML and what we do is you CSS to style our web page and make them look even better so HTML alone just structures the content that we want to show on a web page but CSS is what makes that content look better so we've used CSS in conjunction with an HTML file to tell the browser things like what color different bits of content on a page should be or what font size the different headings or paragraph text should be whether something should be on the left or the right of the page or maybe what the background image of the webpage should be so whereas hTML is very much to do with providing the actual content and structure to the browser CSS then takes on the role of styling that content so much like a builder would form the structure of a house a painter and decorator would then come in and style it to make it look nicer so imagine we had some HTML before CSS applied to it might look like this in the browser and then CSS applied to it it would look like this in the browser so much much nicer so these are the two languages that we're going to be looking at in depth in this course and by the end you should be able to use both of them to build your own well-structured websites which look awesome as well ok then gang so the first thing we need to do before we write any code is to set up a local development environment to work with and by that I generally mean just have a good text editor to code in and a modern browser to preview your working so there's loads of different text editors that you can use for web development and which one you use is down to your preference in your preference along there is no right or wrong text editor to use I like this one at the minute visual studio code but I do flip between different ones when I feel like it but this one is completely free for Windows or Mac and it comes with a load of nice pack as well that we can install to make coding easier so that's what I'll be using and if you want to follow along exactly like I do and use the packages that I do as well and I would advise you to do that if you're a beginner then go ahead and download this or right here to get it you just need to go to code visual studio comm the link is going to be down below but if you don't want to download this you could also use a different text editor sublime is a popular one which is also free well the preview version is free and then it asks you to buy it after a while so you can get that right here at sublime text comp the link to that is going to be down below as well another good one is Atem I used to use this but I found that it started to get a bit slow on startup but again it's a really nice clean text editor that you can install packages for so if you want to download that go to attempt dots i/o and grab it right here or if you prefer a no-frills approach you could even use something like notepad plus a plus I know a lot of people that still use something like that there's nothing wrong with this I prefer to have all of the extras in a text editor which is why I go for something like this vs code so choose your text editor doesn't really matter which one for now they're all going to work the same but I am going to be using a couple of packages inside Visual Studio code so again if you want to follow along exactly with me make sure you get this one or right here so secondly you want a good modern browser to preview all of your working I personally think that Google Chrome is the best one to developing and so preview your work in so if you want to download that go to google.com forward slash Chrome it's also going to come with a load of developer tools that we're going to talk about later on as well so again if you want to follow along exactly with me make sure you download this okay then so once you've downloaded and installed your text editor boot it up and it's going to look something like this this is visual studio code if you're opening it for the first time then you probably will see some kind of welcome screen which you can cross off that's fine if you're using a different text editor it's going to look something like this with a file tree on the left over here and the coding window on the right so what we need to do first of all inside Visual Studio code is to open a folder so let's open one I've already created a folder nothing inside it so I'm going to select that for now and we should see that over here so this is the welcome screen again I'm going to cross that off and now we can start to create files inside this folder so typically when we open a folder inside Visual Studio code like this that folder could represent our project or website and then all of our different files my HTML and CSS would go inside this folder on the Left overhead so the first thing I'm going to do is create a new file now we can do that in two ways either click on this thing right here this new file icon or right click and go to new file and I'm going to call this index dot HTML so when we create an HTML page it has to end in this extension dot HTML that's kind of defines it as an HTML file now it's always a good idea as well to call your homepage HTML file index dot HTML and that's because when you navigate to a website such as my website com it's going to look in the root directory for an index dot HTML file and if it exists it's going to serve that up to the browser so this is kind of like the default home page file name if you like ok then so now we have our first HTML page we can actually start to write some HTML code inside it so again remember this is just going to be a series of tags inside this file and those tags are represent different things now the first tag we should always use is the doctype tag and that defines this document as an html5 document and tells the browser this so it can render it correctly so to do that open your angle brackets that's how we open a tag or starter tag then we want an exclamation mark and then doc type and then HTML so this is a tag called doctype and it's a very peculiar type of tag it's probably the only tag that starts with this exclamation mark inside it and it basically just says look this is an HTML type so always put that at the start of your HTML files now the net thing we need to do is an HTML tag so HTML like so and notice this whenever I create a tag inside vs code then it automatically creates the closing tag for me which is nice so this HTML tag right here this is kind of like the root tag of our documents we have this at the top then we have an HTML tag which surrounds everything else now inside here we also have a head tag so let's do that and I'm going to come back to that in a second but also a body tag now the body tag everything inside this this is the stuff that actually gets rendered to the browser so the things that we see in the browser now stuff inside the head over here this is just extra information about the website such as metadata or a title that goes at the top of a browser over here this thing here at the top of the tab this is the title so we can specify things like that inside the head but none of this actually gets rendered to the page itself that we can see inside the browser that all goes inside the body tag so let's start with this head and let's just create a title tag first of all and remember this title is what defines this stuff in the top so let's call this learning HTML and save it and now we want to preview this in a browser so what we could do is right click over here and we could go to reveal in Explorer and then we get this window over here if you double click on an HTML file it's going to open that up in a browser for us and we can see the path to this HTML file now this is using the file protocol and we can also use something else called a local development server so that we can view this over an HTTP protocol which is what we actually view websites on but I'll show you that later for now we're just previewing this HTML file over here in the browser now there's nothing inside the page just a blank canvas at the minute but we do see this title at the top learning HTML and that is coming from here where we specify ok then so that's the title now let's actually add some content the body the stuff that shows inside the browser so what I'm gonna do is create ap tag first of all oops not in capitals so lowercase P now I want you to notice another thing that I've been doing here notice I've been indenting these tags right here so I've not started them over here and over here I've indented them and that's a convention when you're writing HTML files you don't have to it's still gonna work exactly the same if you do this however for readability it's always better to indent like that using tab and actually mvs code whenever we enter down into a new tag it Auto indents for us because that's what we're meant to do okay so inside this paragraph tag I'm gonna say hello ninjas and I'm gonna save this and then in the browser if we just refresh we should see that right there very small hole so I'm gonna zoom in so we can see that hello ninjas right there so right now if we want to make a change and then preview it all we have to do is just add something over here so I'll do another P tag like so and then inside I'll save my first web page and then I'm going to save this first of all ctrl s and that over here I'll have to refresh to see them now I mentioned before that we could use a local development server to view this over HTTP instead of the file protocol now you might not know what that means really but basically HTTP is the protocol that we use to communicate with servers to view websites now we don't really need to know that much about it at the time being but if we install a package in vs code over here to spin up a local development server it means we can use that protocol and what it also means is that when we save something over here it's gonna live refresh it for us automatically so that we don't have to so it's much easier to save and preview save and preview without having to refresh the page so I'm going to show you that package what you want to do is click on this bottom icon down here for the extensions in vs code and then you want to search for this live server package just up here so search for live server like now I've already got that installed so if you click on it there should be an install button right here instead of uninstall and if you press that it's going to install it to vs code for you after it's installed it might prompt you to restart vs code so do that and then come back to your file now to get back to the file tree over here just click on the top icon over there now once that's installed what you can do is right-click anywhere inside an HTML file it has to be an HTML file because that's what we view in a browser and then we can go down to open with live service so if I click this then it's going to open up a browser over here and now you can see it's exactly the same content but this time we're using an HTTP protocol and we're serving this on this right here this is otherwise known as localhost you don't need to know the ins and out of this just yet just know that we're using now what's known as a local development server and that's how simple it is so now if we make a change so I could change this to hello world and save that I don't have to refresh over here it automatically refreshes for me every time we make a save to the file so that's nice and that's how I like to work now you don't have to use this instead if you prefer to just open it up like this how we did before that's absolutely fine as well you'll just have to keep on refreshing if you want to see the page update okay so now we've created this simple HTML file over here and that is all there is to it really it's just a series of different tags that make up a web page now we're going to see more tags later on but for now in this video there's one more thing I'd like to show you and that is how to inspect an element inside the web page so what I mean by this is right clicking something and then going to inspect at the bottom now when you do this it's going to open up something that looks like this on the right side of the page so let me just zoom in and we can see right here that we have our HTML outline so it's showing us the HTML right here ignore this this is being injected by the live server package we stalled but this right here this is our HTML that we created so this whole thing that opened up over here this is the Google Chrome developer tools panel and there's loads of different useful stuff inside here that's going to help us to develop websites and we're going to take a deep dive into this and the different useful things that it provides a later on for now I just wanted to show you how you could right-click an element over here inspect it and that's going to show you the code over here in the developer tools panel for example if I open a new tab now and go to the net ninja code at UK and I'll right-click go to inspect then I can see how this code is made so if I'm ever wondering on a website how they've done something or how they've coded something I can just right-click that element and I can see how they've created that HTML code right here and again I can use all of these different features inside the developer tools to kind of reverse engineer this website if you like so again we're going to take a look at this in a lot more depth later on for now I just wanted to introduce you to it okay they're my friends so that is your introduction to this course HTML and CSS and we've learned a few things first of all we've seen that HTML is a markup language to structure content on a web page and I also said that CSS was a language that we used to style a web page and the two worked together in tandem now we've also seen how to use vs code to open a project folder and create our first HTML file we've talked about what tags are a little and we've seen a couple of basic ones in action and we also know that the body tag is for visible page content and the head tag is for page information like the title finally we've seen how to preview a web page in a browser either by double-clicking on that HTML file in the file explorer or by using a local development server with a live reload so next we'll dive deeper into the language and we're going to talk more about all of these different HTML tags that make up a web page you

Channel: The Net Ninja

Views: 295,928

Keywords: html, css, html tutorial, css tutorial, html and css, html crash course, css crash course, crash course, tutorial, html for beginners, css for beginners, web development for beginners, web dev for beginners, web dev tutorial, html & css crash course, html basics, html introduction, html lessons, web dev setup, code, vs code

Id: hu-q2zYwEYs

Length: 19min 59sec (1199 seconds)

Published: Tue Jul 09 2019