Introduction

[00:00:00]
>> Welcome to the Complete Intro to Web Dev version 3. Today, we're going to learn to write websites with HTML, CSS, and JavaScript. So the first thing I want you to do just right now is to hop on to this particular course website that you're looking here. We're gonna spend all of our time today, or most of our time today anyway, in this website.

[00:00:21]
So you can either just go directly to this URL that we have here, or you can just type bit.ly/webdev-v3, and that'll take you directly to the site as well, okay? So just to kind of orient you on how this website works, we have all these various different sections and there's lessons within the sections.

[00:00:46]
And so if I click on the introduction here, you can see I have Introduction and Welcome to the Class. So this is the section and this is the lesson that we're in. So if you get lost or if you hop ahead into a different lesson or something like that, you can always look at the header to see where I am in the course.

[00:01:04]
Okay, so this, as I said, is the third version of intro to web dev. You do not have to have taken previous versions of web devs. You don't have to take v2 or v1. This is a total revision of it. We just try and keep it fresh, so I come back every so often, make sure that it has the most accurate information, the most up-to-date practices, all those kinds of things.

[00:01:25]
So I wrote this course to help people go from not knowing how to code, wanting to create websites to having some sort of idea so that they can express it and share that on the Internet. So you do not need to know how to code to start this course.

[00:01:40]
It's gonna be helpful if you know about computers, right? You need to know where the power button is. You need to know how to open a browser, those sorts of things. If that kind of stuff is unfamiliar to you, there is a awesome course already available to you for free called Internet Fundamentals.

[00:01:59]
And I think I have a link to it down here to Internet Fundamentals. I'll just show you that here really quick. You can just hop in, don't even have to create an account. You can just hop in, start watching videos right away. So thanks, Frontend Masters, for creating that.

[00:02:11]
It's taught by the awesome instructor, Jen Kramer, another Frontend Masters instructor, okay? So throughout the course of this workshop course, we're going to go from learning HTML to CSS to JavaScript. And I'll kinda talk about what those are here in just a second. And we're gonna go from not knowing how to code to eventually creating a Wordle clone.

[00:02:36]
And if you're not familiar with Wordle, it's that app that's sold to the New York Times for several millions of dollars. So by the end of this class, you will have the skills to create a million dollar app. I'm not saying that you're going to. That's not a promise [LAUGH] but you could, right?

[00:02:56]
So, again, who is this course for? Hopefully it's for you. I tried to create it for you. If you have those kind of Internet fundamental skills, you should be good to go already. This class is gonna teach you HTML, CSS, and JavaScript, which are the three necessary components to creating a website from scratch.

[00:03:17]
It'll be helpful if you've done something like Java or C++ or something like that before, but not wholly necessary. We'll learn the fundamentals of coding here together. This website is free forever, so it's open source. You can share this website with your friends. The videos will be free forever, so you can also share these with your friends on Frontend Masters.

[00:03:37]
Next thing I wanted to talk about is the setup, the things that you will need to get started with this workshop. You'll need a laptop of some variety. This would be really hard to do on a mobile phone. So anything that has MacOS or Windows 10 or above, Windows 11 would be fine as well.

[00:03:55]
Or something like Ubuntu, Linux, or something like that. 8 gigs of RAM would get you through this course perfectly, but you could probably do most of this on 4, maybe even 2 gigs of RAM, you'd probably be okay with all this. None of this should be very computationally difficult.

[00:04:11]
So I'll be using Visual Studio Code throughout the course of this. I will be giving you kind of tips and tricks of how to use Visual Studio Code. I was on the VS Code team, so I'm a little bit biased about that. So you can use other editors, but I'll be showing you the Visual Studio Code.

[00:04:31]
I'm just gonna suggest that you install Visual Studio Code for this course. And then I just wanted to kind of answer some questions. People always ask me like, what's your font, what's your theme, those kind of things. So I use a font called MonoLisa. It's not free, but be sure to enable ligatures, and we'll talk about this a ton throughout the course.

[00:04:53]
But it'll take an equal sign and an equal sign, they're next to each other, and it'll combine them into a longer equal sign. So you'll have these special glyphs that make it easier to read and for code. Otherwise, Dank Mono is a cool font. Microsoft's Cascadia Code, that's another good font to use for your coding editor.

[00:05:16]
And specifically, Cascadia Code is free, so that's nice. For my theme, I use Dark+. That's the default VS Code theme. I just always liked it, though I do hop into Sarah Drasner's Night Owl from time to time. For the terminal, I use MacOS's built-in terminal. If I'm on Windows, I use Windows terminal.

[00:05:35]
That's a great one as well. And then for the icons that you see in my VS Code, it's called vscode-icons. I left a little link in there for that as well. Cool, so where to file issues? If I've made a mistake in here or if you found a spelling error, this website is open source.

[00:05:54]
You can click here, and you can see I already have a issue open here. So you can just click New Issue, file the issue, and then we can go fix it. Because, again, I am only human, right? I make lots of spelling mistakes and grammar mistakes in here, so feel free to do that.

[00:06:15]
And then cool, so let me give you a bit of an introduction. So hopefully that's a bit about you and why you wanna be here and what you're gonna learn. I'll tell you about a little bit who I am and hopefully why you should trust me with your education of learning how to code.

[00:06:29]
So my name is Brian Holt. I am a product manager at a company called Stripe, which is a financial tech company. If you've ever checked out on something like DoorDash or Lyft or any sort of Shopify kind of website like Allbirds or something like that. All of that, all of the payment infrastructure and all that is run by Stripe, and I get to work on that.

[00:06:50]
I am the product manager of the developer tools for Stripe. So I work on the Visual Studio Code extension, the CLI, the SDKs, all sorts of stuff like that. Basically, I build tools that developers then use to build other things. I've been doing that for some years. I did that for Visual Studio Code.

[00:07:09]
I did it for Microsoft Azure. And then before that, I was a JavaScript developer for a decade at companies like LinkedIn, Netflix, Reddit, some other smaller startups. So I've been doing this for a while. I've written a lot of code, and I still write a lot of code.

[00:07:25]
Between my day job where I still write some code as a product manager to writing stuff at night just for fun. So how I learned to code, I learned to code when I was ten. My older brother, who was a engineering student at the time, would make me write code before he would let me play video games.

[00:07:45]
Which at the time, ten-year-old Brian was very upset about this. While that was very frustrating at the time and still screw you, Ben, it set me up for success for today to be a coder and product manager and all kind of stuff. So while I did learn to code at ten, it's totally fine if you are not that age, right?

[00:08:06]
You don't have to be a ten-year-old to have a career in software development. I've hired 50-year-old junior developers before, right? So you can do it at any age. So this industry is welcoming to people of all sizes and shapes I guess is what I'm trying to say. So, again, the skills here are very learnable for anyone that has the perseverance to go through and try and learn them.

[00:08:33]
And even if you're not trying to be a software developer, that's totally fine. I think coding contributes to literally any industry that you wanna be in, right? I've seen lawyers and accountants use code to make their jobs better, easier, faster, all those sorts of things. So when I'm not writing Frontend Masters courses or working, I live in Seattle.

[00:08:58]
I like to travel. I like to hang out with my wife and kid, have a cute little dog. You will see lots of pictures of Luna throughout this entire course, and I'm not sorry about that. I like to exercise. I do a lot of Peloton. And then I also play Overwatch and Dota very poorly, usually get my butt kicked almost every time.

[00:09:16]
Well, let's rephrase it, every time. As well as I really like scotch, I like IPAs, I like coffee, those sorts of things. Look at that handsome gentleman. Feel free to catch up with me on social media. I'll say that I'm not the best at responding to DMs, so just be aware of that.

[00:09:41]
But you'll usually find me on Twitter. That's usually where I spend most of my time. But I also have LinkedIn, GitHub. And if you're on Peloton, we can race and you can probably win there as well. One last request, if you have a GitHub account, just star this repo.

[00:09:55]
You can click there, and you click on the star thing. I haven't even starred my own repo, starred, just like that. [LAUGH] That helps and makes it more discoverable for other people, and it also just strokes my fragile ego, so please help me. Okay, so some expectations that I wanna kinda level set before we start hopping into everything.

[00:10:22]
This course is really difficult. If you've never written code before, this is gonna be hard. There's some hard projects in this, and I push you pretty hard in this course. It's not intended to be easy, it's intended to be useful. So it's okay to get frustrated. It's okay to hit the wall.

[00:10:42]
All these feelings are valid. So don't get too down on yourself. The enemy here is discouragement. If you get discouraged or burned out or something like that, that is where you lose, right, and you'll fall off. So it's more important for you to say, I understand that this is hard, I understand this is difficult, and have a lot of patience for yourself.

[00:11:04]
But the most important thing that you can take away from this section is don't compare yourself to others, right? It's really easy to look over at someone that you know that writes code or other people on the Internet and say, this person learned to code in 15 minutes flat.

[00:11:18]
And it was so easy for them and they can do all these amazing things, and I can't do it. I'm not that, and to get really, really down on yourself. So you have a perfect knowledge of your own shortcomings and you have an imperfect understanding of the accomplishments of others.

[00:11:32]
Therefore, whenever you go to compare yourself to others, you're going to be extremely critical of everything because you know all of your downfalls. And you're going to be overly rosy and optimistic about what someone else is doing because you just see them, you're like, that person is amazing and I'm not.

[00:11:48]
Yeah, you will always underestimate yourself and over-attribute progress to others. So you're on a very personal journey of learning to code, learning all these different skills. So just have a lot of patience for yourself and know that you don't know how hard it was for other people as well.

[00:12:07]
And kind of along those lines, don't play the should game like, I should get this or I should not be struggling like this, should not have all these problems. There's no cosmic law of should, right? There's no one out there saying, Brian, he should have got this by now.

[00:12:22]
He's never gonna get it now, right? So don't play the should game either. It's always a trap that new people fall into that just discourages them. The most comparable thing that I have ever done to this is learn a foreign language. So I spent a couple years in Italy.

[00:12:35]
I learned Italian, learned to read Italian, learned to speak Italian. And believe me, the first day I got to Italy, I really couldn't even order a coffee at a coffee shop, right? I could probably just point, I was like, cafe, right, and that would be it. And except I probably would've just said coffee, right, cuz I didn't know what the word for cafe was, right?

[00:12:55]
And it's just hard and it's super discouraging and you just feel like you're never gonna get it, right? You feel like it shouldn't be this hard. And I'll tell you that it took me months before I can actually have a decent conversation with someone or to order at a restaurant or something like that.

[00:13:09]
And it took me yet months longer to be able to have a political discussion or something that has some depth to it. And so this is kinda my point to you is it's kinda the same muscles that you exercise when you're learning to code. It really is learning to take an idea in your head and express it in a different language.

[00:13:25]
And in this case, we're expressing it in JavaScript instead of expressing it in another foreign tongue. So this is just difficult. It's learning to rethink of how you express yourself. So if you've ever learned too in Spanish or French or Mandarin or something like that, this can feel comparable to that, that it's just practice.

[00:13:44]
Lots of practice, lots of work, lots of not getting discouraged, and lots of pushing through difficult situations. But I'm here to tell you that if you do it, that you can, right? If you push through it, you can get jobs to places like Microsoft and Netflix and LinkedIn.

[00:14:02]
I did it, and I think you can, too.