Improve Your Web Development Skills By Building These 5 Projects

Improve Your Web Development Skills By Building These 5 Projects

Here are 5 projects that I think that you should build as a web developer to improve or to learn web development as a beginner

Ammaar Aslam's photo
Ammaar Aslam
·

10 min read

Featured on daily.dev

Table of contents

I know what you're thinking after reading this article's title, "Everyone says the same thing! 🙄" Yes, I agree. Everyone does say the same thing, and it's for good reason. Practicing, in my opinion is the best way to learn or improve your web development skills. This is not only with web development, it's the same for learning or improving on any subject, it could be learning a new programming language, a new framework, starting to get into design or even learning mathematics. By practicing you are essentially putting what you know or have learnt into solving or making something.

And I think that as a web developer, the best way to practice and improve your web development skills is to start building web projects. And by building web projects, I don't mean the typical web applications that comes into mind like; tic-tac-toe, a todo app, a clone of a website, a snake game, a calculator, a countdown timer just to name a few. These are some web applications that most blogs, articles, developers tell you to build to improve your web development projects. Now, there's nothing wrong in building such applications, in fact, I too built these kinds of applications when I started out. But if you really want to get better at web development, I would argue that building these types of applications is not enough.

So in this article I have listed a few types of projects for you to build so that you can get better at web development. So without any further ado, let's get rolling.

Note:- I have listed only the "types" of projects/applications you should build and not the application itself.

Before we go on with the list, here are my suggested ways to build the application:

  • Choose any technology you like. (i.e. ReactJS, NextJS, TailwindCSS, Angular, Vue, Remix)
  • Make it opensource
  • Host your application. (you can use Netlify, Vercel and heroku for free)
  • Try to build a real-world application and don't make it as a mockup/dummy website.
  • Try to build an application that is unique even if there is another application built similar to yours.
  • Get opinions and suggestions from others. (after building your application, share it with others and get feedback from them)

1. Build an application that displays data from an external API

The first type of project to build on my list, is an application that beautifully displays data from an external API of your choice. This is a good starting point, since you will be working with the frontend of this application almost 90% of the time.

Why?

The reason to build such an application is because, most of the time when you start out with web development, you are usually more comfortable working with the frontend and freak out when someone says you to do some backend functionalities (I know, I've been there 😓). So working with external APIs is normally a very less complicated task compared to getting started with building backend functionalities right away.

How?

Here a some steps you can take to build this project.

  1. Choose any API of your choice. If you are not sure what API to use, go to rapidapi.com/hub to find some really cool APIs.
  2. Next step is to make a request to this API and display the response that you get, on your application with minimum styles to test that your request is working.
  3. And finally after testing and making sure that it works, all you have to do is to style your application and display the data in a usable UI and format.

Example:-

// A simple example with ReactJS

import { useState, useEffect } from "react";

export default function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/posts?_limit=5`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(
            `This is an HTTP error: The status is ${response.status}`
          );
        }
        return response.json();
      })
      .then((actualData) => {
        setData(actualData);
        setError(null);
      })
      .catch((err) => {
        setError(err.message);
        setData(null);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  return (
    <div className="App">
      <h1>API Posts</h1>
      {loading && <div>Loading</div>}
      {error && (
        <div>{`Error fetching - ${error}`}</div>
      )}
      {data &&
        data.map(({ id, title }) => (
          <li key={id}>
            <h3>{title}</h3>
          </li>
        ))}
    </div>
  );
}

You'll get an output similar to the following:

Screenshot (1107).png

What to build?

It's all up to you and the API that you choose to work with. If you choose a weather API for example, you could build a weather application or if you choose a jokes API, you could build a random jokes generator application. Just remember that the goal in this project is to use data from an API and display the data in a creative manner.

P.S. You could also use real-world APIs like Twitter, GitHub, Gmail, Google Translate, etc. (This is how I started working with APIs, I used Twitter's API to build TweetSnap. You can learn more about that in this article)

Resources

2. Build your own API

Now that you have an idea how API works, the next step would be to build an application where you create a very simple API of your own.

Why?

Knowing how to use a third-part API is the first step to working with APIs. If you have a solid understanding on how to do this, then building out your very own API would be really easy. Since requesting data from an external API and displaying the data on your application isn't really considered as a "backend functionality".

Although building your own API is a complex problem, the goal when building this project should be that, you have some data and you want to make this data accessible to others via an API. This means another developer will be able to fetch data and display the data from you through your API, just like you did when building the first project.

How?

Building this project cannot be done in 3 steps like the previous one and it would be it's very own article or series (stay tuned for that 😉). Therefore, here are some tutorials that I found:

What to build?

For this type of project, there aren't any examples I could give you since the main part would be to build the actual API itself. So I can only give you some ideas on what data to serve through the API, which can be a list of cool gradients, list of names (with categories like male, female, last name, fictional, etc..), food recipes, or a list of quotes.

P.S. You could also build an API for you to use within in your application. Then you would be building an Internal API.

3. Build an application that makes use of a user authentication system

The next project on the list is to build an application where users have to be authenticated in order to access certain information or functionalities/features on the application.

Why?

Just like how working with APIs are important and a good skill to have, being able to authenticate users in your web application is very important and a skill that you should have. This is because, when you start working as a developer or even if you are building your own SaaS, user authentication is a must have feature. Knowing how to deal with this early on your web development journey can really save you a lot of time when you come to that stage.

How?

Building this project is also a bit complex, so I have listed a few tutorials that show you how to authenticate users:

What to build?

There's not many examples to give you but you could build an application where a user must be authenticated in order to view certain information or to perform certain tasks. For example, users must be signed in, in order to like posts, add posts, view certain posts, etc.

Resources

4. Build an application that connects to a database via an ORM

This is where you begin to get into the "real backend" part of a web application. For this project, you will be building an application that connects to a database(postgresql, mysql, mongodb, faunadb, firebase) through the help of an ORM(Object Relational Mapping) like Prisma, Mongoose, Knex.js, Objection.js and Sequalize.

An ORM is a tool to write queries in the language of your choice to get data from a database, instead of the need to learn SQL which might be a bit overwhelming.

Why?

After building this application, you will be really confident in working with databases and ORMs which are essential skills if you want to become a backend developer or a full-stack developer. If you are not interested in this part of web development, and just want to focus on being frontend developer, you can skip this project, but I highly recommend you try this project out because it is definitely a valuable skill to have.

How?

There are tons of guides and official documentation that well explains how to get started with ORMs, here are some that I found to be useful:

What to build?

For this type of project, you could build a simple CRUD application (like a notes app for example) where you perform these CRUD operations with your database by using an ORM.

5. Build an application where you put it all together

At last we come to the final project where you build a full-stack application using all the knowledge you gained from building the other 4 projects. This would be a surprisingly easy objective if you have completed the other projects, since all you will be doing is finding a way to connect these and make it into one application.

Note:- If you are not interested in learning or becoming a full-stack developer, you can totally skip this project. But I would recommend you do it if you have already completed building the other 4 projects.

Why?

By building this project, the main thing that you are trying to showcase is that you are able to work with both the frontend and the backend of an application. I think that there's nothing else for me to say as to why you should build this project other than the fact that you could call yourself a "Full-Stack Web Developer" 😁

How?

I think that if you have made it this far by building the other projects, you already know how to build this one, you just have to combine your knowledge you gained when building the other projects into one final product. Nevertheless, here are some tutorials to guide you:

What to build?

For this project, you could build any application that combines all of the other projects. Here are a few examples:

  • An image editor application. (Users are able to edit, save and download images)
  • A content writing manager. (Users can write and preview markdown, save and automatically publish to certain platforms)
  • A tweet manager (Users can create tweets/threads, save tweets/threads and schedule them)

Conclusion

That's it for this article, thank you so much for making it through this long article 🤗. I really appreciate you taking the time to read it (Hope it wasn't too boring). If you find this article to be useful, please do like and share with others. I would also like to add that this is the 2nd article for the 2nd week of the #2Articles1Week challenge. Learn more about it it here, I wrote an article about Diving Into The World Of Content Writing.

If you have any questions or feedback let me know in the comments down below and follow me on Twitter for more updates on my journey, tips and tricks about programming. And also, if you build any of these applications, make sure to share link to your project on Twitter and tag me @itsammaar_7 or in the comments down below or at Showwcase, I would be really glad to see how you built your applications.

Catch you all on the next article! Ciao 👋

2Articles1WeekWeb DevelopmentBeginner DevelopersDeveloperJavaScript