How I Build Websites: The Web Development Process

Profile picture of Jure Reljanovic HackerNoon

Swear Reljanovic

Hello, my name is Jure Reljanović. I love learning coding and technology and helping others by sharing my experience.

Many people, especially beginners, think that developing a website is all about coding, but it’s not. There are plenty of other things you need to do if you want to create at least one decent website. The part where you actually build a website with code or with WordPress or another CMS is only a small part.

It’s relatively easy to build a website when you know exactly how it will look and work. For me, the hardest part is actually coming up with ideas for how the website should look and all its features. So, in this article, I will show you what the process of creating a website looks like.

Note: Here I am mainly talking about websites built with code, but this same process can be applied to build any website.

1. What the website will do

The first part is to get as much information as possible about what the website is going to do. If you’re creating a website for yourself, it’ll be relatively easy, but if you’re creating a website for someone else, you need to get as much detail as possible so you know what you need to do.

In this first step, I usually write down everything I need to do and also write in what order I need to do it. For writing I just use notepad, you can use whatever you want, whatever.

2. Create a sitemap

The second thing I do is create a sitemap. A sitemap is basically something that explains how things are connected and the relationship between them. It can be web pages, databases or anything else. For example, in the image below, we see all the parts of this website, where each page can and cannot take you and summarize the features the page is going to have.

picture

To create sitemaps, you can use any tool of your choice. It can be Paint, Photoshop or something else. Personally, I use Microsoft Word or lately I use an online tool called Figma, which I’ll probably always end up using because it’s free and very simple.
3. Website design

3. Website design

The third part and the part that most people associate with building a website is the actual design. Designing a website before you start building it is really important because it’s easier to design a website in some drag-and-drop software than in the code itself. This way, you can easily change something if you don’t like it or if the person you’re building a website for doesn’t like it.

For design, I also use Figma, because of its simplicity and freeness. You can use whatever you want, but the most important thing is that you like this software. When the design suits me or the person I’m building it for, then I can start building a website with code.

4. Create a website with code

Finally, we got to the part where we actually build a website. I build websites with code, but if you can use the same process to build a website with WordPress or another CMS. Either way, this shouldn’t be the part where you do the design, but rather the part where you build the design you did before.

picture

In terms of technologies I use, I use HTML, CSS, JavaScript and a bit of Bootstrap to build the front-end, sometimes I also use jQuery. For the back-end, I’m using Python with the Flask framework. And for the database, I use SQLAlchemy. Here are some courses that I have personally used to learn:

5. Test and launch the website

The final step is to test if all the features you have created are working, fix any issues that are not fixed and when you know you have a fully functional website without any errors, you can launch it live for people see it. To launch a website, you will need a web hosting server and a domain name. There are many good places you can get them, I personally use Bluehost for both.

Conclusion

As you can see, the process of creating a website involves many more steps than just coding. When you put all these steps together, you can create a beautiful website.

I hope I have helped you with this article. If you liked this article, be sure to share it with your friends.

Also, if you think I missed something or have any other questions, be sure to post your questions in the comments or email me at [email protected], I will be happy to answer them.

Keywords

James S. Joseph