You have taken the first step to become a web developer but are now overwhelmed by the masses on information online due to the fact that there are millions of different technologies a web developer can learn.
This guide considers the perspective of a junior developer as well as the views of team leaders and the qualities they look for.
What Must You Know
Every developer should have a strong grasp of the following 4 key areas:
Git/source control- Git is an excellent start for all developers, particularly when working in a team. Learn and continue to practice how to clone repos, create commits, make branches, and merge code.
Debugging- Regardless of whether you choose to focus on the front end or back end, you will come across bugs. Become confident with debugging tools, and bugs in general.
IDE– You will be able to choose from a wide range of IDEs. Once you have chosen one, get to know the ins and outs of it. Understanding tools and shortcuts will improve your developing skills. One of the favorites is VS Code
Methodologies- Teamwork often implies using product development methodologies, so ensure you are confident with how they function
Front End
While there are many tasks a front-end developer can carry out, here are some of the more common:
- Execute a design using HTML/CSS
- Deal with DOM using JavaScript
- Deal with an API by using FETCH API (or similar APIs)
HTML and CSS
HTML is what is used to put elements on a webpage and chose a suitable position. CSS then adds a style to the elements. Junior front-end developers must be able to handle HTML to create a webpage and then use CSS to add a particular design. They can be applied in different ways, for example, inline or style sheets.
When you start to feel confident at this stage, you can go on to use CSS Grid and Flexbox to make the layout of the page easier. SCSS is a way of making the CSS more manageable. Don’t hesitate in creating a few projects just for practice and don’t jump ahead to JavaScript of APIs.
Frameworks
CSS frameworks are elements and styles that have already been created. They are a quick way the create a site or complete a project. Again, it’s easy to get bogged down by choosing just one, most are relatively similar so don’t stress over your choice. Get to know one framework and the rest will easily follow. Bootstrap is a common choice for developers.
While many companies prefer working with frameworks, it doesn’t mean you can skip learning HTML and CSS. At some point in your career, you will need to customize pages.
Responsive Designs
When creating a webpage, you need to consider the mobile devices it will be used on. The CSS frameworks we have discussed make easy work of responsive design.
Media Queries- will define how elements should appear on different screen sizes
Avoid Pixels- Try to use rem units over pixels. The number of pixels won’t change depending on the screen size. Units like rem, vh, and vw are more effective.
A good place to start is to design the elements for a mobile screen and then use media queries for larger screens.
JavaScript
Anyone and everyone must get to grips with JavaScript. Being an expert in JavaScript will only make you a better developer in the future. There are frameworks but it’s important to know the key elements.
This is a list of the bare minimum a junior developer should know:
- Objects, functions, conditionals, loops, and operators
- Modules
- Arrays and their manipulation
- Collecting data from an API using FETCH API
- Manipulating the DOM and using Events
- Async/Await (great to know but an advanced subject)
- JSON
- ES6+
- Testing
Bearing in mind you are a junior, nobody will expect you to know absolutely everything about each topic.
If you can create an app without tutorials, it’s now time to move onto some advanced skills. There are numerous sites that will help you stand out from other developers but we tend to use elequentjavascript.net and freeCodeCamp.org. Github has tonnes of tips and tricks.
To put your new skills into practice, you could:
- Develop a Super Mario game
- Create a dashboard like Twitter Dashboard
At this stage, the look is not important; it’s all about JavaScript
JavaScript Frameworks:
Like most aspects of programming, pick a JS framework and learn it well. Angular.js. React.js, and Vue.js are frequently used and aren’t going to be replaced anytime soon. Learning JS frameworks is a doddle if you have really learnt the fundamentals of JavaScript.
Rather than learning a little bit about many, focus your attention on learning one really well as this will make more of an impression.
React
React has a massive online community, particularly on Facebook. If you have learned JavaScript, learning React won’t be a big deal. Junior developers should be able to:
- Comprehend the components of React and how they work
- Use State & Props
- Use JSX to render HTML elements on webpages
- Know-how and when to re-render
- Use React hooks
- Understand NPM, Webpack, and Babel
Rather than starting fresh, you can put your newly acquired skill into practice by rebuilding your previous JS projects using React. React hooks will enable you to create a calculator app. You could even develop your own news feed app using public APIs to collect data.
State Management (Redux)
Redux is a state management framework that seriously complements React. Imagine using it as a front-end database containing the state of your web app. When you first start out you might feel like a complete novice again due to a large number of moving parts.
You will only really need Redux if you are working with bigger companies web apps, so just concentrate on the basics. ReactDev Tools and ReduxDev Tools are good places to start your learning.
Web Browsers
Naturally, you are going to have to know how to navigate web browsers like Chrome, Firefox, and Edge. You should be able to use debugging tools and work with the storage methods. Browser features are a bit of a pain, you will have to make sure your code supports the necessary browsers.
Deployment and Hosting
In order to make your portfolio shine, improve your knowledge and get the job you want, you ought to know how to deploy and host a web app. Managed services are often the best way to go, for example:
- GitHub Pages
- Firebase
- Heroku
- Netlify
- AWS
- Digital Ocean
Netlify and Heroku are solid options, they are easy to use and have free tier services to keep your costs down. That being said, they don’t have some services you may need like email, SSH, or FTP. If you want to up your game, look at NameCheap for domain names.
Back End
The back-end of an app is where all the information from the front-end is stored. Let’s say you write a post of Facebook, it will go through the server and be saved in the back-end database.
Most back-end developers will be able to:
- Develop APIs used in the front-end (usually by returning JSON)
- Write business and validation logic
- Carry out integrations with third-party APIs
- Read and save data from databases
Programming Languages
It’s the same story, there are literally hundreds of thousands of programming languages but you need to be comfortable with the main ones, such as:
- Java
- C#
- Python
- js (a runtime that permits you to run JavaScript)
- Go
- PHP (for WordPress development)
You can guess what our advice will be, choose one and learn it well. We recommend Node.js if you are already learning JS. It’s an easy way for you to make REST APIs, a principal task of a junior developer.
Regardless of the language, you really should know how to:
- Create APIs
- Know the language basics like creating functions, using conditionals, operators, and variables
- Know how to connect to a database
- Know how to query a database
- Understand package management
- Write tests
It’s important for you to choose a language that will meet your needs. Once you have mastered one, then it will do you well to investigate others.
REST API and JSON
This is definitely one of the main tasks carried out by back-end developers. It’s necessary to understand:
- Different verbs and their uses
- How to create a good response
- How to deal with requests and authenticate requests
- How to document your API
In summary, REST API is a bridge between the front and back end development. JSON is the principal language used to transfer data to the REST API.
Database and DevOps
It’s not necessary for you to know this topic in detail unless you are looking for a job in DevOps. Generally, you should be aware of:
- How to manage a database
- Different platforms for hosting, examples are Google, AWS, etc
- CICD and tools like Jenkins, GitLab, etc
- Logging and Monitoring
Some companies may have a team that is responsible for these tasks.
Advanced Topics
Only move on to the advanced topics when you are completely sure of the areas we have mentioned previously.
- Authentication using JWT/OAuth- Using authentication and user authorization, simply put, it’s the login details
- Design Patterns- This is the common solutions to common problems, making it faster and easier to problem-solve
- Progressive Web Apps- Web apps that run as if they were native apps on a mobile, some possibilities are React Native and Flutter
- Command Line- When a GUI isn’t available you will need to know how to connect to a server using SSH, navigate using commands, and edit using vim (or similar)
