You may sometimes encounter a situation where your web page doesn’t take the full height of the browser window and you want your footer to stay at the bottom of the page despite that. That is why it’s important to understand how to create sticky footers.

There are several ways to make the footer sticky, but I will show you the one that I usually use with flexbox. So lets get started!

We will start by giving the html and body tags a height of 100% because we will need to add flexbox to the body tag.

height: 100%…

Photo by bruce mars on Unsplash

Before the emergence of JavaScript frameworks the only way to render a web page was through server-side rendering. A user sends a request to the server and the server returns back the full web page. Nowadays, client-side rendering gained a lot of traction due to JavaScript frameworks and libraries like React JS. In this article, I’m going to discuss each one of them, their advantages and disadvantages.

Server side rendering

Server-side rendering or SSR is the traditional method that was used to render web pages for a long time. When a user sends a request to the server, the server sends back all…

Photo by XPS on Unsplash

In React components have many lifecycle methods that we can use in different phases of the component existence. The lifecycle of a component is consisted of three main phases: Mounting, Updating and Unmounting. Lets look at each one of these phases and the methods associated with them.


This phase is usually referred to as the birth of the component. It’s at this phase that the component is created and inserted into the DOM. Some of the most used methods in this phase are: constructor, render and componentDidMount


The constructor method allows us to initialize the state and also to bind…

Photo by Usman Yousaf on Unsplash

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them. JavaScript have many built-in higher-order functions like map() and filter(), but you can also create your own higher-order functions.

In this article, I will talk about three higher-order functions in JavaScript: map(), filter() and reduce(). They are all introduced in ES6, and they make code shorter and simple.

The Map Method

This method creates a new array with the result of calling a callback that is provided as an argument for every element in that array. …

Photo by NordWood Themes on Unsplash

For the past years the use of mobile devices has grown so fast, and many people prefer to use mobiles to surf the web instead of desktops. This is why building websites that are responsive is an essential skill for developers. Responsive design simply means creating websites that looks good on all devices.

In this tutorial, I will show you how to create a responsive header easily. So lets get started!

Create a new folder where we will put our HTML,CSS and JavaScript files. …

Photo by Benjamin Davies on Unsplash

Variables Scope is one of the essential things you need to understand in JavaScript. Knowing this concept will make you reduce error and write better code, and lucky for you it is not hard to grasp.

There are two type of scopes in JavaScript: Global and local scope. Lets look at each one of them!

But before we do that, Before we start discussing the difference, I just want to mention that there is a difference between let & const and var in determining variables scope. I will focus on var now and talk about let & const later.

Global scope


Abdellah Bahsine

I write about topics related to web development.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store