 What's up team? Welcome back! It is your biggest fan, the real Casagero and this is the show where you go to learn to code for fun and profit and be motivated and inspired to go out become the person you were meant to be so you can do the things you were meant to do and live the life you were meant to live team in this episode. In this episode we're talking about a whole bunch of stuff. I started out this video I started out this whole thing right my intention was to was to do a tutorial on html layouts but every time I think about html or html layouts I get upset I get angry I get mad because I start thinking about search engine results and I think about how I've been through all these courses I've been through all these courses team I've taken tons of courses man I've got like 20 courses in my Udemy account so the stuff that I'm talking about in the code 365 sort of lab not only I'm learning it I'm applying it I applied it as a systems as a applied it as a DevOps engineer when I was working at Microsoft I applied it when I was a web developer I apply it to the websites that I build now the personal sites to the client sites I've worked on like I apply this stuff team well at least at least to the extent that I can right you know like a lot of this stuff like I haven't had a chance to use the react in any kind of professional capacity right so so some stuff you don't but the point is team the point is isn't all this time like I I'm yet to come across anyone who talks about like html tags in any sort of like depth and reverence and here's the deal html tags are very very important because html tags are how people find your webpage and that's how businesses make money in the 21st century and people are coding pages all wrong and they're learning to code pages all wrong they're learning to use dibs for everything they're grabbing code from the internet that they don't understand right this is me man this is why I had such a hard time learning a code and this is what gave me imposter syndrome about being able to go out and get a job that that along with the corporations and all that nonsense so we're talking about that today team we're not going to talk about the corporations today we'll save that for tomorrow but I am definitely going to talk about what you need to have on your webpage how your webpage needs to be laid out right the tags I'm talking about the importance of of getting the html right because that is the beginning of your seo if you get that right then everything else will fall into line but if you do everything else and you don't get your html right it's all going to fall apart team so let's get into it all right team in this session we are going to use everything that we have learned in order to build a fairly standard html layout page team so what we're going to do is going to go here to the desktop we're going to right click we're going to go new folder in this folder we're going to name layout bam we'll double click go into there and now we're inside of this folder what we'll do is we'll uh we'll click in the address bar grab that and control c so we'll just select the control c then we'll hit windows pwsh to bring up power shell let me scroll in here and then we're gonna paste well we're not gonna paste that in just yet we're going to do a cd and then we're going to paste that on the screen and now we're going to cd right into that new directory that recreated all right we'll clear this and if you had trouble right so all you got to do is you got to put that directory inside of quotation marks because if you have any kind of spaces power shell is going to read those all jacked up all right so we'll escape out of there then we're going to do a new item so new dash item and we're going to make an index dot html bam and i'm going to open up uh illustrator just to show you guys what we're going to be doing well actually i don't even need to do that if we go over to w3 schools what we can do team is we're going to be putting together a layout just like this using everything that we learned now this this is a fairly basically out but then right here if we control zoom in this is a more complicated layout so you'd have your header that would be like your your images and stuff and then you'd have your nav your nav could go inside of your header and then you'd have a section and a section is just a piece of a web page that contains something so this section could contain articles and then you'd have an aside that complements those articles articles can have their own individual aside and then you would also have a main container so you could wrap this whole part right here in the main and that just tells web browsers and search engines that your main content is housed in this particular place and then you get your footer and your footer houses any supplemental information so a good way to think about this right and we're thinking through we're thinking through how a search engine would see this because as web developers we're building our websites because we want we want people to find them so if we go and we look at this just like in our html document the header is going to contain all the information about our page and the navigation of course is going to contain the navigation to get us around our page so this is why we can put our nap our navigation inside the header because if any sort of software search engines in particular come and they're looking for information and they look inside of the header they're immediately going to find the links so they'll see all the stuff that this page is about and then they'll see these links and they'll see what and they'll end up the the search engine will follow the links to whatever page they point to so if they point to other pages on your site like your about page and your contact page and your blog page and whatever the crawler is going to go to those pages and they're going to see all that stuff and it's going to read all that stuff now what happens sometimes as people mess this up is because you have a landing page the page will get traffic and then you have everything set up right but when the browser gets to the when the search engine gets to the links when it gets to the navigation and it follows the nav when it reads the the html information for that page is looking for specific information and one of those tags that is looking for is the canonical id so we give this page a canonical id of being like the single source of information for our website and all the information there and then other pages we make the main page or the page that contains the most relevant information the we make the main page the canonical source so what happens is when a search engine goes through these links and it goes to our other pages it sees the canonical source is being this main page so it attributes all the information on that page towards the main page and that helps the main page rank higher in search engines because when people are looking not only are they when people are searching when the search engine goes to retrieve search results form not only does it look at the information that would be on the main page it looks at it has all this other information that was referenced so that's why we put the that's one reason why we put the nav in the header mainly we put it there so people can see it and they can follow it but because for whatever reason maybe maybe because of of that's where typically where a navigation would be you would think like where somebody would first see we built our systems around that process and so now like the search engines they look for the nav in the header and I would say you want the nav as close to the top of the screen as possible because of what I just said with the links you set up the links the right way then people I mean then the search engine will attribute all of that information to your main page so that's just another SEO thing team so that's the most important part how to make this stuff look and lay out the way it is like we'll do that but it the the look is only one aspect of it because a good looking web page it doesn't look good if nobody ever gets to see it and if we don't have the mark up right then nobody's ever going to get to see it and then the most important thing is the information what is the information on this page going to do for people and that's what a lot of companies a lot of businesses miss they they'll build a fantastic looking website it'll look great but nobody can find it organically because it doesn't get indexed by the search engines for the thing that it does and we can see this every day if you go if you go to your if you go to google and you do a search for a Italian restaurant or whatever think of a restaurant that you see on a regular basis and nine out of ten times if you just search for the style of food that that restaurant serves it's not going to show up in the top search results it'll be it'll be some other completely different restaurant somebody who's paying seo people to come and build their websites the right way and you could be one of the people that they pay because more customers to a website means more business but a lot of businesses don't understand this they think the stuff we're doing when it comes to website and web design and web development they think it's all like this this nebulous esoteric craziness team and it's not it's it's the cold hard truth computers have to read this stuff and if computers can read it then they're they can index the information and when the information is indexed when somebody's searching the search engines have all this information they know they know about who we are they know where we are so they know our approximate location and they know our interests and they're only going to get smarter over time as we give more and more information to the internet and it's already happening team so when you search for something google is giving you the results that it believes is most relevant to you and one of the things that would be most relevant relevant to you is if you're searching for a restaurant the most relevant restaurant should be the one that's closest that has what you're looking for and if you live in a modern city there's probably 10 restaurants with within a mile of you that have a food that you want or what a food that you may be searching for when you go online but very few of those restaurants are going to have websites that are optimized so you will never find their website maybe you find them on uber eats or maybe find them somewhere else but that's you know that's up to the business if the business wants to turn over their whole business to a company like like a uber eats or door dash or whatever and becomes solely dependent on their platform in order to get business then so be it but I don't think people should go that way team I think if you can build your own stuff and put it online and get it in the search engine that is always going to be the most relevant thing and now for a restaurant and this is just for you you guys who are going to go out there and pitch like like maybe you want to be freelance or you want to do freelance work or even even if you're in an interview when you're talking about this stuff is like hey if you build this thing and you have it set up so it's bringing in traffic so it's SEO properly the website is set up properly it looks good it's functional and it's it begins to bring in traffic what you can do is you can create incentives for those customers that physically come in and if you have some sort of delivery something right then use your own delivery use your own delivery service or you could do something like have customers phone in orders and then you just enter the orders on uber eats and then somebody comes and picks them up and you go drop off the order right but you want the business the business needs to have control and this is a good way to have control being able to be found like it's it's it's it's it's insane how many and this is this is why I got out of the business of going to try to talk to businesses team because you're trying to sell somebody on something that they should already have and understand like this is not the 19th century anymore team this is this is it this is the 21st century so if you got a business and you don't understand like what what your business is doing on the internet then like there is somebody coming up behind you probably somebody watching this video right now right somebody listening to this right now is going to go out there and start a business is going to come is going to is going to take a if you already have a business and you got a website and it's not it's not set up right you're not using the right they don't have the right tags on it if you got clients out there they got websites they ain't got the right tags on them right it's time goes on somebody is going to overtake them because they can't be found and the people who understand this stuff they will I mean this is where the money's the money's to be made team right but right we're at this point in time we're like for like from a freelancing standpoint at least for me I may be wrong maybe it's just my area maybe it maybe as me as a person maybe people don't like my beard and my mustache but it's difficult explaining to people like hey right like you can get more business on the internet and a lot of people they've been burned before right because because of all the google updates and all these different things that have been going on so at one point you could take your you could take your head section of your website and you could just stuff it full of keywords keywords tags just fill it all up full of all kinds of stuff and people and you would show up top in the search results but as time went on search engines realized they're like hey people are putting all kinds of tags in here and search engines want to make money that's their goal their goal is to make money and so if I go to us if I go to one search engine in the search results are bad then I'm not going to go there anymore so you go to another search engine you go to another until you find one that gives you the answers that you're looking for and if it gives you the answers that you're looking for you're going to keep going back and if you keep going back that means that that page has your attention and if that page has your attention they can show advertisements and from time to time you'll click on the advertisement now maybe maybe you'll be on the internet for 20 years and you'll only click on one advertisement and actually go buy something that's cool right if you can get a million people 20 million people 100 million people a billion people a day to your website a lot of people are going to click on ads a lot of people are going to make money that's why this search results have to be good and what the search engine started looking at is they started looking at how long people were staying on web pages and then what were they doing when they left the web page and then what were they doing on the web page so somebody goes on the internet and they they search they search for football right football comes up they look at a couple websites they don't find what they're looking for and then they go and they search for something more specific like um you know like football teams in america right and then that'll probably give them nfl.com so as people people search so people search for football teams in america nfl.com pops up they go to nfl.com and then they leave and then they go and then they search for football teams in america again and then my website pops up and people go and they they stay some people stay for for 10 seconds some people stay for six minutes some people stay for an hour right maybe one out of every hundred people stays for like half an hour or something like that but most people let's say the vast majority of them 99% of them they they leave within 30 seconds of clicking on the page if they leave and they don't search for anything football related again in a in whatever period of time the search engine deems that means our website was a success in the search engine's eyes because now this person they came they found what they were looking for they left and now they're going on to the next thing that's it so sometimes the information needs to be out front and for for little guys coming up people just getting into web development like really thinking about this like the little guy is a good thing because you can do stuff that the big guys can't like if you got a what if somebody has a website and they're selling 17 000 different things there's 17 000 different products they have to optimize for and if they're selling 17 000 different products this means that they probably have overhead they got a building they got staff they got all kinds of stuff team but if we show up and we just have three products then we can optimize the shit out of them our whole website can be just about those three products and we can get very specific with the type of customers that we want to target and it makes our keyword research even easier because we can we can do keyword research for a specific market industry and our particular product and the problem it solves so we can just go out to google and we can be like let's say for instance we sell um we sell house cleaner we can go how to clean well actually let's go to google.com google.com enter we can go to we can go how to clean and then boom cast iron dishwasher white shoes white vans airpod shoes silver like all this this is all stuff people are searching for when they search for how to clean so if you have a cleaner if you have a cleaning product then you will fill your website with everything that that thing cleans and then the keyword and then you'd have you'd have pages that would be like how to clean this with this how to clean that with this how to clean this with our products and you can do that like and you can hire somebody to do that to do that if you're a business owner if you're a web developer then that's the stuff you're thinking about right if somebody hires you to build a website and this and this goes into something else I saw right like there's um there's a there's this new service called page I think it's page flow page flow so check this out team so you got page flow I think this is it I don't know it's it looks like it's not loading it's like popular now page page flow and what it does is uh no that's not it man I can't remember what the name of it is I was I was watching I was looking at on YouTube so let's go back over there and see but um let's go history web flow that's what it's called web so we go into web flow right so web flow it'll it'll lay out the whole page for you right so you just type in what you want to do and it'll it'll just do it'll just do the stuff right so you can build just about any page you want using something like this but at the end of the day it still has to be coded like if it's going to be a app if it's going to take some sort of information there still has to be some sort of link to a database and an authentication system in a shopping cart if you're going to have an e-commerce store if you're going to have like a um if you're going to have courses and stuff then it still has to have the the same kind of stuff so this doesn't completely replace the developer but it does expose like what the developer needs to be thinking of right so you're thinking of this stuff so in this case right like when we when we're using a tool like this built so built-in SEO metadata controls automatic xml site maps easy 301 redirects and canana canonical tags this is the kicker this is what gets everybody people don't mess around with this they're 301 redirects to um the xml site map is good it's probably not so necessary the the whole idea is that like when you build a website you generate a site map and then you can give it to the search engine in the search engine instead of reading through everything on your site it'll just parse the site map or it'll follow the site map through all the links but what happened the problem is that like if you generate a site map and the site map doesn't match your site then you might get dinged some points or something so and it's a way to keep it's a way to keep people from submitting erroneous site maps all right so anyway but yeah so this is page flow and you can use it to like just mock up a whole website but even still team like you got to understand understand this kind of stuff what if you want to build a competitor to these guys then you have to understand it like hey this page here should be optimized and like we can go in here look let's see view page info not view page info let's view source view page source go in here oh look these guys are dope man they know people are going to be looking at the page source because they know people are going to come in here and check out whether or not what they say their software does actually does so everybody's going to be asking a question does page flow use page flow for their website this site was created i mean not paid flow but webflow this site was created in webflow boom boom boom right and then they got like the huge logo right here so this is cool stuff any of us can do and i'll probably do i'll probably do this with the um i'll do this with the uh with the bunny maybe but yeah team that that is that is so i was i was actually i was sitting down i was gonna record a course and i was like hey all right so i'm gonna record the course and then i'm gonna do the podcast episode after this and not the whole course just like a portion of it it's the last part of html beyond the primer for the code 365 startup lab as soon as i finish with that then i'm going into html html mastery and that's where i get like into all the html and so the goal there right is to and there's a lot of there's a lot of css stuff in there is well because i mean you can't you can't do one without the other like html and css go pretty much hand to hand but again there's a lot of stuff inside of html that a lot of people miss out on like like um alternate text image tags um so you got alternate text image tags there's like you can add additional tags to uh to elements in order to use them to like to to store data and to pull in data um there's there's and then there's all the like the the the semantic all the semantic elements like video audio i don't know if audio is an element but there's a bunch of them right so there's all that stuff in there so we go through all that stuff and the point is in all that stuff is that if you understand all those elements and all those tags then you can grab that stuff with javascript and it makes learning not only does it make building stuff easier because instead of like coming up with your own classes and id's when you're out when you're building these websites or you're learning to build this stuff if you use the semantic tags then it's pretty easy to to grab the stuff that you need and then if you need to put some sort of tag on it at some point then you can use probably javascript to do it right depend i mean so i mean there's a bunch of different ways to go but understanding that stuff is like the key to it like a lot of people like they'll build websites and they'll use nothing but this and they'll they'll just use tags and id's which is fine it's cool the problem is that search engines can't find the site like and when they when they do is when you like purposely submit the site and that's when you got to do like a site map and all this other stuff because search engine doesn't know and even if you submit the site map the search engine probably probably still doesn't know because the the tags aren't canonical right so they don't know what people are going to come up with they can guess right you know nine out of ten developers will give their header the id of header and then they just guess it that right you know i'm saying but you know 100 out of 100 percent of developers that use header the header tag like they wanted that to be the actual header of the page and then there i mean and so we talk about artificial intelligence and i mean i just go all over the place with this stuff team but the goal is to get you guys to think in a whole different kind of way because i didn't think that way when i was first starting out like i saw all this stuff coming i knew exactly what was going to happen i was asking myself ten years ago man how come text editors like microsoft were don't outputting html and instead of instead of like really thinking that through and then deciding at that time like okay like why don't you make the text editor that print stuff out html and i could be here page webflow could be my company but i wasn't thinking that way team and i didn't have anybody to tell me right so i was just out here on my own like youtube wasn't a thing you know there's a bunch of us a bunch of us devs out here smart people right know how to build stuff we just don't know what to build we don't know where to go right so but my my job here my role here is to come and like hey hey team this is what i see a going on out here this is what i see coming this right here this is this this webflow it's got a lot of people scared team got a lot of people scared because it's gonna this is this is going to be like imagine right imagine you're a developer and you're in your sole job is to take images and turn them into web pages like now you got this thing called webflow somebody could show up and they can have an image they can just point click drag and drop and this isn't new like this isn't a new thing there's other tools that have been doing this forever forever but what's cool about this tool is that when you use it it outputs semantic code it says it says it's and it says it right here was it at um javascript or web not the web not not that one where was it we saw we saw it metadata controls canonical tags it outputs with canonical tags team so this means we could go into webflow mock something up mock something up super quick spit it out and then go in and tag it up with javascript like super fast and then and i mean like come on like really like if we're in here like we could probably go like a whole we could probably do it for within the app and then these guys what they're going to do is this it's a deployment free deal right so you can set up a whole cms build completely custom databases for dynamic content types including online stores boom right done now the regular person isn't going to be able to do this like they'll some regular people who show up and they'll they'll end up they're like diving deep into this stuff and they'll have to point and click like when as soon as you want to get super custom you're gonna have to know you're gonna have to know the code but even still right like this is it's just like photoshop man there's still people out there make hundred thousand dollars two hundred thousand dollars a year five hundred thousand dollars a million dollars that's probably somebody out there right now got paid a million dollars today to make an image in photoshop i guarantee it to the least one person least million bucks photoshop image but anybody could buy photoshop like we all go buy photoshop man and you can so anybody anybody could could could write at could write some html it's not hard right yeah i mean in a day you could go learn the basics and create like a basic html page put it on the internet but to make something that's functional that works that people want to look at right that that gets the job done sometimes it takes an expert right but the guy who builds chairs all day he ain't got time for this stuff man so there's always going to be somebody out there to do this and somebody and somebody somebody is going to come along and they're going to make it easy just like just like this right here right and then you got the wix's the weave leaves the square spaces you got all the other sites that the the the what go daddy site tonight 24 hour website like that stuff is is is going to exist it's going to keep existing is always going to be there but somebody has to build that stuff right so those just become tools that business owners and entrepreneurs can use in order to grow their business without having to learn to code but somebody who who knows how to code had to make those things in the first place but as more and more people start to use those things they all become the same everything they make looks the same so there still has to be people out there making templates there has to there's going to be people out here making different sites for competition there's going to be people out here offering to take over and manage websites right so imagine you're a business owner and you got to figure it out right you got you got the whole square space being figured out but you've got your systems in place well enough where you don't want to take the you know the four hours a week to manage the page right so you'll pay somebody else a couple hundred dollars a month to manage it right and you as a developer and understanding all this stuff right maybe you could go in and do what it took him four hours to do you could do it in an hour or you could write some back-end code on a server somewhere or on your computer that'll that'll do the same thing in five seconds so now you go get a hundred clients that are each paying you two hundred dollars a month and you write some code that does all this work in five seconds and you've got yourself a business right so you've got you know a hundred clients paying you times two zero zero is twenty thousand dollars a month you don't do no work you wrote all the code to do the work for you team that's that's what that's what this that's what this that's what i this one i'm here talking about team that's what i'm here talking about you can go out and learn all this stuff yourself right you can learn it in the code 365 startup lab you can learn it on the internet right but all you got to do is pick something and start building team let's pick something start building start with a portfolio website so in the code 365 startup lab what i'm doing what i'm going to do is uh 365 startup lab so what i'm going to do is the web dev primer is actually i'm going to turn this into one of these courses i'm going to turn into a portfolio website course but when i build it i'm going to release it inside of the code 365 startup lab and it's i'm just going to put it out here with the other courses as a standalone course and i'll make it like a nine dollar course but there's not going to be many nine dollar courses right these are just to get you started and then when i do that one the how to make your portfolio that'll be a nine dollar course and then every other course like i'm going to put up the supreme course here a little bit those will be more but all the courses will be in the code 365 startup lab so i would get in the code 365 startup lab before i start adding these other courses because if you're in there you're going to get all those for free especially if you get the lifetime if you get the lifetime bundle for 99 bucks you're going to get whatever goes in there after after that right but eventually i'm going to get rid of this lifetime it's going to go month to month i'll have the lifetime it'll probably be like a thousand bucks or something i don't know team but it'll be more like because this stuff is hard like recording these videos i'm running through hard drive space like crazy it's a lot of work um but uh but also at the same time and i want people to not take this lightly like if you come and you spend and you spend your money get your money's worth like learn this stuff and apply it and like nobody's going to come to you like i can't come to your house and beat down your door and be like hey man you know what i'm saying you know some people are going to ask for their money back in this thing and you know that's you know this whatever team but you gotta you gotta put that you gotta put the knowledge to use right just thinking about this stuff this code and technology in the future in terms of getting a job like nah man like nah nah you gotta think about this stuff in terms of you as a person like how do you want to spend your if you want to spend your time crunching numbers all day doing mathematics all day then boom data science is it right and you gotta get your foot in the door somehow so you gotta learn the code right you gotta learn the programming language you gotta learn the fundamentals of programming that's what i'm gonna have in javascript mastery is the fundamentals of programming um but you gotta you and then you gotta pick something to go crunch data like i'll show you guys i think it's called the california california target book and the guy who works on his website is just a regular dude and i don't he like he he does this full time now like this is full time job but when he first started putting this website together he was um he was like he was like bagging groceries and he noticed all this stuff wrong with like governmental data and he like went and built his website and started crunching data and like now like you gotta log in so like let's see i don't what's the subscription cost look this is a subscription and there's a video on youtube if you go to youtube and go to i think it's california target book california target book this guy right here this self taught programmer is bringing transparency to california politics so this is a cool video man go watch it go check this out and just see what this guy is doing with code and let your mind be amazed and start thinking about what you could do too i talked about this a little bit in some some others i don't know if it's in the last episode of what but i talked about this like within a little bit in relation to like the cannabis industry we'll talk about that stuff some more too team we got some big plans out here not necessarily getting to the cannabis industry i just want to build websites i just want to build i don't even i don't want to build websites i just i know how to do it i want to inspire other people to build websites and if that can earn me 11 that'd be fantastic team so go support the code 365 startup lab and that is it for today team and i will see you in tomorrow's episode