Useful front-end web development projects to improve your coding skills.

Developer codes on her laptop.
Developer codes on her laptop.
Photo by ThisIsEngineering on Pexels.

Introduction

As a code newbie or a beginner front-end developer who is still learning, you need to always practice what you have learned. No matter how many courses you take, if you don’t practice, you will never get better. That’s why you need to build some simple and cool projects to practice what you have learned and improve your skills as a developer.

In this article, we will give you a list of some simple front-end project ideas that you can build to improve your coding skills. Let’s get right into it.

1. Notes App

You can build a simple notes app where you…


Let’s make a simple image slider using React.

Developer coding on his laptop.
Developer coding on his laptop.
Photo by Danial Igdery on Unsplash

Introduction

React is one of the popular JavaScript libraries for building user interfaces. It makes it much easier to create interactive UI because it’s a component-based library and has a lot of useful features to make your life easier as a developer. The good thing is that it’s not difficult to learn, you can start using it just by reading about the basics in the official documentation. However, you will need to always keep practice because it’s the only way to get better.

That’s why in this article, we will use a little bit of React magic to create a simple…


Learn about conditional rendering in React with practical examples.

React Code.
React Code.
Photo by Ferenc Almasi on Unsplash

Introduction

Conditional rendering is one of the main concepts in React. It allows you to render components depending on the state of your application. In React, there are many ways to do the conditional rendering.

That’s why in this article, we will learn about some ways to achieve conditional rendering in React. Let’s get right into it.

Conditional Rendering using If Else

In React, we can’t directly use if-else statements inside JSX. However, we can use if-else statements to render JSX and our components. It’s useful when we want to execute more than one line of code inside the if-else block.

Here is an example:


The 8 VSCode extensions that will make your life easier.

Desk setup.
Desk setup.
Photo by ThisisEngineering RAEng on Unsplash

Introduction

Visual studio code has been dominating the game for years now. It’s the text editor number one in terms of quality workflow and user experience according to what most developers say. In addition, it has a lot of useful features and extensions that we can benefit from as developers in order to make our life easier. That’s why a lot of developers prefer to use VSCode for coding.

In this article, we will give you a list of some VSCode extensions that you must have as a front-end web developer. Let’s get right into it.

1. Live Server

Live server is one of…


The HTML features that will make your life easier.

Developer.
Developer.
Photo by Lala Azizli on Unsplash

Introduction

HTML is the skeleton of any website on the world wide web. I can’t imagine the web without using HTML. It’s a really powerful markup language and has a lot of features that we can benefit from as developers. Nowadays, with just HTML5, you can create some awesome and even functional UI without using JavaScript or CSS.

In this article, we will discover some amazing and powerful HTML features that you probably don’t know about. Let’s get right into it.

1. The meter tag

The meter tag <meter> is one of the useful and powerful features of HTML. …


Useful resources every programmer should use

Image of cartoon character lying down
Image of cartoon character lying down
Photo by Josh Withers on Unsplash

Introduction

When dealing with a large amount of unstructured data, we need a place to store it. There are many different ways in which we choose to store data, but the one we will focus on today is object storage or object-based storage. It’s the best option when handling large volumes of data, particularly because it’s not expensive and makes managing that data much easier.

In case you aren’t familiar with it, object storage is a data storage architecture that allows you to store a large amount of unstructured data in a scalable object structure. It keeps store data as objects…


Learn about the class syntax in JavaScript with practical examples.

Desk Setup.
Desk Setup.
Photo by Fotis Fotopoulos on Unsplash

Introduction

The class syntax is one of the best features that have been introduced in ES6. In JavaScript, classes give developers an easy syntax to work with rather than using constructors. They are often known as “syntactical sugar” because they offer a cleaner way to do object-oriented programming in JavaScript.

In this article, we will learn about classes in JavaScript with some practical examples. Let’s get right into it.

Define a class

As I said, JavaScript classes have introduced as an easy way and a syntactical sugar to write constructor functions. They are mainly used to create new objects.

To define a class in…


5 ways and tips to code faster in JavaScript.

Coding Laptop.
Coding Laptop.
Photo by Safar Safarov on Unsplash

Introduction

JavaScript is one of the powerful programming languages in software development. You can do many things with it such as web apps, mobile apps, games, or even AI and machine learning. You just need to be good at it because every year new useful features are being released in ES versions. However, as a developer, you also need to be fast at writing code because you will have more other tasks that are important than just writing code.

In this article, we will discover some useful JavaScript tips or techniques to speed up your coding. Let’s get right into it.

1. Type conversion


Let’s use JavaScript to solve the sorted union algorithm

Desk setup.
Desk setup.
Photo by Tudor Baciu on Unsplash

Introduction

Solving algorithms is one of the best ways to improve your problem-solving skills. This also allows you to practice your coding skills in a specific programming language. Solving an algorithm requires following a sequence of steps in order to solve a problem or achieve a particular outcome. That’s why it’s always better to break down your algorithm into small parts which makes solving it much easier.

In this article, we will try to solve the Sorted Union algorithm using the power of JavaScript. Let’s get right into it.

Instructions

The sorted union algorithm is about unifying a bunch of numbers arrays…


JavaScript methods: forEach VS map with examples.

forEach VS map in JavaScript.
forEach VS map in JavaScript.
Image created with ❤️️ By author.

Introduction

JavaScript has methods to iterate through arrays. The forEach method and the map method are the two most commonly used. A lot of beginners think that these two methods are the same in the way they work because they both do an iteration and output something.

In this article, we will learn about forEach and map in JavaScript by covering the differences between them. Let’s get right into it.

The forEach method

The method forEach is a higher-order function because it takes a callback as its argument. It is used to iterate through array elements and it returns undefined. …

Mehdi Aoussiad

Front-End Web Developer from Morocco. I focus on writing useful articles for readers. Contact:https://twitter.com/AoussiadMehdi Subscribe: https://mehdiouss.ck.

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