How to develop your website

During quarantine, I fell back in love with something, coding. Thanks to the outdated and inefficient spanish education system I was not introduced to programming until the first year of my bachelor, and I loved it, but there were no more software-focused courses during my degree. On the final year, I was super lucky to find a bachelor thesis about developing an app for the San Carlos Hospital in Madrid. I knew nothing about the technologies I was going to use, but I trusted in my ability to search on Google how to do things. At the same time, I got an offer for an internship at Avanade as a software developer, which I accepted. 

I never knew you could be so happy working, all the people at the office were super nice and the job was fulfilling and exciting. In the morning I would code and in the afternoon I would study the few courses I had left or work on the thesis. Those months were some of the happiest I can remember. But once I finished my thesis and my internship to start studying my master in Edinburgh I completely forgot about coding, about the thrill of solving small problems and how satisfactory that is.

Then, I was in my flat all day because of the global pandemic we all are tired of hearing about and I was like two weeks ahead on the homework and decided to build a CV website during Holy Week. I worked for four days or so hard and got 99% of the page done, but more important was that I got back that fire in me. Some weeks after, my colleague Javier Navamuel complaint about the budget managing app he was using and I decided to make a website for that, my first “big” project on my own. It was mainly to practise my coding skills and learn Flask, the Python back-end framework.

Here you have a simplified development journey to have an idea on how to tackle such a project.

Design an MVP

Once you know what idea you want to develop, you need to outline a minimum viable product. This will be a first functional version of the software, where you can add more features if needed in the future, but the core structure must be there. You need to decide which features are fundamental to the project and start laying out the main building blocks. 

This step could be done on a piece of paper, Microsoft paint, Photoshop or specialised tools such as Figma or Zeplin. Drawing it is crucial for creating a mental image of the goal and motivating yourself.

Break it down into small tasks

Now that you have a goal in mind we need to split it into smaller simpler tasks, categorised into milestones. That order will help you know what else to do once you feel blocked or don’t feel like doing one specific task, which you can put that one on the bench. The feeling of progression is also very important for keeping the motivation and not abandoning the project. A great tool for this job are webpages like Trello, where you can use a Kanban-style board to set these tasks and milestones.

Choose the technologies

There are two main components for a website, the front-end and the back-end. The easiest way to explain it would be: the front-end is everything that you see and the back-end is all the magic that makes it possible. For the front-end the main technologies you will be using is HTML5. CSS3 and JavaScript, but you can use other libraries such as Bootstrap or Material Design Lite to facilitate your work. There are icon libraries, component (buttons, sliders, menus, etc...)  libraries and even more complex frameworks that are very useful for more complex applications. For the magic part of your web (back-end), you have to choose your database manager, and there are many frameworks that could manage all the complex tasks such as database management, routing, API communications and many other functions you may want to develop.

The technologies you chose will determine the capabilities of your website as well as the complexity of the development process. For example, for the back-end, they could be built on several programming languages such as Python (Flask and Django), JavaScript (Node.js), PHP (Larabel) just to name a few. Therefore, this is a crucial step, in which you must do some research to find the best tool for the job.

In my case, I chose Flask because I knew Python, but I wanted to improve at it and was good enough for my requirements. For icons and components, I chose Material Icons and Material Design Lite because they look good and where easy to implement.

Develop the basic back-end structure

Depending on the idea you have, you may need some things and not others, but probably you need a database, a user management system and several pages for your website. You can start designing and implementing these key elements of the back-end. An important lesson I’ve learnt during the development of my website is that planning things will save you a lot of time. I started without a plan and halfway I had to redo most of what I had done to implement the user management system because I started trying to put the cart before the horse.

Build the front-end

Now that you have the “brain” of the website you can start designing and developing the basic pages for your website, landing page, login page, menu and any other relevant sections. Once you have the visual elements you have to connect them to the back-end in order to make them useful, dynamic and fulfil their purpose. What good is a login page if it does give you access to the rest of the website?

Complete your plan

It feels like you have done 95% of the job, you have some functional website which connects to the back-end, you may get or post information to the database, but you need to finish the plan. The last mile may take you longer than you think, but you will enjoy more than you think too. Only the finishing touches are left, making the website beautiful and implementing the last features for your website, now it is much easier, you know how to do most things and you have the building blocks ready.

Share it with the world

Once you are happy with you MVP you have to make it available to the whole world. You need to host your website and server somewhere. If it is a hobby project you can do it for free at a service such a Heroku or even using an old computer (or raspberry pi). But if you are serious you will need to get a domain, some options are Namecheap, Google domains or Godaddy. The next step would be to host it somewhere, you need somewhere to have the database and run the server that will manage your website, such as AWS, Google Cloud, Azure, and many others.

I hope you learnt something new and here you have the website I developed just in case you want to check it out: http://money-manager-mcc.herokuapp.com/