Tools

[00:00:00]
>> I have a couple of recommendations for you, for your code editor I suggest Visual Studio code I think we over went over that a little bit. If you're learning to code it's just a really beginner friendly editor. Even if you don't intend on using it super long term, I'm gonna suggest you use it for this course because I will be doing everything in VS Code, and I will be showing you how to use VS Code.

[00:00:23]
And then later you can make a decision to try something else. I'll give you some alternatives here like Sublime WebStorm, Nova, Vim and Emacs. I'm gonna suggest if you don't already know how to use Vim and Emacs. Don't, do it. They're super hard. And you don't want to be learning two things at once.

[00:00:40]
I want you to focus on learning to code, and then later you can go learn something really difficult like them. And there's courses on front of masters that will teach us things like them as well. For the browser, I suggest that you use either Firefox or Google Chrome actually, I have Firefox up here at the moment but both of these work really really well.

[00:00:57]
Both of the developer tools are really great I would say that Google Chrome is probably more used in the industry today so if you're not comfortable. With either one of them it's probably a good one to get started with but, honestly they're both awesome and you should go back and forth between the two.

[00:01:11]
Because users of your website will be using both Chrome and Firefox and Safari and edge and all those various. Different browsers, so it's good for you to get familiar and see your website working across all the different web browsers. Well do a little bit in code pen throughout this course, It's just like a little editor that exists in the browser.

[00:01:34]
It's good for like examples. So definitely check that out. And then as far as like resources, you can go get answers for questions that you have. I'm gonna suggest MDN is probably the best place for like, how does these this bit of JavaScript or how does this HTML tag work?

[00:01:53]
It's kind of like the industry standard. CSS tricks is a great resource particularly for front end development kind of technologies. Everything on there is really high quality, it's vetted it's accurate. So I suggest that for video content if you wanna learn future things, I really can't say enough good things about front of masters.

[00:02:14]
And then if you're working with like a library or framework, you probably just wanna head directly to GitHub and get the documentation from the source. So, let's kind of give you a lay of the land of all the various different things that we're gonna talk about. So first of all, this is the intro to web dev there is a kind of beginner path here on front of masters.com.

[00:02:40]
So once you're done with my course, there's great courses from Jen on CSS and Kyle Simpson on JavaScript as well as Bianca. By the time that you watch this, these might be different courses. They're always shuffling in the new ones and putting great stuff on here. But this is a great kind of first path that one can take, like a beginning level mastery of JavaScript and all the front end technologies.

[00:03:06]
So definitely suggest following that learning path after you're done with this one. Today, you're gonna learn three different languages. We're gonna be learning HTML, CSS, and JavaScript. So let's start with what is HTML. HTML stands for HyperText Markup Language. You can think of it like the content on a page.

[00:03:25]
So like right now you're looking at my website that I made for you, right? You can think of it as like all of the text on here right. So it's none of the style it's not really how its laid out or anything like that it's not the color, it's not the font size it's not the margins and paddings that exist everywhere.

[00:03:44]
It's just the text right it's the structure, it's all of the content that you're gonna read from a website. Think of like if we were building a car together, you could think of the HTML as the raw materials that go into the car. It could be the doors, the frame, the structure, the steering wheel, like.

[00:04:03]
You can just like imagine like a neat pile, right? You have to like arrange all of those things into a car for them to be work. But you still need all the components, right? It's the components of the car and none of the color or the relationships or the engine or any of that kind of stuff, it's just the pieces of it.

[00:04:22]
So in order to have that style and have that ability to move the car you're still gonna need the CSS and the JavaScript. You're gonna need the kind of the blueprints of how it's put together as well as the engine, but the content is part of the HTML there.

[00:04:41]
CSS stands for Cascading Style Sheets. You can think of it as the style of a website. It's how the website looks and feels and those kind of things. So the fact that this header is purple, or that this background has dots in it, or that this has like a nice little purple underline underneath it.

[00:05:01]
All of those little finishing touches is all the style right? It's the cascading style sheets that's the CSS right? So they separate these different things so that you can make one type of header, right? So you can see how all these, what is CSS, what is JavaScript. They all have this nice underline underneath them, right?

[00:05:22]
So I can just structure all of my content however I want, and then I make one rule. And then the same rule applies to every single one of these. It separates my styling from my content, which makes my styling reusable. And we'll get into that once we're in the CSS section.

[00:05:38]
But I wanted to explain to you why they separate these things, and why they don't just shove everything together. There's not just one language you have to learn today, there's three. So again, continuing our car analogy, the CSS would be like where the doors go, what color the car is what color the interior is, is it left or right drive?

[00:05:56]
Like where do we put the steering wheel? Those kinds of things. It's how the car looks and feels. But even still with just HTML and CSS, our car doesn't go yet right? We still need something that makes the car go, we still need the sort of interactivity with the car.

[00:06:16]
You can think of that as the JavaScript, you can have a total and complete valid website with just HTML and CSS. You really could just stop there. And the first thing that came to my head, you can go to example.com, which literally is just an example domain. There's nothing on this page other than just like, this is an example domain, there's no JavaScript on this page, right?

[00:06:37]
There's also nothing to interact with right? This website doesn't really do very much. But you can have valid websites with just HTML and CSS. It would be useful for something like a blog or just something with just inert content that doesn't do anything, it's just you're gonna go you're gonna read a bunch of stuff and then you're done.

[00:07:00]
That's a totally valid thing. Like you could have a car without an engine, right? You would just roll it places I suppose, right? But that is technically possible. So, we don't wanna do that, right? We wanna have interactive websites. We wanna build things that you can press a button and something happens, or you wanna have something like Netflix where you can press something.

[00:07:23]
You can go to a different page. You can. Watch videos and things like that, for that kind of interactivity you're gonna need JavaScript. So what is JavaScript it's a programming language, right? HTML and CSS are actually not technically programming languages in the sense that they don't do anything you just say like here's the content.

[00:07:42]
You can do like a Word DOC, right? A Word DOC doesn't necessarily do anything unto itself, right? But has a bunch of text. Has a bunch of bolding and font choices and colors. You're gonna need something that's gonna actually do something to that. So JavaScript is the programming language that we're going to use today.

[00:07:59]
There are many programming languages like C++, Python, Go, all those kinds of languages. But we're choosing JavaScript specifically for the purpose that your browsers, Firefox and Chrome and Safari Knows how to run JavaScript. It's the only language that can run inside of a browser. So those other languages are great, but they're just not a good fit what we're trying to do today.

[00:08:23]
But what I will tell you is that you're going to learn a bunch of skills today that if you decide later that I really want to write Python, What you learned in JavaScript will make learning Python very easy. It's kind of like if you learn Spanish, it makes learning Italian very easy because they share a lot of the same concepts.

[00:08:39]
This is another good analogy that I thought of. If you have HTML and CSS, it's like a non-interactive website. It is a non-interactive website like pages in a book, right? You can open a book, you can get a lot of knowledge out of a book. But, you can't like touch the book, right?

[00:08:55]
There's no interactivity to a book other than just turning the pages and reading the content in the book. If you want to have some sort of interactivity, you need to have something like a tablet computer, right? Which makes it interactive that you can touch things, things can move across the page.

[00:09:07]
You can have animations and all that kind of stuff. That sort of going from a book to an interactive tablet experience. You can think of like, that's the sort of interactivity that JavaScript can add to a page. So that's a relatively simplistic take. They're meant to be metaphors that hopefully kind of bridge understanding of what JavaScript, CSS and HTML are for.

[00:09:30]
There's lots of nuance here that I'm failing to cover with these analogies, but hopefully it helps you kind of understand where we're going. So that's the order that we're gonna learn things in today, we're gonna learn HTML, then we're gonna learn CSS and then we're gonna learn JavaScript.

[00:09:45]
And we're gonna build this pyramid of knowledge that hopefully you can start building websites with.