7 Basic Concepts You Should Know as a Junior Web Developer
By: Amy J. Andrews
Tags: Coffee2021, Web Development, Web Developer, Frontend Development, Codingbootcamp

7 Basic Concepts You Should Know as a Junior Web Developer

Photo by HalGatewood.com on Unsplash

Choosing to be a web developer means that you will have a lot of things to learn. But you shouldn’t learn everything at once, which will lead to burnout. Instead, there are some basic concepts that you can start from.

Without any further ado, below is 7 of them.

1. The Basics of The Web (html + css + javascript)

Throughout your career as a web developer, they are your pals who are more like best friends, if not siblings. They’re on almost every website. Perhaps a lot of websites utilize a “Template Engine” such as “jinja, blade,…” or something similar.

These template engines have a lot in common with HTML. It’s as though they all came from it. If you’re not familiar with template engines, they’re similar to HTML but with more dynamic capabilities. They’re typically used by backend developers to create dynamic backend apps.

So HTML is merely a markup language with no dynamic features, which is why it isn’t considered a programming language. CSS is the glitz and glam that is given to HTML to make it appear wonderful.

CSS is about a lot more than simply colors; it’s also about placement, styling, and animation. Only HTML and CSS are required to create interactive games. When it comes to increased interactivity, javascript comes into play.

The browser’s language is Javascript. Its primary purpose is to create interactive user interfaces, but it has evolved into much more. It can now be used to produce almost anything. You develop apps for mobile, web, desktop, and machine learning.

2. Git & Github

Git is a fantastic tool to learn. So, what exactly is it? Git is a command-line tool with greater capabilities than a standard Windows terminal. You can use websites like GitHub to post, update, version, maintain, and manage your source codes.

It’s not just Github either. You can host your work on a variety of websites, including GitLab (regarded as one of the best alternatives to GitHub), bitbucket, beanstalk, SourceForge, GitKraken, and AWS CodeCommit. As a result, git isn’t just for Github.

Want to know cool things you can do with GitHub? David Gilbertson talked about it in an article. Check it out:

3. Databases

In this day and age, the world runs on data. Data is, in a sense, virtual gold. A database, then, is any container that holds data. Your phone, your computer, and even your grocery list are all databases.

Some databases are relational and are known as relational databases (MYSQL, MS SQL SERVER, IBM, ORACLE, POSTGRESQL), while others are non-relational and are known as non-relational databases (MYSQL, MS SQL SERVER, IBM, ORACLE, POSTGRESQL) (MONGOBD, FIREBASE,….).

In terms of structure, operations, size, and functions, they are distinct. Even if you’re a front-end developer, I believe database expertise will be highly useful.

4. APIs (Application Programming Interface)

As a web developer, you must understand APIs. Even if you’re a front-end developer, you should understand what APIs are, how they function, and why they’re used. Here’s a rapid rundown of what you need to know about them.

Consider an “API” to be a waiter at a restaurant. You place your food order. You take it and consume it without scrutinizing the recipes, ingredients, or, more importantly, what is going on in the kitchen.

Are you still not happy with the explanation? Application programming interface (API) is a type of programming interface. It makes it simple for your application to connect and communicate with other applications (applications, servers, databases).

APIs come in a variety of shapes and sizes. One can be kept in your refrigerator!!

Let’s take a look at a real-world example. Let’s say you want to develop a weather app. Its major use is to display the weather; if you type in a city, the weather for that city will appear.

“How am I going to get this weather data?” you might be wondering. And where are you going? And how am I going to scale my app to collect real-time data if it’s constantly changing? That is, after all, what an API is for.

It will provide you with real-time data that you can use in your app without having to worry about anything or starting from the beginning. The stock market, bitcoin price, and currency exchange are all examples of this. If you know how to delve deep, refer to this post.

5. Chrome Dev Tools

You undoubtedly prefer Mozilla, but when it comes to development, Chrome is the way to go. Did you know that the majority of Chrome users are programmers? It may have drawbacks, such as devouring your rams, but it is still a good option. What makes Chrome so fantastic is that it comes with useful features for speeding up the development process, debugging, testing website responsiveness, and modifying (HTML or CSS) on the fly. Press (CTRL+SHIFT+I) to access the Chrome Dev Tools.

Here are a few tips.

With (CTRL+P), you can get to any file in a project.

(CTRL+SHIFT+F) will search the current page’s source code.

(CTRL+CLICK) to add numerous cursors.

(CTRL+SHIFT+M) to test the responsive design.

6. Network Basics

This is a must-have skill, especially if you work on the back end, as you may wish to pursue DevOp later in your career. You must understand IP addresses, TCP/UDP, DNS, NAT, ROUTERS, and the distinction between HTTP and HTTPS.

What is the mechanism of the internet? What happens when you input a domain name into your browser’s search bar? What exactly are ports? It’s okay if these names and initialisms make you uncomfortable.

Everyone has been in that situation. Of course, you don’t want to advance because this is such a vast field. It spans the entire spectrum. Here’s the finest Medium post I could find.

7. MVC (Model View Controller)

Model View Controller is the abbreviation for Model View Controller. It’s used to organize, administer, and structure your web app. It’s a style of design. If you’re unfamiliar with the term “design pattern,” think of it as a generic solution to typical software design issues.

Are there any additional design patterns, you might wonder? Of course, keep in mind that this isn’t code. It’s merely a method of developing apps. Design patterns are commonly used with OOP languages like (java, c#, PHP,…..). What are the differences between models, views, and controllers?

Models deal with data, databases, and migrations, or the data business in general.

Views: take care of the user interface (HTML + CSS + Javascript) so that the data is shown in a user-friendly manner.

The controllers are: Consider it a type of middleware. They specify which data should be displayed in which user interface. They deal with HTTP responses (POST-GET-UPDATE-DELETE). They’re in charge of requests and URLs.

Let’s finish with a simple illustration: You will click the heart button if you wish to like this post (which I believe you should :) ). And what will happen is that you will send a “POST” request to the server through a controller, which will increase the number of likes on my post by 1 in the database (MODEL) and turn the icon red (VIEW).

You might also wonder why the page isn’t loading. As a result of (AJAX: a javascript related technology that makes asynchronous requests to the page to perform certain actions without refreshing). For the time being, you don’t need to be concerned with AJAX.

Hope you enjoy this article!

Join me for more helpful insights about programming.