I have spent nearly the entire last decade of my life immersed into Tech with projects internships multiple computer science degrees and now a full-time software engineering job at a Silicon Valley company in this video I want to show you guys how I would learn frontend web development if I could start over today I'll show you the easiest ways to learn HTML CSS JavaScript reactjs with free resources projects for you to practice with and how to get even more advanced by using Ai and as a cherry on top I'll interview a Tech Salesforce software engineer to share his thoughts as well so just sit back relax like And subscribe and let's get started right away so first let's define web development broken down by HTML CSS and JavaScript and for a point of reference let's take the Subscribe button you see under this video the HTML is the barebone code that is written to create the button and the word subscribe on that button the CSS is all about the style how does the button actually look what color is it how big is it JavaScript is is if you click on the button what actually happens in that it'll trigger some Network calls to register you as a subscriber to this Channel and increase my subscriber count by one so the HTML is like a scale full structure JavaScript is like the muscles and actions CSS is the cool looking swag so now let's dive into HTML The Bare Bones I learned HTML when I was 12 years old back in 6th grade I created this cooking website that displayed many different dishes ingredients and recipes piece it was the ugliest website ever because I implemented literally just the HTML so there was no nice looking colors or anything like that it was just text of the words of the recipes that I copied over from a different website to actually learn HTML I encourage you to check out W3 schools so you can get Hands-On direct experience as you learn things like H1 H2 H3 line breaks and list comprehensions don't Focus too hard on trying to become a master at HTML in fact I don't think anyone actually Masters HTML but with enough time and practice you slowly pick it up think of it like this everyone learns the alphabet but you don't actually consider yourself a master it's just you have a tons of practice so it becomes second nature and as you continue forward learning CSS and JavaScript you get better at HTML because these Concepts compound upon each other next up we got CSS The Styling I learned this many many years after HTML when I was 18 years old freshman year of college I joined this club called bits of good in which they built websites for nonprofits I already knew HTML at a high level obviously from before but CSS was foreign to me and the funny thing is to this day after years of experience I would still consider CSS to be foreign to me no one likes CSS even senior Engineers struggle with it there are just so many rules and conditions it's nearly impossible to master and honestly I think of it like the periodic table unless you've memorized like the 200ish elements every time you work on a chemistry problem you look at the table same way every time I work on a CSS issue I look at stack Overflow to learn CSS you might want to actually try W3 schools once again but truly the only way I got better at it was by doing many many projects coding up some HTML opening up inspect element altering the style component and actually using that code it's all about hands-on experience and an even easier way to actually practice this is by using codepen.io this is a free coding sandbox in which it shows you that HTML CSS and JavaScript side by side by side so you can practice coding right then and there in real time codepen also has projects you can Fork kind of like GitHub cloning so you can get started right away just make sure not to plagiarize now let's talk about JavaScript and I specifically want to focus on reactjs which is a super popular front-end framework and I was actually forced to learn this when I was 19 years old at my second College internship I was tasked to create this dashboard in react JavaScript and I had Absolut absolutely no experience whatsoever in the language but I didn't know Java and python so I wasn't a total bum like I could read code and the way that I learned this is I had my company's code base on one screen and the application that was running on another screen I put a bunch of different breakpoints in the source tab of the inspect element and I would just walk through the workflows of the system I would log in Click a button type certain things and each interaction I could literally visualize the code operating as I was going through I learned important react JavaScript Concepts like State Management use State use effect functional versus class components I also learned how to properly style my code how to make indents how to name variables to meet company standards if you want to learn JavaScript I strongly recommend you check out cod. Tech Cody is a platform that offers bite-sized lessons for many different coding languages in this case we can take the basics of JavaScript it has many different modules and within each module it gives you lesson quiz and projects so you learn it and get hands-on experience plus if you're ever stuck on any parts of the project it has an AI assistant to help you out and walk you through it as if you have a tutor right there the best part is it's absolutely free to use however if you do want the premium features like unlimited AI queries use this code right here on the screen for 20% off at checkout now I want to offer you guys two project ideas so you can practice one beginner level one intermediate first the beginner Implement a BMI calculator BMI body mass index is a health metric which tells people how healthy they are based on their height and their weight the super simple task in which you ask a user to input their height and weight perform an internal calculation and then spew out a result just make sure your girlfriend doesn't test out your application in this case you start out with your HTML create text values on the screen and an input field for the users to put their height and weight then add some CSS into the mix by aligning the fields up and maybe changing up the font and color scheme then put in JavaScript code such that on change of the input Fields the new value vales are stored and a new BMI value is calculated and rendered for the users to see you can even add unit tests to your JavaScript functions if you're feeling nice with it but for an intermediate project create a Pomodoro project manager a Pomodoro is a project timer tool to track that a person works for 25 minutes then takes a break for 5 minutes this helps you stay productive and you can have multiple Pomodoro timers during a working session and you can have multiple sessions within a Pomo or project so you can see it's getting a little more complicated compared to the previous one so not only do you need to write HTML code to display a timer on the screen with the stop and start button and respective CSS to make it look nice but now the JavaScript code needs to be designed in such a way that it can communicate to the backend or the server and ultimately databases so we can actually store the sessions and projects accordingly you probably want to tag team this project with someone who knows backend and databases relatively well another really cool project idea that you can do is make your own personal website it's completely free and on top of that it allows you to experiment with software that you're not familiar with people like to do this to either experiment with industry standard popular Frameworks like bootstrap or they'll try experimenting with something that's not industry standard and relatively new like nextjs personal websites are cool because they allow you to go into greater detail about different projects that you've done and highlight things on your resume that you might not be able to do in one page personal websites are great because you can take projects you've done in the past add them to your website so it's kind of like a compounding effect you get the project of the website itself plus the other ones that you can just TCH on so now if you've mastered the basics of HTML CSS and JavaScript and are comfortable with creating these semi complex projects now let's speed up your development by using artificial intelligence GitHub co-pilot this is an extension you can attach onto VSS code that'll write code out for you based on the comments that you state for example if I comment function to add X and Y and then give the function header it'll actually code out the function for me and at scale with bigger projects this can actually save you many hours of work I actually think this is a better AI tool than chat GPT for developers because it's integrated into vs code as an extension not just some thirdparty application that you put your company code on and have tons of security risks only use this AI tool if you need to if you're on the job and you need to speedrun your development this tool will not help you learn and you just end up cheating yourself if you're a brand new beginner well that's about all I have in this video I really hope that it was Ben official and if you did make sure to hit the like button subscribe if you haven't already if you guys like this video you might be interested in this video right here about what software Engineers actually do