How to Learn Front End Web Development
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
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
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.