Free Course: Beginner Web Design using HTML5, CSS3 & Visual Studio Code

hi there my name is Daniel Scott and in this video we are going to learn how to build a simple restaurant website using html5 and css3 now you're going to learn everything you need to create a website starting at your very first page all the way through to uploading it to the Internet we're going to use the world's most popular and surprisingly free web design tool called visual studio code there are downloadable exercise files so that you can follow along with me in every video at the end of each video is well I'll save where I'm up to so there in case you get lost or something's not quite right you can compare your files with my files it's a nice easy way to make sure you don't get lost we'll start by working through some really simple HTML and CSS exercises learning how to create the structure of our website then editing and styling text working with logos and background images you'll actually set up your own domain name and hosting and we'll upload it live to the Internet so other people can see your site throughout the course I set some fun class project so that you can practice everything you're learning in the course so this is an introductory course aimed at complete beginners so for people who have no experience in web design have never written a single line of code it's courses for you we're gonna start right at the beginning and work our way through step by step so Who am I my name is Daniel Scott and I've been a web designer for about 15 years now I'm also an award-winning instructor for the last two years in a row of one a max masters award at the massive Adobe MAX conference I also have red glasses and a cool t-shirt I'm pretty sure just this combination on its own should make me qualify if you're ready to upgrade yourself let's get into this video and learn how to build your very first website hi there welcome to the course this video I want to talk about how this course is structured okay so it's breaking broken into five parts we'll start at the beginning with just a real basic introduction to HTML and CSS and then we'll start our very first project so phase 1 quick introduction phase 2 we'll build this website okay so we'll take our kind of basic HTML and CSS introduction and turn it into this website here just nice simple one to get started the third thing we'll do is we'll create this raw Cycles website now this website is just a little bit more advanced let's say it's intermediate HTML and CSS we cover the basics in the first one and then we get into a little bit more detail here third part is we will make our site responsive just means it's going to adjust for the different browsers so mobile phones tablets and websites okay it's this one here it's a portfolio site nice simple one okay and you can see here it adjusts for different browser widths and then the finale for the course is looking at a framework okay the framework that we're going to be using in this course is called bootstrap it's super popular and it just means we can take all our knowledge that we know so far and kind of condense it down and use it really quickly to build sites and we're gonna introduce things like this jquery slider here okay and we just slide across there's these cards down the bottom there's an easy mobile nav it's a really great addition to anybody that's building websites okay a framework like bootstrap is gonna make you go super fast make it look super professional okay without you having to do all the heavy lifting alright I hope you're ready it's time to get started and actually start building websites I'll see you in the course alright let's talk about what you need to download and what you need to install so downloading is simple there are some exercise files ok there'll be a link on the page here somewhere to download those and there will be everything that we'll use like images and texts that we'll use throughout the course okay so download those and inside that exact same file that you download okay there'll be something in there called the completed files there'll be a full inside of it okay and what they are is at the end of every video what I do is I kind of save where I'm up to okay so that if you're following along and you're not getting the same results you can just look at the video number and then have a look at the completed files and just match my version with your version and go okay often it's just maybe a spelling or a syntax error okay but you can compete yours that's working or mine this working with yours that maybe not okay so they're inside the exercise files and completed files are all together another thing to talk about is what to download okay so we will be testing our websites in Google Chrome so make sure you download that Google Chrome is by far the most popular browser at the moment so download that and we'll do all of our testing inside of that it's like Firefox or Safari or Microsoft edge or Internet Explorer okay but it's the most popular one go to Google Chrome's website and they'll show you how to install it and the other thing to install is a code editor okay so we're going to be using Visual Studio code now why okay you can there's a lots of different code editors so you don't need specifically this one but you'll need it for this particular course okay because basically a website is a group mixture of HTML and CSS and JavaScript right okay and you can use any code editor to make that okay we're going to be using Visual Studio code okay not Visual Studio that's a bigger product you need the specific Visual Studio code it's free okay it's made by Microsoft and and just so you know though it's it's just I'm using that mainly because it's the most popular at the moment so if you're looking to get work after this course you're probably going to end up in a studio where they are using Visual Studio codes he must be learning the same one but if you you know the techniques and tools you're going to learn in this course are gonna apply the same to if using a different code editor let's say you're using adam or sublime or notepad plus plus okay they're all really good editors okay but they end up making the same thing okay the shortcuts are different they've got different ways of working but the output is the same so don't sweat it if you know if you learn all this stuff in Visual Studio code and then you have to go and use another editor okay it'll all apply lovely but yeah install Chrome install Visual Studio code both of them are free and it will see it in the next video hi everyone this video we're gonna make our very first web page it's not gonna be really exciting it's gonna say hello world and in a browser it's gonna show you hello wilt the course gets a lot more exciting but we need to get the basics done and that includes how to set up a folder for our website how to create our first HTML page and how to test it in a browser let's do it alright so we have installed Visual Studio code and we have it open in front of us you know yours will look slightly different than mine you might have there we put this welcome tab open along the top you might have another tab open saying new release documents or something similar and also yours might look slightly different because I'm using a Mac throughout this course and you might be using a PC don't worry they work the same just some of the shortcuts are slightly different but we'll cover those during the course alright it can be a little intimidating this welcome screen and all the other kind of tabs on the top so just to make everything crystal clear and easy close down any tabs along the top by hitting this little cross here click it once on all of them until you end up with this nice clean clear application the other difference you might have as well is on the side here as a bunch of tabs okay that going to be helpful okay at the moment if you click the top one once twice it disappears it's all nice and clean and let's go and create alphys file alright to create our very first web page it needs to go into a folder I can't just be lying around in your Documents folder or on your desktop it has to go inside a folder and everything for that website needs to go in that same folder so to create that folder let's go to file and let's go to open which is weird okay go to file open okay and it says weird what fault folder do you want to open we haven't created it yet hold on okay so what we do is on a Mac there's a new folder button on a PC it's slightly different you're looking for that it's a little new folder icon because a little yellow one with the little exclamation mark in the corner a-and decide where you're going to put it for this course I'm gonna put it on my desktop like I clean my desktop is I totally clean this up for this course but anyway desktop new folder where we're gonna call it we're gonna call it project 0 click create and that is my folder I'm inside project 0 I'm gonna click open sometimes you have to kind of like select it and then click open you know it's right when you're on the top and it says welcome to a project 0 along the top on the side here it should have this option ok project 0 there's nothing inside of it yet but there's welcome screens come back go away so we've got the folder and all it is on my desktop is I have a folder with nothing in it so we're just making a folder that way doesn't really matter how you create that folder as long as it exists and you've pointed Thea's code to it now we need to create our page we're gonna create our very first HTML page it's got a file let's get a new file we're gonna save it file save we're gonna put it well it should automatically know where to go okay it's going into project 0 this one's gonna be called hello world dot HTML don't give it any spaces one word and it has to be dot HTML let's click Save and just in here in our editor let's type hello let's go to file save I'm gonna stop showing you the long way case on my Mac its command S on a PC it's control yes so I'm just gonna say save from now on now we need to work out how to preview this thing because we've made it you've made a website tiny one okay but how do we check it we need to use that Google Chrome so go in open Google Chrome all right it's of open Google Chrome and we're gonna go to file and a go to open file and then we're gonna find our project 0 it's on my desktop there it is their project 0 inside of there hello world before you click open for a member this moment if you've made a website before it's not as exciting but if this is your very first get ready for those moments Mona really that's it that's your hello world website but look around remember this moment this is the first thing you've ever made I remember when I made my first website okay it was a little bit more exciting the hello world yours will be too and I'll show you the web site that I'm my very first one a little while later I think maybe if I show it to you here you like doing the course off anyway it was bad but it was 20 years ago so so let's recap the process back into vs code okay and in here we're gonna put exclamation mark okay then hit file save I promise not to show you home way did and I go back to Google Chrome and it hasn't updated so whenever you make a save or make a change in vias code hit this little refresh button or reload button if you can't see it up there it'll be somewhere where is reload I don't even know the long way for reload there it is there okay so view reload and all there he is there escalation mark so that's the process do the coding in vs code check your website in Chrome to make sure it's working okay it's not broken you do a little dance cuz you made a website if yours broke during this process okay it's bad stud it's okay what probably happens is you forget to add the dot HTML if that happens okay you've just got something called hello world not to HTML this will happen to you you like of course I did I followed you down later on in this course if you're new that will happen to you so all you do is over here in either one of them okay this can be a little confusing let's explore this tells you all the pages you have open over here this tells you every possible file in your folder now the trouble with that is that you've only got one in each so they just repeat each other anyway you can double click it over here nope you can right-click it and go to the one that says rename and to say actually if it's missing HTML or you spelled it wrong you just type it in hit return then go and paste that file in chrome you should be fine alright that's not really web design it's the start let's get on to the next video where we actually start doing some proper HTML and some proper CSS hi there this video is all about learning the absolute fundamentals of what HTML is versus what CSS is you can skip this if you've got a basic understanding we're going to do some real simple stuff here we're gonna add some HTML tags it will look like that and then we'll style them using CSS okay and it will look like oh here we go oh [Laughter] but you get the idea okay we're going to do HTML and then make it look pretty using CSS let's jump into the video and learn out how okay to get started we're gonna type our HTML first so this word hello world okay is not HTML it's just some plain old text we typed in delete that so when we write HTML we need to follow some syntax okay so we're gonna put in something called a heading and in this case hitting one the most important hitting on a website and in HTML it uses the abbreviation of h1 now we can't just type h1 we need to wrap it up in angle brackets so open angle brackets h1 and then close angle brackets so you can see it there it did a couple of things we typed in our h1 we put the brackets either side and you'll notice that V is code automatically put in this extra closing tag so that's how HTML works it's a wrapper tag okay it's a tag that goes around the beginning and the end and everything in the middle this is my hemming hitting one even okay so as long as there's h1 on one side on the other side the wrapped in angle brackets they're closing you'll notice has this better foot slash and that tells the browser that this is my hitting all right let's save it this chicken in Google Chrome and you can see there refresh I've got my hitting 1 it's big its bold it is Times New Roman it's black that is a default setting for a heading 1 let's add a couple of other HTML tags so in here we're gonna return in I'm gonna type angle brackets h2 close them you'll see it puts in the extra syntax if it doesn't for whatever reason you can't just type it in so I'm gonna start typing oh it really wants to help out thanks for your code and this is just right heading to so those are a couple of real basic HTML tags another really common one is a P tag so angle brackets P close it off and this is like body text ok and often you'll have a lot you'll have probably just one h1 on your page but you'll have lots of different paragraph text because it's the body text save it check it in our browser you can see these are the default stylings for those three tags to override the styling we're CSS comes in so what we need to do is our HTML is kind of like things on the page and our CSS is the styling of those things in the page to make this work it's put a couple of returns at the top here and type a tag called style okay close it off and again it puts in the closing tag and what I just did there is I put in a few returns returns don't mean anything in code okay you can have a million of them and it won't display on the page I just use a lot of returns and when I'm styling things just give some sort of visual mmm breaking up of different parts rather than trying to cram them all together because what you'll notice down here is if I delete this I'm just bringing it up so they're all in the same line if I save it you'll notice back here in chrome it's exactly the same so it doesn't matter whether you put returns in here or not okay except that it looks hard to work on so in this style tag okay this is where our CSS is going to go and CSS has a different type of syntax where as HTML had an opening closing angle brackets and ass would slash their the CSS you do things like this you say I want the h1 this is called that selector I'm selecting the h1 then you put it in a space and then put in the curly brackets rather than the angle brackets I'm going to put a return in my curly brackets just to separate it out not for any good reason other than it looks a little bit more easier to communicate to you okay and in here I'm gonna do some h1 styling and we'll start with color okay we've got a smell at the American Way okay color and after this okay this is the property so selector I'm circling h1 I want to add the property color to it it needs to end with a colon and then you pick a color there's lots of default ones in there I'm just gonna put a space in and type red and at the end of CSS you have to have a semicolon okay so curly braces colon semicolon that is the syntax pretty much for all our CSS pretty simple save it and let's see if it works let's jump into the browser and refresh and look at that h1 is styled now I know this is not a huge amount we're doing here but I'm excited I'm excited for you I remember learning this stuff and it was revelation so let's do something else I'm gonna put a return in here okay and so if you want we're gonna group CSS we want to do a few things to the h1 so as long as it's within these curly braces okay we can type in something like font I'm gonna put in font style okay you can see the s code really wants to help you kind of suggest things hanging like all size style display okay I'm gonna use style I'm using my mouse now instead of typing it in okay that's just one of the little helpful things you can do with vs code or you can use your arrow keys on your keyboard you see that little blue line moving around okay can go to there and hit return on my keyboard we've got almost all of it okay so we've got our property there's the colon we've got our actual value okay which is italics and what goes at the end you got it semicolon let's hit save let's see what it does and say refresh oh it's italics and it's red in it's an h1 brilliant so I'm gonna set a class exercise now I want you to change as h1 to be a font size of a hundred pixels or PX okay I'd like you to pause it right now go hit the button and I want you to see if you can do that font size at a hundred pixels give it a go I'll give you a hand in a second ports go alright you may or may not have paused you may have me not have made it work let's see if you followed me so font size here we go got a colon then put in a hundred and what people often forget is you need the PX okay and we use pixels when we're dealing with fonts at the moment and what goes at the end semicolon save it back into here refresh oh look at that giant h1 all right let's style the h2 together and then I'll set another little exercise so h1 now we I put a couple of returns in here curly braces okay you can kind of you separate them up using these kind of selector then the curly brackets and everything goes in the middle that you want to do to that particular selector so in this case we're going to do a color of wooded color blue semicolon and we'll do a font size font size of 50 so give it a go now and I'm gonna sit an a verbal exercise okay I want you to try and do the P tag all by yourself I want you to make it green and I'd like to have a font size of 20 pixels give it a pause now see how you go and pause alright how did that go I hope you did well let's follow it together P tag curly-braces color of green there's a few different greens yellow green green yellow that's my one semicolon and we're gonna put in a font size of 20 pixels semicolon save back into here refresh look at all that good stuff so it's just an introduction to what hTML is and what the syntax looks like these are these guys down here and the styling of them okay we talked about selectors I used the kind of nerdy words here so there becomes a bit more natural for you okay so there selector this is the attribute no that's the property and that's the value of that property and that's the basics of websites okay we're just gonna expand on that and we'll build some boxes to put this stuff in we'll start doing some interactive bits and pieces but yeah that's the fundamentals of HTML and CSS let's jump into the next video alright it is time to make an actual proper website okay the moment we've put in some HTML tags and some basic CSS but that's not all we need we need some other bits and pieces like the doctype the head tag the body tag so in this video we'll work out how to add those quickly and what they all do alright let's jump in okay first thing is is that this page that we've made this hello world HTML is it's got the basics in it but it's missing a chunk of elements okay to make it an official web page so let's close it down and look at those so close it down let's make a new page so file new let's save it okay this one's going to be called understanding let's put in a hyphen and let's put in buddy-buddy HTML and hit OK make sure the end you add HTML dot HTML okay at the end otherwise know what you're doing the other thing to notice at this point is that you can't use spaces okay or you shouldn't use spaces you need to use hyphens or underscores it doesn't matter which ok I'm use hyphens and let's hit save when you are naming things try to use things like dollar signs or ampersands or any kind of just use numbers and letters okay to make this an official web page it needs a couple of things it needs to know that we're dealing with an HTML page so it's something called the doctype okay so it's a doctype of HTML yeah then we need to establish that it is an HTML document that is set in the language of English okay close that off and there is probably another five or six lines that we need to add to make this thing official so we don't type that out okay there is an easy shortcut because it's such a consistent and repeatable thing that everyone needs to do vs code uses something called in it don't worry that omits the word but it's a little bit of code hinting okay that really helps you go fast so instead of typing all the things we need out to make an official webpage we type an exclamation mark and we hit return on that keyboard come on that's all the official stuff we need to make this a legitimate HTML page is our doctype there's the English language then it has something called the head and the body and then it's all wrapped up in this HTML tag now what are all these things so the doctype just tells us that it's HTML this one here if you see if I click in here okay HTML you'll see there's a corresponding wrapper at the end here and if all of the website is inside that HTML tag okay like we had the h1 earlier remember we had h1 okay and there was a beginning and a closing and everything inside inside was the h1 it's the same with all of the HTML tags okay hey this one just says all of this is HTML thank you very much not very exciting HTML tag you're not gonna deal with it much at all these other two tags inside of here you will there's the head there's the body okay so the head tag and put a couple of returns in remember returns that mean anything just we can segment them when we're learning so the head has an opening and a closing and everything inside of here is stuff that the browser needs to work okay so chrome needs the stuff but the user doesn't see it okay so if we save this file safe we jump out to Chrome okay we'll go to file we'll go to open file okay and let's find this new one understanding body HTML head you'll notice that there is a there's nothing on the page so this is the body Errol there's White's Creed in the bottom that's the body the head is stuff that the browser absorbs but doesn't show you you can see there's lots of stuff that just doesn't show I'm gonna deal with all of this sort of stuff later on but the basics here that you this one here the character set is just telling it we're using kind of a Latin keyboard okay abc123 okay and we'll talk about these things later on responsive design needs this there's some problems with Microsoft edge that it needs to be compatible with things the document title would do in the very next video but it's all stuff that the browser needs that we don't really need to without that the user our audience doesn't need to see what the audience needs to see is everything in the body okay so I put a couple of returns in here loads too many returns then okay but in the body this is where we add stuff so let's add an h1 so we're gonna type in angle brackets h1 close it off and in here is hello den or your name okay we're gonna save it so everything in the head browser didn't see everything in the body actually gets seen by the user so let's have a look in our browser its refresh there it is there cool so HTML everything's inside of there hid stuff that the browser needs to work body is the stuff that the user sees those are our three main tags now let's do a couple of things let's look at the hid tag so remember we want to style this h1 where does the style go we don't put it in the body okay we don't put it in between the hidden the body it goes in side the head okay so after the title put in a return and then we can put it in our style remember open in square brackets close it off okay and return between the two everything in between these two tags is the CSS okay and the CSS can go in the head okay we don't really want this code appearing on the page we want it just to affect the stuff that's in the body so we say remember our syntax h1 curly braces and we say we'll make it the color of random color from this list dark orchard here we go well guys at the end semicolon save it let's have a little look in the browser browser refresh awesome dark orchid watch it walk it orchard okay so hid stuff that goes on the page I kept I said this 10 20 times now but you're the idea things like this can go in the head but the thing people see are in the body now a couple of things I want to explain before we move on is and I'm jumping between these two you like how did he do that so on a Mac and you can hold down the command key and hit tab and these little things open up okay and you can keep hitting tab to move through them on a PC it's ctrl tab okay and you can flip between them too by just tapping them so ctrl tab control tab and you don't have to do that and what you might do is just have it over here do some window resizing so you can kind of see one on one side one on the other and it's a lot easier to work that way up to you and another thing I want to do before we move on and you know totally Rick that is that you know I don't want you at this point to go back how am I going to remember all of these things because let's say that I want to make this hallowed and underlined okay the cool thing about the internet and especially HTML is a load of resources so I want to make this underlined help you know what is it so do I go in here and just start typing underline and doesn't seem to work okay so let's say I go to Chrome okay open that up again I'm gonna make a new search box I'm gonna say HTML or CSS code for underline okay and I'm we're gonna do this throughout the course cuz I'm not here to teach you every single bit of syntax I want you I'm teaching you to fish okay so let's have a look so I've asked for the code for underline there's gonna be kind of three main places that you'll use in your like that most web designers use there is something called w3schools comm that's a really good resource CSS tricks that is an amazing website break Chris queer and there's another one that appears quite often and it is it's not appearing that list but it's called the Stack Overflow those are three main ones to write down and say yep those are there those are the go-to places let's have a look CICS text decoration you can see here using an h1 there's an over line it's not what I want underlined so instead of kind of room in bring them you can either copy this I'm just copying it with my keyboard command C or on a Mac or ctrl C on a PC and go back into vias code and I'm just gonna paste it in save it okay and then jump to our browser preview it and it's underlined this is gonna be a lot of that if you're like man do I need to write all this down there's lots of times we just like I can't remember what that what the syntax is so you can go and find it okay because text decoration is a weird way of discussing underline okay but after a while you will learn some stuff that you're doing quite regularly text decoration over line never use that one in my life refresh well look at that you can do it all right that's gonna be it for this video let's jump into the next one we start talking about the meta title that we've been ignoring hi there hey I hope you enjoying the video now there is loads more to come but if you like this course there's a link in the description because it's about like another 90 videos that I've got that kind of follow on from where this course finishes we'll cover in that extra course all the fun stuff like how to create your very own burger menu from scratch using some basic JavaScript and jQuery you learn how to work with responsive images and icons and probably one too many gradients you learn how to create forms and how to choose great fonts for your website fill in how to work with bootstrap for will create this bicycle repair shop this responsive portfolio site and this bootstrap website for my prototype yogurt company YUM all right if that sounds like you check out the link in the description but for now let's continue on with the course hey there this video we're going to learn what the title is in your head tag and we're going to look at what our description is the very short version is in Google search results that is the title that is the description we need to add it to every page let's jump in now show you how to add it what the pros and cons what you should do we shouldn't do let's get started all right so let's start with the title tag so this gets added to the top of every page okay in the head I was gotta edit there automatically by vyas code so what is it it is a way to describe what's on the page so this word document here is just a placeholder you can type anything in here okay you'll notice that all it's not really code language you can write ampersands and you can write brackets and all sorts of things it could be anything you want to write in here you don't want it to just be anything let's say this is one of kind of thought that really describes this page it's learning HTML description and title tags and that that's gonna really describe the page I'm trying to build here now if I save it and I go out to Chrome let's see where it appears so Chrome there's the document that I'm working on you can see the word document there that was from earlier on before we replaced it if we hit refresh you can see that's where it kind of ends up that's your title tag it ends up in the tab but that's not that exciting right what's really important is where that gets used by Google and its search results so remember we did this search earlier on for underlining in HTML okay we did that search see these chunks are blue text here okay these chunks of blue text are the total tanks okay so what have you right near will appear in this little list so you can imagine if you lift it as document first of all the word document Google's is not gonna list your page because it's it's too vague and it's probably a million pages online with the hitting document so you need to make it unique for every page which is a bit of a pain okay so if you've got 20 pages on your website you need 20 different title tags for each page okay and it needs to really describe what's in their page it's about 50 characters and you can see that some of them get a little longer some of them are shorter but really concise and exact about what's in the page don't call it like home page okay if it was me for my site you know mine is called an you know web design tutorials by Daniel Scott okay would be a good home page title tag for me so there's the title tag the other tag you should add okay and it's not there by default and very common just underneath is adding the description so what is the description before we make it it's this chunk okay that there is the title that there is just your website address okay this thing here you have control over you can tell Google what to put in this description sometimes it ignores it okay but most of the time it won't it'll listed here okay and this is a bit more marketing than it is like this one here be really concise really good keywords okay that really describe what you're doing down here is kind of like we all know it right when we're doing a result research we check that to make sure you're kind of in the right ballpark then you use this just to confirm that you're you know you get more into the details and just kind of just checking you're in the right sort of zone and this is where more it's more marketing than it is say coding so down in here let's add the middle description so by default it's not in there because you can't survive without a title but you can survive without a description but in my opinion you should definitely edit this is where it's kind of some ugly syntax okay but you type it up once with me now and later on you can just come back and copy and paste this one so it's called a mitr name okay and you need to add all that syntax I'm just using the shortcuts that appear via vs code but you need name equals and you need the quote marks and inside of here this one's called description okay and it needs to be spelt exactly like that and we need to the name is description the content is going to be what you want that description be so this is where you you get to put so in here you want about a hundred and between a hundred and twenty characters okay or 150 characters 120 is what generally will appear in mobile Mobile results okay and 150 on desktop so you can see here this one here got given quite a big chunk whereas this one got cut off quite smaller than its gonna got a really small matter description sometimes as well doesn't matter how long you make it Google will cut it off okay and so make sure all your good stuff is at the beginning of that paragraph just make it one and make it about 120 ish characters now the one thing for this is it kind of brings up a good point can you see there's a little bit this guy's gone rid if I save this and let's view the page let's refresh it it's gone bit crazy it's like what that was in the head tag why is it displaying down here in the body it's because we forgot to close out this Meta Description tag okay so I say we me okay so it has an opening there and he see all of them have this closing angle brackets so at the end here closing angle brackets you'll see the rid disappears and back here refresh oh it's back to normal okay so if you ever have read stuff bed and you love you often you'll notice the difference when you get into previewing in chrome it'll kind of show you everything will go haywire all right that is the metal title meter description copy and paste there into a notepad so you've got it handy for when you're doing it next time so you don't have to type it out every time really essential to pages let's get onto the next video all right let's talk code editors we've been using vyas code so far and we're gonna continue for this course why because it's the most popular and mainly because it's the most fashionable okay there are there's some quirks to it that make it awesome but there are people out there that argue that sublime tix is the best or brackets is or Dreamweaver O's or atom or no pair plus plus there's lots of different editors let's jump into this video and just give you a quick run through a few of them just kind of show you what you should look for and what's important alright let's get in there okay so we've been using Visual Studio code for our text editor now we've could have done this course in any of the editing programs now we only use envious code in this case because V s code is the most popular so previous causes I've used Dream Weaver because I often spin my life in the adobe world and but I guess what I wanted to show you real quick was first of all how these editors are really helpful okay but often can be very what I call it fashionable so if I'd done this course a year ago or two years ago it probably would have been in this one called sublime text because it was the most popular then and before that there was things like Komodo and before that there was notepad plus plus there's lots of different editors but we all end up in the same place doing the same thing they're just people get used to some of the quirks to them so I've downloaded and installed sublime text just to show you like foo getting started in sublime it's a lot cleaner and if I want to put in all my kind of document stuff for HTML in this case instead of exclamation mark and tab okay it's HTML in hit tab you can see we get to a very similar place it doesn't have as much in the document type okay just the real basics so but we end up with the same place right we go down here we type h1 okay and we start typing same with its look at brackets brackets is another popular one and exclamation mark tab works the same okay as it did in beers code they have they don't have all the bits and pieces that we want in this code okay they decide on a real kind of minimum option and Dreamweaver as well great code editor if we go to file new they don't automatically if you say you want an HTML page you say html5 click create you can see puts in all the bits and pieces you need to get started the reason I show you this is if you're looking for work after this so you start working with different developers and they using different editors there's not really you know they have their own perks and quirks but we we are creating the same thing and the way I do it like when I was designing this course was trying to work out which one to use and Stack Overflow I mentioned that earlier they do a developer survey at the end of the year so it's 2019 now and this is last year's survey and I just kind of went through and you can see down here way down the page and the results back for Visual Studio code is by far the most popular you can see visual studio is a the big version of this notepad plus plus sublime text item I thought was a lot higher you know there's just people love their own editors but unlike something like Photoshop where there's only color one product and one or two competing there's a lot of different code editors some of them quite general like the one we're using some of them a lot more specific for let's say PHP or Xcode but anyway I thought a little short video explaining different editors in case you want to move to something else or expected to use something else you can use what you learn in this course in a different editor all right let's go on to the next video hi there this video we're gonna build a yellow box and then a pink box we'll try to at least we're going to learn to do it using something called a div tag it's a division of space and it gives us the kind of boxes that we get to put our website inside of alright let's jump in and learn it alright to get started let's close down the other documents we've been working on we're not going to use those again we're gonna create a new one just to kind of separate everything and all our different bits of learning so file new file let's save it let's call this one div tags HTML don't forget the HTML okay and we're gonna add all of that head tag goodness by putting exclamation mark hitting return ok puts all that junk in we make sure we update the title div tags we put in the description but we're not at the moment because it's kind of like a throwaway project just to learn what division well the div tag is so the div tag goes on the body because I want people to see it now what do we want it to look like and in your exercise files okay and there's a folder called wireframes and this one here called HTML div one okay I'm gonna open that for no reason we just I don't know I drew it out my notebook so I figured I'd show it to you this is what I do when I'm wire framing ok so it's not a particularly good or exciting wireframe right we want a yellow box and we want a kind of a pinky box underneath so first box second box that's what we're gonna make so to edit we add a tag called div so I'm going to make some space in here and my body I have a tab across for no reason other than it looks nice we're going to put in a div tag so div tag it starts with the angle brackets div close angle brackets and it's very clever and puts in our closing of that tag and everything inside of this it's going to be my square let's preview what we've made so far so let's save it go to Google Chrome let's go file let's go to open where is this new new new new open file what's wrong there's my new div tag click open and I've got the title but there's nothing appearing on the page so a div tag without any CSS is invisible it's there but we haven't styled it so what we need to do is tell it to do some stuff like be yellow and give it a size so we do that with our CSS or do it in the head tag remember before the head closes I'm gonna type in do you remember what goes up the top yeah you remember style okay style okay and close it off but I returned in I'm gonna put all my Styles in here I'm gonna tab in just cuz it looks nice I'm just using my tab key and what we'll do so we need to style that if maybe we had h1 before okay so we're gonna style is div and what goes next curly braces perfect then it's stylet let's give it a color now when you're styling text it's always just referred to as color when you're trying to do our background color you have to go the full background there it is there you can see background color what color we're gonna use I'm going to put in yellow okay remember what goes at the end semicolon save it let's preview it in the browser and Pappaw okay nothing appears because at the moment there's div tag is yellow but it has no dimensions okay it either needs a height or it needs some stuff in it so inside this div tab across stuff in it okay if I do that save it go back to my browser now at least now with some ticks than it kind of forces that div tag open a little smudgy bit so I can see it now it doesn't know how big it is it's just showing me enough to squeeze the text in and it's kind of spilling across so let's give it a height in a width and in here let's just put in a P tag okay rather than just plain old text so we're going to put in some body text move a paragraph for P and let's just put in first box save it and let's style it so up here okay the div tag is yellow now put a return afterwards and let's give it a width and a height so width I'm gonna give it what it our little stylesheet say 600 by 400 okay so we're gonna go 600 pixels for the width umber has to have px and you have to have the semicolon and the height okay the same it was 400 right 400 I wrote it down come on all right now I've saved us let's jump into my Google Chrome refresh Hey so that is my structure okay that's a there could be your navigation pretty big navigation but they could be the middle of your website or your footer it's a nice big cube there we can start putting things like h1 or P tags in Koha so a lot of your basically your sites made up of structural bits these div tags and text elements and images that go into it and videos okay but the div tags are the structure now what we want to do is want put in this second box okay down the bottom here so in vs code I'm go to down here make a sick and definitely just copy the first one let it save some time copy when you view your copying make sure you grab the opening and the close it's easy to know where the closing is or if you click on it kind of highlights it here just have your cursor flashing and like the head here there is the closing so I've got to make sure I grab all of that copy it so I'm just using edit copy I'm gonna paste it in okay the tabbing is a bit weird and because of OCD about this I'm gonna make it all look nice and so first box in second box second box save it it's preview it in a browser preview got a second box a okay and the last thing we want to do is we want to make it a color we want to make it this pink okay so envious code we're gonna go up here and this is where we run into our first problem we're styling this thing called tag okay an HTML tag that's div the problem is that this div appears twice but we can only color it once so we're gonna learn in the next video what's something called a CSS class is it allows us to individually attack this first box rather than the second box okay and style them differently but for the moment we've put an out div tag it's awesome now we need two different kinds of diffe tags that have different sizes and different colors and we'll learn how to do that with a CSS class in the very next video hi there this video is all about a class selector okay it's going to allow us to do this okay where we style the yellow box differently from the pink box we'll do the same thing with this P tag we'll make one P tag different from the other one that is the job of a CSS classes selector let's jump in now and learn how to make it work okay so here's our CSS this thing here is called a type selector so it's selecting all the div types but the problem is is quite generic it goes every type that happens to be a div do the stuff to it and that's why we have a class selector so what we want to do is let's burn all of this okay put my returns back in my tab in so instead of deciding all dibs on every page are the same thing let's create what's called a class selector so all it means is I get to be unique I could just say I'm going to create a class to know it's a class and not like that type selector we just did you put a full-stop in the front of it in your CSS okay this is I'm a class what kind of class I'm gonna give it a name you can call it anything you like we call box one okay then like the rest of the CSS we've been doing it's the same so curly braces return and then we style it so that will full stop of the beginning means I'm a class okay what are we gonna do to that class we're gonna say it's a background color background color of yellow semicolon we're gonna have a width and height width 600px by a height of 400 PX okay so we've got box 1 now it there's no way of kind of connecting these two yet okay so it says hey box one be yellow but down here it's like well I don't know what you're applying it to so what you do is you leave the div and what you do is afterwards put a space and type in the word class okay you can see vs Co really wants to help out okay if you're typing it out make sure you put in the equals and the quotation marks so we have a div class and what we want to do is apply box one okay so now that is attached the differences are just to make sure that when you are styling it up here in your CSS you have to use the full stop to say I'm a class here you have to be a bit more long-winded okay so you say class equals and you don't put that dot in there okay that won't work so plus long version short version now hopefully if we save okay and we go to stand a browser we reset and the first box now knows it's yellow and it knows that it's 600 by 400 this box okay down here has no idea what it needs to be so let's tell it it's the same before let's make a second class you ready so dot box - okay put in curly braces and we'll tell it will steal all this lazy okay but we want this one to not be yellow we want it to be that pink color oh it's not a color to be pink go save it it's the wrong size in weight class size in height 400 by 250 so I just made up these sizes you can type anything you like 400 by 2 15 save it and now it's not gonna work why is it not gonna work that's let's check refresh just to confirm it's not working it's because we haven't applied it to it so we've styled it now we need to apply it down here so after the word div type in class and you can see there the way I work I'm gonna work a little bit more shorthand as we work through you can start writing on all the syntax if you like but you'll notice that I space hit C that's all I've done and I'm gonna hit return on my keyboard or the Enter key and it fills in all that lovely syntax I type in box to hit save now hopefully refresh hey there we've got a first box and a second box and it vaguely resembles us cool ha so we learnt what a type selector was you don't need to remember that name but a class selector for CSS is something we're gonna do a zillion of in this class and it's a way of individually targeting this so is there a box one this might be hitter and this might be navigation and this might be main content and we get to style them color them in size them let's go a little bit further and add a little bit of styling to it and look at a class selector but in a different kind of context so back in vs code here I've got two P tags and they look exactly the same in the browser okay let's say I want to make this one a different color in a different size so instead of tiling the P tag like we did earlier remember we made all the H ones okay but problem is is that's every h1 on every page whereas this one I just want this little unique guy in the first box to do something so up here underneath box one box two I'm gonna put in another class remember has a full-stop and I'm gonna call this one my highlight highlight its highlight highlight text okay you have to put a space in then you have to put in your curly braces okay you curly braces next your P key and then we're gonna say I'd like you to be a color remember background color for the background color and does regular roll color if you want to start text and let's say I want to make this one of their crazy colors of gun here mmm I'm gonna make this dim gray okay they spell it both ways look at that cool all right let's put in our semicolon okay and let's make the font size font size just something really big so we can kind of just easily see it okay so saved it now we need to apply it and it's the same thing I can say you there's a P tag but also a class of dot not dot or the test of our main test highlight text let's save it let's check it refresh hey it is bigger and it's the great so you style the type selectors to do kind of big general broad strokes okay then you do little specific things using classes and you apply them to individual little bits and pieces you can use it twice there's no reason why we can't say you my friend also have a class of highlight highlight text and it will apply to both of them hopefully it didn't okay you like you see why I have no idea why cuz now I pretend like I put that on there on purpose but that is always my problem you might not be as grammatically challenged as I am but I find it very hard to type the stuff in so like when I'm not doing tutorials and trying to impress you with my typing speed okay I copy and paste everything copy and paste it is painfully slow but it gets around my problem of typing the wrong word in and then trying to fix it not working out what it was it's just because of typos let's delete this and I'll show you some other tricks for kind of just making sure yeah you can keep up or fix any errors so the easiest way and is to compare against the father I'm making so say it looks like you've done the same thing but it's not actually working for some reason is in your exercise files that you've downloaded okay you will find in the folder there's something called the completed files and then here I've zipped up that was the fifth video that I made there's six video so if you're watching this video it's probably what are you up to I think video 10 you will find I haven't finished this video you hit so you'll find a folder in here called o tin know if Rubio tin it'll be ten okay and you can open that up and and open up so forth let's just do one okay I double clicked it open it up and there's the stuff we're working on and you can just open this envious code so go to file open and compare yours versus mine okay and I'll do that throughout the course that's one of the ways you can check your code the other things to note or I guess to check and these are the things that I find my students run into when I'm teaching live classes is people forget the . okay to identify a class or they start adding the class doc down here but you're not mean to one that always catches people out is they'll accidentally delete one of these okay with the curly braces and because that one opens and then doesn't close okay kind of freaks out of it doesn't you can see it's changed the highlighting color a little bit but it's just kind of missing so often you can go through click on this okay find your eye click on that first bracket and you can see it's highlighted the closing one if I click on this one it won't click on it because it doesn't know where the ending is okay so it won't highlight it's buddy let's put his buddy back in areas now if you click on them they kind of just connect to each other there we go the other things are people forgetting to put colons in and semicolons and just basic syntax problems basic spelling mistakes like I do all the time we'll do a bit more ear a checking later on well in stall some plugins for vs chrome sora vs code to help us would that syntax errors but for the moment those are the basic ones and that'll be it for this video let's get on to the next one hi there this video we're going to talk about nesting div tags all it means is we're going to end up doing this where we have our original yellow and pink box and we put other boxes inside of it it's called nesting it's not that fancy you can see here boxes inside of boxes that end up looking like this in the end we're gonna put ticks inside a box of xur inside of boxes yeah let's do that now I'll show you envious code let's go alright what we're doing is and your wireframes folder in your exercise files we are looking to make this one here HTML div - okay so same boxes we'll use the same thing we've created so far and we're gonna put two boxes inside a gray box and a purple box those are the heights let's work out how to do it so envious code okay we're gonna do what's called nesting just means we're gonna put divs inside of divs okay so we have one two here and a second div here let's work on that first one which is going to be our gray 100 by 300 okay so where does it go it depends on where you want it I guess we've got this text in here we don't really want anymore that was just I guess I put that PTX in there to show you how we could highlight and just so the box will have some content in it let's delete that for the moment just to make it nice and clean and clear so what we're gonna do is put a div say just where that PT egg was okay so if we go and go records div okay now we're not going to make a div then create a class up here and then come back and name it we're gonna do it all in one go okay so instead of just closing it off here now and I'll do that I'm going to put in class before I finish it now I'm gonna call this mine called box three okay then I'm gonna close it off just to save some time okay rather than coming back and doing it later I'm going to purge it so I put anything in it no just gonna leave it empty remember this is where it would go inside of that div let's leave it empty let's save it and it's not going to appear yet refresh the tick's has gone and the div tags in there but I can't see it okay so we need to style it we do not need this anymore okay cuz I got rid of it now I'm gonna call this one dot remember box three curly braces and we're going to steal all of that okay and we're gonna pick grey which is spelt both ways Wow I get caught up with that every time gray look gray and gray I don't know why I find that amazing it's the same gray this is about the different ways and and this one was a width of 100 and a height of 300 here we go well three thousand that's not gonna work save it and let's check it out let's see if we made it work refresh look at so often when you're making a website you'll make kind of like an overall website background a big container and inside of that container you'll nest lots of different div tags like the header and the navigation and the images and carousel and all those things there's a nesting let's do it with the second box and I want to show you a couple of things like if you don't get it in the right spot so let's delete that P tag from here okay that's where it should go a bit let's say we do it just outside of here okay so let's go and angle records div space class return this one is going to be called box for okay close it off with the angle bracket let's save at the top here I'm gonna copy and paste the whole thing real lazy and okay box for this one was purple was a purple purple and it was 120 by 350 so wow I was sexy 350 by 120 height of 120 let's give it a look and preview in the browser awesome well not awesome is in the wrong place okay so if you get it in the wrong place it's really simple in the code to go actually you cut and you paste okay and it'll line it up so it looks nice and all the lined could save and now refresh it should be in there awesome now if I want say an h2 inside of that purple text so here you I could just put it here there's no nothing wrong with typing h2 closing it off and typing it in here and kidding - okay and that's perfectly grammatically and syntactically I'm done that's a word correct so it's give it a preview it's in there what ends up people what end up people doing what I like to do to make everything look nice is put returns in between all of us to really expose the nesting so I know that there's a body tag inside of that is a box one inside of that is a box 3 you can kind of see the indentation same with this box too and inside of that is box for and inside of box for there's a ch2 does that make sense all right so we're getting a hang of this div tag division of space thing and putting boxes inside of boxes let's get onto the next video where we set our class project dum-dum-dum homework time did he say homework in the last video I did but think of it more of as like an awesome way of getting your skills bitter okay so I'll set projects throughout the course they you'll find the details of them I'll make a little video like this to explain it but also in your exercise files there'll be a folder called class projects there'll be a word document in there and that's what it looks like we're up to class project or one okay so we're gonna work through what you need to do and I'll keep adding to this as we go through the course if you don't have Microsoft Word you can open this document and lots of other programs if you get really stuck try Google Docs you can use that to open a word doc anyway so what do you have to do you have to create two separate websites so what I do is envious code close down everything and make I'll save it okay and make a new document okay so you're going to make a new one the first one's gonna be called class project 1a okay there's two parts to this 1a and 1b so the first one needs this okay I want you to make this I've given you a better the details so the name of it these are the boxes and you can kind of see in this visual here okay the nesting I want you to do green boxes inside the blue box etc etc the sizes are down here because my handwriting is not great there are larger versions of this you can either make it bigger here in word or in your exercise files I'll put a copy them in wireframes and it is div 3 here is their and div 4 okay so those are the two things you gonna be making this one's pretty easy we've done it before this one's a bit of a curveball because I want you thinking about div tags and how they work so this one let's look at the second one the difference is is we've got two boxes inside of each other it's easy yellow box square box but then I want you to put it in two H ones there's one inside this yellow box okay and put some text in it doesn't have to be what I've written here but some text in this one and then some another h1 out here okay how do you get it out there so it's kind of like it's outside the yellow box but inside the grey box so I want you to play around with that alright once you've done it okay so you build it all in Visual Studio code which is a preview it in chrome gate and take a screenshot now on a Mac you hold down command shift 4 okay and you can drag a box around it click hold and drag and that gives you a screenshot and you should put it on your desktop you gotta see mine down here and I want you to share that with me on a PC it's different okay you've got a Print Screen button on your keyboard you might have to double check that how to do a on your version of Windows it's different on lots of different versions of Microsoft Windows and I'm not up to date with them all so just check out how you do a screenshot I think it's just print screen on your keyboard and then you can paste it but the reason is I want you to share it for me because I want to hold you accountable to these things okay I want you to prove to me you've done it and all you need to do is share it in the comments here to say I did it and if you run into any problems okay drop it in the comments and what I'd like to do because we're at a reasonably simple stage if you do run into a problem and you're like I can't make this one work okay post your questions okay in the comments and ask for help and for the people that are doing this course that do do it successfully I want to kind of instill a bit of helping everybody else out so if you're in there and you're posting yours and you didn't you're like ya did it and go in there and if somebody has a problem like our minds not working because of this X Y & Z okay you can help them and you know just explain what you did to make it work okay get this like bit of text outside of this tag I want to kind of instill this in the group so that we're not just all relying on me to kind of go in and start working on everybody's code I'd like you kind of to help you know other people so that you learn it better you what I mean so where do you post these things you've taken two screenshots in your Microsoft Doc explains it it says depending on watch website your view bring this on you might have annex assignments section okay there might be a place to actually put it and and all there might just be a place in the comments okay so just stick it in the coins and also like this this or this or do the more ok social media so stick it on Instagram tag me Twitter tag me Facebook group here tagged me okay just so I can see that you've done it and what you should do on all of these is add a hash tag I thought about this earlier add a hash tag when you are so tag me and add the hashtag BYO web just so that I can group them all together and all of them okay so that when I'm reviewing it I can look at web stuff different from my other courses come so Instagram Twitter good places to post visual stuff and in Facebook there's a group here so terrible names I've added a link it's called the was it called the bring your own laptop online group okay and it's a group hello me where we share lots of at the moment there's not a lot of web stuff let a UI stuff lot of Illustrator Photoshop InDesign bit of UX UI and now we're going to introduce the web stuff with this course so post it in here head that hashtag and say yes I did it or it's broken and hopefully somebody will jump in and help you I'll try my best to get in there as well and help out that is your homework don't think of it as homework think of it as getting more awesome at web design is that it that's a class project over I will see you in the next video hi there this video is all about separating our stylesheet by taking it all out of the HTML and we put it up here in the head okay and we're gonna remove it and put it in its own document and connect the two it's pretty simple let's jump in and do it all right it's pretty simple to create separate or external CSS stylesheet we're gonna work with close down anything you've got open from previous part of the course okay so it's nice an open or empty and if you can't see this click on that first little tab here and if you can't see anything in here go to file open and find project zero okay it's a folder that we made and click open you should see all the files so we're gonna work on the div tags to HTML it doesn't really matter which one okay so we've got this one here what we've been doing is we've been half cheating that's are we in cheating we've got the style okay all the CSS in the header of the HTML and that works there's nothing wrong with it except it's a bit painful if we have 20 pages say we have 2000 pages each page has a box month we'd have to write box wine on all of our separate 2000 pages and if we wanted to change it you just wouldn't know if the client goes back I said can you make it read you like no there's 2,000 pages that I need to open and go and change so what we want to do is put it in a separate sheet okay and now 2,000 pages can reference that one CSS sheet okay so we can tell you once on the CSU sheet and the HTML all go looking for that one sheet and we'll update all nicely in one go it's hard to explain let's just actually do it so first of all what we need is a CSS document so let's go to file it's called save no no save let's go to file get a new file alright let's save it now okay the difference here is we're gonna call it we can call it anything we like as long as there's no spaces okay so we're gonna call our style but we could call a style Styles plural and what else does it get called just don't think of other generic names or anything I can't think of any other we'll call it style okay style and it's going to be dot CSS next click Save and basically what I want to do is copy and paste the style from this document to this document so go to tabs open okay so from this document what do we need we need we don't need this style tag the style tag is in here just to tell the browser hey this is not HTML inside the style tag everything in here is CSS so let's grab everything and when you're copying and pasting stuff happens to me all the time as always forget the closing brackets make sure you grab all of them and let's go to edit I'll go to cut okay and we don't need this style tag now he was just beer to tell it was CSS it's a lot cleaner first of all and here in style dot CSS just go to edit paste mmm that's all you need to do in a stylesheet okay is you just like we've learned before it's just in a separate sheet now it's not going to work let's test it we're going to learn a new function as well file save all why that's useful is that because we'll be doing changes to the HTML in this CSS and there's separate documents right let's have a look on my desktop and project 0 there's div tags and there's style deceases these two guys are separate so it's easier just to go save all I learn the shortcut on my Mac its command shift 3 what is it on a PC if you're looking at a PC go to file it should have it right there I'm guessing it ctrl alt yes yeah so it save it all and let's check it in a browser so back in here into Chrome I've already got of tags open you might have to go to file and whereas an open file ok on there refresh it and it's gonna go all bed okay so we've moved all the styling they're there the div tags are there but they're all collapsed because we've got no height for them anymore so what we need to do the second part is we've copied all of it from there to there but that HTML this HTML document doesn't know this guy exists yet okay he doesn't automatically go and find it so we need to tell it so let's do that so underneath the title let's push return now the long way is bracket link and we're gonna have it relative to the style sheet style sheet you can tell I never typed this and you've got to do or you go to reference it okay and you type in the style okay so what do we call ours we call ours Styles plural I can't remember okay you're gonna make sure it closes off and you're like man I'm not gonna remember that and you don't have to okay so the long way is the bad way let's close it and we'll use vyas code to help us out so we can type link okay and then just kind of scroll down here and click on this one okay because you can link different things where you can link to a favorite icon you can link to JavaScript we're linking to CSS and it puts in all that stuff for us it even puts the name in there so that is not that did not automatically go and figure out what I called it that's just the default thing in there so if you have called your Styles you're gonna have to go through and add the S there if you called it I can't think of another name but let's call you you call it theme you'll have to go and change it okay because it puts style and they're just automatically it's probably good habit just call it style let's it save let's do save all shortcut time let's check it in a browser now there we go refresh it all works you're like that's a lot of work why don't we just leave it okay you can tell the main reason is there it's all the HTML documents now that I create will link to this one style sheet and when I make a change in here it'll flow through an entire ginormous website easily because they all look for that file it also keeps it nice and clean so we can keep our HTML separate from our CSS and it means that this is kind of nice and tidy and then this is nice and tidy you can see how CSS without all the HTML is a really clean looking language love it okay before we move on I just want to show you close that down and a couple little things to do with CSS okay in a stylesheet if you hover above let's say so it's telling me that an element if I hover above this one can you see it just tells me it's it's the background color of the element this one here specifies the width okay so it's you can't hover above these things if you're unsure what they do or you open up somebody else's website and you're like what does that thing do okay you can give you our brief explanation within vias code and also something that's built into CSS but not HTML by default is if you have errors okay say I delete what they owe opening bracket by accident okay you'll see down here there's like hey you've got an error if I click on it it says that in your CSS sheet there's an unexpected error like the problem is is that that's not that helpful I've never found these errors to actually be helpful okay I can kind of decode it because I broke it so this is it's cuz it's expecting a curly brace at the beginning there okay and you can see there's lots of errors there's four of them you're like there's only one it's because it's like this trickle of errors so that one breaks so it can't understand the rest of it if I put it back in go to brace don't need the second one oh all the problems gone okay we don't have that functionality built in to vyas code for HTML at the moment if earlier on you're like hey didn't go red and like yours did okay it's it's an option that we're gonna add a little bit later on when we start looking at extensions but we need to do that a little bit later in the course now if you do see errors it's probably your brackets your colon or your semicolon okay they're missing through that it breaks it but then and break it so I get a lot of student kind of like hey mine's not working in classes and in videos okay and it's normally always just a syntax error normally the other thing people always forget to do is that they forget to connect it in their HTML okay they make it and they separate it all out and then they forget to come back double back and connect it up and they'll use it'll be just something like this there's people loads of people like me who are like like it's not working and I can see very clearly it's a spelling mistake yeah so maybe some copying and pasting just to make sure the syntax is all spouts right now I'm gonna set a little project now it's not going to be a separate class project because there's no point sending it to me because it's gonna look exactly the same so what I'd like you to do is you created two documents in the previous tutorial okay previous homework if you didn't do it go back and do them okay but you've got these two HTML documents I'd like you to separate them out okay and have separate style sheets for both of these now when you are separating them out one can be called styles but because they're going into the same folder you can't have two of them called styles so have two separate style sheets just to go through the motions of copying it out and making sure you right so maybe call this one style one dot CSS and call this one style two dot CSS and see if you can make it work alright that is it for separate style sheets and I will see you in the next video all right we're on to project number one so project zero is finished that was our like getting used to things and just learning the basics now we're gonna actually start making some stuff so we're gonna build structure okay that's our project one structure I've written at the top there we're gonna make some basic kind of div tag structure to it then we'll add some details to it these are my wireframes I'll add a logo and some headings and some buttons and some maps and cool stuff and eventually hopefully it'll look like this this would be our final kind of looking thing I know exactly it'll look exactly like that cuz I've already made it but first of all in this video we need to work out how to create an index dot HTML page and how to connect our CSS together we'll also show you how to kind of separate documents like this side by side all right you ready project 1 about to begin okay so it's time for our new site so let's clean things up and get our new site started so let's close down everything in vs codes but nothing open and we've been working in a folder called project zero we're up to project one zero was like a throw away projects okay so those are things that we just used to test understand what a few of the basic things we've had to learn so far so what we need to do is create a new local folder so we call it the local folder because it's on your computer not on the internet okay so it's local local to you at least so we need to create a new folder and create our HTML and CSS give them names and link them together so first up let's go to file and we'll get a create a new folder now it doesn't matter if you if you find it a little bit difficult to go because we're to go to open a folder and then create a new folder it's kind of weird you can do it through your operating system so if you're on Windows it's different and but on a Mac then finder go to your desktop ok and in here I can right click and say new folder it doesn't really matter how you get this new folder ok but we need a project one if you're on a PC it's very similar open up your My Documents find your desktop and right click make a new folder so either way we want to have a new folder I'm gonna open it and I'm like desktop resi there is my new folder project one click open nothing really happens there's kind of flashes and you get the welcome screen back again I remember when I first started using PS code and I was like oh it's confusing so give her that let's make a new document file new file we're going to create two of them will create our HTML it's a file save now this HTML document we've given it random name so far like div tags to HTML or hello world HTML now for a website you need at least one page or at least one page you need your home page to be called this exact thing okay so it needs to be called index.html if you called it home page to HTML put it up on the internet and the browser would go to your site Den's awesome website calm and go looking for index and couldn't find it and we'll load up a big error on your page so you need at least one page called index.html use lower case rather than upper case there were spaces has to be exactly that and the browser goes and looks for this page as its initial first page so call it index click it say that let's add some basic HTML okay all of our metadata so remember exclamation mark return let's give it a title this one here is called the idea and restaurant restaurant I can't spell restaurant is that close there's no spell to give me and I'm cheating as well looking at my notes like I've written it and they I don't even know if that's about right anyway so a dear restaurant is going to be my title and and we need to create and connect a CSS sheet so let's do that by going to file new and let's go to file save we can give it any name we like I was thinking about it before in between videos as like there was style what does I used to call it main all the time main dot CSS it doesn't matter what you call it the only problem is if you call it style and you're a web developer or designer and you're making like loads of websites you can have lots of compiles on your desktop called style ok so it makes it a little bit hard to fine the one you want but not that hard let's just call the style member dot CSS if you forget like I do all the time hit style okay doesn't work but over here you can right-click it rename it and just put a dot CSS afterwards so it knows now we're going to connect the two okay so back to HTML and just under here under title we're gonna put link and click on CSS and it gets the right name because I gave you the right name get hit save and that should work let's test it works let's just put in the body here let's put in an h1 now I'm gonna show you a slightly different way of working okay we're gonna add shortcuts as we go around if you feel like man I'm not ready for shortcuts you just type in the long way okay angle brackets h1 close it already does a little shortcut there but I'll show you a shorter shorter shortcut so I'm just gonna type h1 and hit return you can see there don't you have to put the angle brackets at the front so I'm gonna do that properly for the rest of the course only because I do it at a habit and you might be wondering why but anyway let's call this one err do I work save let's go to our Styles let's add a style for h1 okay h1 curly braces we'll make it just change the color is it columns color okay and we're gonna call we're gonna give this one brown and it's got a semicolon in we're gonna save it and let's go test it in a browser so that's our old page that we're working on I'm gonna go to open file it's gonna find it so we're looking not for project zero now go to my desktop alright you just up project one and there's my index to HTML hey there's my h1 and he's brown now a couple of other things I want to show you in BS code is this thing the Explorer it's cool wants you we used it for a while but at the beginning you like it's a little bit confusing so there's two sections to it right I'm gonna have these little Chevron's here to kind of tidy it all up okay so open editors I never have open to shows me what it means open editors that's an editor that's an editor it's showing me they've got these two documents open okay I don't find that useful because I can see their project though it's really helpful okay that'll be the name of your website so we've called a project 1 but if you're working on this website you might call it a dear website ok and that will be the name there okay and then here there's all the different pages you have so in here if you end up in project 1 creating a bunch of other pages okay let's say we call this one contact us ok and we make a bunch of other pages let's make one more just kind of cheating right you'll notice that can you see in here it's adding it to that project it's going ok I've looked in that folder and I'm seeing everything in there ok and open it it is it's just showing me the two that I have open not sure if that's useful for you I found it quite difficult getting made around that weird little Explorer them open these guys they're not anything you see it updates so instead of going file open you can't just double click these and we'll open them up if they're not already open I think that the other thing I want to do is I've got index and style and I'll toggle between the two and you spend forever toggling between the two I'm going to show you a little trick not too many tricks earlier on we're gonna get trickier as we go but this one is just it's good for teaching and handy for what we're doing and if you click and hold the tab at the top so I'm going to grab the word style hold it hold it hold it so dragging it around you can see these boxes appears a bit weird you like has it that one is it that one move it around vaguely over here not too high not too low about there you can kind of see it's taking up half it's got about like that gray it's kind of half of it there we go so the cool thing about it now is I can see my index and my style and I don't have to toggle between the two so I can go over here and say actually I'm gonna change this I'm gonna add an h1 nice to H 2 tab what about this and over here yes ER look I don't have to leave or toggle between two tabs and I'll make this one a color of red and now I'm browser refresh it's not working at all why is it not working you've noticed you're like ah ha I can't see it red do I work say I didn't do save all there you go you know how I say before I run into problems file save all because I save this side but not this side I'll pretend like I did that on purpose by didn't all right so that's a nice little helper thing to work through if you want to get rid of that you can click on this little icon here you cannot just split it again okay close close all who saved I don't know which what button to click there you can drag it to be down here as well and where is it there you go so it can be underneath all right last a little thing I want to show you is there you spend your life going from HTML putting stuff in and here styling it in the CSS so nice way to kind of just split these up is you can be on any of these ok and click on this little icon in the far right here give it a click OK and it will separate them up does a weird thing I find that button although looks amazing I find the easier way to do it is actually just drag it so but these two okay so style dot CSS if you click hold and drag the name there can't just drag it over here you can kind of see it makes this big grey box that appears and it's a little bit random in terms of where it ends up okay but what we're looking for is vaguely in the top right here because we want that half you can see so HTML on that side CSS that on that side you can close it down if you don't like that I'll save it okay open it up so it's two separate tabs but I'm gonna drag it you can't have it down here as well depending on your laptop so I find my screen works really well for I just mix them up you can man I find that hard you can put HTML above CSS I never do it that way always have it over here there we go side by side up to you so now I can go into here and say actually on an h2 tab this one and over here I can type in Oh leave my bracket there I could type in h2 you can see it's handy color mmm save check in the browser browser check blue nice one thing you need to do as well is you need to go file save all I find I accidentally hit save my curse flashing over here so if I hit watch this Abyad and h3h3 okay and stuff and over here I start working and I had style my h3 and color again whatever I save it and I'm like hmm refresh refresh refresh I've saved it okay but because I've only saved the CSS it didn't save my h3 so I can spend ages trying to fix this problem like hmm what is wrong with the code and I spent ages trying to fix a problem that doesn't exist it's just me being silly and not going save all is the shortcut so if you're in a habit of command ifs or control yes you need to learn the command alt yes as your default shave shave and or on a PC is ctrl alt yes to save all now so look refresh yeah easy all right let's get into the next video actually no I'm going home for the day I've been recording all day and it is time for a break and that will like tomorrow you'll hear either a more excited depending on how well his baby sleeps or a less excited Dan depending how much coffee of head in between videos but for you it won't matter because I'll be right here in a second with the next video where we start looking at plugins in vs code I will see you then hey there this video is gonna do dual purpose it's gonna show us how to install what's called an extension in Thea's code and that extension is going to show us how to do live updates in our browser rather than going and hitting refresh every time so I've installed the extension I'm gonna change the color here to green it's gonna be green yellow and watch it change over here when I hit save I'm not hitting refresh ready just updates naturally I'll show you how I use this how I set up my workspace okay my physical space with my desktop and my laptop and we'll learn all about extensions envious code alright to get started open up any file where I've got our index.html open you can have anything open and we're gonna go to the extensions tab over here so there's a bunch of icons it's less the last one or at least this one with the square with the square don't have this grab that one click on that okay and the other thing that you might it might look different to mine slightly because of the width of it so to see this like see my cursor when I get close to this edge here I can click hold drag it out okay and eventually if I drag a big enough let's just drag a big enough so we can see the icons it might be a bit big for you but it'll make it easier for us to work out which way you know which extension we're actually looking at so let's do a search at the top here and so I'm gonna put in live preview let's pretend like I know exactly what we're gonna install but let's pretend you don't you know like I want to do live previewing of my HTML so you do a kind of a search in here and you might have to keep typing a few different things to get the extension you want now the one we're going to use is this one here called live server now this is I guess to be clear how extensions are made so Microsoft amazing people made vyas code and share that freak with us you're like thank you Microsoft well they also did a said hey wrist of worlds we will allow other people to build extensions for the software we won't do it not Microsoft but will it either people do it so it's a big thing to remember we're using a live server and it feels like it's part of the product but it's not okay if I click on it it is something made by ritwik day okay and one day he decided I'm gonna build this plugin that you know to help me use vsco because it's not built-in by default so he did it he made it and other people started downloading it now the trouble is is that there might be a better live server out there there might be another person who've made one and it might hear live server preview that looks pretty good but it's got lower stars 3.5 this one here it's got five stars and it's got a zillion downloads that's how I judge it so when I'm looking for an extension just solve my solution solve my solution so my problem and I type it in and then I go through and say how many times is it being downloaded versus how many stars it's got and then it's like um it's like X Factor I kind of just compare them all and see who's got the most stars who's got the most downloads and then I just picked that one and I guess I'm gonna show you that because you might be watching this in that distant distant future okay and it might be live servers not that good now it's got like two stars because rut workday got hit by a bus and nobody's been looking after this application okay so you have to make your own choices here okay but which one you might use and these will change over time we're gonna use this one and I'll show you to install it it's pretty easy click on it should appear over here and another little tab is my website isn't gone but this is extension it has me a little bit about it and I generally read through it to make sure it kind of does what I needed to do okay and it tells you how to install it and I'm sorry I'm busy by now if you want maintain the project CC this is a good one there's a note in here from rut work saying I'm not gonna support this product the vi engine anymore I know it works perfectly because I was using it today but there's gonna be a time where it's probably not gonna work and the stars will drop off and he says sorry I'm busy does anybody have to hurt okay and that is true of lots of programs now a lot of software XD's doing it they're allowing extensions to be added rather than the software makers they just do the core and they let other people make all the interesting extras so to install it it's easy click the install button come on Dean she's in at the beginning you can kind of see it over here that's your only visual cue that it's doing something until it says installed and you can uninstall it if you don't like it you can run through a couple of them turn them on and off now for this particular one I don't think we need to restart and vyas code but a lot of them will they'll say it's somewhere in here and if it's not working that's a pretty good way to do it so if it's not working let's just do it anyway let's go to code quit Visual Studio code ok and now I'm gonna reopen it and it's probably going to work so how this particular plugin works have you read the documentation basically it says have a document open and click this button down here ok so click on go life it launches Google Chrome and it doesn't look much different than we were before except this one is it'll update live ok we'll show you what I mean by making it a bit smaller and I'm gonna push here with us over here so you can see it so it basically it stops you hitting the refresh button and you might be like I don't mind hitting the refresh button then don't install this plug-in it's a you know we don't need it it's just handy I like it but if you were like man there's just too much work and too much hassle just yeah you can just do I think we refresh but I guess what I want to do is mainly in this video show you how to install other extensions we'll do another one in the next video but um yeah so what ends are happening so watch this before I had to hit refresh now it does do I work and yes I do you know hit save can you see it just I saved over the site it just automatically refreshes so I'll show you in a second how I use this but let's just quickly recap find extension type in what you want to do okay we're gonna use FTP later on and we're gonna use some code hinting find it go through and say oh they've got about not about the same day planner this one's got twice as many but these both got really bad reviews so this one's got less but it's got higher stars so you kind of make a decision based on stars versus downloads well this one looks good that's the one we're gonna use and that's because it's got a 2.3 million downloads it'll be different when you look at it okay with a high star rating okay and you can close the extensions by clicking back on to your Explorer all right so we're gonna preview here and what I've been doing is either having it side by side like this which is gonna work for my really big screen I'll show you how I normally work though I'm gonna jump out to my cell phone now and I'll show you everyone that's me real me not just the computer screen me and I want to show you how I kind of work so laptop big screen okay I plugged them in so they're connected and when I'm working on the big screen here I have that using vs code okay and vs code I'll launch the cool live server thing so I'll launch it it goes big and what I do is I just click hold and I drag it and I drag it to over this screen okay and I leave it on there all the time and that's how I kind of do my editing so Oh over here in V is code I'll try do something so you can see a change live so each one I'm gonna go set font size font size is gonna be like four hundred pixels massive hit save and what should update over the area did it update it updated hey so I'm always hacking away over here and watching it to make sure the results are good over here so I have to kind of toggle between screens or switch between them and you're gonna have an extra problem while you're learning cuz you're gonna try and do this but you also need to watch the video that I'm making so maybe yeah some people use an iPad down here to watch the video one and then do these things here you might not have you might have a tiny laptop that you're working on and you just it's just gonna be fun you have to toggle between all three videos and but that's it extensions make sure you check the star rating versus the how many times that's been downloaded and make your own choice okay be live server at the moment is pretty good but it might not be in a year because nobody's looking after it and and that is it that's when it's all there extension lifesavers helpful I'm babbling it's hard when you're on live camera it's easy when you can edit when you're doing the screencast I sound a lot more sensible alright more rambling I'll see you in the next video bye hey there wouldn't it be nice if you made a typo or you forgot to do something or left the brackets off that there was actually errors that appeared and told you which line they are on and how to fix them there is such a thing it's not installed by default it's an extension I'm going to show you how to work with that plus other ways of checking your code and asking for help let's get going alright so - by default you've got error checking in CSS for some reason but not in HTML you might have noticed that already so when I do something wrong in here and I forget to put a colon in okay or yeah put a colon in there kind of like some weird things come up and it says it doesn't know you know it's not expecting things and how to quick fix okay these never seem to work no the quick fixes work it's gonna be down to you to fix gain you just gonna have to go through and say well where does the problem start okay the problem starts here so something just before that is wrong okay but that's helpful just to know kind of where it starts and I'm actually this deleted as well I'll show you where else it starts I'm down here can see there's like a little arrows right down the bottom left here I click on this and it says : expected that's actually helpful speaking in : didn't get one okay so on line three okay and it's affecting down line 15 as well sort of thing okay but line on our character 15 so line 3 there it is there we know when you have a really big CSS sheet it becomes more useful when there's like on line the thousand okay so on line three is a problem and all the arrest of these don't worry about until you fix the first one because if you fix the first one they will all go away okay there's a cascade of errors that fix by the first one now this doesn't work in HTML by default okay so if I put something in here that's not meant to be in there and the thing doesn't know what to do it doesn't tell me there's nothing to do if I miss the beginning tag and I do parts of that okay it's gone red but there's no kind of like problem error and like even sure if it goes red by default I'm pretty sure that's because the plugin i installed earlier on so let's turn on this error checking okay we're gonna do the exact same thing as before so it's the same as installing an extension click on this icon here okay and i'm gonna make it bigger so you can see and this top here delete what's there and I'm gonna say I'd like HTML and error so this is where it gets a little bit card cuz you're like what do I call it and there is no like good rule you've got to start typing and see see what results appear you might do some Google searches and in terms of error checking sometimes it's called hinting or linting with an L Li in T okay you can lint things and and I searched around trying to find one and the one that I use is called HTML hint but even then it's really hard to find in this list okay there's some Google searches and I found the one I want it's actually just one word HTML hence you got no chance of finding it okay so know that this extension search bar is okay to get started and try and find things but just jump out to Google and figure out and just ask the question what is a good plugin for this thing that I'm trying to do you can see here it's a really popular one four-stars works for me and it's got half a million downloads click on it have a look you read through what it does and how it works and I'm going to click install and we're going to wait and it works this one doesn't say restart does it nope some of them say restart a lot of them don't anymore they used to and but if it's not working you can turn it off and restart it so let's make it work so let's close down this little tab that was just showing me like a little preview to the product it's Gator also reset let's go back to our Explorer and let's make this a bit smaller and now if I do some errors put in some random codes with it shouldn't be oh look a little cream thing and it tells me there's a special character in the wrong place okay doesn't really tell me much again but at least I know where the errors okay it's on line 13 I can go find it so in terms of air ticking that's a good place to get started turn on the extension I'm gonna close it down for the moment and just keep an eye on this okay if you're like hmm it's not working and before you email me and say hey it's not working check your errors down here you might be able to self diagnose now another thing to do before you you know reach out to see if there's a problem because sometimes is it's not actually a problem you might do something in here and change the code and check it in your browser and the browser is not showing it you're like ah something's wrong sometimes okay probably one out of every 50 times for me it's not actually broken your codes perfect in here the browser okay where you've been previewing is just holding on to old data okay it's it can do something called caching and it cases your previous version of your website so when you're saying update it's going I'll use this other case version of your website to be fast and smart you're like no no don't be fast and smart I want you to reload every time and the way to make it do that refresh can work but there's a like a real like definite way of making it reload okay because sometimes refresh still and like if you've downloaded images here often the browser goes while if it's the same name of the same image I will not update it because it's the same image with the same name but you've you know you physically changed the image okay so sometimes things don't update even though they should talking too long show them how to do it then it's under view okay and turn on this scary set of tools okay so view developer okay and click on developer tools okay click on that and this opens up that panel down the bottom yours won't look like mine I kind of remember what it looks like by default I'm gonna turn that off oh I can't remember and but let's talk about the main thing so don't worry about what appears here what you want to do is the option so now when you hit reload you can right-click it and it gives you these two new options that weren't there before cuz now you are like looking under the hood using the chrome developer tools you have this option empty cache and hot reload that's that you forget everything you know about my website and reload it exactly the way I'm displaying it here in vs code and that can sometimes you know if I'm doing problems I'm like sure I should be right why is it not working everything's perfect I go in there check that do it and sometimes it fixes like a few you know instead of spending time trying to reach out and figure out how broken it's not actually broken just the browser didn't update all right what else can you do now you can totally ask questions of this course like there's comments I use the comment section use social media like you see all the social media in the class exercise files ok reach out that way and but often like it's just me for this course the new course you know I try my best to answer questions sometimes I get a bit backlogged or what's the weekend I'm holiday so mmm like definitely use that as an option but you will also find Google searches I know it's a lame thing to say go and search on Google but what you'll find is there's a couple of main places actually one main place it's called Stack Overflow Stack Overflow Oh Stack Overflow will appear in lots your search results but searching in this site it's just amazing there I listen to a podcast the guy started this like it's it's for designers and developers anything I ask a question in here you will find lots and lots of really useful answers and the curated answers from other users and what you probably find is you don't actually have to ask a question you can log in and sign up and ask a question but you'll find that's probably already been asked especially at kind of our level here where we're just getting started so Stack Overflow is an amazing site to get and you get a response straight away so I guess what I'm saying and if you're still having problems drop me a line all the different ways that this site gets viewed this video course gets viewed and yeah use the comments or the ask question button and often to kind of fix your problem I need to see the code ok so zip it up okay so compress it into like a little folder and send that along you know like a link maybe using Dropbox so I need the files you'll have to work out a way that works for you sometimes you send it it's a slot as a system okay to sending things Dropbox is a really good one because obviously screenshots are really hard to kind of I can kind of see what's going on but it's a little bit hard to edit your code otherwise I got to start retyping the whole thing and try and work out what went wrong now my only thing is if you're asking questions say you post a question have a look through the other comments and see your questions and see if there's one that you can answer say you or just you know you're finding this not easy but you're like you got that concept you're like man div tags got it locked in and you see a question somebody asking about div tags I'd love to try and start that sort of momentum where if you're asking a question you have to answer somebody else's as well or at least give you a best opinion or try and try and do it okay so that we can I guess get answers quickly and for you you'll find it super valuable if you are able to answer somebody else's questions it's it's pretty amazing like being able to articulate that to someone else really drives at home in your own mind about that topic and plus if I'm on holiday sipping pina coladas somebody needs to help don't worry I've got a baby and a five-year-old there's no pina coladas in my near future so to recap do your own error checking using the HTML hint okay that we just installed in visual studio code check that it's not actually a problem okay by refreshing your browser but remember you've got to do that by going into view and going into developer and inspect tools KL developer tools and then right clicking the refresh button stack skills is an amazing place try it with me as well okay we using the comments or hit me up on social media one last thing before we go is there might be a say happens a bit like I'll go into my extension see and I'll be like oh great this one works it looks like it works I install it and I just can't make it work or it's broken and so sometimes you need to uninstall extensions so to do that click on this little weird clear extension inputs okay and so with that cleared your search disappears and it tells you things like the ones what tell us exactly what's enabled ok what's recommended I never find that useful but over here it tells me the ones I've enabled so I can click on them and say actually HT my hunt doesn't work I'm gonna uninstall it and try a different one you can disable it temporarily say that you're like actually is it working is it breaking something else let's just disable it and then test something and then enable it again to see if that thing goes away I've never had to do that often the star rating kind of fixes that or at least guarantees a half-decent plugin or extension and that's it that is HTML checking it's on by default for your CSS let's move on now and actually start building the structure for our project one the restaurant I'll see in the next video hey there this video is all about learning what the html5 structure tags are okay they are things like hitter and main and footer and nerve and you can kind of see they're pretty simple they're just containers that we put stuff in exactly like a div except we give them special names because they do special things they're pretty easy to do let's jump in now learn what they are alright so what are these html5 structural elements and basically HTML for what we used to do is what we've done up until now we would just make a div tag remember a division of space it's kind of a box and we'd give it a class name and then style it over here and I'll see us and that works fine okay we'd have a box at the top for our hitting in a box for our navigation in a box for the main parts box the footer and we just create all these divs with all these names over here so what they decided in html5 is like hey we're reusing those things wouldn't it be nice to have a an actual tag instead of writing derv equals bubble bar you just write nav okay and at the end we're gonna close the nav same with this one here maybe this is the main part of our content okay we'll just call it main and over here call it main okay it's about it right and over here style the word main okay so that's what it is okay they're just replacing some commonly used div tags with some pre-existing names now other than that there's not a lot of difference between divs and these kind of predefined names they're just yeah ready to go there must be some accessibility options for like screen readers that that might use this these types of tags that have to do a bit more research in that it's never come up in my work so undo this because I'm rigging this document so what are these tags there are some main ones okay they're all kind of suggestions so I'm at w3schools comm and here's a bunch of they're kind of new structural tags okay and there's basically just a couple of them that get used you should if you're going to be like the best html5 implementer in the world go through and research them all and use them all perfectly what you'll find is that most people pick the good ones and there's a lot of confusion about some of we you should use some of these and because they're like pros and cons well the pros aren't huge for adding them okay other than it's just a bit carer people don't use them so I guess I want to be honest about that so that we're not so I'm not telling you you have to use these tags now I made a little handy new exercise files a little drawing why am i drawing these I know I could use illustrator and I feel like it's proper if I go into wireframes if you go into wireframes in your exercise file I've made these two so there's HTML structure a and B and I'll show you two really common kind of uses of them so instead of printing div hitter we're just gonna use the hitter tag the nav this is what I normally do I throw in a website this outside box the kind of green one doesn't have a name they should just put one in called container that everybody uses in web design but they didn't so there's no name for this outside one we have to give it a div name but inside of here I often put my hitter inside of that hitter my I put my logo over here there's no specific HTML tag for logo so you'll put that in as a separate element but there is a nav so for the nav in there often and the top right there's big section in the middle I call it the main okay well I call it the main it's actually a predefined you can kind of see it over here it's actually a predefined html5 tag do we think about main is that that one doesn't get used very often I'm like why wouldn't you such a good explanation of what this area is but anyway and footer is a really easy one so there's what I do I want to show another way of working that I see a lot of other sites done okay I guess I don't want you to all follow me perfectly because there's different ways of doing it so again the big blue thing around the outside is doesn't have a specific name will give their name in a second but here so I wanted to show you this one as well because here the nav doesn't have to be inside the header to work you can have the hitter they can have your logo and some graphics I know what going up there but you gave your navigation separately your navigation could be down the side though nobody does that anymore and then you've got this then you got your footer we've already talked about and you got these three these are common enough and aside is pretty easy if you've got a web design where you've got no you know sidebar or something often it's like related articles or latest Twitter feeds you can have this you can put it inside a div tag called aside and it's clear great these two are the ones that real using so this is how I interpret how it was set out so you have an article and it's unique to that page it might be a blog post it might be you know you're writing about a topic and then within that article you have sections okay so and you might have a main kind of article but you might have some bullet points or like little if a ques or kind of pull quoting extra bits gained you might have ten sections or two sections but you have a main article there is arguments on sites where there can be completely the other way around you have a section and you have articles within the section and you have multiple articles on the page the documentation is not super clear and I guess I wanted to share the unclear Ignace because you might get to one website with a being very very deliberate about using articles and then sections within the articles and then you get to another site and they've done something they've implemented this article section thing completely different you'd be like hey so if that happens if you get you get to the moment and it's not you it's the internet clear clear clear clear weird but a lot of people don't use main that's why I didn't include it here alright so we've learned what these kind of tags are just replacements for divs with special names we are going to go in start building our actual project structure in the next video see in a sec all right let's start actually making the website so our first project is gonna be this restaurant so we're gonna put in the structure for it the hitter the main in the nav okay and it's gonna look something like this is gonna be the kind of main structure that we're building in this video so hit a nav main footer easy let's make it and that's what it looks like and we'll center it as well that's the job of this video let's start coding all right depending on how well you've been following along I'm gonna close down everything and here except for and I open up my Explorer I'm in project 1 okay and I've got index in style open to make sure those open now in the style CSS lets delete all the code we've got so far and clean it out okay and same in here let's get rid of all of the body so that's nice and clean but if your returns in coz crazy again we need lots of space make sure that your stylesheet is linked and the title you've got a title any kind of title what I also want to do before I move on is I'm going to close down the Explorer is I keep meaning to do it in every video but let's do it now let's go to view and now I'm probably just gonna do this and we're gonna go to view appearance and see zoom in you'll see you if you want to do it in a sec watch you see all the tickets got a bit bigger it's probably to help may need to help dev editor from zooming around you're probably getting dizzy as well going side to side checking CSS in HTML so made the text a bit bigger you might be the same you might be like mmm I wear glasses and I need to make this stuff bigger so view appearance you can zoom in okay so you're reset we're ready to go once you get in the frame of mind let's say wave we've woken up I've got two ideas we've got a coffee and more like okay we need to make a website for the Cydia restaurant company we've created our local folder okay which is called project one and we've created two files index and CSS we've added our title and that's all we've done actually we've connected the starter CSS so you're ready okay next thing I want to do is start adding my html5 structure tags now we're gonna work off a diagram that I've hand drawn for you okay it is in project 1 and your exercise files and it's called this one wireframe p1a so if you want to have that open on your the screen like I am I'm gonna put it over there okay just to kind of work out the sizes and the colors and stuff you don't need it I drew it anyway all right so we're going to need our first one and the first one is hitter okay so instead of writing div equals hitter we're gonna write which we don't even need the angle brackets anymore member oh we're using new tricks so we're gonna type hitter there it is there go but I returned in so there's a bit of space because I like space between the tags now we're gonna style it over here in my CSS the difference between what we're doing now what we did before is we put when we write a class okay we have to put what's the what's the thing that goes into the front so that period or full stop okay then we write hitter but this isn't a class you know it's a class because remember we write over here div equals class it's very clear when it's not a class it's just a plain old tag okay there's no class in front of it we don't have to put that period so you only put that dot if it's a class this one you don't have to hitter awesome then we put in our curly braces and we're gonna style it now like before we're gonna kind of open ours out to be a clear box but often you wouldn't give it a background color and our height like we are and that kind of diagram that I showed you because you lit the logo and all that ticks kind of fill the gap but we'll put the structure in first then we'll delete things like the height and the background color all right so first up hitter you my friend get a background - color there you are we're gonna use blue for this one I'm gonna head save and we're gonna go and launch our cool little live preview thing actually mine's still going from last time go live start it back up there it is there and great blue background why can't we see it because it has no height so we either put content in it which you'd normally do and but because we're not doing content we're kind of separating this all out into separate videos that we can get our kind of knowledge going first so we're gonna have a height of one one eight pixels just that's what it decided for no good reason now let's go in preview there we go now I like to give it a width because stretching all the way across it might be what you want but for the moment we want it to be nice physical width so how wide should you make your website so this part of our course will give it a physical width so we'll say you know you need to be a certain width later on we'll get it to a depth or respond so when we get into a section about responsive design we'll we'll get it to respond to different sizes but at the moment we're just gonna target like it should like a standard laptop sighs okay and basically your width can be anything it's up to you what you think you know the web should be but you're new so you need some sort of guidance so and often I'll make mine 1024 pixels wide there is a really kind of common generic web width okay it fits on like laptops uh by default or about about 1300 across so 1,300 so as long as it's less than that it will fit on most screens other really common sizes are 960 okay gets use quite a bit because it's look at this later on but it's easily divisible by 12 which doesn't make any sense now but it will later on it's there columns that we're gonna use later on bootstrap which we'll look at later on as well uses 992 it's a framework that we'll look at but don't worry too much okay it can be mesh keyboard okay it's gonna be pretty small website that one but if I made it eight nine eight seven nobody would care wouldn't wouldn't break the browser as long as it's smaller than a laptop screen we're gonna use 1024 the other thing is as well you've gotta say 1024 okay if you're at a web design group meeting and you start talking about 1024 there you're gonna know that you are a newbie yes 1824 all right let's save it and let's check it out browser go 1024 fits on my giant screen and they'll fit on smaller screens it's got a height and its background blue and the main important thing is we used hitter instead of naming it a div giving it a class and styling it over here sooo the next one a couple of spaces I'm going to type in nav so nav hit return space here we go I know do the same over here okay remember leaving that curly brace there you know type a nav doesn't need a full stop in front of it okay and we're gonna add a background color we're gonna cheat because that's already typed up the top there background colors are you will get used to that's a really long one to type to get the right suggestion I hate that one still group of characters anyway so let's check our diagram where's my little diagram he's going to be 40 high we'll use the same width okay but we use the height of 40 now this happens quite a bit I do it and I forget to put the PX back in what happens in the browser it's just check didn't appear okay save still didn't appear why you can see it cuz it's blue going down it's meant to be red it was there the whole time still not here come on browser so it's meant to do automatically updating why is it not oh you know why okay it's because I didn't save this site I'm hitting command yes it's control this on a PC okay because I'm hitting save but I'm only in this document out of the habit this morning of hitting command alt yes which saves both sides then it appears alright I pretend listen that I'm teaching you but really I just messed up alright so there's a Neve what else we got to do we have got the section here which is going to be my main and this is gonna be my footer 400 100 check it out so over here I'm gonna bulk them in okay so I'm gonna put in note I'm gonna put in main okay return put some spaces between them so you can see and down the bottom here we're gonna put in footer now notice that I was kind of messing around with my cursor so it's all kind of I just put my cursor in front of it had tabs or all lines up you don't have to do that and I'll put a return in it to look like all the rest of them alright so there's my sections over here gonna cheat paste that in that in okay this one's going to be main this one's going to be footer so we're doing lots of things one at a time but often when you're working you're gonna start and kind of doing this a little bit more bulk kind of doing things so orange it doesn't have to be the colors like this and random colors in here we'll look at kind of more code based colors later on but I'm just using the ones that are pre filled in it was 400 and 100 I can't remember 400 100 it is so height 400 this is 100 can the right spot down alright save all and then go to your browser and there we go it's the kind of core structure now the big thing you like I want it centered why isn't he's enduring it it's to vent one next so what we can do is we could try and center every single one of these boxes and that would work but what's really common is to wrap it all up in a div okay or in a container and make that centered so that these guys come along actually is easier just to show you so envious code okay we are gonna go in here and say the hitter so just into something it's kind of weird to center kind of a structural element like this and there's no like make me centered so it's kind of a trick it's the way it's done anyway so there is so you can put in a margin okay and which is the space around the outside okay but you can put a margin on the left okay gonna click on that one and instead of putting in an actual measurement you can just type in Auto and make sure a semicolon goes at the end so syntax has to be like that I'm gonna hit save okay and what that does is let's have a little look at the website can you see I've done it to the hitter and it's because the margin is automatic it just tries to be automatically as much as it can be and so this is why can be as big I can be massive so it goes massive to counteract that you say I want a margin on the right to the exact same thing and they battle it out and somehow magically the Hindoo up in the middle so that's how you seen two things so we could do it for this and we could do it for this one as well it would you could slowly work your way through it and there wouldn't be any technically problem with that except it'd just be a bit weird so I'm going to grab all of this get rid of it okay save it so we're back to here and I'm gonna put all of that stuff into a container now there is no container like predefined tags we have to use our old-school div tag so up the top here so I want it to be before the header and I want it to close just after the footer so here I'm going to tear about once and I'm gonna say I would like a div with a class of Tina now I'm calling it container you could call it banana burn Anna okay you can call anything you like some people call it right nobody calls it banana and just in case people call a rapper it might be box okay we're going to call it container for there'd be a really common one is container so styled that the problem is is it opens here and closes just here so it opens and closes straight away I need the ending of this we did this kind of playing without div take box thing earlier on it's the reason we did it it's because I need this I need a cut-up okay grab a little bits bits and pieces and after foot of finishes I'm going to paste it in so now if I click on this top one here it opens there closes this though all wrapped up let's tidy it up because it's looking a bit weird we're going to do this I've selected all of this there's a sneaky shortcut to hiding it all up rather than tabbing it all yourself just a right-click it and go to this one that says format selection okay and it just kind of indents everything nicely the other thing I might do to kind of make this seem a bit nicer is I know I put returns in getting rid of them clear this up so it looks nice for you editor can you speed this up a little bit and I'll see you guys in a sec all right you're back now you might go that looked painful and it is but it's kind of how I work I liked everything to try and be as nice as I can and especially doing tutorials because it's nice to for you to be clear about where everything is and what it does so it's nice and clear now that that's inside of a container right because it's indented and so all we need to do down here is we need to say style of container okay and you're like he's doing it wrong you're like definitely okay that was an actual test that I set up okay so you have to if you're assigning a class remember the period goes in front and then we can say and we paste that we don't so I've got to do it again so imagine we do imagine left we're gonna make it auto semicolon same thing margin-right:auto semicolon save it and because all of these fellas are inside of the container they should not work save all not a test okay why is it not working div class container right left there are no errors down here I've saved it all what's going wrong I know what it is okay so I've added a width because I'm doing this a bit backwards I added the width to these internal guys the container needs a width okay we need to swap them so you need a width oh not Windows widows we need with all flustered okay 1024 okay and these guys can come off well actually they can stay on watch let's have a look okay so the container now is its width so now the margins know to push out from the sides there and so we could leave these here but because by nature div tags will try and stretch to fill the space provided and we've said this provided is container these guys don't need be told twice here they go looks exactly the same now in terms of the flow here I want the container to be at the top just because later on when I back into here I'm looking for kind of when that when the CSS sheet gets quite long I'm like alright that the stuff at the top are the most kind of overriding things so container and in here that these are I guess lower in the picking order in terms of the structure for the site all right so that's applying the HTML tags now in a previous where is it this one here I showed you in wireframes I made this one called structure a and I put the nav inside the hitter okay so we'll do that one first that would just mean cutting that out who wrong side grab this cutting it out and putting the hitter inside of this one okay so there would be a way of structuring that kind of design let's say the other design didn't use main they use section instead okay or so section open and close they'd use that and style section over here but nothing would really change okay I'm using main because that's just the way that I like to do it and I get confused by sections and articles all right buddies we've got our kind of basic structure for our site with some ugly colors let's start adding extra things because we've only done simple ticks and boxes we'll start adding popera background colors and we'll start adding images and text and all sorts of stuff in the upcoming videos I will see you in a little bit after lunch hi there in this video we're going to go from this planar white background to to this toxic green color basically you are going to show you how to color the background using your HTML body tag and then I go off on a bit of a tangent to discuss RGB colors and hexadecimal colors and how to use this little color slider picker thing it's all a hitter you in this next class alright so now we need to color this background part here so there's white okay we can't can color just the container because the containers just sitting here in the middle okay so we need another way Metro if there was a tag that wrote it around right around everything on our page oh look at that buddy tag so what are you there okay and this is the tag that you style okay to change the complete background color now we could put the buddy down the end here but it's really common to have it at the top okay so buddy I mean but doesn't need a period or a full stop in front of it okay just type buddy and we're gonna add our background use this loads of times down background color there yes now we're gonna pick one of these random colors for the moment coral it's check out what coral is yeah and it's yeah kind of like it I kind of do it's not working with these colors but that is how to change your background color will do background images later on in the course but for the moment I want to focus a little bit on color because using coral and red and Indian red and ruby red there's lots of different kind of naming I don't know who's in charge of naming those colors but hey that's what they are often what we want to do is just hover above it with your mouse I'm not doing anything I'm not clicking on it I'm just hovering above it it's kind of weird in vyas code sometimes it turns on you like sometimes you just can't make it turn on even though you really want to so just hover above it see when turned on yeah well okay and then down here we can do a couple of things this kind of far-right slider is the hue okay so drag it to get it roughly in the zone so say we want to change this to I'm gonna say bright green just because so we get it in the bright green range and we go do we want a bit more yellow yellowy green or a bluey green that's got the bluey green okay then over here is the opacity okay so he'll see through it is for a background color you can't really have see-through Ness okay or opacity because there's nothing to see-through - okay but later on that'll be useful and in here it's where this dot ends up so you click hold it and move it around so if I go up here it doesn't matter what the hue is I'm gonna have white which is RGB 255 across all of them cool so what I want to do is get back into it by hovering above it okay and going back into here grabbing the green getting the kind of bluey green and then clicking in here and just kind of getting it to where I feel it should look nice and that's what I want to do I'm picking a random color for the moment now you just click off in the background or move your mouse away you'll notice the colors change from being RGB sorry from a name to this red green and blue mixture and those red mixed with green mix with blue makes they'll kind of crazy green color let's save it and let's test it in the browser that's the wrong place there it is my green another way to do colors is to use hexadecimal colors so I'm gonna delete all of that now this is for the people that know already so let's say that you do know what a hexadecimal number is it starts with hash okay and often people will use three or six digit code I'm just gonna fake one so turns out if I hit those Keys randomly on my keyboard I get it green okay so it's it's either three or six digits and mainly six digits and we need we get these colors from there they actually made up of red green and blue so the first two digits red second two digits of green last two digits blue you don't need to know that but and let's say that you're working with brand guidelines so you're working for a corporate client they might give you this hexadecimal number or the RGB number and you can type in whichever works for you for me I'm working from this mock-up here and Eckstein will look at XD later on but this code that's color in the background I've clicked on my name up here don't worry if you've never used XD and we'll talk about it later on in the course I click on this and you can see that's gives me my hexadecimal number or I could go RGB and I could type those in okay all the different kinds of web like creation design products like you could use Photoshop or illustrator or XD or sketch okay to design your website but you build it in vs code and then just figure out what the codes you color code you want to use okay that's the code I want I'm gonna copy it and we go into PS code and that my friend and it's the kind of dark grey that I want save it browser that's the duck green okay the first bit was easy we talked about adding the body tag and then I went on a little bit too long about colors felt like it was the time to do it but maybe it was maybe it's for later we'll cover it again as we go through if that found a bit fast and back for lunch I've had a coffee and racing through stuff slow down there take breaths and I will see you in the next video where I've taken a riff all right this video is all about adding images to your HTML it's pretty easy let's jump in now and learn how to do it alright to add our image we're gonna put it inside the hitter so click in in between the header angle brackets put a return in and we're going to use IMG that's the kind of shortened version of the tag that describes an image and hit return and puts on all the junk we need okay so the image source cages where it is and it's nowhere at the moment so we need to put it in a place inside of our local folder okay so let's do that first so what we're going to do is we're gonna jump out to our finder so on a Mac it's called a finder in your PC it's called a window okay so find your My Documents panel get this up okay and on your desktop inside of your project one we've got index in style but we need to put our image in here and it's really common not to just dump it sitting kind of in with these guys you put them in a group okay and its own little folder called images so we're gonna right click I'm gonna make a new folder that's basically the same on Mac or PC and you either call IMG or images I call it images half the world calls it IMG and other half world cause the images I call images it's not good or bad but yeah you have to take sites so we've got a folder in there called images there's nothing in it so let's go into our exercise files let's go to project one and inside of here there's a PNG called logo a deer restaurant I'm gonna right-click it I'm gonna copy it where it's copy how you shortcuts you can tell yeah can I copy there you go copy okay or command C or control C on a PC let's go back to our desktop and paste it in Desktop project 1 images right click paste item okay and there he is so hasn't really done much so I guess it brings up a really good point everything in this website needs to be in this folder called project 1 remember doesn't have to be Col project 1 but everything has to be inside of here okay it's called the root of the website ok so it needs to know that this is home base and it doesn't need to know the rest of your computer exists just needs to know this like little folder is its own little world so and image source so test iPad I am type it I just started typing I am you can see it goes hey I've looked into your root folder and I've seen this folder called images would you like to use that you're like I would if it doesn't appear it's probably broken and you need to go make sure that images folder is in the right place but if it's still not working just type it in ok IMG and then you need a ford slash to say I'm inside that folder and what inside that folder there's only one thing okay it's pretty clever now let's save it okay save all and this preview in a browser there it is he's a left aligned okay we're gonna move it into the middle but that's how you add an image pretty easy the alt text is super important when you're adding images and basically alt text is short for alternative and it just means if this image didn't load what text would best describe this image and this is gonna be the logo for a deer restaurant that would call that it is the D restaurant that's our restaurant that's close okay so that describes that image and why we do it is for a couple of reasons the visually impaired will have a screen reader okay that will read them the web site so obviously if you can't see the logo you need to be described what it is so it needs to be a very good descriptor for people getting rid out of your website the other thing is that Google uses it to help kind of work out what your site's about so if you just put logo that's fine but you might as well put in for a deer restaurant because if somebody's searching for a deer restaurants and your website is very clearly for a deer restaurants okay it helps your rankings okay so make sure alt text is really clear what it is but also is very specific to your kind of target in our case we want people looking for restaurants in this town quarter dear where I'm moving to in a couple of weeks I can't wait anyway that's gonna be it for this video we've put in an image we'll do how to create images out of programs later on in the course okay we'll separate that out we'll do Photoshop and illustrator an XD how to make images the one thing all you need to know if you are creating them now is that they shouldn't have any spaces if I over space there or at least in the file that I've made okay and my images folder that shouldn't have any spaces same same rules as naming these should I underscores or hyphens or doesn't matter if it has no spaces okay so just make sure no spaces all right now Linux video let's go hi there this video we're gonna take our image that's default sliding to the left and change it to into the middle yay it's easy it's jumping into it alright so we want to Center this image inside the header okay and the easiest way to do it in this case okay is the header let's have a look at our design we was sent it everything that's inside of it okay because that's the only thing in this header there's nothing in this the navigations outside of there hit a box case it's just an image so it's nice and easy so let's finally hit a style I'll be here and let's align it to the center and we'll use ticks the line you're like hey why using text-align:center okay that's just where it is okay take the line center works really good for horizontally horizontals I get this wrong with the time horizontal vertical you know what I mean in the middle that way okay text align Center works really well it's tested its previous Rosa and inside of my header everything is text-align:center alright that is how to get our little image in the middle and yeah let's move on to the start working with some of the text in this document next video please hello there fellow web designers this video we're going to go from this to this okay removing the backgrounds adding some text styling the text looking at font families we're gonna look at padding from the outsides and the top we're gonna look at the difference between padding and margin whoa loads are doing this video let's jump in and get started all right so we want to put in our text and get it kind of looking like this case there's an h1 and then there's a P tag so let's grab the copy I've put it in your exercise files so find your exercise files and in project one there's one called project one text open that up in something and yeah got some stuff in here so what we want is let's meet and it's bringing that first okay it's all lowercase just the looks you can add the upper cases if you like and then we'll bring that and in a sec so let's jump into vias code where do we want it I want it to be we're skipping the now people like hey let's do the nerve well we'll do the easy bits first and we'll move into us we're building on our skills let's say so each one tab will return and paste in that text save let's have a little look in the browser there it is let's meet okay let's add the P tag P tag and let's grab the text copy and paste it in now this brings up a good point okay so let's save it and preview make sure it works and where are we there you go it's in there now in code view this can whether you like it or not and I'll show you how that's something that I do so the tick's kind of goes off and see it on the bottom here there's lots of ticks so you have to kind of scroll across it's up to you with you want to leave it like that because I I feel like this is these pros and cons for both I'm gonna delete that so the P tag come on totally I'm hitting my Delete key because there you go it's all on one line there you go nice like the h1 it's a PTA all on one line you might like that a lot of people and me included I flip and flop so I'll show you both is I want there to wrap around okay one thing I want you to notice is that every new line starts with a new number and that's that makes it quite clear so on line 22 even it's quite long it's all on line 22 but if I could have you and I do this one here toggle wordwrap okay can you see it opens up a gap in in numbering because that's technically still that next line but it's just kind of wrapping it around because it depends on how wide you know why the spacing is give what I mean so it's up to you I'm gonna wrap mine but you might not like that it's easier to turn it off by clicking that exact same button all right so now we need to style both of these guys and then add some padding because that one's bold and it's white and it's not Times New Roman we're using Arial in this case and you can see there's some padding in from the edges whereas at the moment you see it's running all the way along plus we need to Center it so let's do all those things so over here in my CSS h1 I'm gonna put in curly braces and we're gonna do we'll start with font size font size when you're building it you're gonna spend a lot more time going oh is it 40 or maybe 60 and just testing because I've made this class for you guys already I already know it's 84 exactly okay so let's test in the browser you'll get into the habit and then out of the habit of just trying to do all of the styling you know you'll go in here you go okay now it needs some color of white white and then you do the next thing and then the next thing without checking and then you'll check and something will be totally wrong and you will have no idea what part of your code you actually broke so my advice especially at the beginning is to do one thing go check it then come back in here and do another thing in this case kind of a big fun with this that we haven't done yet is the font family so think of it it is yeah changing the font or the type okay from these default ones we're gonna use the default ones for the moment okay there's not very many but we'll look at expanding that as we go through so what I'm going to use is with irreal I'm going for Times New Roman two arial helvetica sans-serif it's hid semicolon it's save it it's preview it cool so instead of it being Times New Roman okay let me turn that off and I'll show you how I do that in a second so times your own with all the little feet okay this is called a serif font so it has the little bits to hang out the side if I changed Arial see no little feet okay it's a sans-serif so without the feet did a couple of things here one was would be commenting in a second this one this is kind of weird why is there three fonts you know say you want Helvetica now what we're doing here is we're using what's called a default font so what's happening is you're not like putting Arial into this website what's happening is let's say I built the site and our friend Bob okay Bob loads your website what happens is his browser goes in and checks his system so checks Bob's computer to see if he has Ariel and loads it if he doesn't have Ariel it'll check for how Vertica okay and if it can't find how Vertica it'll look for this every computer has at least sans-serif it's like that default font for the core of the machine so that's the use you're suggesting I suggest Arial but if you don't have it I suggest how Vertica if you don't have it I suggest sans-serif that's why when you see some of these longer ones we picked Arial because it's easy but let's the little that type family : family space hit return now yours might not have done that I guess I skipped over that as well let's go back so when I'm typing in a family okay instead of hitting the colon I click on this because it gives me all these cool suggestions so looking at these guys can you see Gill sans Gill sans MT Calibri trade trebuchet there's lots and that les there right so it's saying check Bob's computer for Gill sans if he doesn't have it have gills hands empty if it doesn't have that put in Clery doesn't have that trebuchet doesn't have that I give up and use the default font size sans-serif and you'll notice that some of these are white and some of them aren't some of them have these little marks around them some of them don't and single words don't need them words or fonts that have two like a space in between need these apostrophes I'm going with apostrophes little tikki things okay so I'm gonna go back to Arial because you could write in here say you you're you're a designer and you're like man I would love some who knows a lust to photos using today out of context is not a you go to mean let's pick a more less suggestive font what do we got Comic Sans okay you're like your Comic Sans lover okay you could type that in there and it will probably load on most computers okay cuz most computers have Comic Sans but if it doesn't it'll have Gill sans and then Calibri you get what I mean now right so I'm gonna get rid of all of that and start typing in Arial make sure the semicolon goes at the end and that's what its gonna do the other thing I snuck in there and I didn't mean to I feel like this would be later in the course but we've kind of opened that box is that I highlighted this and I wanted to turn it all off because at the moment right it's working its aerial so if I want to disable this I can do a sneaky trick rather than deleting it and then saving it and then checking it you can kind of disable it momentarily okay and basically you need this syntax you need to put a forward slash in front of it this is for CSS only can you need to put a foot slash then you need to put your asterisks okay which is tied up with your eight number eight key on your keyboard and kind of the reverse of that at the end so if you if you put that around anything okay so foot slash apostrophe and at the end of it ' foot ' that's not a posture fee okay there is your Asterix sorry Asterix forward slash can you see as long as it's inside of that little group of characters it will turn it off goes green and the browser doesn't know it exists anymore okay and it's just a handy trick but you would have also noticed that it is it's super quick there's a shortcut so it's a bit early for these shortcuts but we're already there right so what we do is you highlight the bit we want to turn off okay and we hold down the command key on a Mac or the ctrl key on a PC and click at the ford slash button okay on my keyboard it's down down the bottom right of my keyboard yours might be somewhere else basically looking for this key okay so I would the command key and click it and would automatically do it it's really handy highlighted come on four slash control four slash alright so let's move on and do the P P tag so P this one here what do we do with this one we did fontsize I want all of this my lazy brain says just copy it okay but the size is gonna be different we want the size to be 18 pixels and we'll leave the color and the font it's Chicot so there's now 18 pixels it is irreal and it has weight now the next thing I want to show you is we could now go through and say because we want it centered right to match this we are all in the middle so what I could do so I can go into my vias code and I could say we did this one and this one makes a lot more sense text-align:center perfect and we're done it for the h1 and it's done but it's not done for this bottom one okay so it's not centered so what we'll do to be because it's all about being economical with your code do it once rather than are doing it like 10 times so the same thing remember earlier on we did the container we did Auto a left and right on the the thing that wraps everything up we'll do the same thing for this so what wraps all of this up it's that main tag okay so where it is main so if I do the same thing for there say you my friend everything inside of you be text-align:center it'll do the same thing it doesn't really matter but we're looking for like style points as a friend designer okay so that's working that centered that centered let's work with the padding okay because I want a big chunk at the top and a big chunk on the sides now we could do it to the specific type again but we'll do it to the container okay so we'll use well that's imagine to that main tag so we'll do mean I'll do petting okay and we're gonna use petting to the top and what I wanted to be I've already worked this out eighty pixels okay and it's chicken awesome so there's 80 pixels padding at the top and let's do it for the left and right so petting lifts in this case is to forty to forty even pixels and make sure it's semicolon at the end and do the same for right nice alright let's give it a test see if we've broken it no petting at the top depending on the sides nice now throughout this course we're gonna be looking there's kind of two ways of putting spaces in there's heading and margin and this is a it's a really good I guess way to show it okay the difference between the two so what we'll do now is main we've done petting let's do the difference so instead of petting top will do margin top because it can get confusing like which one do I use and sometimes it doesn't matter so let's let's show at the moment because it makes it really clear so I've done margin top instead of petting top look what happens it works the text is just as far down from that red box as it was for petting except margin is the outside of this box because we see it main be orange margin okay top pushes it away from the top of the box the whole orange nough scums down whereas petting is the inside of the box the internal parts okay so the ticks will end up at the same place but petting is the inside of the box so the orange okay do you get what I mean is let's look so it takes the same place okay but the box reaches to the outside margin pushes the box down to let's add a little bit more it said margin top and padding top to hopefully clarify it I feel like I've almost explained this right we'll do this like a few times so let's do let's do another 80 pixels just hopefully solidify this idea you see there is 80 pixels there on the margin and then there's another 80 pixels here just afterwards for this there's a little bit more here because this this font here has a little bit on it by default okay so there's probably padding on the top of this h1 by default which will turn off later but do you give it a mean imagine the outside padding on the inside and then I also see it sometimes it doesn't matter and it doesn't matter when you get rid of this background color because we only use this background color right and to just to kind of identify these boxes I don't want a big orange box or blue box so what we'll do is in your margin its like this goodbye okay save it let's have a look that's what I want okay and now if I had imagined margin or petting you can see it wouldn't make a lick of difference okay because that takes it end up in the same spot and because there's no background color you get what I mean Dan you've said it ten times now all right we got it if you haven't we'll do it again later on while we're here we'll get rid of the logo background so where is a hitter a background color blue delete it here we go all right last thing before I go when I teach this thing live and was always one in the class you might be that person okay people forget to put the P X in save it and you're like hey it's not working I'm changing in the numbers and I'm making up and down and it's not working it's just because you've got the P X because it's not something natural all right so there we go don't forget that all right that is it for this video I'll see you in a second in the next one good afternoon it is time to talk about hyperlinks sometimes they're called H riffs or ate eggs they are clickable links okay like this make a reservation we're gonna edit and when I click it in this case it's gonna open up a new tab it's gonna go to Google because I haven't got a good place for it to go to but that's what we're gonna do we're gonna do one both by itself and in line with the ticks up the top here let's jump in and work out the ways of the hyperlink all right to add our link it's gonna be this fella here call me Cresson okay it's called a hyperlink so let's a edit 2vs code sex you referred to as an H riff okay so where do we want it I want it after my P tag and you'll notice my wrappings turned off it turns off every time you close the program down so in between videos I was gonna go home and then I was like nope I'll do one more video tonight before I hit home ahem so I closed down vias code open it back up wrappings gone and then sir I guess a good thing to show that it's got a pretty easy shortcut if you can be bothered remembering it and so I'm gonna put my just under the P tag here and what is it it's an a tag okay so if I type an A and hit return it puts in all the stuff we need okay so it needs each reference and in between the quick marks like like most of the things in here is where we put the link we want it to go so in this case we'll get it to go to I know you use something in yup so I'll pause it here and I'll be back in a second with a link all right I'm back just with a random restaurant I found in a dear random I went there once I really liked the food Neville's cross anyway so I've grabbed a link for us to go to so we're gonna go back into Visual Studio code so when somebody clicks this button okay it's gonna go where you could type in HTTP colon we should have just done that dub dub dub you need all the junk okay it's best at all the junk so HTTP colon slash slash dub dub dub dot and the URL okay that's where this button is gonna go oh because I went to all that hassle and found a link I'm gonna type it in even though it's really big okay now at the moment it's not gonna really do anything so I'm gonna save it preview let's have a look so it doesn't work okay it needs some text and the text goes in there's a tag so there's an opening and you can see the two little curly braces like like between the two a h1 tags we're gonna go between these a tags and we're gonna have make a reservation that'll work so I just type them in it can be anything it's just text like the P tag but because you've wrapped that up in this eight trif tag nothing happens it's save no nothing Evans oh this brings up a good point okay remember I said I closed down vias code okay so I closed down vias code but I didn't close down this like preview window remember there was a called live server okay so this brings up a good point I just assumed it was still connected I know it doesn't but I forget okay so I close numbers your studio code open it back up and that connection broke between those two I'll leave this in the video because it's it's a good point right so what I'm gonna do is go live again it's gonna start up a new page there's my old one that's no longer connected okay and close it down there's my tripadvisor and now it's connected here it is cool now it could be blue mine's purple because I've been to that link before but give it a click mmm loads it up and there's that lovely Tripadvisor okay so there is how do you add a URL we'll do some styling in a second as well one thing you might want to do though is when you click on it at the moment it clicks on it and there's actually going to its placing that page with this so you can't really go back easily so what you do is there's an option in your href what we might do is get rid of that whole I feel like it's made it look ugly and more about making it look nice for you so there's just put in Google google.com okay so what all you need to do is after the href so a tag is the thing we're using a href is just a part of it so after this and we're gonna add something called target equals blank actually I think it needs to be underscore blank mmm I need you double check that let's give it a preview trying to guess here remember save it all preview it in a browser and it's give it a click and it does work cool so if you add that underscore blank can you see what it did it left that tab there and launched this link in an own tab okay sometimes its own window you can't really control that but if you just add target blank you can do that it might in this case it's not what I want but it's gonna be something that I'll tie into this video so you can come back to it I'll leave it in there let's leave it in there and the other thing to note is that when you are doing you are ELLs let's say this wants to go to another page on this website often you don't know what that is yet you like is it gonna be the about Us page okay and HTML you don't have that yet so what people tend to do as developers is you put in a hash okay up near the three key okay the pound symbol hash what do you want to call it what that does is that's a really good place holder it's kind of clear that that's a place holder and if you leave it blank often what can happen is it can throw an error so if you leave it much more firm now chrome doesn't narrow anymore let's check just kind of launches it on its own window that's fine it's working all right okay but some browsers freak out with there's no link in there so you put in hash I show you there because that's really common to have you might get a template website from someone else and they've left hashes in there you like one of those that just placeholders so that when the buttons clicked it doesn't throw an error cool all right so we'll leave hash near now let's go back to Google all right now let's style this okay I want you to pause right now and do a little pop it's how would I stylist just think it through you don't actually have to do it you could do it that'd be cool okay but I want you to see if you can style this thing and the first thing I want you to do is make it white because it's purple at the moment sometimes it's blue if it hasn't been clicked yet I want you to do that did you have a think don't worry it's early for thinking okay or late in the afternoon for me so it's the a tech a over here I'm gonna say color please is going to be white cool that's gonna change the color of it and also will say I want the font family to be the same as the rest of it so I'm gonna type in all that you can see now that I'm not going as slow as I did in the beginning of the class you can actually decode quite fast using all those like helpful little hints and if I'm going a little fast sorry and but we've done that a few times now let's have a look yeah it's the right color it's the right and font and we're gonna leave that underline because I want it here because I feel like sometimes if it's not very clearly a clickable button you need to leave the underline but let's say it's not and you want to get rid of it it's a weird thing that's called text decoration kind of makes sense but it's it's also kind of weird and you want to set it to none it's a text-decoration:none we'll get rid of the underline there and I want the underline I'll leave this in the code here for you okay so I'll just comment it out I'm gonna do that a little bit more in this course so that the things that I've shown you okay will be in the saved completed files but even though I don't want to use them myself now the other thing to know about this hyperlink we did it is its own kind of like separate tags so it's ended up kind of hanging down the bottom here let's say you want to make this word like the word satisfying okay a link let's use those use the word of dear so people can click on it and it goes to a map of a deer so where's the damn so I'm just going to put some spaces just care a whole I don't want there to be spaces but I want to make it clear for you really the same thing a tag okay which is an A and that return puts it in there where is it gonna go - I don't know yet it's gonna go to hash and inside the brackets here what I want to appear and I grab this come here dear it's gonna go inside it there let's save it let's check it you can see it's underlined okay being told what to do in terms of the eight egg so the eight eggs still refers to the both this one and this one okay and it's adding the underline and it's in the text so this one is called in line okay this is an inline H riff or an eight egg or a hyperlink oh it's a names for the same thing Hey what is a Stanfill I think it's active link and we should check and but because it's placed in the flow of P of this P tag it would just flow along this because it's placed by itself outside of the P tag it hangs out by itself so you don't if they actually do anything you notice steal those spaces didn't change anything you see I just added in there to make it look tidy but all right there is the crash course on hyperlinks let's get into the next video hi everyone it's time to replace our boring gray background without exciting background image ko it's kind of stretchy fits in there covers all the background looks neat not sure what we're eating but it kind of looks tasty you'll the irony is a vegetarian but meat looks so good especially in these kind of photographs anyway let's get in and work out how to do the background alright to add our background image it's a little bit strange and the previous video or one of the previous videos we added our image can we edit it to the HTML and it appeared at the top of our document here and it's great and the only trouble with adding it to your HTML is that you can't have things over the top or at least not very easily so we want it in the kind of background and we want it to be more of an effect okay rather than something you can interact with just kind of hiding at the back so it's more like a style let's say okay so we add it in the CSS styles so we do it here in our Styles dot CSS and we add it to which one should we add it to remember our tag that covers the whole background that we made gray it's the same tag okay so the body tag here we made gray we can leave gray there and I leave the background color there normally because sometimes it takes a little while for the image to load so at least there's something in the background until it loads and the way to do it it's well-named okay it's called background - image nice the one thing that isn't very clear is what to do next okay and it's URL it's one of those options in there so URL so background image URL inside of that bracket sorry yeah the brackets you type where it goes so it's gonna be in images forward slash and as soon as you have the forward slash and the CSS is hey do you mean this image the logo you're like no no we're not that low not they have a logo I want another image that I've used for the background so I've saved it for you then your exercise files so you need to come out to your finder find your exercise files find project one and there's one in here called background you copy it I'm using command C on a Mac ctrl C on a PC desktop you're gonna paste it into this images folder along with the logo now hopefully I can delete the foot slash there you go type it back in and it says do you mean this guy you're like I do that's the guy or girl let's put in our semicolon it's save and let's see if it worked tada and that might be enough you might be like done move on and but if you're like me and you see the moment kind of doesn't do exactly what I want you might like it okay but at the moment I want it to kind of move so if somebody's looking on a smaller screen that the image is still kind of centered there's a really nice easy CSS class that we can use okay we're not a class attribute so it is called background another good one background sighs and this is one he called cover so background size cover will allow us to do that let's give it a go resize oh nice now see you down the horribly it repeats because their ratio of this thing is a bit weird and you know the image that we've got doesn't quite fit in there so it has to do something at the moment it's repeating it so let's have a look at getting rid of the repeat and it's gonna be half our problem fixed so we say background repeat' okay so background Pete I'd like to set it to no repeat please awesome let's give it a go it's gone but as great box is there you go to decide how much that annoys you okay because the next thing we need to do is a little bit kind of strange and so to make this work okay what you do is the body's the tag we've been working with right but there is an overarching tag over everything called HTML and to make that go away okay you've got to put in another tag just above it and say I'd like the HTML tag to have a height of a hundred or height of a hundred percent and that fixes that not immature why but that's why we do it depends like I said sometimes in web design I can explain it to you and sometimes I can't okay so there you go it's covering it fits it's nice and one more thing if you're getting picky is that it's kind of centered and stays in there but it's not quite centered you're like why aren't you quite centered you can miss around with the background what does it called background a line I spell that alright background alignment no its background man car position that's it okay so background position and we type in Center semicolon and that should fix that so now instead of it go from the center okay rather than kind of left and right mmm yeah I like it now one thing if you are following along on a really small screen you're like I don't even make it do it that damn it's true I just thought of it then I'm like if you have a really small screen it's gonna be very hard to like drag out big enough to make it do all the kind of resize II bits oh so that's something to know I guess what you are doing then for like you probably can get away with pretty much all of that gone and the trouble will be is when somebody like me with a giant screen opens it up and goes hey it's looking not looking nice so if you are working on a really small laptop and you're like I can't even test this stuff and later on in the course I'm gonna show you how to like fake being a really big screen but yeah just thought I'd add that there just in case you're like can make that work but it is potentially necessary alright background images done and dusted hi everybody we're gonna look at making things see-through normally referred to in code as alpha transparency or pinkness you get what I mean we're gonna go from this to this where it's a little bit see-through or a lot see-through I'm gonna show you now how to do it in CSS alright to do the transparency we're going to do it to this nav currently it is red let's first change it to a color will change it to black and so let's get a vyas code let's find our nav theory is the air color we're hoping black we didn't really need to do that first but make sure you save it all preview it okay there it is it's black now we want to make it a little bit transparent okay I kind of mentioned this earlier on but if you highlight the word black or just click in here it's a little bit hard to get this thing activated I find man here we go eventually you can get this thing going now it doesn't really matter you can make a black in here on the fly and what ends up happening is if you pick a solid color you get three options okay red green and blue at the moment if they're all set to zero that means you get black you set them all to 255 you get them all and you know it creates a white color there's nothing that it what I'm going to say except that you can add a fourth dimension okay so over here if I drag the slider down to say I'm kind of looking up here okay that one there see zero zero zero and there's this new extra added option okay and think of them as percentages if I go higher look when I'm at solid one it disappears but if I come down 0.975 okay is like 97% that's 50% okay see-through and getting right down here it's like 10% opaque 10% Opaques better explanation so and 10% color in it 50% of color no percent means it's almost completely black again if I explain that okay you drag it up and down you'll work it out alright so I'm gonna have mine about 30% ish okay and you'll see there it is there so 0.3 means is 33% black they're not very save it let's test it and so look there you go now if you're old-school web design and you're using those hexadecimal numbers remember the hash we did them earlier on hash hash oh come on down you hash and I pick some random colors you can't do alpha transparency with that you have to use this thing called RGB a-ok which is red green blue and alpha which is their see-through a bit all right that is how to make some things he threw now we've done it for the background color here in our nerve but you could do it with type okay you can make any color that you've applied to things slightly opaque or lots of fake all right that is it I'll see you in the next video hi there this video we're gonna make this simple text navigation okay so we're actually gonna build this the mock-up we're actually gonna build we're gonna get this far in this video anyway so it's just kind of lumped at the top here the the alignments not perfect yet but it's in there it's all linking and we're gonna learn some sweet new shortcuts along the way all right so let's get going alright first up its put on our links so in here inside of our nav I'm gonna put a return in and I want to put in how many options do we have we have one two three four five six cool so wants six eight eggs this one's gonna pre a pretty simple menu we're gonna build probably four in this entire course okay simple text one will make buttons in the next project and then already drop down and cool jQuery burger menus for mobile will get fancier and fancier as we go along but my simple one to start with so what I want to do is add my six links so in Visual Studio code okay you want to type it a tag return okay we're gonna put in hash so it doesn't go anywhere and the first one is home now we can do that six times and that's totally fine you can copy and paste it and change the text I'm gonna let you in on a little shortcut okay I'll try and introduce little shortcuts as we move through they're just fun and they're good and they're useful and I use them so I know they're good so and what we can do envious code is we can do say I wanna a tag lowercase a but I want three of them we can use the x six them so times in this is the asterisk key okay so it's underneath often combined with the number eight so hold down shift and click eight so a Asterix six means I want these I want six of them hit return look at that go on you're a web designer and your hide core and your codon I don't know coding fast come on so what I want to do is I want to put a hash in all of these you like to do all of that okay there is it's a bit of a slow process so a lot of the time you end up working on these kind of like multiple groups doing multiple things all the same so we can do is we'll do one more okay one more shortcut and you can just obviously type them in but if you on a Mac okay it's under this one here that's the shortcut you're looking for okay so it's under view notes I'm Dyslexic and it's this one here edie cursor below okay on a Mac it's option command so oh yeah option command in the down arrow so there curses you know that up-down left-right on a PC it's ctrl alt down arrow okay so here we're I'm flashing so make sure your cursors flashing there on my Mac I'm going to hold command alt command option and head down down down down down okay and then I'm going to type hash if you're on a PC it's ctrl alt down down down type hash okay I want to get rid of it now because I don't want home in all of them okay so I'm just gonna click once anywhere house thank you in the first one and in your text okay so we're in the exercise files is a file called project one okay text I'm just gonna copy and paste it all in copy paste you can do the same if you can type you can just type it all in you don't have to put anything in I'll speed this up all right Thank You editor it's Jason by the way I caught him in it all the time that his name's Jason he's awesome thanks Jason go to a save wall and we'll preview it in the browser and does this update it is there it is there cool so I've got all my ticks in there mmm it's not quite right because remember it's because there's an eighth egg okay and we styled the eighth egg down here these guys hate with the same let's do the same thing okay so we're gonna have to do some specific styling for this to get it to look like my mock-up here but we can do that the first thing we'll do though is we want to Center it so what we're gonna do is we've done this before okay we want to go through in center using text Center we'll do it to the nav we'll say all the texts inside of me is going to be text align Center semicolon save save all proof in a browser yes panning to miss with underlines to miss with but that is going to be it for this video at least we put the nerves in we learned some shortcuts all right I've kind of doubled back I finished the video I was like oh I should mention this so and we've started doing short cuts now and I felt like it was at the time they start doing some basic ones and if you're like how am I gonna remember these things or maybe you started writing them down already and I've created a folder in your exercise files okay so exercise files shortcuts sheets open that up and we've got ignore that one for the moment we'll look at it later on but these two will be handy so vias code will look at first okay so there's a Mac or PC depending on what you're using and I'm gonna open up my Mac one and let's say it's a nice one page you can print it off take an extra computer highlight the ones that you find use you're not gonna remember them all but the one we just used can you see multi cursor selection that's the one I use the insert cursor below okay so you might just highlight that one now print it off highlight it and say that was a useful one day and I'm gonna try and remember that one you might have read through maybe further on in the course you might read through and go oh didn't realizes that was the shortcut okay can be really handy all this one here Sabol if you can never remember I like that one all right so that's vyas code the other one in there is called Emmitt so Emmitt we didn't really talk about so it's got a separate name okay these shortcuts they're called image shortcuts and but for you it's these ones it's when we say one's the things like all right a tag if I type a and hit return Emmitt is kind of doing that okay but it doesn't really matter what it's called but M it is what it's called okay and the same thing before we did a times sex member that is an image or you can see it there in abbreviation there you go you probably have seen it so they call it Emmitt and I've made a little shortcut well I haven't made it I've collected this for you so the problem with this one it's like 24 pages it's got every single thing you might do and I find is use while printing off the first two pages okay because the rest of them yeah it's quite hard and they've highlighted the really important ones okay to the ones that you're likely to use okay but yeah maybe just print the first two off I find it really interesting to look at these kind of structures that you can do we'll get into these further on but it's probably good time to print these off now so that you can start scribbling your sweet new shortcuts on it all right now is the end of the video see you in the next one hey everyone we're gonna take our menu in this video that looks currently like this to this petting either size some space between them font sizes to do all this we're gonna have to learn what a compound selector is it's pretty cool and nice and simple it's going to allow us to be fancier web designers alright let's jump in and learn what it does okay compound selector what is a compound class it's just more than one cuz we've got a problem now cuz what I want to do is I want to sell these eight eggs okay I want to turn off the underline cuz I don't want it here but I've already started that eight eggs remember earlier on we said eight eggs we want to leave you know we didn't we turn that off because we're like actually we don't want we want to leave the underline so we've got one eight a controlling a couple of things so what we can do is use something called specificity okay just means the more specific you are the more it will override if you're more specific so if I say generally all the eight eggs do this but if I say the eight eggs specifically in the nav do this other thing that will win because it's more specific okay generic a little bit more specific because we're saying the eight eggs inside of the nav alright let's just do it in in visual studio code okay the way you structure a compound compound class or compound selector compound just because there's two parts to it you can have more than one okay and we're just gonna do one so what we want to say is we want to say if there's a nerve with an A inside of it okay you just put spaces between it okay because we're dealing with tag selectors okay the nav and the a it's not a class we don't need the full stop okay so there's all why them selves with spaces in between them and that's it so if there's an a tag inside of a nav do this other thing and what we want to say is text-decoration declaration is set to no dhikr or was it call to set to none this is none okay cool Tim : done save let's have a little look is that right does work cool so that one's left fine but because that one says the eight eggs inside the nerve you've got it about selectors super-useful now we did this way because it's the most simple way and it's nice and clean and clear you could have got rid of this I'm going to wrap it up in my command ford slash okay to comment it out what I could have done is created a class called no underlined I'd like to show you both ways because there's nothing really wrong with this way and over here I'm gonna say tix decoration is going to be sick to none and over here we could say actually I would like after the little after the href thing and put in a class called it was a called no underline no underline save it and hopefully just one of them will be working now there you go no trouble with that is that I have to apply that class to all of these tags and that's fine and if I make another one I have to go and add their class and there's no real problem with it but you can see the elegance of this first one is that against the word I feel like it is okay awesome we've learnt like what our compound selector is and the kind of syntax for it spaces next thing I want to do is I want to tidy up the padding here so centering in a box okay centering horizontally is perfect vertically is very hard okay surprisingly hard don't ask me why but it is okay so later on in the course when we look at something called flexbox it'll get easier but for the moment at our current skill level it's super hard okay so what we're gonna do is kind of fake it who's gonna put some petting in the top and the bottom until it looks like it's in the middle okay and the easiest way to do this okay there's a couple of ways but the way that we're gonna do it is let's add will add some heading to this nav okay because at the moment it's right at the top so we'll add a little bit to the top a little bit to the bottom and maybe get rid of the height let's give that a try so what I mean so first of all let's get rid of the height that'll make it a bit clearer so is my nav height we can either comment it out we'll just delete it because I don't want it see it's kind of collapsed but if I add some padding to the outside of the nerve or I could edit to the actual ate eggs themselves doesn't really matter okay we're gonna do it to the nav just because I feel like it okay we're gonna say petting and we'll do petting top I'm gonna make it 14 pixels okay at the top and the same for the bottom just gonna copy and paste it bottom awesome let's save it let's preview in a browser you can kind of see we get to the same point so it was collapsed now this padding pushing it out if we did it with margins it wouldn't work right I just kind of drum this into you the difference between margins and padding you can see there is some petting you know there is 14 pixels above them below there because like if I crank it up to 140 you can see there's lots of space there but because it's the outside of the box it doesn't really do what we needed to do so undo undo save preview nice alright let's fix up a couple of other things that are bugging me like the font size is a bit big and the space between the menu our buttons are tiny okay so we need to adjust that so let's jump into vs code what should we do and we'll do it to the nav eggs okay because I want to make this a font size of what are we using font size of 12 pixels wanted quite small to kind of match my and it going to match my design let's have a look save it's a bit better now let's do this space between them all and what we'll do is a little bit of padding okay and won't matter if it's padding or margin in this case okay petting left I'm going to put in 10 pixels and I'll do the same for the right heading right 10 pixels look awesome why don't you both okay because if I do that it's gonna be slightly lopsided it's gonna look fine but it's gonna be pushed one side and I guess it doesn't you can't really notice it on this so imagine we've got a bit of padding to one side but not the other okay on each of these so it really visually doesn't look any different but it's you got padding either side now I just kind of often do that and just grab my cursor and click over it and drag to try and highlight it and gives me kind of a vague just idea of what's happening all right so that's our basic kind of navigation they don't go anywhere yet we've got an index page so we'd have to create a menu page and an order online page but if only made one so far so we're just using those hashes or pound symbols just to kind of make them active but not actually make them go any weak yet all right that is it for our really simple navigation let's get on to the next video surprise it's homework time okay you've got all the skills now to recreate this footer okay at the moment it looks like this in the browser this green thing and don't worry about this big map in the middle we're gonna do that in a little bit okay but I want you to focus on from the map down okay so you're gonna be focusing on kind of this part so what I want you to do is I'd like you to make it look like that is that petting is a margin how do we get it in the center how do I make the font smaller okay I want you to wrap it in a P tag and I want the background to be black but transparent but not as transparent as that okay so that's a bit darker those are the rules let me check your and remember in your exercise files way back at the beginning of the exercise files there's one called class projects and there's a word doc in here that's it here this is class project - so run through this there's the mark up I just explained it doesn't have to be pixel perfect anything else ignore the map and the spacing up above and below the footer these the text for it okay and and just make sure it's in a P tag you could skip that button this be proper put it in a paragraph tag and then style that and little hint you're probably gonna need a compound selector it's kind of what I'm trying to hint and get you to do in this one and background colors transparent and that's it okay once you've done it take a screenshot okay and shirts with me on these so in the assignments panel okay just take a screenshot stick it in there and if you've yet depending where you're watching this in the comments and the assignments okay but and send it to me on Instagram keep you honest okay send it to me and say look I got this far and I did it without cheating and what I mean by cheating is opening the completed files and/or watching the next video where I go through it and show you how it do it okay it'll prove to yourself you can do it and share it with me make sure you use this hashtag okay hashtag BYO l web and that is it go to your homework and I'll see you in the next video welcome back how did the homework go you're either sitting there smug thinking yep I did it I'm a web designer I smashed out that footer and it looks correct or you're sitting there going you're not as good teachers you think you are den it went badly and the site doesn't work in my computer caught fire which either way I'm really happy with okay because it's the beginning your new okay if you skipped it this is where I'm cutting I'm shaking my finger you can't see it but I'm touching shaking my finger you should have done your homework but if you haven't that's alright we're all here now let's go through how I would do it there's a couple of ways of doing this let's do the way I did it if you got to a good solution that's perfect but let's just see let's head over to V is code and where do we start when do we you started and I'm gonna start with I feel like I want to color the background first some reason okay so let's go the footer it's an easy one get rid of this and we could just type in black but we could actually just hover above this and drag it down to this bottom corner okay I'm just dragging a pass where it needs to go they didn't go and then coming back and just dragging it down now I kind of see it about 80% but mm-hmm about that and save it preview in a browser it's kind of see-through maybe how dark that doesn't really matter but we got the idea right there is some black and it's transparent let's add the Dixon outside of here okay so let's find the footer let's add our P tag let's go and find the text there it's there and paste it awesome save it see what it looks like that's where we're at cool let's do a couple of things let's maybe make it smaller and center it horizontally cuz that's the easy one to do so this is where I wanted you could actually just start foot it you could say I want it to be a font size here I like say 10 pixels what have you picked and it would work the the reason I kind of suggested doing a compound selector okay so something like footer has a P tag in it and so there if you've got like an image inside of there as well or say some links or lots of different things you can be really specific about it you can say I want the paragraph text that inside the footer it doesn't really matter how you did it as long as it worked okay we'll do font size and I did 10 pixels let's give it at it but test every single time make sure it's working its to text-align:center are you going so far if you like is there like ah moments or is it like yep did that nailed it so look it's perfect I made mine slightly darker okay it wasn't white you didn't know that color I'm just doing this because I wanted to be a slightly different color like he's changing the rules and wanted to be a slightly muted kind of gray goes too bright down there alright next thing I want to do is get the spacing right okay and how did you do it did you leave the bottom play with the heights play with the margins that's how I'm gonna do it I'm gonna get rid of the height off the footer maybe they remember with the beginning we added loads of heights and we're slowly removing it all because they were just you sort of the beginning to you know so that while we're learning we can see things but now it's fine to leave it like that because I know later on while I'm building it I can say do I do it for a P or to the footer I think you can do it to either and wonder what you did leave in the comments what you did if you're like hey I did this other thing but and it still worked and do that because then other people might say yeah me too I did this other way there's a better way Dan's writing it badly I'm happy for that so for the moment I know there's some petting off the top 50 pixels and same for the bottom bottom 50 pixels it's check edge and it's kind of where I wanted to get to fulfill all my brief ignore the map did spacing above and below perfect and footer the P tag background color well you did it alright if yours didn't work I'm gonna save this file now and put it into the completed files just to recap the completed files cause they're super handy under your exercise files there'll be a folder in here called completed files I'm giving them separate while I'm working in this course but I'll dump this whole folder in there when I'm finished okay and you'll find this one and you can see these are all the different videos that we've made open them up and you should see the code that I've got here and you can come here alright that was our foot a project over well done you let's get on to some new fancy stuff hi there this video is all about adding a really simple email button to a website we had this link that we made earlier and when we clicked it it went to Google that wasn't that helpful what we want to do now is when we click it it opens up our email campaign and since there's a website pre fills in and the subject lines done okay it's a nice little handy quick super easy quick trick to add that sort of functionality to your website yeah let's jump in and make it happen all right to make it work we're going to do it to the button that we've got here at the moment it doesn't goes to Google okay Oh it'll go around the webpage I want to get it so that when you click it so on the user I'm at this website at idea and when I click it and gear send an email for about reservation okay and doing a form we'll do later on in the course cuz it's pretty hard to do not pretty hard yeah it is pretty hard what do it later on and but for the moment a little mail to thing is going to be nice and simple and quick and easy to do so all we need to do is we did this href earlier on okay so if you haven't done this one look for making a hyperlink video earlier on okay and all we need to do is switch out this part so instead of going to google.com we're gonna get it to go to mail to : so it has to look exactly like this okay then you put in the email address no spaces so if you wanted to email me you email Daniel at my email my website my website com okay so when somebody clicks that they're going to will show it okay target blank yeah why not it doesn't really matter in this case because it will load up in its own blank thing and that is it that should make it work alright let's save it let's give it a preview mmm are you okay so get oh look at that it opened up my email system on my machine I'm pretending on the client so I'm just searching the internet for a restaurant I'm like ooh let's make a reservation click the button this opens up and so it's opening up mail ok and yeah wants to I can write a subject and I could say could I get a booking okay it's a nice cheap easy quick way right so it's five seconds to implement and seems easier than a form a couple of things that might be handy is to ending a subject line like pre filling it in so what you can do you can add a little bit of extra to the end of this so mail to is cool but at the end of the calm put in a question mark okay you gotta put a question mark and it has to be spelt like a capital S and it has to be subject so question mark capital s for subject and then you can put it in equals so it all has to look like exactly like that then you can just add the subject line so you could say reservation okay that's it save and it's preview it let's close it down yeah that's previewed in the browser let's click on it you can see it loaded my email and put the subject in koha you can do some other things like adding the CC and can you put body copy in I think you can as well I don't know them off by heart but you can go and have a look at that yourself now all you need to really look for is search for mail to in HTML and you'll find a page on what you can and can't add and it'll just be different things like this I imagine it'll be question mark CC equals okay and you put in another email address in but that's a guess and just a nice little cheap trick for adding an email alright so that's it for this one it's given to the next one if you're thinking ah there'd be the last one for tonight I'll do some more tomorrow do the next one the next one's awesome in big codes it's gonna make us look awesome it's their map it's not gonna take too long alright I'll either see you in a few seconds or I'll see you tomorrow when you wake up alright bye now hello good-looking people this video we're gonna look at something called an embed code and we're gonna start with this one here see this it's a map it's on our website it's in directive it shows us where our restauranteurs it's super easy to do Google does all the work all we do is copy and paste stuff okay later on we'll add a video as well okay from YouTube to our website I'm gonna add this cooking thing where somebody can make a reservation we're not doing it we're not coding it we're not styling it we're just going to these websites like YouTube and Google Maps and OpenTable and they are giving us all the things we need we just copy and paste it and we look awesome alright let's jump in now and work out how all right so this is what we want to add right it's just a kind of a screenshot at the moment and I actually working so we want to add it to our website and the cool thing about things like this we're gonna do Google Maps here but you could have a calendar from Google Maps here a spreadsheet from Google what else you could have ticketing from Ticketmaster or Eventbrite you could have Facebook feeds or Twitter feeds they all use the same sort of myth it's called an embed code it's generally in something called an iframe so first of all let's go get the code so we're going to do we use Google Maps okay and I've just loaded up from New Zealand version but go to google.com slash Maps okay I've gotten to doc coat and zid but anyway doesn't matter and then type in the business that you want to list okay so type it in find it and and let's say so these this is where I'm gonna move to right I'm pretty excited it's a deer and a deer manner is like some fancy big state manor house thing there the carriage house Edda deer manor seems like a really cool place to add to my fictional map so what I'm gonna do is I'm gonna click on it so that I'm just kind of like isolating it over here because I don't want all of these things over here as well so I'm just gonna find the carriage house at a deer Manor because whatever you see over here is gonna be what's in your map showing me the other restaurants go where the restaurants oh it has gone away so a couple of things you need to do when you're doing a map is zoom in and out because this is the the kind of size if you want to show it in relation to like Dublin okay which is miles away out of an Ireland from New Zealand my wife's Irish anyway so you could decide the kind of scale okay do you want it to be so you can see the kind of driving distance between Dublin there somewhere and or do you want it to be really kind of localized map so people can see the street that's all very close I get that right click and drag it till you get the right position and then what you're looking for now I'm gonna show you as it is at the moment every time I teach this class and I make a video they go and move where this button is okay so um you know how to complain Google changes it on me you just gotta dig it out and find it and if you if it is in a different place write it in the comments so that other students know where it's gone and so what I'm looking for is an embed code so where is at the moment is under this one called share give you options for sharing and you're looking for this one called embed okay so embedded a map click on that and then what I want to do is you've got the different sizes I'm gonna pick a custom size you could just pick one of these custom size now why do we want it to be I want it to be like I know the width of my site is 1024 so miles will make it full width in 24 even and how high I'm just guessing 500 and so let's preview at an actual size that's what's gonna look like right once it loads eventually awesome so all I need to do now is go to copy bitmap yep copy HTML and paste this on my site it's too easy so good good thing about its kind of make us look real good if this works so where am I going to put it I'll put it and inside the main so just before it and I put a couple of routines in and I'm gonna tab across and paste it there cool so that's gonna be my frame let's see if it works straight without any sometimes they need adjustments let's check I can't remember and it's preview in the browser let's see how this goes you ready yeah which one is it yeah what's great Cades kind of pushed over to the side but it's there look at it you can zoom in zoom out people can check it out find directions and it looks good on your website and we don't have to do any of this kind of like hardcore stuff Google does all the hard work for us now why is it all messed up is mainly because we put it a couple of things one is we put it inside this main tag which I forgot we added petting to okay I'll leave this in the course because these are the things happen you're like what happened then I know because member our main we said earlier later on we said we added giant padding so what I'm gonna do is I'm gonna say let's not have it in Maine let's have it afterwards in our tag okay what tag let's use a section okay we could yep section the section is a nice thing to use okay and what we'll do is you could just use a div just exploring using sections okay and put it in there it's gonna say solve some of our problems because it's in a different the padding is not going to be affected hopefully cool and let's fix all of our problems nice okay so there's our map we've got some padding issues that we need to fix okay but that's cool huh just dump it in and it looks awesome let's fix the padding and then I'll show you a quick little run through some other embed codes so what I'm going to do is here my section and I'm gonna give it a class name okay I'm gonna call this one what are we gonna call this one Maps come over here what I want to do is I'm gonna say if there's dot Maps I'd like it to have what I want heading or margin so look padding all magical book let's do peny padding bottom bottom and how many let's put in 100 pixels to see what it looks like here we go bit of a space there my image is getting it's not big enough to carry it if you're working on a smaller screen you probably not gonna run into me image issues but here we go let's look at a couple of other embed codes because that process is the same we'll do two more real common one is YouTube okay go to youtube find a video that you like oh I know a good video I'd reading - actually this to launch because it's gonna show you all my search history what does Dan like to watch dun dun dun alright and it's not too bad lots of car shows and home renovation buildings stuff yeah yeah like why aren't there are lots of web design shows because I like to make web design videos not watch them anyway so let's add a video yeah it's fine I'll bring her a laptop it's bound to be a good video there look at this guy oh grid in let's grab this one okay it's one of my old videos my other videos so what you're doing is you find the video that you want make sure it's got a handsome Kiwi in it okay and once you've found that you're looking for the share button now again this might change YouTube changed things around all the time as well so you're looking for share it'll be there somewhere and go to where I want share link and bid see that one there on this okay this all I frame like before okay you can get it started from position do you want the player controls so do you want the play button or not I'm just gonna copy all of this it's just a copy there you go I'm gonna jump into my studio code where am I gonna put it I'll put it just underneath this iframe yeah just put underneath here I know we're gonna get rid of it and I'm just kind of showing you a for instance paste it in let's see if there's any issues so look it's the old one the new one it looks like this there's a map and there's a video underneath it come on now you can do things like making it 100% width what else can you do let's have a little look at the code because we've said be height and width okay I'm going to make it a width of 124 what does that equal I'm not even sure can I delete the height I think you can just delete the height and let it do it for you nope you have to work out what the ratio is and make it bigger it's a really skinny video not sure what it is so I'm going to leave it for the moment it's a mess that my brain can't do now 10 o'clock at night it's too late for meth and let's have a little look yeah adding videos so I'm just gonna mention a couple of other ones now that you can go off and do Twitter does the same thing so if you want to add your Twitter feed to add a little bit of life to your website go to Twitter and they have an embed code so you can embed a stream of your tweets okay you can go to Facebook and put your Facebook group on here as well in different posts what else can you do MailChimp have one so you want to add an email signup ok real quick and easy go to MailChimp signup and they will give you a little embed code that you can just paste on your site and they'll do all the heavy lifting they'll grab the emails that confirm them for you they'll add them to a list that you can send them email us or one of the one I wanted to show you was open tables so open table it's not really big here in Ireland but I don't speak around the world anyway let's say that you want to add a reservation cuz the moment we've just got this reasonably lame thing or is it there we are there was got a button okay but let's say if they actually want to book a time in a place and you don't want to have to code all that cuz it can be what's really complicated can be you can go to open table and if you've like been accepted and so say you the restaurant owner okay and or the web designer for the restaurant you're gonna have to get them to make sure they add their restaurant and they have to jump through some hoops to say yes some are restaurant it's an open table and what you can do then is they've got a widget creator okay I found just a random restaurant Philadelphia I've never been there but this restaurant because it's an open table allows you to create a really quick and easy widget okay so you can pick the size do all this copy the code dump it into your site and hope it doesn't break it so where am I gonna put mine and put it just in the nick here paste see what it does so look there it is there koha so it goes through and somebody can go I want to make a reservation for now and for two people at 7 p.m. and click find a table and it will send our booking request to open table I guess I show you this all I've said it a few times but I want to show you this embed code stuff because not everything has to be done by you you can stand on the shoulders of giants that have made cool little and bid codes and you can just yank him out and stick him on here have we talked about other ones a couple of other ones that I use is Eventbrite I created my kind of sit-down classroom business based around event brights embed codes allowed me to do some people to take tickets and booked into my courses without me actually haven't it too much all right I'm gonna go through now and delete it I will save it for this video but I'll delete it for the next one so when I wake up tomorrow and we start our next video these guys are gonna be gone because the map stays the rest of the stuff is just the stuff we're thrown in for learning alright how did I good people I'll see in the next video hey Betty its live me in you I felt like this morning you know start the day we're gonna do a live video so that because I feel like we're being stuck behind the screen too long and today's a very exciting day or at least this video is a very exciting video because we get to stick out internet our internet our website online so we're gonna do two things we're gonna buy it two main name and get some hosting ok and then we're gonna stick it up and other people will be able to see it so the domain name is something like dub dub dub adir restaurant comm we'll check to see if that one's available and we'll buy that and then we need something called hosting and that's just a service where they're gonna say we will look after your website for you your your images and your HTML your CSS and we'll look after and we'll make sure it's available to everybody that's the hosting part in the name the domain name it's just the name alright exciting times let's jump in behind the computer again and see if we can get it all set up alright before we get started though I want to show you what we do at the end this is it it's our siding you're like I've seen it before we've done it but look it's now at a deer restaurant calm okay it's actually live on the internet people can see it people start making reservations and checking us on our map alright that's what we're gonna do let's jump in now alright so let's get this started we're gonna is going to be two parts we need to sign up for our domain name and our hosting we kind of do that together and then we need to work out a way of connecting our kind of vs code with that hosting to upload it so where are we going to buy our domain name and hosting it's up to you there are lots of sites that do it my recommendation is a place called Bluehost and that's what we'll do in this video but there are lots of other alternatives and why do I choose Bluehost if you want to go to Bluehost go to bring your own laptop comm slash blue in a room redirect you there I like Bluehost because it's the one I use I also like it because two reasons we both win and I've got an affiliate deal with them where I get a small cut of your signup so when you sign up I get a little bit you can go around me if you don't want to you can go to Bluehost comm that's okay but if you use bring your laptop comm slash blue two things happen I get a little bit extra and you get a big discount on your sign up so if you use this look its Bluehost and it's got my face on there we do some stuff together with Bluehost so it's a nice little they've made a little website for me which I can't believe okay so and the cool thing about it is you get your domain name free as part of it and it has all the things we're going to need for this and kind of future classes that I have planned where are we going to do WordPress we're not doing that right now so if you do you know if you are looking for other alternatives for hosting there's a couple of things you just need to yeah watch out for okay you're not watch out for just make sure is included you need a domain and hosting those are the basics after that you really it would be really cool if they had really simple WordPress installation you don't have to for this entire course because we're not doing it but if you plan on following along to later courses and be super handy the other little things to look out for is something called an SSL certificate make sure they have that most of them have it now and it should be free as part of your hosting thus Bluehost one does other nerdy stuff is to make sure that it's an Apache server and that you can run PHP on it because later on in this particular course we're gonna run some basic PHP to do some cool form validation stuff if that went all over you and you're like what is he talking about just use Bluehost and follow me alright let's get started let's click get started now all right I'm going to choose our plan now yeah there's always three why is it a host three for you for this class all we need is the basic plan you can do the plus or the choice plus it's not that much more expensive and but the reason you would is if I'm just designing one website say I am the owner of a deer restaurant okay and I do not need to have ten other websites I'll just use basic because that's the big thing that's different down here Park domains subdomains okay just means this one here I can be more of a web designer and go awry I've got ten clients and they're all using the same host okay I have to buy team domain names so adir restaurants calm and then I'm doing something for a dance dentist and then Dan's web design and in Dan's order mechanics okay so I'm doing lots of sites for people that's where you might decide to use this plus or twice plus so that you get to do like lots of lots of websites using the same monthly cost rather than you know imagine like I bought one and then I had to buy a second one I'm already at like five dollars a month so miles will go for something like this you can't switch later on so for the moment we're gonna use select then we're gonna pick a new domain name now at this stage you've got three two option three options actually you domain name okay we're you go to pick your comm or whatever one you want and if you already have a domain name type it in here and Bluehost will help you basically the two separate things right the domain name gets pointed towards the hosting and if you already have a domain name type it in here Bluehost will help you point it to the hosting that we're about to sign up for if you don't have one put it in here if you try and leave or is it um because like sometimes you're like actually I'm not too sure there you go if you kind of I didn't know how to activate this but it seems when you try and leave this it says hey can't decide on domain name you can do it later you just get a credit and you can add it later so if you've spent like already an hour I trying to figure out a domain name come back later and do it okay and how to activate that a little pop-up no idea just wiggle your mouse around I think if you go towards this crossing it out it seems to launch it now we're gonna check if a deer restaurant is available okay let's click Next I think a deer it's a weird word anyway yeah so nobody has it's available which is awesome and so next thing to do is obviously you know what to do their package details so the price we got okay I think it's 295 for us it's a little bit less than euros but that is based on 36 months so three years you might be like wow big commitment and you can go down to 12 it just cost you more per month it's up to you the other thing to think about is these now this is up to you have a little read-through and the the main one that I'll kind of talk about is the domain privacy protection so when you fill out the details for a domain name like this stuff it's actually public domain knowledge okay so and people can go in and find out who owns a domain name and find out the address so what people do not me is some people just put in a fake address never heard of that before and but another way is to do this domain privacy protection I have no idea how like how they do a monthly cost that blocks it from people but it does you've got to then kind of reach out to Bluehost to get the information it's just not easily available they have a little read of this I don't use any of these okay and they're just optional extras have a read through them I get a little bit blase about some of these things and so have a little read through yourself and decide whether the right for you and what else I don't need the email hosting credit card details sign your life away fill in all that details and I will see you in a second and after you've kind of calm past this page will do the rest all right this is the page you end up at remember if you're watching this in the future everything might be slightly different but we should end up in a similar sort of place so we're gonna set our password for the account I'll do that without you looking you look away promise and I'll see you in a second okay password complete let's go to login all right I'm gonna go to my hosting login and I'm gonna sign-in I'll see in a sec alright it's trying to get us to install WordPress which is just a different way of building a website okay you're not actually well you're building it yes but using kind of templates so what we're gonna do is skip the step down the bottom yours might be a little different they changes onboarding all the time okay they're telling us here they're gonna kind of put the WordPress installation on a kind of temporary domain we're not gonna use it so let's skip start building okay cuz it's stopped building a wordpress website was gonna go to our hosting account alright and this is your kind of like dashboard getting started there's lots of I do not want to buy now I think you I'm sure I don't want it thank you very much all right so what I want to do now is upload my site next thing we want to do is I'm going to show you two ways of uploading your website to your new domain we will use the caveman way which is super simple and can't be broken and then there's the way of automatically doing it straight from via scope which is helpful but a little bit harder to set up so we're looking for the file manager it might not be here when you go to here they might move this around a little bit but you're looking for the file manager somewhere okay file manager is going to load up and this big thing opens up okay and this is looking at remember before we had something called the local site so let me show you all right so on our desktop we created this local folder called project 1 and inside of that is our website and the only problem is we've got an index page and we can see it but the rest of the world can't and all hosting is is that there's a company like Bluehost that says we'll take these files and we'll share them with the world and we'll make sure it's live and connected to your domain name so when people go to a deer restaurant com they're gonna be shown this index and they promise to always have 100% uptime so that everyone can see it all the time so what happens is that's this is the kind of like you know this is the folder structure that you get your websites kept in this one called public HTML ok so double-click public HTML to go inside of it and this is currently what's in your website ok it's not what we need just you know it's got a it's got a kind of like a placeholder website in here for us we're gonna slicked it all and delete it so slick tall and on top here delete okay and we're gonna add all that's the delete leave in the trash you can pin the trash it's up to you but now I've got an empty file so now I want to upload some stuff remember we're in the public underscore HTML so let's go to upload and here we can drag files in or click them one at a time select a file let's do index open it's not gonna work unless we have all the rest of the files a little half work so we need to do both CSS and the HTML or you can just drag it it's up to you and you can't drag folders into this thing some reason that's why it's a bit caveman ish doing it this way okay but I've got my index and my HTML uploaded okay now I want to do is I want to add an images folder and upload them separately cool so let's go back so I've got those two and we just need to rebuild this right so index way so we need this folder called images make sure it's about exactly the same ok and I'm going to make a new folder I'm in grey folder open it up by double cooking out some stuff to it find a way images don't it much to I'm gonna drag them across images will take a little bit longer to upload I'm on some terrible internet here so it's gonna pretty fast I'm the web designer who's working out of a shed next to sheep with deer wounds in it anyway fast enough alright let's go back and we inside the yep so go back to public diet email just to see you've got all them in there let's go check it out hey really this is a pretty big moment here we go a new window we're gonna type in a deer restaurant calm are you really holes dead even like this is just a like ah do it damn and they took later go make it load hey there's a map and the good thing about it is you right now as a student can go to a deer restaurant calm and it'll probably be here let me know if it's not because I even paid my my hosting fees it might come down at some stage cuz as much as I like this website and it doesn't serve any real purpose other than learning and but that's the cool thing about it is that it's yeah now anybody can go and see you can see it TM mum you can see their friends and say go check out my website stop posting it on social media I made a website anyway I get excited because even if it's like just my like I've made a zillion sites and that's just that moment it's like that birthing of your website it's alive all that hard work I'll people can see it the trouble is is nobody's really gonna see it right nobody's gonna find this website unless I start sharing around and telling people and adding it to lists and that sort of stuff but it's alive it's exciting one thing you might find is when you get started is that like surprisingly I assume during this course we were gonna go and where is it we were gonna upload it here by our domain name and the domain names take a long time to populate so often you need to wait for a day or a few hours for a deer restaurant com to work I'm really surprised at how fast Bluehost got that up and I don't know if it's just like because they're awesome or it's because yeah like it's taking me between recording this and actually doing that launch there I don't know about 15 minutes like so that's pretty amazing if you go to your host saying you know domain and it's like you've got Dan's web design calm and it's still not loading it's coming up with not recognized or can't find it give it at least you know give it the maximum of a day if it's still not working after add a contact Bluehost Bluehost are awesome at like just customer service they are like that's the reason I am real happy to like same people they away because Bluehost 24-hour support is is really amazing so where are we and yeah these guys you can call them you can use live chat you can email them and like they're crazy fast and getting back to you it's not a pitch I guess it's just more of I know not all businesses are as good as this I wish more work but anyway so the domain name came through you might have to wait a little while all right I just want to jump in here real quick cuz I said just wait a little while actually you don't have to and you do have to wait a while for the domain name to get populated but there is a temporary and domain name that you will get okay so they'll send you an email saying they'll send you probably three emails your account signup some details like this one so check through them all and you'll find one of them that has this important account information and this is the one that you can use temporarily because if you're like a bit deflated cuz you're like I've got a domain name and it doesn't work use this copy and paste this into the browser and this is like a temporary holding for your domain name that will later on become live so just use that you won't be a dear wrists okay yours will be whatever domain name you're using so this will be different for you but anyway let's jump back into the video and again if you run into any problems with this okay with the hosting you can contact me and I'll help you as best I can but because this is kind of more blue hosts thing and they change things and move things around it can get a little bit well it's good you know be easier for them and quicker probably for them to help you so home is where we kind of started its just recap and what Bluehost wants you to do is sign up for WordPress okay so we ignored that and deleted that kind of templated stuff from the site and what you want is file manager and just kind of recreate the folders and upload it manually other interesting parts about your host is under this advanced one ok click on that you'll see all of these again but there's some other useful things in here it depends on how nerdy you want to go you can set up your email address from in here you can set up kind of tracking how many people have been to your site all sorts of cool stuff and the other thing is is your something called an SSL certificate will get created and applied to it later on at the moment if we go to a dear restaurant icon you'll see that it says not secure that's just because it hasn't been like made and done yet that will become secure later on so if you go to your site it says hey this is a dodgy looking website it's because the security hasn't been put on it yet and it's fine to you to look at and spy for anybody to look at because it's not malicious but it will need to be there eventually because Google doesn't like unsecured sites but that'll happen automatically for you if it doesn't reach out to Bluehost and ask them to help out but it seems to be an automated process with him now I promised you we'd do the long way which is kind of using cPanel and file manager ok and manually updating it now be nice just to kind of be envious code and just kind of automatically send it so let's do that now and this videos epic right now it's pretty long and let's do it in the next video separate it out all right I'll see in a sec hey there in this video we are going to use vs code to connect directly to our host rather than using kind of anything else or using their website they're all done within vs code we're gonna install this plugin called its FTP and it's gonna show me everything on my site nicely and when I want to upload stuff I just right-click it and say upload and it ends up on my website simples all right so in this video we're going to connect directly from vyas code we're gonna use something called SFTP ok and it's one of the extensions like we did earlier and we do the extensions for HTML hint and live server like the other ones there is SFTP is the most common one at the moment it's the one that I use and it seems to work real good it has 4.5 stars ok and has a chunk of downloads so you will check when you were doing it you know there's other ones and here that one's got lists they're stars that's one we're gonna use for the moment have a little read through how it works I'm gonna show you how to do it the main one for this one is usage it says you need to do this thing can you need to open the command line sorry the command pellet and run this thing and I'll show you how to do that in a second but basically the ego is that's what we need to put in there kind of details so let's install it first give it a sec right it's installed nothing really happens you might have noticed there's a new little icon over here which doesn't quite work yet we're going to set it up and that's what they see in here they say do this run the shortcut on Windows or our MEC and then type this in so we'll do that and the long way is under view and command palette so command palette is your able to tell the you know give kind of commands to these plugins it's kind of a crude way of doing it depends you might be happy with terminal command line some people aren't so what I want to do is I want to type in yes FTP it should pre fill it in okay and to configure this but a software this is what we need to type in let's go what ends up happening is let's close it all down to make I'm gonna close down HTML in my CSS I'll even close down this by double clicking yet so it's nice and clean so this little JSON file is the kind of details that you need to populate for this thing to work now you're like where do I get all of these details so they are the things that came through in an email so they either come through from an email from Bluehost or if you go to if T your Bluehost account you'll find them from home go down to advanced advanced go to ftp accounts and you'll find them at the bottom of this so this top one here is the one that is automatically generated okay and that's got of our details in it you click on configure FTP account and here are the basics that you need ok so the username the server that's going to and the port alternatively if you don't want to use this plugin that we're using in vs code you can use if you're more familiar with FileZilla or cyberduck for Mac you can use those cool instructions of how to use it's just another way so let's copy and paste them across so what do we got the name of the server it's called Bluehost this doesn't matter you can type in anything there this next one the host address is really important at the moment is local hosting so on my machine that's not what I want so I'm gonna grab this one here FTP now if you're using something other than Bluehost sometimes it not have the FTP in front of it and sometimes it does ok so if you using some other hosting company you can just sometimes it's yeah FTP sometimes there's not ok in this case it is now I think in this case we're just using FTP not SFTP let's check so you can use either in this case I put in my password so where's my password really doesn't have it as an option I remember this when I was setting it up first so this needs a password to get in ok password so you just type it in inside of the quotation marks colon and your password goes in quotation marks as well and ends with a comma so we've got our name we've got a house where a password I've got FTP the port number often it's 22 in case of Bluehost they are 21 they are your username where's my username there it is there a deer is in the remote path okay in this case they say my remote path is now that's not it okay Gimli for pretty much all hosting companies that have ever dealt with its remember when we were in let me have a little look file manager remember public HT underscore HTML that's the one we want maybe this one that's the folder the moment we're logging into this kind of like big in this big directory with all the stuff we don't need okay we want to find this public underscore HTML to get to our website so in here we go to public underscore HTML and this one is up to you so upload on save I turn it to false just because and the problem with having it is true it means every time I hit save remember file save all its gonna then try and push my website live to a deer restaurant calm and if I'm messing about with it and it's all broken and half working the website is gonna be half working on the site so I say minor false anyway that's what that guy needs so we're gonna save it and we're gonna close it and we're gonna go to this option here okay for our SFTP you can see our little host there you're gonna drop it down this little blue bar is gonna run across for a while until it connects to your server and fingers cross it does all right there you go so it is found my index and my style and my images and the thing is this is not on my computer this is actually looking at this folder here on Bluehost which is connected to my URL which is this so yeah that's what that is if I go in here now and I click this and I right-click it and I say delete be very careful you see down the bottom here it says are you sure you want to delete your index page I'm okay with externus to come back up in a sec but cuz I've deleted it here this thing's gonna my websites gonna freak out because it doesn't have an index page okay I'm gonna hit refresh it's over look down here as well you see it kind of humming away it's thinking about it it's checking the server it's never a fast process this thing's gone to delete delete are you sure do eat file doesn't exist cool this thing could take a little bit to update even though I clicked update it still was listing it there it is it's gone so now if I go to a dear restaurant goes hey freaking out got no index page that's the that's the reason we need index to HTML and it's showing me other stuff in the alga CSS sheet in some images but it's not very helpful so how to get stuff back up let's say that I'm in my file explorer okay so there's top one and in here and open up index page you know working on it so this is my local Explorer is my local stuff this down here is the remote so remotes considered their blue hosts hard drive okay that's what your site is for other people this is you so you do your work locally and then you push it live to push it live you right-click it and say upload and off it goes and it should be uploading and hopefully in a second I can go to a deer restaurant calm and it should be back nice now that is gonna work fine for like half of you in the rest of you who have got hosting other places are gonna be like and it's not working we're so close so how do we fix it and a couple of things is you need to open up the same thing as before okay to get back in to do the settings and that's really weird cuz like mmm yeah anyway it's just the way plugins work in vs code I can get a sick view got a command palette and it's the last thing I did and I can open up this JSON file if you can't remember how to do it you go to the extension and then you find it close these out and it shows me the ones I have enabled I can click on it and then kind of read through the documentation again on how to do it you can see we've just done some basic stuff there's a lot more that can go in there you can do watch folders which is cool there is lots of stuff that you might need to do to make it work maybe your school or your university or your work alright so what are we doing oh yeah problems okay so we wanted to open up I'm gonna close all the extensions down and I want to go to view command palette and open up this again so if it doesn't work okay a couple of things you can try easily yourself is sometimes that your username has an email address so it could be it might be this at a dear restaurant calm okay that sometimes can get you know some some hosts do that sometimes you don't need the public slash underscore can just be left by itself okay just leave the slash there okay sometimes that works sometimes it needs to be SFTP sometimes you might got your password wrong okay we talked about the hosts sometimes it doesn't need the FTP at the front you can delete that sometimes the host name doesn't do anything okay just what get listed in this little folder here and if that still doesn't work copy this okay I'll actually copy and paste this into a word doc right now and stick it in your exercise files and what you do is you contact your house say with godaddy or hostgator or somebody else okay just sin the support ticket and say hey I've got an account with you and I can't connect it and can you tell me what to put in this and they might go oh yeah you don't you're wrong you've got to put in port 23 or 22 or something else or they'll tell you how to kind of change it round okay and there way to test it is once you've done it save it there might be a thing that you've done wrong as well is go file save click on this and click on Bluehost and hopefully this eventually will populate with the things on your site now what else can you try if it's still not working and if TP can be blocked by your internet provider not you interpret provider but you're say you're at a I don't know coffee shop or a hotel that you're trying to do this in and sometimes the like the infrastructure there the Wi-Fi network will block kind of weird stuff like this okay because you're trying to connect with a server online and they freak out sometimes so if that's happening or at least yours is broken try connecting to a different Wi-Fi say you're at work try it at home sure at home try it at a friend's and try the exact same thing because sometimes it's your internet that's the wrong it's not their details it's not if he has code and I've got around it sometimes by doing a hotspot on my phone okay like what do you call it tethering on an iPhone or a mobile hotspot on my Android phone and I connect my laptop to that and go and try it and it works fine and if it still is not working contact your hosts that they're a real quick Bluehost are really good at getting back to you and helping you out same thing I'll put this in a word doc now try and remember come on down I'll put it in your exercise files in a second and it will be under project one and I'll call it f TP code and that's it I've connected it it's online it's exciting people can see it we can update it and if we need to make any amines we upload it to our site is all we need to do now is click on it you can actually grab a chunk of stuff okay you can say I want images and all of this right-click all of them and say up and it will upload to your hosts alright that is it for project one we're done okay and that's as far as we're gonna get with this one we are going to move into another project project two even okay there's bike repair shop we're gonna add loads more details to it we're gonna add forms it's gonna be exciting it's gonna be Lions take a break shake it off I'm going to and we'll prepare ourselves for the next project alright that is going to be it for this video well done making it to the end it's a pretty long video well done if you enjoyed it like okay so other people might find it and if you want to follow me a bit more subscribe to my channel the other thing like I mentioned earlier on in the course there are ears like where we stop here we continue on for like another 90 videos if you'd like to do that there'll be a link in the description alright that is totally it now good bye hi Dada and I will see you in another future video probably by now fade to black you

Channel: Bring Your Own Laptop

Views: 1,773,893

Keywords: web development, css3, html5, html tutorial for beginners, visual studio code, vs code, vscode, visual studio, visual studio code tutorial, visual studio code html, css tutorial for beginners, web design basic course, web design tutorial, web design tutorial for beginners, beginner web design, beginner web design tutorials, how to make a website, html5 and css3 tutorial, vscode tips and tricks, how to design a website, learn html, introduction to html, web development tutorial

Id: C5QFHp1oAws

Length: 237min 17sec (14237 seconds)

Published: Mon Jul 29 2019