How to overcomplicate building a webpage

A simple webpage is often the first thing that new web developers build. They can be accessed by users all over the world, and need to make a good impression. That’s why its crucial to implement as much functionality as possible, as well as use multiple different frameworks, with each one doing one little thing a bit better than the last. This is a simple guide to create the most complex, unmaintainable webpage possible.

Technologies needed:

• All of them

Design

First, we obviously need to create a design for our webpage. There are many tools out there for designing websites, so naturally we’ll spread our designs out across multiple tools and platforms. With this done, we’ll forget where we stored each section of our design, so start from scratch and repeat the whole process. Eventually, it’ll be time to jump into development. This is the point where we can ignore all previous designs we created and develop a completely new one on the fly.

Styling

Photo by Ricardo Vania on Unsplash

Now there are many different ways to develop the styling for our webpage. Bootstrap seems like a sensible starting place, so we’ll use that to create the basic outline.

We’ve got a few elements built, and our page is starting to take shape. However, having just read up about tailwindcss, it seems to be a lightweight, new way to style our html. Therefore, we’ll start using that in combination with Bootstrap, meaning we won’t be able to tell the two apart, and it’ll be almost impossible to maintain down the line. Now that’s sorted, we can move onto the next part of our landing page.

Frameworks

With the main design of the website finished, you may be thinking our webpage is almost finished. Unfortunately, you’d be wrong. Javascript frameworks have become more and more popular, so it would only make sense to redesign our entire application using one of these frameworks.

Picking a framework can be a very difficult task as they all have their own pros and cons. With this in mind, we’ll create three identical copies of our application using React, Angular and Vue so that we can decide which we prefer. Having finished these, we’ll pick whichever we finished last because that’s the only one we can remember how to use.

API

Our webpage is almost complete. However, it would be really good to have some live data present. For this, we’ll have the simple task of connecting our application to an API. While existing APIs do exist for the exact purpose we want to use them for, it only seems sensible to create our own proprietary API to do the exact same thing. Furthermore, we won’t document any of it to make it even more difficult to use in future.

Now that’s all done, we can connect our landing page to the API. There are lots of different ways of doing this, such as the Fetch API or Axios. We’ll try both of these, and then forget to take out the other, meaning our application is making twice the requests it needs to be, and driving completely unnecessary traffic through our API.

Deployment

Photo by SpaceX on Unsplash

Two years later, our webpage that was meant to take 2 weeks to finish is done. We now just have the simple task of deploying it. While this is only a static site and could be deployed very simply with an application such as Netlify, we’ll use our own virtual server to have complete control over our landing page. We only have the simple task of installing an operating system, setting up apache and setting up load balancers for the vast amount of traffic our landing page isn’t going to get.

Finishing up

Looking back on our project, we’ve created a masterpiece. That does assume we never want to make any changes or update anything within our application. Although by now, we can be fairly confident that a package we’ve used in one line somewhere has been changed, breaking the whole thing. With this in mind, its time to start all over again…