Complete Intro to Web Development, v3 Tools
Transcript from the "Tools" Lesson
>> 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: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: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: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: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: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: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:45] And we're gonna build this pyramid of knowledge that hopefully you can start building websites with.