Below is a list of things you would typically need to know to get employed as a junior-mid level developer in 2019. I made this so that I can have a place to point people that have any questions for me about the steps they should take to try and break into the field.
If I have missed anything, or am lacking in the resources department, feel free to hit me with a PR and I'd be happy to add it to the list.
Also please note that some of the resources listed are part of paid services. I'm trying to keep this as low cost as possible, but I can't help that some of the best resources cost some money. you can usually score Udemy courses for under $20.
While there are plenty of resources online for learning the tools of the trade, it can be a little hard for someone new to the game to find what they need, especially when most of the time they aren't sure exactly what "it" is.
It can also be a little difficult for beginners to find things that are up to date with this rapidly advancing field. So I am making it a priority to keep this list updated.
To write some code, you're going to need an editor. Head on over to https://code.visualstudio.com and download and install the latest release. Open and mess around with it for a little while, once comfortable move on with the guide. You're ready to write some code.
Every section of this guide has a set of links to tutorials as well as a list of other resources that I find will help as a supplement to the guides.
Aside from links, this guide also has some projects for you to do. You are not limited to these, so if you want to build your own stuff in the process, feel free. The more you make the better you will get.
Once you make it through the Javascript section, I recommend that you head to these links and do at least one challenge a day. It will dramatically help with your critical thinking and interview skills.
- Front End
- Back End
- Other things to Keep Up With
Front-end web development is the practice of converting data to graphical interface for user to view and interact with data through digital interaction using HTML, CSS and JavaScript. Wikipedia
Front end development has blown up into a very complex field in recent years. What was once handled directly on the server has made it's way to the browser, whether that's caching data, handling interactions with external services, or a plethora of other things. You now also have to accommodate for various different screen sizes, as well as take into account performance and accessibility.
While it is not necessary to know everything front end to get a job, there is certainly a lot you do have to know. So below, I am going to do my best to point you in the best direction. So hopefully, if you stick with it, you'll have a pretty sweet resume and portfolio full of sweet skills and projects to show off to the world, and most likely get your foot in the door of what in my opinion is one the most fulfilling careers out there.
It's time to see if this is really something you want to do.
HTML and CSS are the building blocks of the web. HTML is how you define all of the text, images, links, etc on the page. CSS is how you make it all look good and accessible to the user.
Warning: This may seem a little scary at first, but I promise that if you stick with it, it will be super rewarding.
There may be some overlap between the videos, but repetition is good for learning this stuff. All resources here are free
- Intro To Web Dev series
- Intro to HTML
- Intro to CSS
- Learn how to build a website series
- Build a Responsive Website
It's time to put your new skills to the test, find one of your favorite websites on the internet, and do your best to clone it with HTML and CSS. I would recommend starting with something simple, but if that's too easy, feel free to find something more comlex and clone that too.
If you find yourself stuck, feel free to look up how to do things, it's good to get into this habit as early on as possible.
Now that you have at least one custom built website under your belt, you can move onto the more exciting things, like learning your first CSS framework as well as how to lay out more advanced pages.
It is also a good time to learn git so that you can push your code to the internet and share it with the world.
Previously, you only scratched the surface when it comes to the languages of the web. You will now learn about a bunch more HTML tags, as well as some advanced layout and positioning techniques with CSS including Flexbox and the brand new CSS-Grid. It also includes the usage of CSS preprocessors like Sass.
The below links will take your skills to the next level.
- CSS Complete Guide(Covers it all)
- Learn Flexbox
- Flexbox Froggy Game
- Flexbox Defense Game
- Build an animated accordion
When first released, bootstrap was one of the biggest things to hit the internet. It streamlined a lot of tedious styling tasks, as well as made a bunch of sites on the internet look pretty damn good. Some of these sites inlcude Lyft, TurboTax and Spotify.
Learning Bootstrap is completely optional, if you opt in to learning it. Try and understand what it is doing, and use it sparingly.
It's time for some challenges. Head over to Front End Mentor and browse the challenges. Complete at least two of the beginner challenges, and if you feel brave, do at least one intermediate challenge. Once you do this, you should feel pretty comfortable about where you stand with HTML and CSS.
Git is an open source version control system that makes working with others a breeze, it is a foundational part of day to day development and is a must to know if you want to get into the field. It is super fast and easy to use.
GitHub is a place to host your code and share it with others. As well as contribute to other people's code.
Once you're comfortable with git, psuh all of your completed projects to GitHub.
Feel like a pro yet? If so, it's time to build yourself a portfolio website. When doing this, be sure to have at least the following pages:
- About (Talk about yourself)
- Work (Explain the projects you have previously done)
- Contact (Social links and how to get a hold of you)
Having some HTML and CSS sitting on your computer/GitHub is cool and all, but it would be a lot better to actually have something live on the internet. Below is several tutorials for the different flavors of pushing your sites to a live server or CDN.
Ordered from easiest - hardest
JavaScript, often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a language that is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Wikipedia
Now that you've learned how to properly lay things out in a static web page, it's time to make things interactive. To do this, you will have to learn Javascript. Javascript is a programming language, and is the only language that is executable in the browser. Some find it very easy to learn, but if this is your first programming language, the next few sections are going to be a challenge.
Javascript has a great community behind it which has allowed for it to blow up into one of the most versatile languages out there. It can be used to make native mobile apps, web applications, desktop applications and backend services.
To get a feel of what it is capable, head over to a web application like https://youtube.com and click around. Just about every interaction you have with the site is handled with Javascript, whether thats streaming a videa, or subscribing to a creator. Cool right?
Now that you know what it is, it is time to learn how all of this is done.
As previously mentioned, JavaScript has many flavors and can do many things. But the best way to learn it is by learning the basics in the browser. The below course is in my opinion one of the best out there for familiarizing yourself with the language, as well as how to make things happen in a web app.
There is a lot of content here, from Javascript to package managers(npm) to even build automation tools like Webpack.
At this point, you should have a pretty solid understanding of the Javascript programming language. You can make stuff interactive, as well as write some clean code. To cement this knowledge, I recommend doing a couple of coding challenges to really cement this new knowledge into your brain. Do about one a day until the end of this guide.
You should be getting pretty good at this by now. For your next project, youre going to find an API of your choice, and write a web application that interacts with it. This can be anything, but below I have listed a few APIs and ideas. Try and set up your own Webpack config for this and use Babel.
Now that youre a Javascript pro, it's time to start digging into some UI dev libraries.
In computing, React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Wikipedia
From this point forward, you will be learning the ins and outs of React, as well as it's many tools. It streamlines alot of the development process, and allows you to make a component based architecture allowing for good performace and code reusability.
The following course covers just about everything you would need to become a React developer. It starts at the basics and then moves on to using tools like Redux, as well as a bunch of cutting edge React features like hooks.
Here are some tools that should help you with react development.
- Styling
- Animation
- Component Libraries
- A Whole Lot More
This is a fun one. Head over to The MovieDB API and get as familiar with it as possible. Get an API key and figure out how to query for all things related to movies. Once familiar, do your best to clone your favorite movie site, whether that be Netflix, Hulu, etc. It doesn't have to be perfect(or be a fully fledged streaming platform), but it should look and function almost the same from at least the search and browse functionality perspective. You can even used the provided links to trailers for rendering video.
- (Cool UI)[https://skempin.github.io/reactjs-tmdb-app/]
- (Netflix Clone)[http://netflix-clone-9670.surge.sh/]
While a lot shorter than the previous course, this next one will really cement your knowledge in React, as well as show you some common use cases and best practices when it comes to React.
Now that your're a UI development pro, it's time to take a peak onto the server side. The next course shows you the basics of using React to interact with a backend that you will also create.
For your final front end project, you should take eveything you have learned to far and build something. If there is something that you are passionate about, or feel would make yours or someone else's life easier, use that as inspiration and build an app that solves the problem.
- https://reactjs.org/community/examples.html
- https://remigiusz-wasiak.github.io/spaceX/
- http://spacexplorer.xyz/
The time has come to get you a sweet dev job. Youve sunk hundreds of hours into this(I hope) and it's time for the big payoff.
Interviews at tech companies usually revolve around code challenges similar to the ones that you've been doing every day, so it should be a breeze. But there is a chance your interview will cover some advanced data structure and algorithm challenges. Below is a course that will make you a pro at those as well.
coming soon...
coming soon...
Use everything you have learned and build yourself a new portfolio website to show off your skills. Be sure to fill the same requirements as last time, as well as add some new features.
coming soon...
coming soon...
coming soon...
coming soon...
coming soon...
coming soon...
coming soon...
coming soon...
coming soon...
coming soon...