 Welcome back team, it is your biggest fan, the real Casadero and in this session, we are going to be building a small command line application that is going to give you an introduction to the fundamentals of programming, introduction to the fundamentals of the command line, an introduction to the fundamentals of PowerShell and the introduction to the fundamentals of building your own websites, web applications, software, whatever it is you wanna build. Now I will tell you this, here's the caveat team. I always start off with HTML, CSS and JavaScript because I have come to believe that these three things, they make it super simple for us to build something right away and see our results. And when we're able to do that, it motivates us and inspires us and it drives us to move to the next level in our journey, right? So the first part is just start creating and then as you're creating, you have all these other ideas. Like when I sat down at the computer, I sat down to do something else and then I was like, yo, I'm doing all this stuff right now. Let me just record a video for the people out there who wanna know how to do this same stuff. Maybe I can help somebody out, make their lives easier. Make, just make things more enjoyable, team. So if you want to learn a new skill that is going to help you progress along your coding journey so you can build the things you wanna build, be able to do the things you wanna do so you can live the life you wanna live and become the person you wanna become. Hang out with me here, team. Let's get to it. Here we go. All right, team. It is your biggest fan of Real Casadero and before we get started, what I wanna do is I'm gonna give you guys a little bit of context. A little while ago, three, four, five days ago, I created a five and a half hour guide to software engineering and web development and this guide is designed for beginners to show them all of the stuff that you need to learn and give you a thought process and help you develop a mindset that's gonna make you a winner when it comes to learning to code, going out, getting a job, starting your own business, building your own apps, all that stuff. But what happened was, is I had a clip of some remote control cars in there and another YouTube channel thought that, I don't know what they thought, but they flagged the video. They put a copyright strike on it. YouTube took the video down and they gave my channel one strike. Which is fine, it's no big deal, team. Stuff like that happens all the time. You work your entire life, you go out, you get your dream job and then you get fired and now you're like, ah, what do I do? Right? You build a home of your dreams and the enlightening strikes it and it burns down. You buy a brand new car and then the engine blows up. Like this stuff happens to people every day and people are devastated, they're distraught and they should be because they've worked so hard to get to where they wanna be and it just feels like things aren't working out but that is life. Like stuff happens in life and it is crap. I wish I could stop it but I can't. The best I can do is I can show you the things I know and I can try to keep you inspired and motivated and dedicated and sort of push you along the way to get to where you wanna be, team. And I understand code and I understand people and this is just what I do, team. So let's roll with it. Now, if you are not on a Windows 10 machine, if you're using Mac or you're using Linux, that is absolutely okay because what I'm gonna show you here, you can use on any computer system. You can use it on Windows, you can use it on Mac, you can use it on Linux, you can use it on web servers. Listen to me, team, you can use this on web servers and this is the core of programming. The core of programming is like, hey, right? All we're doing is we're passing information around and we're performing computations with that information. Every program is the same. It has a user interface, an input, some processes and then some output, team. That is it. So what I show you here, you can make in any programming language. So I'll come back and I'll make different videos and I'll show you how to do this in JavaScript and I'll show you how to do this in Python. And those are the main languages I know, JavaScript, Python and I know a little bit of PowerShell enough to get around and to get things done. Now, because I understand the core fundamentals and by the end of this video, because you understand the core fundamentals, you'll be able to go out and you'll be able to say, hey man, I want to know how to do this thing in Perl or I want to know how to do this thing in C Sharp or I want to know how to do this thing in C++. Then you go down that road and you're able to build stuff in different programming languages. And you will understand that the language does not matter. The programming language does not matter. All you're trying to do is communicate with the computer. It's just like the English language team. It's just like the English language. You can communicate with me in English but if you want to communicate with somebody in Spanish then you have to go learn the Spanish language. If you want to communicate with the computer in C++ then you have to go learn the C++ language, right? Computers, they're polyglots. They don't speak a lot of languages but they can understand a lot of languages. But first we have to give them the software in order to do that. But in this case, we're going to start out with the software. Two basic tools you need if you're on Mac or Linux and being one of those tools, it already comes pre-installed in Windows. So let's do this team. What I'm gonna do is I'm gonna open up my web browser and I'm gonna use Microsoft Edge. And if you're on Windows, feel free to follow along. If you're on Mac or Linux, follow along because I'm gonna show you exactly what you need in order to follow along with this guide right here right now team. So right here in the search bar we're going to type PowerShellCore. Boom. And right here, first result is a GitHub page. Now if you didn't get that as the first result, check it out, github.com forward slash PowerShell forward slash PowerShell. That's how you get over here team. And I know you guys can't see this. This is wicked, wicked, wicked small team. I apologize. But that's how you get over here. Now what you're gonna do is you're gonna scroll down and you just pick your operating system, go over here to the instructions and the instructions will tell you how to install PowerShellCore in your operating system. And again, what PowerShellCore does is it allows you to use the same commands across multiple computers and operating systems. So you don't have to learn a bunch of new stuff. You don't have to remember a bunch of stuff. But again, in this video, I'm gonna give you the fundamentals so you can go and do this in any language you want team. Any language. All right. So select your operating system, install PowerShellCore, then come back and go grab this thing over here and hit control T and you're gonna type in visual studio code. And the URL for visual studio code is code.visualstudio.com. Go in here, select your operating system, download and install visual studio code. And you will be ready to follow along team. So let's get to it. So we're gonna hit alt F4 to close out that. And we're gonna hit the windows key. I'm gonna type PWSH. And as you can see, we got PowerShell right there. We'll just run PowerShell where it is. I'm gonna hit the control key and hold that down and I'm gonna scroll up to make this bigger. So you guys could see what's going on. And now we're inside of PowerShell. Now what's gonna happen if you're on a different system, it isn't gonna look exactly like this. So if I do a CD in a tilde key and the tilde key is right underneath your escape key and we get that tilde by holding shift, hitting the tilde key. And this is how we get this squiggly thing here. It's called a tilde team. And we hit enter. And this is gonna take us to our home directory. In windows, this means home directory. If you're on another system, this will mean home directory too. If you're using PowerShell, right? So again, you can use the same commands across all systems and you'll get pretty much the same results, like 90, 95% of the time or something like that. But I'm gonna go back to my D drive. So I'm gonna go CD, D, Ford slash, the real Casadero to put me in the real Casadero folder. Then I'm gonna clear all this stuff so we got a fresh screen and we can get started. Now let's say we want to make a new HTML project. Say, let's just say for instance, we wanna build a new website every day because we wanna practice. We wanna practice, we wanna get good at this stuff. Now, one way we can do this is we can say, all right, the first thing we're gonna need is, we're gonna need a sandbox. So we're gonna do a MK, D-I-R, and we're gonna call this the sandbox. This is gonna make a new directory called the sandbox. And the sandbox is where we go to play. It's where we go to do things and experiment. So let's go jump in our sandbox. So we'll do change directory and we'll type in the and then we'll just hit T and we can tap through all of the files in this folder that start with the because those are the only three letters we type when we set this thing up, right? So we go boom, right? And it shows us that. But there's nothing else in here. So this is all it shows us when we hit tab multiple times. We can hit enter, now we're inside of the sandbox folder and it tells us right here, this is where we are. And on your system, it will tell you pretty much the same thing. If you're on Mac or Linux, it'll tell you in a different kind of way, but you should be able to look at this and understand it. All right team, so we're inside of the sandbox folder. Now let's say we wanna make a basic HTML application. This is what we would do. We would need a few files. We would need an index file. So we would do a new dash item and we go index.html. Then we would need a CSS file to style all this stuff up. So we go style.css. And we can name these files anything we want as long as. So check it out. The index.html, this tells the web server that whenever somebody tries to navigate to our root folder, show them this index file. Show them an index of all the stuff we want them to see. Right, that's all that this file right here is doing. This style.css is used to control the look, feel, layout, color, whatever of our index.html. And then we wanna make a JEP, what we'll make. We'll call it code.js. In this file, what it does, this will be the logic for our program and we can use this code.js to grab and manipulate things from our index.html. We can go into our index.html. We can change styles, we can add styles, we can remove styles, we can remove items, we can add new items. We can do all kinds of crazy stuff. Now we're not gonna get deep into JavaScript in this video. But if you're interested in learning just a little bit more, right? They're not jumping into the deep end right away. You can check out the code 365startuplab.com. And there are introductory courses over there, introductory guides that are gonna introduce you to HTML, CSS, and JavaScript. And if you wanna support the channel, by all means, all you gotta do is sign up for the paid course on code 365startuplab. You have lifetime access to all of the stuff I produce and upload to the code 365startuplab. And you'll have access to additional perks and stuff as I figure out what those are gonna be. I got some ideas team, but check it out. If you have some ideas as to how the code 365startuplab can be super awesome and benefit you, leave some comments below. And if there's other stuff you want me to talk about, if there's other stuff you wanna learn, leave some comments below team and we will work on building those things for you. And when I say we, I'm not talking about like a team of people that are around me, I'm talking about me and you team. We can do this and we can do it together. All right, so check it out. We wanna create these three files, index, style, and code. So we hit enter and boom, it makes these three files. Now we wanna organize our code cause we don't wanna be all over the place. So what we can do is we can do, we can make a couple more directors. We'll do a MK, DIR, and we'll do a CSS. We'll put a comma in there, CSS, comma, and then we'll put a JS folder, boom. So now we got these two folders. So we do a DRR, we got all this stuff here. And we want to move this code file into our JS folder. So we'll say move item, code.js into CSS. Boom, and now it is gone. If we do a DIR, it has moved. And I moved it into the wrong folder. So if we do a DRR, CSS, right? It's in the wrong folder. Now check this out. We can move this from here back to here. Notice what folder we're in, right? We're in our CSS folder, right? Well, we're in our sandbox folder. We looked at the CSS folder, but we know where this code file is. It's in the CSS folder. So we can do a move item, CSS, code. And then we can move that into JS. Boom. And now that file has been moved from here into here. So if we do a DRR, CSS, it's empty. But if we do a DRR, JS, it has this code file in it. So let's do a DRR again to see everything that's in this directory. Now we want to move this style.css into this CSS folder. So we'll go move item, style.css. We'll move this into the CSS folder. And so when you're dealing with directory paths, what you want to do is you want to use the dot backslash, then the directory name, and then another backslash. That tells PowerShell, hey, we want to work with a particular folder. Now the way I'm typing this so fast, if I do a DRR again, let's say I want to look at this folder, I just type DRR, CSS, or CSS, and just hit tab. We can do it with just the C. We can type DRRC and hit tab, and it'll show us everything that starts with the C, and it will actually cycle through the subfolders in that folder too, or the sub files, all right? As you can see, it popped up this style.css. So that's just the way to type stuff real fast and get around real fast. So now we have this sort of, we have this basic layout going on here, team. So what we're going to do is we're going to open this directory in Visual Studio Code, and that's super simple. We go code dot, and this command right here says, hey, Windows, hey, Linux, hey, whoever, right? Open up Visual Studio Code, and open it to open this directory, this directory that we're in, the current directory, that's what this dot stands for, of sandbox, open that up in Visual Studio Code too. So we can see all the files in there, and we can start working, right? So we'll hit enter here. This is going to open Visual Studio Code. I'm just going to make this full screen team, and I'm going to do a Control Plus to make this a little bigger. Control W to close that intro window, and if we go right here to index, you can see that this is empty. So what we're going to do is we're going to add some basic HTML, and then I'm going to show you how to style it, all right team? So here we go, and then you know, actually, we're going to add some JavaScript too, just to give you a feel for what JavaScript does, right? And it's not going to be super in-depth, there's going to be some basic stuff to just get you started. So we're going to add an exclamation point, and because we're in Visual Studio Code, when we add the exclamation point, and we hit tab, it gives us a basic template. At the very top, we're going to have our doc type, this tells the web browser, hey, this is a HTML document. So just know when you're reading this file, Mr. Web Browser, whoever you are, this is a HTML document. The primary language we're going to use here is in English, and inside of this head element is all of the metadata, all of the metadata, right? And so what goes in this head is just information about the website. So we're saying here, we're saying, hey, browser, we're going to use the character set of UTF-8, and UTF-8 is just, at its very basic level, is just a bunch of codes, like millions of them, and each of these codes correspond with a letter, number, or emoji for every language. Well, I don't know if it's for every language known to man, but all of the most commonly used languages. I mean, there's like, I don't know, it's probably like a million characters in there or something that we can use, all the emojis, the airplane, all that stuff. That's just telling the browser, like, hey, you're going to use this UTF-8 library to add characters and emojis and stuff that we specify we want inside of our document here. Right here, we have the metaname viewport. In this, right, this data, the browser reads this, it goes in here and it says, okay, what's this metadata? All right, we're going to use UTF-8, okay. Oh, we got a viewport. What's that viewport set to? And right here, we're saying, set that viewport to the width of the device. And what that means is that the content inside of our page is going to be scaled to the size of our browser window, and we're going to do that at a one-to-one scale. Now, we could go 0.5 and this will make everything smaller. We could go 0.2. This will make everything bigger, but this right here says, make it one-to-one. Don't, whatever the programmer has specified for this size to be, we're going to reposition that content and make it smaller or bigger depending on the size of the device. That's all that is. And then this right here, this is just some legacy stuff to deal with older versions of Internet Explorer. Now, right down here, we're going to call this, we're just going to say the real Casadero because that's who I am. And then we'll copy this control C and we'll go down here and we'll do a H2, H2 tab, and we're going to paste that right in there. And right here, we're going to put H1 and we're going to call this our new project. Bam, and we'll hit save. Now, in Visual Studio Code, this is one cool feature of Visual Studio Code and right now I'm going to get rid of my face so you can actually see what I'm about to point at. So if we go down here to the bottom of the screen, we got this little icon that says go live. Now you probably don't have this right now and you can get it super simple. This is another reason why I love Visual Studio Code. If we click over here on these boxes, click those boxes, they will bring up this sidebar right here and right here we can type something called live server. And it'll be the first thing that pops up and if we click that, we get this page and it tells us all about live server and what live server does. And then all we have to do is hit the install. Now I have uninstalled here because I already have it installed but you'll have installed. So you go install and when it's done, you are going to see this button pop up down here and what happens is when you click this button, it'll start a local web server and then it'll open your default web browser with your web page in it. And if we drag this off to the side and we go over here, as we edit this page and we change things and we save the file, the web server is going to refresh and show us what the new look and feel is. So all right, we're over here team. If we go underneath title, we can type a link. And actually let me do that again, control Z. So we'll type L-I-N-K and then we want to link to a CSS document. We want to link to the style sheet that's going to control how our page looks and feels. So we're just going to hit link to CSS and then we'll save that and we'll go over here to our files and we'll go to our style.css and now we can style this page. So the first thing we're going to do is we're going to grab that H1 and so this is saying, hey, select this elements and then inside of these curly brackets, we are going to add some attributes to these elements, right and this is just going to specify how we want this element to look. So right now we got our H1 and we want the background to be red. So we can go back B-A-C-K-G-R-O-N-D and we can set that background to red and save. Oh no, what's going on? Something is broken team. So let's go back here to our index.html. We got our H1, we got our H2 and actually I don't even want the H1 to background to be red. I want the H2 background to be red. So we'll save that and something's not right because this should be restyling. Let's try to refresh this page real quick and this means that I've done something wrong. So let's take a look at our HTML, we got our style.css. So the problem is, is that I didn't specify what folder this is in. So if we do a dash, visual studio code, most of the time, it doesn't do this all the time. It'll show us, like there's some instances where maybe like you can't quite parse the code or something or it doesn't understand what we wrote. But in this case it's saying like, hey man, there's a couple folders that you can look in. So we'll go here and it's saying, hey, there's a file in this folder that you might be interested in using. So we'll click there, we'll hit save and now we've got this background of red on our h2 element. Now we can go back over here to our style and we can say make our text color white. So we'll make our text color white and we will, ah, what's going on here team? Is it doing it again? So there we go. So right here we've made our text color white and I think the problem was that I had this page selected and so when I saved the server couldn't upload it. So now we've got that white. Let's make this uppercase. So we can do a text transform, text dash transform uppercase, save and now we've got it uppercase. But yeah, I don't like these. I mean, this is cool, but I don't like these flourishes that we got going on here, right? So let's get rid of these. They're called serif. So if you scroll in here a bit, right? You see like on the T and on the H and all this, right? So we can, you'll see what I'm talking about team. So we can do font dash family and hit tab and we'll just go sans and we'll set that to sans serif. And now when we save, those things go away. Now let's center this inside of this red element. So we can do a text dash align K L I G N center. And then we will save and now it is centered inside of this red block. Now team, let's see, let's see, let's see. Let's add some padding, right? So we're going to do padding P A D D I N G and we'll go padding top and we'll add a five pixels. So we'll go padding top five pixels, save. Oh no, padding up. This is where I messed up. That's how it should look. Padding top save. Now we've got some padding at the top and then let's put some padding at the bottom. So if we hold down shift and alt and hit down while we're on this line right here, it will duplicate that line. And then here we can just put VO top padding bottom. Now we got a little space on the bottom team. So we got a pretty decent layout and then now let's style our H one. So what we'll do is I'm just going to take this and move it down and we don't have to, we can put this stuff anywhere we want. The deal with CSS is called cascading style sheets. So what happens is the styles are applied as this file is read. So let's say for instance, we did something like this. We came down here and we were like H two and then we went font size 32 pixels. Now you see how that font size change and let's make, instead of making it so big, let's make it smaller and make it 15. And this page, this page is actually zoomed in. So this isn't the actual size. If I click on this page and I do control zero, it'll put it back to the original size. I just zoomed in so you guys could see. So if I go to the original size, I can set this to 32 and it would be big enough. Save and maybe not big enough. So let's set this to 50, 50 save. All right. So team, what we're gonna do now, so check it out, right? We're down here, we're able to change the font size. So the cascading style sheet applies all of this CSS and then it gets down here and it goes, oh yeah. Right, this is what we want it to be. Now let's say for instance, we put in color and we've made the color blue. It's gonna change our text color to blue. Even though we set it up here to white, it made it white and then it saw this and it made it blue. And this is what jacks people up a lot of times in CSS is that you have to really wrap your head around how these styles work and what order you need to put stuff in or else it's gonna get super confusing. That's one of the things that really messes people up. So I would say really think about what it is you're trying to build and to look in the field and then just start working but always, but working increments and change one thing at a time whenever you have a mistake because if you start changing multiple things that once you're gonna get confusing and eventually you're just gonna be like, yo man, I wanna start all over. And that's a lot of work and a lot of time lost. You will have learned a bunch of stuff. You will be getting smarter as you go through this process but that thing you want to build it will never get built because you keep starting and then starting over, starting and then starting over team. So just keep that in mind. So I'm gonna put my cursor on this line right here. We don't have to select the whole thing. The cursor just has to be somewhere on the line. And if we hit control shift K, we can delete that line and then we hit save and it's back to normal. So what we're gonna do is we're gonna style our H1 right here. So we're just gonna do this. H1. And we're gonna apply a lot of the stuff we have up here. We want it to be sans serif. We want it to be centered. So we can do that, control C. We'll go down here, control V, paste those there. S. And now we've got this sans serif font and it's centered. And we've got a, let's see, how do we do this? Yep, there we go. So this means I'm just looking at this text and I'm seeing that like these first letters are uppercase. And that's because I typed it that way over here. But check this out, team. Check this out. We could go our new project, save. And everything's lowercase, but we can go back over here into the CSS. And we can say, hey, no, we want this to be capitalized. So we can go, all right, there we go. So we'll put a new line under here. We'll just hit control enter to make that new line. And actually, I feel like all this stuff over here is just over too far. So we'll grab these two and we'll do a shift tab to maybe, maybe, maybe it's me. Maybe it's maybe, I don't know. It just, something seems off, right? Like this, these up here or look, they're in one place and these down here, they're in another place. Let's see if we can back these up. Maybe I just have these in the wrong place. Let's try this. We'll go over here and just tab those over. So we'll bring this over here. And what, what were we on team? Oh, we want to capitalize this. So we can do a text dash transform and then we can go capitalize. Save and now it's going to produce that same effect we had before team. Now, because we got these capitalized like this, these lowercase letters, I would like to cap. I would like to do something like that over here. So what we can do team, right? If we go back here, let's add, let's add our own class for capitalization. So we can do a ID. Actually, let's do a class. So we'll do dot cap italize. And then we have our brackets. And what we're going to do is we are going to say increase the font size by 0.5 of whatever the parent font size is. So whatever, whatever has this class, we're just going to not double it. We're going to increase it by 50%. So these letters would be a little bigger when we apply this class. So we're going to say font size is equal to font dash. Font size is equal to, not equal to font size. I'm sorry guys, 1.5 Ems. There we go like this. And you see nothing, nothing has happened. Nothing's changed. What we're going to do is we're going to go back into our HTML. And this is kind of a convoluted way to go about this. I don't recommend doing it like this. There's probably better ways to do it. You can probably do it programmatically. But this is going to introduce you to some stuff that you can use in HTML and CSS. That's going to help you out in the future team. So we'll add a span in here. So we just put a space and we'll go span. And inside of this span, we're going to add a class. And inside of that class, we are going to put our, this is going to be our class name capitalized. So if you go back here, we go capitalized V. What we can do is we can take this T and we can put it inside of here. So we'll go control V. Oh geez, we just put T. And then we can do that over and over again. So I'm going to control B to get rid of this sidebar. And then I'm going to go view and toggle word wrap. And what's going to happen is as we type stuff across the screen, if it goes all the way to this margin, all the way to the end, it'll just automatically wrap so we can read it. It doesn't affect our code in any way. It's just so we can read what we wrote. So now what we're going to do is we're going to take this, we're going to take this span, we're going to go control C. And we're going to paste it right here where this R is V. And we're going to do the same thing for where this C is V. And let's see. So we've got span T. And then we've got span, this is going to be R. And then over here we'll have span C. All right. And I know this looks a little confusing. Let's see if we can make this look not confusing, I guess. We got T. So maybe if we do it like that. Nah, I'm just going to leave it team. I don't, it's just going to leave it. So right now, so check it out, right? So we got a bigger T, a bigger R and a bigger C. And that doesn't look right. I don't like the way it looks. I don't like the way it looks. So we're going to go V. And we're going to get rid of all this stuff. But that's how you can use span in order to, in order to select specific parts of some text. And that's how you do classes. So like we could go here and we can add that class of capitalized, capitalized to our H2. And let me go back here and make sure I spelled it right. So we'll just go grab this control C. And we'll go back over here. Control V, we'll go save. And it is not, let's go 2.5, 2, save. And now you can see this doubles, this increases that size. One point, I think 1.5 is what it was already set to because this element is a H2 element. But anyway, team, anyway. And when I say that because it's a H2 element, so the standard size, like if we go down here we put a paragraph and we put a, let's just add some bum text. So we'll go lorm and then we'll add, let's just add 30 words. So we go lorm, lorem 30. And this is just filler text. We just placeholder text. So if we add a class to this P of capitalized, so we'll go class equals capitalized, save. It becomes bigger and it's about the same size as this, which means that the H2, the browser styles the H2 at this size and we can reset all this stuff to default if we want, but we're not gonna dig. We're not gonna dig into that right now, team. We'll just leave it like it is. But we are gonna remove this capitalized class just so we have our paragraph set a certain way. So this is a new project. We've got our new project and then we've got a name right here and actually another thing I wanna do is let's set the width on our H2. So we'll go W-I-D-T-H, W-I-D-T-H. And we're gonna set our width to about 300 pixels and see how that looks, save. And now it's all moved back to the side. So what we'll do is we will move this to the center so we can go position, absolute, A-B, salute. And we are gonna go right 50%. And now this moves to the right, but it's taken out of the flow of the document. So everything starts to get kind of cattywampus because we said, hey, team, we wanna position this absolute and so it removes it from the flow of the document and then this paragraph sorta just slips up behind it, team. But what we're gonna do, and notice, this isn't all the way in the center. I want this to be centered. So what happens is it moved over so it is to, we wanna move it to the center of the screen but the browser is reading this element, this H2 element and is saying, right, move it but put the end of it in the center of the screen. And so we want it all the way centered. What we can do is we can do a transform, translate, and we can move that 50%, so 50%. And what we're saying is like, hey, this right here says move this to the right so it is at 50% of whatever the viewport is. So when we resize this screen, our box is gonna move so it's at the, it takes up, not takes up but it is positioned, the end of it is positioned at 50% of the width of the browser, which in our case is, which changes as the browser resizes. So I'm gonna move this back over here and by adding this translate, we're saying, hey, take this whole thing and then move it over 50% of itself. So instead of putting the end right here, we're gonna move it over another 50% of this, the width of this element and that should center it on the page. So if we hit S, and so we'll go back over here to Visual Studio Code, hit Control S. Now it moves to the center and our paragraph is still in the wrong places. It's all jacked up. So what we're gonna do is we're gonna move our paragraph down. So if we go down here and we've got our paragraph, we can say, position that paragraph and we're gonna put that, we're gonna position, absolute, absolute. Man, I can't spell. Position absolute and we're gonna say, from the top, let's move that down 150 pixels. Save and that isn't quite enough. Let's move it down 200 pixels, 200, save. And now our paragraph has been moved down and if we want that to be centered, we can do a text, dash, align and then center. So now we've got this super basic page right here. And so what we wanna do is when we create our project, we wanna have some basic scaffolding here. Now what I'm gonna do, another thing we're gonna do is we're gonna add a button because we wanna put some JavaScript up in here. So down here we'll go B-U-T-T-O-N tab and then our button is gonna be click, me, woohoo. All right, save. And now we've got this button that says click me. Let's go back over into our CSS and let's go down here. We're gonna go button, B-U-T-T-O-N tab, not tab, but our opening and closing brackets. And then we're gonna do the same thing, position absolute, right transform, translate, control C. We'll paste that in here. And then we are gonna move this down from the top, control C and control V. And we're gonna make this like 220, 220, save. And now our button moves over and it moves down from the top of the screen, but not enough, not enough, position absolute. Actually, if you go back up here, we got top position absolute, right, 50. Oh, we don't have a semicolon there, save. And it's still not far enough, so let's go 300. So we go 300, save. And now our button is here. And we can style this button too. So we'll go font-size is equal to, let's go 1.5 EMS, save. That makes that a little bigger. And then we can change the color of it. So we will go color, white. This is gonna change the text color. And then let's change the background, background color. We're gonna make that background color. We'll set that to red, save. Actually, no, we don't want it set to red. Background dash, C-O-L-O-R. We're gonna set this to green. We'll set it to green, yellow, save. Oh, man, what's going on here? Background color, let's get rid of this color right there, team. All right, so now we got this green. Ah, that green doesn't look good. It looks terrible, looks terrible. G-R-E-N, let's use this green, save. All right, that's a little better. Now what we're gonna do is let's add some padding around this button so it looks a little better. So we're gonna go padding, top, 10 pixels. And actually what we can do is we can just do padding and then we're gonna say at the top we want 10 pixels. And then on the, at the top and the bottom we want 10 pixels and on the left and the right let's add 20 pixels. Save, adding, oh, we need a colon here, save. And now our button gets a little bigger. We can do, we can make this all cap so we can do a text dash transform and we'll go uppercase, save. All right, so now we've got this and let's round these borders, right? So we'll go border, none, save. So we remove the border but now we're gonna round it out. So we're gonna go border dash radius and we will do, I think it's 20 pixels to make it rounded like that. Or we could do, if we wanna try to make it completely round, we could do 100 but it's gonna come out as a, not 100 pixels but 100%. Oh no, that's no good, that's no good. Let's see, let's see, let's see, let's see. Let's go, let's try 30 pixels, 30 px, save. All right, so that's a decent looking button and I want some more space on the left and the right so instead of 20 pixels, let's make this 40 pixels, 40. Save and let's make the background of this button instead of green, we're gonna make it blue. Blue, B-L-U-E, save. So now we got this blue button and then let's go, let's see, what else do we wanna do? I think I wanna add a hover effect. So we'll add a hover effect. So we can go button H-O-V-E-R and we can say we want the background color, background, B-A-C-K-G-R-O background color to be red, R-E-D, save. And now when we hover over this button, it turns red and we can change the text too. So we could say we want the color to be blue. So now when we hover here, the background turns red and our text turns blue. Super, super simple stuff. Now what we're gonna do is we are going to use JavaScript to make something happen when we click this button. So what we'll do now, team, is we'll go over into our JavaScript and what we're gonna do is we're gonna get this button. So we're gonna do document.getElementById, not tag name, document.getElementById. And we're gonna call this button. Save, let's go back here and look at our style real quick. All right, so button, index. Where's our button at? Document, yep, document.getElementById, button.addEventListener, and then we're gonna go on click and we're gonna run a function. Well, we'll just say dark mode. And then down here, we're gonna make a function function dark mode and that function is going to we're gonna set the page background to, we're just gonna make it a different color when the buttons clicked. We're gonna do a document.body.style.backgroundColor and we're gonna set that equal to, let's see, 3e, 3e, 3e, so that's pound, 3e, 3e, 3e, and hold on, is equal to, oh, we gotta put this inside of quotation mark. So save, hmm, document.getElementById, on click dark mode, function dark mode. So let's refresh. What? All right, function, function dark. So we haven't called, so we call this function but only when this clicks. So document.getElementById, button.addEventListener, on click and then we wanna call the function dark mode. All right, so we got it. So right here, we're saying, hey, all right, go out and grab our document and get the element by ID. We're gonna use the ID name, which is button and button is right here. And so we're gonna add this eventListener and when this is clicked, we're gonna call this function dark mode and then it's gonna change the background color. So if we refresh this again and we click this, boom, it goes to dark mode. And we can also change the text to white so we can do document.body.style.color and we can make this equal to white. And this will change the text color to white when we click it. All right, team. So now that we've got this out of the way and we've seen a little bit, we've seen some HTML, we've seen some CSS and we've seen some JavaScript, we've got this basic sort of file and we know our JavaScript works because when we click this button, it works. So what we're gonna do is we're gonna close this out and we're gonna close, we'll save this and we'll close that out. We'll go back to our command line and now we have this whole project with index, with the index.html, we got our JavaScript, we'll get all this stuff. So you see, that's a lot of work we had to do just to get everything set up and to make sure everything works the way we want it to work. But we can put this in the script and have that script do the work for us, team. So that's what we're gonna do now. So let's do a dir and see what we got in this folder. So we're gonna make a new folder, mkdir, we're gonna call this example project and we're gonna move, so we do a dir, we're gonna move everything into the example project folder. So we can say move-item. We're gonna pipe that to where. So we're saying, hey, we're gonna move this item hold on, let's see. Move-item where name is not like example project. Move-item where name not it. Geez. Here, let's just, we'll do this one by one because I can't remember the command right now. So we're gonna move item CSS and JS and index. And we're gonna move those into the example project folder. Right, so we're saying, hey, move these items. CSS, comma, JS, comma, index.html. And actually, let's go, if we go back here, so we'll go JS tab and then we'll go back here, we'll go CSS tab. And now we hit enter. All of this stuff is gonna move if we do a dir. Now everything's in the example project folder. So right now let's make a script. So we're gonna go new. So we're gonna go code new project.ps1. And this is gonna open PowerShell and it's gonna open, I mean, it's gonna open Visual Studio Code, but it's gonna create this new PowerShell file called new project. So we just hit save and now this file is saved here. So if we do a dir, we see this new project here. And inside of here, we can just issue commands exactly like we did to PowerShell in order to create a new project. So the first thing we're gonna do, right, is in PowerShell, and this applies to all programming languages. They all have the same construct. So when we think of PowerShell or we think of Bash or any terminal application, they typically come with some sort of scripting language, which allows us to manipulate things. And we can manipulate them by just typing them like we did over here, or we can roll these all into a script and put those same commands in the script and have all that stuff done for us automatically, team. So in here, the first thing we wanna do, so we're gonna add a comment, we're gonna say, this program creates a starter template for a basic web application. All right, and the first thing we wanna do is we want to get a project template. Name from the user, from the user. Now, somebody, now typically what comments are used for is when we write some code, we put a comment in there to say what the code does in order to tell us, like if we're coming back later on in order to tell another programmer what exactly that block of code does. Now, somebody said, I can't remember I heard it, but somebody said something very cool, I think. They said, comments are not for telling you what the code does. They said the code is for telling the computer what the comment is trying to explain. So in this case, instead of saying this function or this block of code does this thing, we're just saying, hey, get the project from the user and then we're gonna write the code that tells the computer how to do that. So first, let's make this a little bigger so you guys can see, close this deal down here and we'll spread this out a little bit. All right, so this program creates a starter template for a basic web application, get project name from the user. So in order to do that, we are going to create a variable called project name and we are going to go read. Let me move my face so you guys can see a little better and I can make this full screen. So we'll go read, what is that? Project name, read host? Yeah, there we go. Read host and then we're gonna do a prompt and we're gonna say, what's the name of your project? Then down here, the name of the project from the user, then down here, we are going to make a DIR. So the next thing we need to do and you don't have to use comments like this. I'm just using them for example sake to explain what I'm doing and why I'm doing it. So we're going to make a new project folder. That's what the script is gonna do. Force, we're gonna make the project folder just like we did before. So we're gonna do a MKDIR and then we'll do project name and we add a comma and then we say project name dash CSS which means make that folder inside of whatever our project name folder is and then we're gonna do a project name dash JS, forge slash JS and that's gonna make all the directories we need for our application. Now what we're gonna do is we're gonna add some HTML because we're gonna use the HTML inside of our template in order to generate just some basic HTML starter stuff. All right so if we go here we go this is the starter HTML, starter HTML and then below that we'll just make a variable called HTML and we'll set that equal to, we'll put a couple quotation marks and then let's see let's go back control B let's open this folder, let's go up and the sandbox, what the heck is going on man? All right so I believe that I deleted the test folder by mistake but fortunately I still have the HTML that we typed out so we're gonna copy this control C and we're gonna go here control V and then we're gonna get rid of that quote and what we wanna do is we want to use the, we want to add the project name inside of our HTML so instead of having just like the straight up title what we do is we're just gonna grab this variable we're gonna put it in here and we're gonna concatenate so we've got this single quote here, there and we're saying add this variable to that and then we have this other single quote here and let's go down, we've got an error down here let's see what this is all about, go so we've got single quote, single quote here and that should end there plus plus and then we got this one here and then down here we've got two so we gotta delete that one right there and that is gonna, this is gonna be the markup that's added to our file when it's created now down here we're gonna do the same thing but we're gonna do that for CSS so we create a variable for CSS and we'll set that equal to single quotes well, let's go back, there we go well and then I'm gonna grab the CSS and we're just gonna copy that control C and grab that CSS and paste that in here we don't have to do anything special with the CSS now check this out, inside of let's see is equal to, there we go and then we'll get rid of this I don't know why I had the back tick there so we got CSS, now we just need JavaScript so we're gonna go dollar sign, JS equals single quotes and then we're gonna grab RJS and paste that in there so we'll go back here, let me grab that JS right there, control C and we'll paste that JavaScript right there and that should do it for that part and then now we're gonna say boom here we're gonna go add starter content to files and the first thing we're gonna do is we're gonna do add dash content and we are going to add our project name and so what we're doing is we're saying hey, for project name index for the file index.html which is in whatever project, whatever we named our project when we're prompted from the program we are going to take that HTML and we're gonna put it inside of that file and then we have these variables so whatever name that we give up here at the beginning that name is gonna show up here and it's gonna show up there and it's gonna be the name of our folder as well the name of our project folder now we'll go down and we'll do another add dash content and we'll do project name dash CSS forward slash that's the, I keep saying dash I'm sorry guys, these are forward slashes I'm using this is a dash, that's a dash this is a forward slash because it leans forward this is a backslash because it leans back all right so we got CSS forward slash style dot CSS and to that file we're gonna add our CSS and then here we've got add dash content, dollar sign, our project name forward slash JS forward slash code dot JS so we're saying we want to add this JS to our code dot JS file so we got our JS here, got our CSS here we got everything that we need right so right here this is where we're adding the content to those files so we can save here and then if we go back here and do a DRR, see there's nothing in this directory we can type new so let's say for instance we wanna build a real estate website we can type new project and I just type new P and then hit tab hit enter it's gonna ask us for the project name we could put, I don't know Sanford and Suns real estate so we got Sanford and Suns real estate and let's see DRR and so now we have this new, uh oh what did I do, I typed something wrong so we have this new folder right here Sanford and Suns real estate so if we type code Sanford and Suns real estate it opens an individual studio code and where'd it go, there we go so we will make this window big control W to get rid of that opening screen and then we'll hit go live and this will open up our browser window with our new file in there and so we've got Sanford so we've got everything we need and then what we can do is we can just go back to visual studio code and we can go into our index.html and anything that we wanna change we can just change or delete and then we have our style sheet and our CSS and we can just go in there, delete all this and start from scratch or whatever so but this is just to give you an idea of what's possible now let's say you make the same kind of site over and over and over again right or you use like a regular template file or we can go out to the internet and we can take a look around and we can find templates and also I will be adding some templates to the code 365 startup lab so when you sign up for code 365 startup lab membership which right now for 99 bucks you get lifetime membership so anything that I add to the code 365 startup lab or anything new that I do you will have access to it and I plan to build this into a huge thing so now is the time to hop on board team but I understand if you don't have the 99 bucks what you can do is you can sign up for the 20 bucks a month and as new content comes out you'll still have access to that content is just that it's gonna cost $20 a month that's it team but every dollar you give me goes to support me and my family and my little dog and my kids and the YouTube channel and everything team and because I just I love code so much and I see the future coming and I believe that code is gonna transform a lot of people's lives and not just in the sense that learning to code is gonna help you go out and get a job once you learn this stuff and you internalize it and you get good at it you will be able to build anything you want you can be on the internet and looking at a website and say hey this is pretty cool right you can and then you can go and you can build it and then you can share with the world and you may get some you may you may get some customers I mean that's the ultimate goal and if you share enough eventually you will get customers right and I'm speaking from experience I sell stickers online I sell these hats online I have these shirts online they're all over at rightcodedrinkcoffee.com if you want this hat or if you want a right code drink coffee sticker or if you want a right code drink coffee mug like this that's all over at rightcodedrinkcoffee.com and those things sell team I've sold I haven't sold quite as many mugs but I've sold a bunch of stickers and I've sold a few hats but again it all starts slow and a lot of people they don't they don't get started because they're afraid right this is too hard to learn I'm gonna have to spend extra time I'm gonna have to do whatever but here's the deal team if you start now and you start building and you share with people and you tell people hey this is what I know how to do eventually the customers will start to come and over time you can grow a very small thing into a very big thing this is how it all starts Bill Gates started out with Paul Allen and they were in a dorm room and they were like hey man right and it wasn't even it wasn't even windows back then when they first started the out there had just come out and these guys are like hey right we can write software for this thing and that's what they decided to do and as time went on they were like yo school isn't working we can't do both of these things so they dropped out of school and they started Microsoft and we know the story of that now we got Visual Studio Code we got Windows we got Azure we got all the multi billion billion billion dollar company and all the companies start that way Steve Jobs Steve Wozniak same thing and they didn't even they were working out of Steve Wozniak's apartment but they would go to Steve Jobs house and work out of the garage to test out all their motherboards and stuff but they started out small Steve Wozniak was just building these little motherboards in his apartment and then they built the computer and then they went to the Homebrew Computer Club and other people saw this computer and then people wanted to buy it and this is back in the early days when they were putting these things in wooden boxes and then at some point Steve was like hey man like you can really we can really sell computers they got investors and then boom game you know you know the story now we have the iPhone we have the iPod we have the iMac deal and Hewlett Packard the same thing Dell same thing I don't know about Google and YouTube and all this other stuff Larry Ellison from Oracle same thing John Paul DeJuria from Paul Mitchell and Petrone right I know you guys have probably heard of Petrone Tequila this guy right same thing he started out selling it was like hair care products out of the back of his car and he even got completely jacked up one time because they made this order in the order they made this huge order and the order was all wrong right and so they were out of money and they were struggling and then you know and they just kept going and kept pushing John John was going from Salon to Salon showing off these products that he had once they got the formula right and things were right and it's game over right that's all she wrote in millions of people do this all over the world every day you just start and there's and there's people out there they don't have huge humongous billion dollar companies but there's a lot of people who are running million dollar businesses writing code right they got tons of websites knit sites on the internet and I'll I'll give you guys an example right now so let's go back let's go back over to the to the desktop real quick so we're on the desktop and let's go over to Chrome and this guy what's his name to do to do to do we go entree entrepreneur on fire so I think I think we go EOP dot com no EOF EOF dot com no EO fire I'm sorry guys there we go all right so we go EO fire dot com and this so this this right here is John Lee Dumas John Lee Dumas I started listening to his podcast way back when he first started look this is his August income he shows income reports for every month he shows where the money comes from he shows where the money goes he shows all this stuff so we can go back and we can look so much money he's making in a month right just from just from his podcast now he had to go out and pay somebody to make the website he pays he pays people to do all this stuff but imagine you could go build you could go build a website just like this on your own and at the end of the day you know how to code and then you can go launch a podcast just like entrepreneur on fire and this is the podcast that got him started that that makes him that makes him all of this money all right he's got other stuff going on right now but if you go in and you look at his income reports he's got it broken down right most of his money comes from sponsorships he's got online course he's got some affiliate revenue over here a lot of money from the affiliate revenues and then he's got a journal that he actually sells called the I think it's called a freedom journal actually I bought it a long time ago I never used it I gave it to my wife and I was using the PDF version and then eventually I stopped but that's not what this is about this is about your ability to go out and build your own thing now some of you don't want to be on camera or you don't want people to hear your voice and that's cool there's there's nothing wrong with that you can go out and you can start a blog I'll show you a blog from if we go over to daringfireball.com so over here during fireball this is John Gruber and John Gruber and he came up with this syntax called markdown and he was using markdown because to write HTML is kind of it's kind of difficult like if we go back in here and we look and we look over here there's a lot of different stuff we got to write and especially we got to write H1 tags H2 tags P tag of all this stuff you can do this in markdown and write stuff really quick and so so what he did is he came over to syntax he wanted to use that would generate HTML really fast and then he wrote a script that would read that syntax and it would spit out HTML so literally the script so in markdown to make a H1 you use a hash symbol like this and then you'd say what you want to write now this is what this John came up with this idea he was like okay right so if I want to make a heading I just put a hash symbolizes type what I want and then he wrote the parser to read this stuff and it said hey if it's a if it's if this line of text if this line has a hash symbol at the beginning then what we're going to do is we're going to make that line in H1 and if it has two hash tags then we'll make it at H2 and if it has six hash tags we'll make it a paragraph or if it has no hash tags at all we'll make it a paragraph and so in understanding that you can create almost anything you want you can make any kind of application you want and it's not hard we just saw how to add content to a file using PowerShell there's a way there's commands inside of PowerShell where you can actually go and you can read content and that's super simple too like if we go back over here and just type clear and do D-I-R let's say for instance let's go into our Sanford & Sons folder so we're in our Sanford & Sons real estate folder and we want to see what's in this index.html we can do a get dash content clip and then hit enter and this hold on oh I forgot to enter the file name so we'll do a clear get dash content oh geez D-I-R alright we'll get the content from index.html so we get dash content index.html and then we'll pipe this to clip which means take all of the content from that file and put it on our clipboard now what we can do is we can do a start notepad this is going to open up notepad and check this out boom so if we can do this this means that we can read in this text and we can put it in there where we want we can write an application that'll get the content read the content and then spit out another file team that is it for this session if you have any comments questions anything just leave comments below and if you like this content subscribe to the channel so you can get more content just like this that is going to help you become the person you want to become so you can do the things you want to do and live the life you want to live and if you want to learn to code check out the code 365 startup lab where there's some free courses there but there is also some premium courses coming right now I'm working on the HTML section after that I'm going to go into CSS and then I'm going to go into JavaScript and these are all going to be deep dives showing you the most common the most common uses so in HTML right now we're going through the tags and I'm on the div section and I'll be uploading that in a few days and I'm also working on the absolutely 100% free ultimate web dev guide that you can use to put you on your journey the course is there for people who want to join the community of like-minded people who want to go out and write code for fun and profit and build their own things and do their own thing and live their own life do the things they want to do live the life they want to live and be the people they want to be team so if you want to join that community you want to support the channel support me, my little bitty dog and my children I would appreciate it team but if you can't no big deal because more content is coming to this channel right here thanks for hanging out with me team I look forward to seeing you in the next session ya dig