 Hi there, my friend and friends. There's a lot of advice articles and videos out there that give you roadmaps on how to become a web developer. And they just look really far into the future a lot of the time. And often the very beginning steps where you're currently at and where you're trying to learn, those are the ones that are just like brushed over. So this video is for you if you're just starting to get into web development, or maybe you're just interested in it and you want to start learning it. I want to look at the first steps you should be doing when you want to learn HTML, CSS, and JavaScript and sort of some of the tools that you need and all of that for your very early days and that first like couple of weeks and that's it from there. There's so many different directions you can go in. We're not going to worry about those. Now with that out of the way, what are the different things you need to get started and hopefully one of them that you're currently on right now or currently have is a computer. If you have something that can open the browser and connect to the internet, it's enough but having a keyboard a physical keyboard is a really important thing it's going to make your life so much easier. There are videos out there where people show you how you can get code editors working on your phone or on tablets and there's options for that as well. I don't want to say that you cannot do it. I just want to say that it will be a lot more work if you're going that way and there's sort of like an extra friction that will be taking place. And of course, I know you can get like physical keyboards on tablets now so that could definitely help out as well, especially early on. But if you do have a laptop sitting around or a cheap computer, whatever it is or you know, if you can go and find something that's sort of the one investment that would really help pay off and really help you out in your journey. Now I mentioned a browser obviously if you're getting into web development, you will need a browser to connect on whether it's Chrome, Firefox, Safari, any of them will work Chrome is the most popular one that people usually develop in but I'd recommend getting all of them so you can test across the different the different browsers you're going to be using but don't worry too much about testing it for early days. So just a browser and of course something to write the code in which is an editor. You hear things like ID throwing around don't worry about that you just need something that's we call them text editors basically but they're a bit fancier. And the most popular one is VS code. You might hear of other ones like sublime text notepad plus plus even Adam. If you hear about Adam, it's an older one. There's lots of videos and tutorials that exist from the older days where that was the most popular one but it's dead now and VS code is completely taken over the market. It's by far the most popular. And you will also see mentions of notepad plus plus around. I wouldn't really recommend it. VS code is just it's a the standard you see it used everywhere. It's really easy to customize. There's tons of plugins you can really make it your own. It's very feature rich but it's also really easy to get started with. So you can just get started with it and start going and then add on to it slowly over time to make it more of your own thing. Notepad plus plus is a bit more limited in what it can do. And just for me I don't see the point in starting with that I would just go straight into VS code. You will not be overwhelmed by it at the beginning and it's very easy to learn and get used to now one thing I've never done is actually made a video on getting started with VS code though and if that is something you would be interested in please leave a comment down below and let me know. Now having an editor is great now but obviously we have an editor for a purpose we're going to be writing a few different languages and the three languages that you are going to have to learn and maybe you're in the process of learning those now are HTML CSS and JavaScript. They are each responsible for a different thing. So HTML is hypertext markup language and this is the content that is on the page or adding the content with HTML there's CSS which is our cascading style sheets which is what changes what the content looks like. So this is just like when you go into Word and you select something and then you change the color and the font size and the font family and all of those different things it's just we're doing it with code instead of using a menu to select it and sort of go through the different options that are in Word or whatever your word processor Google docs anything like that we're doing it with code instead and then the third language is JavaScript which is for interactivity and basically it's if you can't do it with HTML and CSS then JavaScript comes in and you can think of like an interactive thing that you see on almost every single website is a hamburger menu so if you're on mobile and you have like the button you can push and often on desktop sites these days you see them too and you push the button in the menu opens and there's a little X and you click that in the menu closes that interactivity is created using JavaScript. Now my recommendation for learning these languages is generally you start with HTML because without the content you have nothing you can't do anything with CSS or JavaScript if you have no HTML. So getting started there and learning the very basics of it is obviously the best place to start but very quickly you're probably going to get into CSS and start changing what things look like because if not your pages are terribly boring looking so you start changing things up and adding some styles with your CSS and then eventually you start adding that interactivity with JavaScript and the one thing I'll say is people always ask me like I've been doing CSS for four months now can I start doing JavaScript yes of course you can you do not need to be an expert at any of these to be able to start learning the next one in fact you will not be a master of any of them in three months or six months or even a year you're always going to be learning and always adding on to your skills of all of these languages and so what I would recommend is start getting comfortable with one and learn the syntax of it because that is one of the complicated things when you get into it is we have three different languages that all are completely different from one another the way we write them is different the way they work is different what they do is different so it can feel like a lot and it definitely is but you know you're not going to learn all of HTML and then go over to CSS there's like a hundred and twenty elements or something like that in HTML and then to learn what all of them do that's never going to happen there's only like twenty elements as far as I'm concerned at the very beginning you really need to know actually if you're curious what those are I've done a video that looks at those as well I'll link to that down at the bottom and remind you at the end of this video about that one though yeah you start off with like okay I'm comfortable I've made like I can put in some paragraphs I can make my list now let's start using some CSS and learn a little bit about that how can I change the colors of these how can I change my fonts how can I do a simple little layout that looks a little bit nicer and then once you've gone through that enough times and you're comfortable getting some CSS on there there's no harm in adding a touch of JavaScript in there at least like poking into a little bit seeing what it's about maybe you go like you know what I'm not ready for this and I want to focus more on this other thing but just having an idea of what it is is really good to have because you're going to be writing a lot of it eventually so don't hold back and feel like you need to be a master of one of them before you can move on to the next because you're just going to be losing time because it really well it's not going to give you like some benefit of being so much more comfortable there because even if you're learning JavaScript you're going to be using CSS at the same time anyway so you're going to be continuing to learn on that side of things so that's why it's comfortable enough understanding the syntax understanding the basics of it and then you're probably okay to start at least sprinkling in a little bit of the new stuff on some other things as well now one mistake that I see beginners making is that they feel like because we're making websites that they're going to be like designing the page as they're learning the code but the problem is designing something and coding something or two very different skill sets so if you're not a designer it can be really hard to design something if you're trying to design what you're learning to code that's just like this whole extra layer of friction because you're splitting your mind into like two different things and if you're learning design and you're learning code it's really hard to do and I wouldn't recommend it I would code up things where you have a design and you're just trying to recreate it because if you get into front-end development you're not going to be the designer someone else is the designer and you're taking those designs and bringing them to life and making them work in the browser now some people are a jack of all trades and they're both the designer and they're the developer and that's fine but most people are one or the other now as far as finding things to actually you know where can you find designs that you can practice your skills on there's two websites that I often recommend there is I code this as well as front-end mentor those are sites where you get designs there's like challenges and stuff like that for like here's like a design you can try and build if you also want to just go you can go to like dribble.com or be hands and find like these are people sharing their designers who are sharing their designs and you can just try and make those a lot of the stuff people share there they're trying to show off so there's more advanced things so if you're further along in your journey that could be good but in the early days you probably want to keep it a little bit simpler so you're not overwhelming yourself so either I code this or front-end mentor I think are nice places to start now another thing that I see beginners doing is feeling like they're not making any progress and sometimes maybe this is from those those videos where it's giving you this long range forecast or road map not a forecast but a long range road map or there's other ones where it's like how I got a job in tech after four months and stuff like that like for most people that's not going to happen and it's a long range thing there's lots of things that you need to be learning might be doing this part time on the side you know there's people changing careers they're just doing it in evenings they're trying to learn development or they're at school and they're doing this but whatever it is like it's not this two or three month thing and all of a sudden you're an expert and sometimes people come and talk to me in there like it's been four months I've been doing this and I feel like I'm still a beginner you've only been doing it for four months of course you're still beginner that's really really normal like how many things could you become an expert at in four months no matter how much time you're putting into it it's not realistic now if you're doing 40 hours a week of practice and studying and all of that stuff maybe after four months you're starting to be able to get really comfortable with what you're doing at a beginner level and maybe you could start looking for junior level jobs different people are going to go with different speeds and I'm not saying it's impossible but even if you've been doing it for four months and you feel like you're a beginner what you should do is actually look at where you started and look at all the different things that you have learned because I guarantee you it's a lot more than you might realize and it's easy to look at your watching videos where people are like coding along perfectly in these tutorials which are all pre-recorded and all the mistakes are edited out I know because I make these all the time it's not realistic people are googling things all the time you're looking for things running into bugs that you can't fix and it takes a long time for to find that typo right everybody makes those mistakes including advanced developers so first of all you might be doing better than you actually think you are and the other thing though is like it is a long game and it's going to take you a long time to get good at something because it takes a long time to get good at anything you have to put in a lot of work to develop a skill and on that note I was talking about practice a little bit you need to practice a lot watching tutorials watching videos on YouTube reading articles that's great that's how you learn about things you you you learn new things by doing that you don't learn how to do those things just like you're not going to learn how to skateboard by watching other people skateboard you might know okay that's how I push and all of those things that's how look I've watched him do and all the a whole bunch of times I sort of understand the different steps of doing that or you're watching YouTube videos where it's showing you all the things in slow motion I know it you go to do it you're not going to be able to do it the first try or the second try or even the hundredth try it like you're eventually maybe you're going to start being able to do your all year whatever so like don't just consume content you need to practice practice practice constantly be building things and if you don't know what to build try those sites that I recommended earlier they're linked down below as well and maybe find a passion project find something that you would find fun to build and maybe you don't even know how to do all the different things but that all even gives you your roadmap on the new the next skills that you need to learn because that's something that everybody's always after is the roadmap what's the next thing I need to learn build things and as you're building them you're going to run into things you don't know and that tells you what you need to learn next because everybody's journey and everybody's path along the way is going to be different once you get past those very beginner stages of I learned the basics of HTML I learned the basics of CSS and I learned the basics of JavaScript and even when you're learning each one will be different for everybody so you know try and build stuff and then to accomplish that you will know exactly what you need to learn next another thing I'm going to give us a suggestion for learning is practicing is the best thing you can ever do but another thing if you are just consuming some content is to reinforce what you've learned by taking notes after your learning session is done nobody does this or not enough people do it this is really a nice way to reinforce everything you just write like a bullet list of the different things you've done but explain it a little bit don't be like I learned about JavaScript loops or I learned what an HTML tag was or whatever like explain it in your notes does not need to be this in-depth article that's thousands of words put down 50 words at the end of the day just to explain each thing that you've learned and this is really just going to help reinforce everything you're doing because you're putting it into your own words it might sound really silly but if you've never tried it please give it a chance for like a week straight and I promise you you're going to see some more progress than you were making before and you're going to start understanding things at a much deeper level than you were before as well and the other thing that I'm going to suggest also here is do not rely just on following YouTube videos like you're watching now or reading articles but you need to develop the skill of asking questions and there's different places you can ask questions there's Google there's memes out there that like a professional developer is just a professional Googler and it's pretty true because we often know that things are possible but we don't know how to do them I'm aware that I can do that now I just have to find like the exact syntax on how that thing works and I'm going to look that up and find out what that is because there's way too much to know as a developer we can't know it all and memorize all of it you're going to build up a lot of muscle memory and you are going to memorize things just by doing them over and over and over again but there's a lot of things that you're just going to be like I know that's possible because I saw that video or read it in an article let me refresh my mind on actually how to do it so getting good at Googling is a really good skill and these days as well you have AI tools that can help out as well AI is not coming to steal the jobs but it's a very nice tool that can help us because if you run into something that you don't understand maybe you watch a video of mine and read an article and there's an explanation in there that you don't understand you can ask the AI to clarify it for you in simple terms and sometimes they do really good jobs you can also ask it to like if you have code that's not working you can give it the code that's not working and ask it to fix it and it can often will find the mistake that's in your code and be able to fix it for you and sometimes give you a note on even what was wrong with it but I will caution on the AI front as well is they're not very good at code especially not right now anyway and they will sometimes give you code that doesn't work or that has mistakes in it and other things so do be careful with that especially with CSS it doesn't understand the contexts enough so if you're getting into CSS and there's things there like if you made a typo or if you got a semicolon somewhere it will find that it might give you some suggestions but do not rely on AI as a code writing tool use it a lot like you would use Google for little snippets and getting like help along the way and getting being able to prompt AI properly is a skill on its own so learning how to use the AI effectively and learning the limitations of it could be useful but maybe early on you don't want to touch it just because you might not recognize when it makes mistakes in the code and a better place might be to actually ask real people that can help you out with things because there's lots of very helpful people it's one of the best things about the front end community and world is how people are willing to share and help each other out and you might be wondering where can I get help and I actually have a Discord community that's all about helping out other front end developers you can go there just to ask questions you can also meet other people there's a whole bunch of different channels and stuff just to chat and there's areas to ask questions on front end and back end development on UI and UX and other stuff like that as well so if you're curious about that or want to join in even if you're just going to lurk around but please do say hi if you do join but the link for that is just in the description as well and so if you are early on in your journey and if you're still watching this video now I'm assuming you are I just want to say don't worry about going really fast I know I mentioned this before but just take your time and what you're learning now you might spend two weeks and feel like it's going really slowly or you're not getting it or whatever it is it will get there for you and I promise you you're going to be making faster progress than you think you actually are and then as a quick reminder there was that video that I mentioned earlier about the 20 essential tags that you should probably know right now if you're just getting started with HTML so if you'd like to watch that video it is right here for your viewing pleasure and with that I would like to thank my enablers of awesome TTLLD Andrew James Enrico, Michael, Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome