Self-taught Web Developer Checklist 2022

Key Takeaways

in this video i'm going to present you with a comprehensive checklist of all the things you need to know if you want to become a junior web developer in 2022 this is going to be both a pragmatic and a realistic list based on the things i've learned as a self-taught developer but more importantly what i've learned speaking with newly hired developers recruiters and hiring managers on the scrimba podcast we're going to reverse engineer some of those things and present you with a list of front-end skills and for each of them things that you really should know to be competitive in today's market as well as some things that would be nice to know things that will help you stand out a little bit more and compete with even the most tenacious computer science graduates have a blood presenting this kind of checklist can be a little bit tricky because not all junior developer jobs are made equal i know this because my guest on the podcast john mckay joined a 24-month employee training program which requires no programming knowledge just some aptitude and potential tony moreno another guest went in depth with html and css and was actually recruited by activision to develop email templates which doesn't require javascript much less a front-end framework as i will suggest as part of this checklist later in the video karan is someone who probably checks most items in this list but still maybe not all this is an ambitious list intended to help you measure your ability against enthusiastic computer science graduates with whom you might be competing with for the best most well-paid junior jobs i also hope you'll leave with some ideas about what to learn next and a better overview of the frontend web developer landscape in 2022 i'm here to encourage you to shoot for the moon because even if you fall a bit short you'll still end up among the stars finally if this checklist just sounds ridiculous for a junior level role then remember it's the job market not me not scrimber it's the job market that commonly asks junior developers for two or three years experience this number is kind of like it's an approximate measure of someone's experience for convenience i made a video all about that here suffice it to say in this video we'll be dissecting the specific things you need to know in my opinion if you can check off all or even mostly items in this checklist you can become a competitive applicant irrespective of how long it took you to get to this point it could have been two or three years and that's fine but it could also be one year it could be five suffice it to say i think you'll find some sanity in this list because it outlines the things you specifically need to know and gives you ideas about things you can learn to be even more competitive in order to land your dream work scenario so grab a hard drink and let's get into it hello by the way my name is alex and i'm the host of the scrimba podcast and a community manager here at scrimba here is the checklist you can actually find a link in the description and peruse it at your leisure but in this video i'm going to provide some additional context and bonus information so you understand exactly why these things are present in the list and how they can help you let's start with html the html specification which describes everything you could possibly want to know about html is thousands and thousands of scrolls long but don't think for one second you need to know everything knowing roughly what's possible and where to find more information is key that said there are some things you should really know like most of the fundamental elements and some nuances like the difference between an image element and a picture element you should also have a good understanding of semantic elements like header nav section aside those kind of things obviously i don't want to list like every single html element and their attributes because that would be insane so what i would suggest is something of a kind of litmus test and i'm thinking about forms like if you can create a form and understand all the input types from text to file where to use text area over input type text validation attributes and how form submissions work with the method attributes i think it's fair to say you probably also understand h1 h2 h3 paragraph strong all those kind of things thinking a little bit outside of the box one thing you should really know if you want to be a web developer in 2022 is metadata i'm talking about things like linking to an external style sheet but i'm also referring to defining a fav icon which is what appears in the tab when you open a page defining a viewport and an understanding of what metadata social networks look for when they generate preview cards because when you think about it every company hopes that their website will be shared far and wide and then represented in the best light so understanding sort of how to make the website look good on different platforms is important another thing was kind of related it's not quite metadata but i feel like you should have at least installed an analytic software like google analytics or google analytics via google tag manager at least once just to get a feeling for how it all works and how to make sure that the tracking code appears on every single page because again in a professional environment almost every company wants to measure the traffic and the interactions on their pages alright let's talk about some of the things that you don't strictly need to know but would certainly help you stand out and be even more competitive starting with svgs to be honest you probably really should understand you know what a vector graphic is and how it differs from a raster graphic but it would be especially nice if you understood how svgs work under the hood how the structured language works and how to maybe define some basic svgs like rectangles and lines and things like that i don't think you will ever be expected to create your own svgs by hand actually another cool thing you could do is get a bit of experience like sporting svgs from tours like adobe illustrator and importing them from icon libraries and things like that the the reasoning behind understanding how they work a little bit under the hood is because you might just need to tweak something um or understand maybe why the svg isn't responding to your positioning css something we'll talk about a little bit later just peeling it one layer back to understand would be super cool something else that would be super cool is having a kind of solid understanding of how the structure of your html will impact screen readers and in turn accessibility this won't just make you a good citizen of the web you know making your websites available to more people but actually google analyzed every website to determine how accessible they are looking at things like color contrast and the structure of the html and there's a chance that your website will be ranked more favorably in the search engine results if you build a well-structured website again this is really something that companies care about right because they might be an e-commerce store trying to rank for a keyword around christmas time moving on to css i'm going to refer to the checklist myself for a second because there's quite a few things to list off we'll talk about them more in a second but i'm talking about the essentials like the box model display and positioning value types selectors the rules of specificity when to use and when not to use important you should have a solid grasp of responsive web design like an understanding of mobile-first developments and why it's so popular what problems it solves as well as things like media queries and relative sizing units it's also quite fundamental that you understand how the default browser style sheets work because you'll sometimes be wrestling against them and in turn you should understand why and how to import a reset or a default css file so yeah not that much right no i mean there's quite a lot to learn actually it can take many months if not a year to become super proficient i hope this list gives you some ideas but remember it's not enough to just regurgitate these things and be a fact book about you know different display value types and things like that it's really important you put these things to practice and use things like flexbox use things like css grid in practice i thought about it a little bit and if you can take all these things to heart i kind of expect you'll be able to implement a responsive navigation with a hamburger menu lay out your content in columns position elements inside each other probably using flexbox i'm thinking like putting an icon inside of a text field for example it would also be really cool if you could use fixed positioning to build a sticky navigation that you know follows this user while they scroll um or a sort of help widget that appears in the bottom corner no matter how far you scroll as you can imagine these are two things that come up a lot in websites and and these building blocks are essentially 90 of static websites meaning if you know these things if you can achieve these things you might not be able to go and work at like a crazy tech startup but you can go door-to-door or on upwork and you can start to build websites for local businesses that don't really care about interactivity or involve anything involving a database for example if you want to be even more competitive it would be cool if you understood animations in css just the basics of the keyframes art rule and some experience defining your own animation may be a rudimentary loading spinner or something like that another thing you should watch out for is at least an appreciation of css frameworks and how they compare to one another you will never not get a job because you don't know bootstrap or tailwind for example and there's actually a very low probability that companies are using that exact same framework or the exact framework you pick but what will happen in most companies is as they grow and as their designs and their brand becomes more established they build their own internal css frameworks and they draw a lot of inspiration and ideas from the popular open source ones sometimes even building on top of them meaning if you have some experience with them you're going to understand completely all of the problems that these frameworks solve you know mainly they're efficient and they allow you to be consistent and things like that and likewise you'll be able to hit the ground running once you join the company it could definitely be something that helps you stand out another plus would be some experience with sas or another css preprocessor including how you set up the tooling and all their various features like variables and mix-ins and things like that it would also be good if you had some appreciation and maybe a rudimentary understanding of a css naming methodology like bam it's not really important that you master bam or something like that but you have to understand why these sorts of acronyms and these naming conventions exist it's basically to help a team align so that they are consistent and the code base evolves consistently with them again a junior isn't really expected to think about these things but if you go into a job interview and you're talking about bam and you understand the troubles they face it's gonna make you like a really good candidate i think just a quick note that if you know html and you know css pretty well you can start getting paid to write code you remember i mentioned tony who became an email developer i've also met other developers in the scrimba community and on the podcast who have gone on upwork or literally gone door-to-door to local businesses and said hey you know i'm not going to build you any interactive function like a booking feature or an e-commerce feature but we can build a website that gives you an online presence and this can you know draw new customers to phone you up and stuff like that rest assured you can make some really good headway with these skills but but to really get some you know good junior developer jobs you need to understand a bit more about programming and specifically javascript if you want to be a web developer when it comes to javascript it kind of goes without saying that you should grog all the fundamentals like functions values types basic operators those kind of things javascript is quite a quirky language and so a solid grasp on truthiness and things like the difference between double equals and triple equals comparison operators is very good to know as a front-end developer you definitely need to understand the dom akav document object model which can include things like subscribing to events like when a form is submitted manipulating elements on the page as well as interacting with the window in the environment like reloading the page or accessing session data or something like that we will touch on data structures and algorithms as part of another section later in this video and then we'll talk about how to implement them and algorithms and things like that but what is non-negotiable i think is a solid understanding of javascript data types like objects and arrays how to use arrays as stacks which is you know last in last out like a stack of plates or a queue which is first in first out like a line that's a store it's also very important that you learn some way to store keys and values like in an object or a set complex data type you should also obviously then understand how to access elements in these collections iterate over them using things like loops map filter maybe even reduce and object.keys is another handy thing to know when it comes to using an object as a dictionary remember most web applications revolve around sort of taking user input sending it to an api or a server computer essentially and then taking a response and updating the user interface the way we do that in modern web applications is using something called asynchronous http request and we typically do that with the fetch method nowadays so it's really important you have a solid understanding of how that function works and how to interact with apis another thing which is very related is that because you'll be waiting for the server to respond you need to understand this idea of asynchronous programming which is when things don't happen immediately but you get a call back when something happens and then you can continue processing that response at scrimba we have something called the front and developer career path which pretty much covers all the topics in this checklist so far but in particular i would highly recommend module 7 on working with apis and asynchronous programming this is such an important topic because as i say web applications revolve around this idea you need to understand how to chain promises how to handle errors in promises maybe slightly more obscure things like what happens if you send off five requests at the same time but you want to process them in the same order the requests went out even though they might resolve at different times another thing that might bend your brain a little bit is regular expressions but trust me if they're so useful to know they will allow you to define like custom validation rules as well as extract data from strings one place regex is commonly used even though it's a bit contentious is to extract data from web pages um it's contentious for a few reasons but suffice it to say you can use regex to extract data from strings and that's an incredibly useful utility to have at your disposal moving on let's talk about some of the javascript features and functionality that you don't strictly have to know but could certainly help you stand out and we'll start with es6 it would be nice if you knew some es6 features like arrow functions the structuring assignments and the spread operator the reason why this is nice to know rather than essential is because es6 is largely syntactic sugar meaning it provides you with a more succinct and satisfying way of doing something you could already achieve in original javascript shall we call it there are some exceptions to this like there are some new behaviors and things here and there but by and large what i'm getting at is that if you focused on the fundamentals first and nailed the must-know list picking your ps6 should be relatively easy it's something you can relatively easily do on the job and employers will look past that i'm sure obviously the upside is that a lot of code bases now have moved to using es6 by default and so you might find yourself a bit overwhelmed if you don't recognize you know these triple dot notations and things like that from the spread operator maybe just having a familiarity would be enough up next this is a pretty advanced subject and it's something you can go a long way without understanding the details of i'm talking about prototypes even if you're not defining your own prototypes it would still be good to understand things like prototypical inheritance how the this keyword behaves constructive functions paired with a new keyword that sort of thing if you're looking for a resource to learn more about this like quite advanced feature there's a pretty cool book series called you don't know javascript yet i remember that's where i learned the fundamentals of prototypes but i also remember that they haven't come up as much in my professional career meaning they're not really that essential but but definitely good to know it could definitely impress someone right you know prototypes inside and out that's super impressive and something if you're a skillful interviewer you can kind of trickle into your answers and yeah it could be could be a good recipe for success it would also be nice if you could store and retrieve data from cookies local storage and session storage bonus points if you can describe the difference between those three and when to use them listen we're talking about react because it's what we teach at scrimba there are a lot of react jobs and i just needed an example the the real point here is that you should i think understand and have a good understanding of at least one front-end framework it could be react it could be view it could be angular frankly it could be something like less popular like amber it doesn't really matter i've listed some things you should know about react but they're just examples right i'll talk more broadly for the sake of anybody not learning react i think you should understand all the tooling around your front-end framework or library in react it might be jsx and babel and creates react-app with angular it could be a different sort of set of tools you should also understand how to retrieve store manage and pass data all around your application in an appropriate way including things like global data like if there's a global theme setting how do you pass that to all of the child components without triggering unnecessary re-renders and maybe impacting performance and then another thing which is a bit more specific to react is you know how do you structure these applications in a maintainable way that evolve nicely some frameworks like angular they're a bit more opinionated you spend more time learning how to fall into the pit of success but then you're there with react it's a bit less opinionated meaning you have more freedom but you could also shoot yourself in the foot it's great to research how to structure projects and learn how they could evolve using different folder structures and class names and that kind of thing let's talk about tools because at the end of the day we as developers we build things and we are only as good as our tools technically javascript css and html those languages are tools so is your browser but what i'm thinking about in this section are things like git which are core and key to team collaboration i want to be clear that this is the junior web developer checklist and again you might not be denied a job because you don't know git but i think in the process of learning gates you sort of have to get involved with other developers and that bleeds a bit into the soft and practical skill side of things this isn't the topic of this video we're focused on the actual technologies and things like that but we can't ignore the fact that if you learn the fundamentals of gates you see on the screen right here and get an understanding about how people collaborate on projects that will definitely serve you in a job interview because you reduce so much uncertainty about your ability to collaborate on a code base if you're learning gets in github this could be confusing but basically github is a hosting provider for the tool get and it's the one i recommend you learn if you're starting out even if you join a company that uses bitbucket or gitlab or something like that if you started with git hub um everything you learned will transfer so it's no trouble this might not take much time to master but a solid understanding of npm which is the package manager most commonly used for friends and web applications will take you a long way you know what is a package.json file what can it unlock for your application what is a packagelock.json file should you commit that to source control you know these are things you should have at the tip of your fingers in my opinion as well as an understanding of how to upgrade modules without breaking everything because you can imagine depending on a project they do a huge rewrite and change their api you know if you just blindly update that could affect your application right so you know not just the commands but an understanding of how this impacts the whole application something else and this is fun that you know learn chrome web developer tools there is the console in there there is a way to preview your website in different viewpoints there's a way to throttle the connection speed really master the network tab you know learn how to filter to only see specific requests learn how to use that preserve log function these are things that web developers use every day and if you haven't learned about them yet it's just because you haven't been exposed to them you will be finding them very useful on your journey i can assure you on the topic of responsive websites and things like that check out a tool like browser stack as well these kind of tools let you preview your website on different platforms and browsers and platform and browser combinations so you can reveal any sort of regressions or cross browser issues and hone in on them to hopefully address them finally something you should know something you need to know is at least one editor in reasonable depth probably you use vs code i mean most people do nowadays and i'm thinking about having a strong understanding of how to use the tool efficiently to navigate the code base to rename and refactor things you know you should have some productive extensions and productive shortcuts installed as well my warning here is like don't procrastinate too much on that you can spend a lot of time fiddling with tools like vs code and past the point it won't help you very much but certainly these are the tools you're expected to use every day so having a solid understanding is is good i think some things that would be nice to know but not essential are how to install configure and utilize linters like a css or a javascript linter these can reveal errors in your code as well as inconsistencies you know super useful when you start to work on a code base you might also try and understand something like babel in more depth this is a transpiler that enables you to use things like jsx if you're using react or maybe even use you know experimental javascript features in a way that will still work on even older browsers because babel will basically take that succinct brand new juicy feature and turn it into some equivalent older looking code you know how to set up these tools and the plugins and things are very good to know i would really highly recommend even though it's not essential that you deploy at least one website including you know a custom domain and https because this will expose you to tools like dns it will expose you to at least one platform like versal or netlify or aws or digitalocean i think because ultimately the expectation is that you as a junior dev contributed some production code you know you should have at least an understanding of how that part of web development works the last thing when it comes to tools and this is definitely optional and it's a little bit related to the last point as well is a solid understanding of unix commands or windows equivalent commands these can be basic ones like just navigating file directories but but where it relates to deployment is ssh which is when you basically connect to a server and start typing commands on that server this isn't something you'll pick up overnight and one tip i've learned and i've heard recommended is to maybe use linux for a few weeks and that might force you to start thinking more about commands um even if you code on a windows computer or a macbook or something like that most servers use linux and long story short they use the same commands as a mac being based on postx or something just suffice to say it's very good to know as a web developer i think it's really important you understand the web that your applications are built on that means knowing your http methods and their verbs as well as http status codes like knowing your 200s from your 400s your 400s from your 500s that kind of thing jason won't take much time to learn but rast is quite difficult to wrap your head around at first let me just say that in this day and age if you've interacted with an api it's probably a rest api but you should really try and understand the motivation behind rest what came before it what problems that had and what does rest aim to solve with its principles and rules you might even go as far as to understand things like how to work with a rest api and cache responses and things like that but that's probably in the sort of nice to know column in my opinion it's important and responsible for you as a friends and web developer to learn about the most common types of security issues with front-end websites like you should definitely know what xss is all about cross-origin resource sharing that kind of thing and both to make your applications more secure and because sometimes you will run into errors and things like that that the browser has imposed on your application to keep it secure you obviously want to be able to work your way out of those situations one resource i can definitely recommend is the oasp top 10 list this is not a buzzfeed kind of listicle it's a very legit sort of list of the 10 most found and common security vulnerabilities updated frequently to reflect the current state of the web having a decent understanding of those things especially as they relate to the client side where there's a certain responsibility to sort of escape data that you present on the page and things like that um it can only serve you well moving on to some more advanced topics you don't strictly need to know the first thing that comes to mind to me is authentication i'm talking about not only how to design and build a login page but how do you actually hide pages behind a login page so you can't see them or take actions until you're logged in how do you add a logout function for example this can be tricky as a front-end developer to learn since you will invariably need some kind of back-end components some apis work with things called tokens and you can maybe use those to build your own application or you could also look at services like firebase and which allow you to build the authentication part of an application without coding your own back end it's a bit tricky to learn still like i do admit the most important thing i think to grok at least is that authentication can work in a few different ways some applications use a session id to authenticate every request with a cookie that gets sent with the request other websites use something called jwt tokens that encode certain information about the user and what permissions they have within it and that also opens up the door to something called the refresh token which is where if you have this token it probably shouldn't last forever in case the user changes their password or tries to force everybody to log out you know in those cases a refresh token can be helpful for sure you know the last thing when it comes to web i would like to remind you of is basic computer networking understanding what a dns is what is a firewall and what is the difference between ipv6 and ipv4 these are things which honestly won't really come up that much as a frontend web developer you can by and large get away without knowing them but these are also the things that comp sci graduates learn quite early on during their program and so i think having again sort of a rudimentary understanding of how the platform your entire application and career built upon can only serve you and help you stand out in an interview context moving on to performance one thing that's quite critical is for you compress all your images using a format like webp or failing.png you should also probably learn some tools to do this like imageoptim lets you do it manually but if you're feeling a bit frisky there are also build steps you can add for automatically compress all of the images your project references another sort of related thing is something called bundling where basically every request the page has to make to fetch a dependency like a style sheet or an external javascript file it incurs a bit of overhead whereas bundling can combine that all into one file even taking the css and putting it in your html actually so that the browser has to make as few requests as possible and can therefore make the page load as quickly as possible it would be good if you also understood the idea at least of a critical rendering path and why it matters something else that might be good to know even though you won't really often implement this yourself as a front-end web developer is this idea of server-side rendering which is where you basically put your react code on the server to to generate the final page and send over static html it can make pages a lot more efficient basically and it might be something you work on in the future that sits on the intersection of server and client-side work there is a lot of sort of contention around data structures and algorithms or dsas for short like do i need to know them are they even useful as a frontend web developer do i only need them if i'm going to apply to fan companies forget interviews for a second this list isn't just about helping you in the interview it's about making you a better developer and because a lot of algorithms and data structures represent the foundation of so many of our applications they are certainly worth learning what i also think you'll find is when you for example learn how to implement an algorithm you will realize there are trade-offs there are different ways of doing it and so broadening your view about the different trade-offs and software is a principle you can take with you to your own code um but maybe that there isn't an existing library or module or built-in function or data structure for again when you're implementing an algorithm you might come across a certain technique like divide and conquer which again there's maybe no point you implementing your own sort algorithm but one day you will have a problem that there is no built-in function to do you will then realize oh maybe dividing conquer is a principle i can apply here and so it really does broaden your horizons so i would definitely suggest that you learn to implement a handful of common data structures like a dictionary a queue a list maybe a link list and then i would at least pick one category of algorithm for example sort algorithms because there's a quick sort of bubble sort and merge swords a few more i can't even remember and just by implementing each of them and there will be tutorials and books to help you with this you will appreciate the different trade-offs when it comes to the succinctness the elegance but most importantly the performance and that's something else you should be at least aware of is the big o notation i wouldn't really care to sort of learn about in too much depth but it's basically a measure of an algorithm's efficiency and that's something you can take with you another thing that you really definitely have to understand and how to utilize effectively is recursion and by extension how the core stack works and what happens if you overload the call stack that's by the way what causes a stack overflow hence the websites like overflow a really good exercise that people often recommend to learn this is to create something called a fibonacci sequence but i'll leave that as an exercise for you to sort of research and learn how to do but suffice it to say that's just an exercise recursion can be an incredibly useful tool in your own applications beyond this i don't think there's anything that will help you stand out in particular like i don't think an employer as a regular company is gonna care if you can like implement a graph and all this kind of stuff um so make of that what you may and let's move on to testing here's the thing there is a list here of things you need to know but the reality is an employer probably is not going to like dismiss you because you don't know testing that said i think there are so many things you will learn about building good software as you learn about testing because often good software design is testable code for example decoupling dependencies and having some flexibility in your code so that it scales and is more easily contributed to for some reason there is an alignment here between testing and building scalable software and so i would definitely implore you at the very least to build an understanding of why people add unit tests what are unit tests and how they're different from things like integration or functional or smoke tests just having a broad overview will certainly build your vocabulary help you appear and you know not just help you appear to be more knowledgeable but give you the sort of starting point so that you know roughly what direction to go in should you ever be challenged to test something if you learn the basics of unit testing you will also probably learn some kind of testing tool like mocha or jasmine again i wouldn't really expect that you like in the habit of doing testing or anything but it would be amazing if you've built a project with tests it would be even better if you've learned about test driven development and again you know why is that such a popular approach like what advantages does it afford what are the trade-offs there there was a big argument a few years ago is tdd dead i totally think reading about these things will make you a more well-rounded and sort of more competitive developer the really cool thing about task thing that i would encourage you to remember you know even though it's not like a strictly essential thing is that not every computer science graduate is going to be exposed to testing in fact not every applicant will be exposed to testing meaning if you have some experience with it this is definitely something that only you know conscientious developers think about if you're a developer who doesn't care about code quality or the maintainability of code you don't care about testing but just showing you know that you know the basics i think can take you a long way and then if you've applied you know any sort of test driven development or mocking another sort of medium skilled concept i would say this is great this is very good when it comes to software design much like with databases there are no things you strictly need to know to be a junior web developer but it would be really cool if you understood a bit about refactoring like the dry principle the rule of three there are various sort of patterns you recognize otherwise known as opportunities to refactor your code and make it more readable or maintainable but it would be great if you recognized it would also be really great if you had some idea and appreciation for different software design principles like reducing coupling or defensive programming finally and and to be honest like this is quite unlikely to come up but it really wouldn't hurt if you had some appreciation for how teams document and talk about code and documentation like uml diagrams and user flow diagrams it'll just give you a sense for like how teams communicate these things or plan features and frankly you would only be scratching the surface there are farm there's far more to this like uh you know we could even go into user stories and things like that which are part of agile but these are again things you might learn on a computer science course for maybe you should know as a self-taught developer oh my gosh you made it to the end congratulations i'm pretty sure this is going to be a very long video but rest assured you can always check out the checklist in the description should you want to refer to it maybe make a copy and keep and maintain your own version walmart's caveats you know there are so many paths to success in tech and with computer programming we spoke about john in the introduction he found a training program as well as tony who ended up focusing more on html and css this is not meant to be like a gatekeeping sort of thing where you must check everything on this list again it's really meant to be a guide a way to kind of source new ideas about what to learn next and maybe measure your ability against the most competitive candidates because trust me if you check every single thing in this list and here's the kicker you you might just be on the path away from being a junior dab like maybe you're starting to transition from being a junior um to a sort of regular dab right and so if you're kind of meeting most or maybe almost most of the items on this checklist you might be able to disregard a requirement like two or three years experience because you clearly know the specifics my name is alex i'm the host of the screamer podcast i absolutely love meeting newly hired developers and experts and asking them about all the things they wish they knew as well as the specifics of their jobs so i can compile lists like this hopefully to your benefits and if you did find this list helpful please do make sure to subscribe to screamer youtube channel as well as like the video because that will help us kind of reach more people with the video and therefore motivate us to make more videos and that kind of thing you can also follow me on twitter at book of codes and finally if you're still here if you're still wondering what to do next if you're not already hurrying to learn about rest or design principles or something here's another video that i think you're going to like right here on the screen