If you have even thought about getting into any type of software development, you have looked into front end development at some point or another. This is most likely because really all you need to get started is a browser and some form of text editor. You don't even need a fancy computer. In fact, whatever computer you have in your house right now will do just fine, and if you do not have one readily available, just about any laptop you can buy around $200-$300 will be sufficient. Also, front end development has a lower barrier to entry. You can literally get started right now with writing HTML and CSS. This provides a nice confidence boost for those who are still unsure if they are "capable" of learning how to code. This coupled with the fact that you can use just about any computer to get started, really makes front end development a beginner friendly field to get into. However, like any other software development career field, there is still A LOT to learn, it's just easier to get started with. That being said, let's get into HOW to go about actually learning front end development.
First, I want you to understand that there really is no "correct" path to learning something like this. If you ask 10 developers how they got started and what path they took, you will probably get 10 different answers. However, there is an great resource created by the brilliant minds over at roadmap.sh that gives an in-depth roadmap for learning front end development and many other disciplines as well. Now, because I don't think I could create a roadmap or learning path even remotely close to what they have been able to create, so instead, I want to talk more about the macro stuff. In doing that, my hope is that this will provide a clear strategy to follow for you own learning.
Getting the Basics
When you get started learning anything, you want to get some basics down first. For this, I started out on YouTube. I wanted to know what front end development actually was, and how it could be done at its most basic level. This is where you will learn HTML and CSS. I also used Udemy for their long form courses. You can enroll in a front-end development course or web design course where the instructor will go over most of everything you need to know for that given subject. I always suggest watching one tutorial (preferrably hands on) then building something on your own. Even if you don't know what to build, you can re-build whatever you built with the tutorial, just do it without the tutorial. This type of practice requires you to think about what it is you're doing and why which helps you retain the information better in the long run. Once you have built two or three of your own projects, I would go back to the roadmap mentioned earlier and see if you have a good handle on everything listed. Once you feel like you have a good handle on the basics of web development and using HTML and CSS, it's time to move on the JavaScript.
Level Up with JavaScript
Getting started with JavaScript for some people is the exact opposite of whatever confidence boost HTML and CSS may have provided. It's totally normal to feel overwhelmed when you first get started with JavaScript. I still recommend the same strategy though, except this time, I recommend going straight to Udemy or FreeCodeCamp and go through a full JavaScript course. The reason for this is you will need more than just a few tutorials. You will need to learn the theory and logic behind DOM manipulation, as well as programming fundamentals like variables, constants, different data types, functions, objects, classes, etc. Learning all of this through YouTube videos can get pretty overwhelming, but if you don't want to spend the money on a Udemy course, I highly suggest starting a video series with someone like Traversy Media where you can learn most of what you need to know from one person and one video series. Jumping around from instructor to instructor and even between different series can be a waste of time simply due to overlapping instruction.
Build, Build, and Build Some More
Once you have a decent understanding of how HTML, CSS, and JS work, the possibilities to what you can build are already just about endless. This is especially true if you have also gotten familiar with connecting to APIs and receiving data from them. Now, you want to start building. You can start by taking the static sites you made using just HTML and CSS, and add JS to them. Add a contact form, add event listeners to different elements to make the page do something interesting like trigger CSS animations or something else. Make sure that you keep copies of the before and after though to show the transformation. Then, take on something a bit bigger like creating the clone of some famous landing page. More often than not, big companies will offer provide access to their API in order to programmatically request information from their servers. Use this as a tool for learning more about front end development. Also, make sure you continue to perfect the art of writing code. There are many great books like Clean Code by Robert C. Martin that cover this topic in intense detail, so make sure that while you are learning how to build things that you are also learning how to build them correctly.
In Version Control We Trust
Now that you have a few projects under your belt, you will want to get these up on GitHub. Learning some form of version control like git is absolutely paramount for anyone looking to turn these new skills into a career. I have never heard of any software team that didn't use some sort of version control system for every one of their projects/applications. GitHub not only serves as an amazing tool for version control, but in most cases, it actually can serve as a sort of portfolio. In my opinion, it's always better to have an actual portfolio site, but having a GitHub account full of repos for projects you have completely is definitely the next best thing. So, all the projects you have created so far, even the before and afters, take those and put them into your new GitHub account. Something good to remember here is that we all started somewhere, so don't be embarrassed of the code you wrote when you first started. Projects from your early days will show potential future employers where you started and how far you've come.
All the Frameworks
Getting comfortable with JavaScript is a huge step, so once you get to that point pat yourself on the back and have some fun with it before moving on to modern frameworks because trying to pick one at first can be pretty overwhelming. The main three options here are Angular, Vue, and React. Doing a quick Google search about which one is the best will produce some very differing opinions. I personally went with React because I knew I eventually wanted to create mobile applications as well, so learning React would also help when I got ready to learn React Native. Do some research though and pick the best option for you. Remember, you can always go back and learn another if you decide you like another framework better. Then follow the same strategy, take a course, watch a YouTube series, follow along with the tutorial projects, then build your own. You can even start by taking your previously built projects and rebuilding them with React. The projects that you used APIs with would also be great for learning more about Redux as well as React Hooks.
What's Next?
When you can confidently build somewhat complex web applications using HTML, CSS, JS, and a modern framework, you can actually go ahead and start the process of looking for a job. Some may think this is too fast, but at this point you have all the skills needed to be hired on as a junior developer. The only problem is that most companies want even their junior developers to have a couple years of experience. So, while you look for a job, don't stop learning. Throw some new stuff into the mix whenever you start feeling comfortable again. Learn BootstrapCSS or TailwindCSS, try building full application clones of complex web apps like Netflix or Uber Eats, or even go back into your old projects and refactor things to make the code cleaner and DRY-er. Make sure to check back with that roadmap that I mentioned earlier as well to find new things to expand your toolbox with. Also, in order to fill the experience requirement, start freelancing. Build web sites for your friends and/or family. Even if you don't actually get paid, that can be considered experience because you are building a product for a client with user needs and design requests. Also, it's typically very easy to get local businesses to pay you $100-$500 for a simple static website. The more applications you build like this, the better your 'experience' looks, and the easier it will be for you to get a job.