The Beginner's Guide To Frontend Development 2022

Key Takeaways

some years ago it was quite common to call yourself a web developer and actually when you browse jobs that's the title you would see most often however as the web has become increasingly more sophisticated many developers have decided to specialize you are either a front-end developer or you are a back-end developer in this video we are going to explore the differences between front-end development and back-end development and at that point if you decide yeah front-end development is something i'm interested in we're also going to explore what specific technologies you need to know where to learn them and how long you should expect to spend in order to become a competent proficient and maybe even hirable web developer if that's your thing my name is alex i'm a self-taught developer and i really like to teach the things i wish i knew so that's what this is let's get into it so what is front-end development in a nutshell front-end development is the process of planning and coding and sometimes designing everything the user touches and interacts with on a website front-end developers code up components like buttons drop-downs text forms and alerts and then assemble them to create what we typically call a layout a front end developer will also set fonts padding between components so things feel breathable and easy to read as well as other bits to make the website more presentable sometimes front end developers also design these components and layouts but but not always oftentimes as a developer you will work with a designer such as a ui designer and turn their designs into an interactive website more realistically as a newer front-end developer or someone who is self-taught you will rely heavily on inspiration from the web as i mentioned the web has become increasingly sophisticated over the years a big reason for that is just the myriad of devices your website needs to run on and a big challenge is making sure that when a user opens the website they can easily find the information or take the action they want to no matter what device they're using be that a tablet a laptop or even a tv in some cases to achieve this you typically use a combination of html and css which are two technologies we'll talk a bit more about in a second another very important part of front-end web development is interactivity for example now you've got the button on the page exactly where you want it what is going to happen when the user presses it and so we express these logical instructions using code and the coding language we use on the web is javascript you know this is the beginner's guide but the most advanced web developers will code up components that use a combination of html css and javascript to build things you might not have imagined like what about a component or an interface to pick your seats at the theater or what about an interface to preview options on a brand new mini cooper these type of things make the web and the experience better for users which of course you can feel good about but they also directly generate revenue for businesses and this is one of the reasons why web developers are paid so well in fact the average salary for a front-end web developer in america is just shy of 80k so in summary we lay out the content using technologies known as html and css and then we add interactive behavior to our websites using javascript now we'll actually dissect these in more detail in the upcoming section of this video but before we dive head first into the magical world of front-end web development i feel like you should understand a little bit about back-end development and how it differs if front-end development is everything the user touches and interacts with back-end development is everything the user does not see a bedrock of back-end development is storing and retrieving data from a centralized database you can imagine how if your website is viewed by a bunch of different people there needs to be something in common so that they can share messages or see the same data represented you need a back end for that another big proponent of back-end development is accepting and processing data for example when i upload this youtube video i will use youtube's front-end interface to write the title so a friends and developer will have created that title inputs i will also use the front-end interface to choose the thumbnail and to actually select and upload the file a front-end developer did all of this but the moment i press upload we need to go to a back end when i press upload there will be some front-end code that starts to upload this file to a back-end and when the back-end receives it that's where the processing happens another example of processing might be when you pay or you buy something online again the interface where you view all of your shopping cart items and change the quantity this happens on the front end you can enter your credit card using your frontline interface too when the time comes to pay that goes to the back end for more advanced processing and crew including things like credit card verification i have to admit that that distinction between the front end and the back end or knowing where the front end ends and the back end begins can be quite difficult to grok don't worry if it's not crystal clear in your head right now the really cool thing about learning web development in general is that you start to see the web in a totally different way and i wouldn't be surprised if you browse the web after this video and you start to notice a little bit where the front end and back end come into play so which is right for you both front end and back end development are lucrative specializations with lots of interesting challenges to solve i suppose then it really depends on which you prefer and where you think your opportunities lie the honest truth is you can always switch later because even though front hand and back end are specializations meaning some things don't transfer they are both ultimately based on coding figuring out problems and research and these are the kind of skills that will transfer with you if you ever decide to take the other half of the stack for a walk if you're excited about front-end development or maybe just curious we're now going to break down the three core skills that you need in order to become a successful front-end developer which are html and css javascript and javascript web frameworks let's start with html and css which you already know a little bit about for better or for worse we can't just speak english at our computers and be like hey put the button there and so we use a special text file format or language known as html to tell the web browser what content we want on the page here we tell the browser what content to include on the page which is the text hello world as well as what type of content it is h1 means a header size one one means biggest and then there's all the way down to five which are just smaller for like subheadings and things obviously this doesn't look that good it's quite boring and even a little bit ugly that's where css comes in so html lets you put the content on the page and then we use css to make it pretty for example here we select the header one that we defined with our html and when you're starting out it's really a case of setting values color red font sans fonts size 100 pixels please i totally understand if this is the first time you're looking at stuff like this it probably seems a bit bewildering but the funny thing to me is that if you were in a graphical interface like photoshop picking the color and the font and the size you wouldn't think twice about it like it's quite intuitive web development sometimes seems a bit scary because we represent things in the text formats you spend a lot of time on the keyboard that said i would not make the mistake of thinking that css is easy because to be honest setting colors and fonts and things are quite basic and you can have some really fun results very early on because of it but css gets a bit more challenging and puzzling when you get into the realm of like positioning things on the page and as i mentioned previously this ever long challenge of making sure that your website looks how you expect it to across different devices to be clear html and css are independent and different i group them together as one skill here because they're essentially married it's practically unheard of to use one without the other you certainly wouldn't use css without html because the whole point of css is to style your html right together they help you code up and lay out your components and create really wonderful experiences now if you want to understand this and master this my advice is to not just like read and watch tutorials and things like that because that's a little bit like reading books about tennis and expecting to get better at the sports you really need your hands on the racket to get better or in the case of front-end development your keyboard at scrimba we've actually created a course orientated around teaching you the fundamentals but also building projects along the way our free html and css course will guide you to build a google.com clone a digital business card a space exploration site and a birthday gift site you can share somebody on their birthday and a way to sort of show off your friends and developer skills earlier rather than later it's completely free so why not check it out there's a link in the description but for this video next up let's look at javascript earlier you saw how to put a header with html right so we use that h1 tag well you can also create a button and put the text that you want on the button between these two like button elements but say a user clicks that button what do you want to happen just for demonstration purposes we show an alert message that says booyah but maybe now you can imagine that with these fundamental building blocks which are html css and javascript you can build virtually anything you can imagine for example say that button said dark mode and when you clicked it you wrote some javascript code to change all of the colors on your website to be a dark color maybe you write some other javascript code that makes that button now say light mode and depending on what mode the website's in it will kind of invert the colors right another example could be an image carousel or a slideshow i guess you could say but even that would be just scratching the surface some people in the tech community will get upset if you call html and css programming and the reason why is because with html and css you essentially declare what you want to happen but javascript on the other hand is very much about programming and the biggest challenge is learning how to think like a programmer well programming is kind of like coming up with those instructions and thinking like a programmer often means thinking through edge cases and how you will respond to them in your applications and once you've thought about them you represent your thought process as a set of logical instructions using code and just to reiterate in the world of the web the coding language we use is javascript and it is incredibly prevalent and incredibly powerful because as it happens even though on the web you have to use javascript like javascript is the only coding language that really works in the web browser for websites over the years it's become possible to use javascript in places where you have more options like the back end or for building games or for coding iot devices all of this to say in 2022 javascript is one of the best languages you can learn because it can be transferred to other disciplines or specializations should you ever wish to try at scrimba we really like to focus on frontline development because if you're not sure where to begin it's honestly a great starting point and once you've learned html and css using our free course you can also check out our seven hour learn javascript for free course which also guides you to build several projects in order to make sure you remember what you're learning and not just watch roger federer play tennis hoping to become better typically i would expect you to learn things in the order i've presented them because you can't really like use css unless you know html right because css styles html you can't really make much use of javascript unless you know html and css because javascript adds interactivity to an existing html and css website the same can be said for our last subject which is javascript web frameworks this is a more intermediate topic and it really doesn't make sense to learn them until you have a more solid grasp of javascript that said i want to help you understand what they are and why they exist because they come up quite often at the beginning of most front-end web developers journeys in a nutshell javascript web frameworks are pre-written code modules that help you build common features of websites more quickly and more efficiently you don't strictly need a framework no one does if you imagine the most complex web apps like you know facebook or google docs or something like that and they probably do use the framework but they didn't need to the reason why teams almost every team in fact use a franchise framework is because it saves time it's efficient and if you're working as part of a team when you use a framework it's natural to do things in the way of the framework and that results in consistent code that everybody can more easily understand and contribute to the most popular frontend web frameworks today in 2022 are react angular and vue learning one of them is all you need to do and it's a big plus as for which to learn we at scrimba recommend react but the honest truth is you can pick any of them and be very successful you can achieve the exact same thing with react angular of you or be it in a slightly different way as it happens a lot of the core concepts behind these web frameworks like the problem they solve and in some cases the way they solve them will transfer so if you learn you know let's let's just use a different example if you learn vue.js today but in six nine months you realize over jobs in my area and mostly uh hiring for react developers it will take you a few weeks only to learn react and get up to speed compared to maybe a month and a half or so when you're first starting out and learning your first framework as for how long it takes to become a successful web developer it is quite hard to say as we're all starting from different places and have different proclivities and existing skills and frankly we're all aiming for slightly different places some of us want to be freelancers others want to be junior front-end developers and the timeline can vary but i am very fortunate to host the scrimba podcast where i've spoken to more than 30 recently hired self-taught developers summer freelancers but mostly junior developers and the number i've arrived at is about two to three hours a day for six to nine months and there will always be outliers who do it incredibly quickly like frederick is one example he genuinely went from not knowing any code to being hired within three months using scrimba which was insanely impressive but i've also spoken with students like kristoff who it took over a year because they were learning to code alongside a full-time job i actually have a whole video all about that which you can check out here and there's also an article of the same subject in the description if you prefer to read so there we have it with html css and javascript and a little bit later a javascript web framework you can build some incredible websites for your own purposes maybe you want to start a side project as a freelancer maybe you want to make some money on the side or as a junior developer which represents a job it's a job title for people new to the development industry where you need some knowledge to get in the door as i say probably six to nine months of experience but once you're there you're presented with so many opportunities to learn and grow while also getting paid well and having a high degree of autonomy friends and web development is truly special for the opportunities it affords but lest we forget this is the work you can do every day day in and day out bringing things to life inventing things bringing things that people imagine to reality and in many cases solving really interesting problems i've been alex booker thank you for watching make sure you subscribe and i'll see you next time [Music] you