Full-stack development is becoming increasingly important in today’s society. As a result, full-stack developers can learn a broad spectrum of languages and choices when they enter the field. However, what are the languages that a full stack developer should know? In this article, we look at some of the more prominent and, in some cases, more essential languages that a developer should know.
Full Stack Developer Languages
Some of the most significant full stack developer languages include:
- HTML
- CSS
- JavaScript
- TypeScript
- Python
HTML
HTML stands for HyperText Markup Language, and it’s the most fundamental building block in building websites. As a mark-up language, it’s like the bricks in lego.
This language is easy to pick up but can have its caveats. Like, cite, optgroup, acronym, and abbr. These tools make your life easier as a developer but not very much used.
Grouping things with optgroup
Option Group, or <optgroup>, is what developers use to group options in a list using a <select> element. For example, let’s say you have a dropdown like this:
<
label for=”showtimes”>Showtimes</label>
<selec id=”showtimes” name=”showtimes>
<optgroup label=”1PM”></optgroup>
This will now give you a grouping ability. In a form with no CSS or JS needed.
As an example, you noticed in this blog that I have been using short names for our languages. So we can make it easier for yourself and others to read abbreviations like this.
<abbr title=”Cascading Style Sheets”>CSS</abbr>
<abbr title=”Javascript”>JS</abbr>
This will now give us some easy mouse-over, explaining what it means!
Let’s get moving to style our bricks because lego bricks with no colours or shapes are very dull to look at.
CSS
CSS stands for Cascading Style Sheets and is a style sheet language used for describing the presentation of a document written in a mark-up language such as HTML.
Think of CSS as the shapes and colours for your lego bricks. It’s what makes all websites look so pretty.
CSS is not a difficult language to learn and is also fundamental for web development. However, there are a few best-practice rules to follow.
Min vs Max width
This is a point where new developers will mostly go into a trap. For example, some developers working on a desktop computer will build a page as they see it on the desktop. But, what if they want to resize things for mobile? For CSS, it’s generally best practice to build a page for mobile-first.
We want to scale it down, and the bigger the screen, the more the flare we put on the website.
The first tell sign in this is in CSS, where more junior developers will use max-width
, which means (UP TO X) screen size. This means your code will not repeat itself because you will have to make many *media queries* to get the effect you want. In coding, this is called the DRY (Don’t Repeat Yourself) principle.
min-width
solves this problem as you build (FROM X to infinity).
We always want to build from a smaller screen then flare it up.
Order matters
The order of CSS matters. As the code below shows and in the name of CSS, it cascades the further down the document it will overwrite its previous thing. Think of it like applying paint to a canvas.
If you put blue first, then red on top, your red paint will show instead. Now, I know that in the real world, we mix colours, but CSS doesn’t. It just overwrites it as though it was never there.
.awesome-class {
color: blue;
}
.awesome-class {
color: hotpink;
}
Specificity
To combat this, we can use specificity in terms. For example, we can be more specific or tell CSS we want something to take priority.
The order of CSS applies in the following way.
- Type Selectors – Like
a p h1
etc - Class Selectors – Like
.my-class
- ID selectors – Like
#my-other-id
So ID will override classes, and classes will override elements or types.
We can also do other things like use !important
.
When an important rule is on a style declaration, this declaration overrides any other declarations. Although technically !important
has nothing to do with specificity, it interacts directly.
JavaScript
So here comes my personal favourite and a language that takes a bit of time to learn.
JavaScript has been around for years. It was written in a week in 1995, and it’s still around today. It was meant as a simple scripting language. It has now evolved into Serverside or Backend (with nodeJS) and Frontend.
So with one language, we can now create backend and frontend code.
JavaScript has also changed quite drastically over time. First, it was just a scripting language. Now, most of the tools on our computer is written with JavaScript. For example, Geforce Experience.
We now have Frameworks that have tools built into them and make developers write quicker and more optimized code. Like React, Angular, Vue, Svelte, to mention some. This is now part of a Web Developer’s toolkit when starting. Even though they are all written in JavaScript, they have different syntaxes.
Typescript
Typescript is JavaScript but on steroids. It’s gaining traction from companies like Microsoft and Google. In simple terms, it’s JavaScript but with added Types. Think of it as a file or definition that you can tell JavaScript what things are. Editors like VSCode will know what things are and prevent problems before you even think of it.
For example, in the sample below, most developers will understand that the username has to be a string, and so does the password. However, if you try the first example, your editor, like VSCode, will tell you that this is not allowed as you are trying to give it a number, and it expects to get a string. The weird syntax here can be things like void
, which does not have any return
value. So, we are not using the keyword return, as you can see.
This means you are helping your editor help you, and it gets superpowers.
Python
Python is an interpreted high-level, general-purpose programming language. Its design philosophy emphasizes code readability with its use of significant indentation.
People find Python to be easier to read than its counterpart, JavaScript. As it uses indentation over {} (Brackets) etc.
Developers use Python everywhere, but mainly it’s used for number crunching. It’s incredible at crunching numbers at high speed etc. So if you ever wanted to go down the route of Data Science, etc., then Python is the language for you.
The cool thing with any UNIX system is that Python is built-in. However, with Windows, you have to install it yourself.
So why learn Python?
How about making small files and scripts that work on Rasberry Pi?
How about making a small program that will write some lines into a file?
#Assign the filename
filename = "languages.txt"
# Open file for writing
fileHandler = open(filename, "w")
# Add some text
fileHandler.write("HTML\n")
fileHandler.write("Python\n")
fileHandler.write("CSS\n")
fileHandler.write("JavaScriptS\n")
# Close the file
fileHandler.close()
# Open file for reading
fileHandler = open(filename, "r")
# Read a file line by line
for line in fileHandler:
print(line)
# Close the file
fileHandler.close()
So in a few lines, we can make the program write files for us.
Python is a great beginner language and has frameworks like Flask, FastAPI, and Django.
This gives you a Backend where you can now write API’s or even full-blown e-commerce websites that some of our students as Code Insitute build on their Full Stack Software Development programme.
Simen Daehlin, Code Institute Graduate and Mentor
Full Stack Developer Languages – basics for Free
Software development is full of amazing languages and technologies like those mentioned in this article. If you’d like to learn some basic HTML, CSS and JavaScript for free, register for our 5 Day Coding Challenge in the form below.