You also think creating a website from scratch is only something for geeks or design pros with expensive software?

In this short introduction i will prove the opposite - everyone can build a website and everyone can do it really fast.

Just keep in mind that this article just wants to show the bare minimum of what you need to get started. Of course there is much to learn in web development and there is almost no ceiling. In future posts we will cover the whole process in much more detail & we will discuss tipps and tricks to improve ones skills further. So follow us on social media or join the newsletter to never miss out on new topics.

Let’s dive right into it.

Why?

First of all - why should you learn how to build a website?

The answer for that is simple - it enables you to independently start a lot of new things!

• You want to sell something in the internet? - You need a website!
• You want to create an app for the app-store? - You need a website!
• You just want to express yourself on a blog? - You need a website!
• You want to have a better understanding how Google and SEO works - You need to know how to build a website!

And of course by learning web development you develop a great skillset that could help you in the future not only for private purposes, but also to perform better in your job or even land your dream-job. You would not believe where you can apply this knowledge.

So buckle up and get ready for the tutorial.

How?

1) Planning

Before even thinking about things like Tech-Stack or UI/UX Design, you have to think about the basics. If you don’t know the goal of your website or your visitors, your website wont fit in the niche you want to enter.

Therefore the first goal should be to answer the following 3 questions:

• What type of website do i need? (Ex: Business Site, Personal Blog, Portfolio, etc.)
• Who will be visiting my page? (Ex: Athletes, Business Owners, Tech Enthusiasts, etc.)
• What language do my visitors speak?

Pro-Tip:

Additionally to answer these basic questions about your website, set SMART goals for this journey, as they will help you stay consistent and not only finish creating your first website, but also maintaining it after its online.

SMART goals are goals that are specific, measurable, achievable, relevant and time-bound, as for example: I want to get 100 viewers on my blog in the first month after it’s upload.

Setting SMART-goals helped me very much throughout my whole life, not only in web development. If you want to learn more about this topic or in general how to get yourself doing what you need to, i recommend reading the famous book “Atomic Habits” by James Clear (You can find the book here on Amazon). Maybe i will write an article about the book eventually - please send me a DM on Instagram if you would read such a blog-post and if you have already read the book send me a DM whether you liked it or not, i am very curious about your thoughts on it.

But let’s get back to the topic.

2) Preparation

One of the most crucial steps in web development is good preparation beforehand, as it can safe you much time and headache. Believe me. Been there, done that.

Now it is time to decide for the “Tech-Stack”.

The first question is, do you want to code the website hard, by using HTML, CSS and JavaScript, do you want to use Content Management Systems like Wordpress or even use a full website builder system like WIX.

Both options have advantages and disadvantages, where i summed up the most important ones in the following table:

Option	Pros	Cons
Website Builder (Wix, Squarespace, Webflow)	- No coding required - Drag & drop design - All-in-one (hosting, templates, domain)	- Not very flexible/customizable - Expensive: monthly fees - Not ideal for scaling or advanced features
CMS (WordPress.org)	- Flexible with plugins & themes - Huge community & resources - Good for blogging and SEO	- Steeper learning curve - Requires maintenance (updates, security) - Can be overwhelming for beginners
Code from Scratch (HTML, CSS, JS, maybe JS Frameworks like React/Vue)	- Full control and customisation - Best for learning how the web works - No platform limitations - Lightweight and fast if done right	- Need to learn a bit of coding - For beginners: Time consuming to build & maintain

You can use this table to create your own opinion on what’s the best option for you. But i will explain why in my opinion, learning to code a website from scratch is the best one.

First of all it is totally free to create the website, unlike using a website builder where you already have to pay monthly fees just to learn how to create a website.

You can save this money by just investing a few hours of your time to learn the basics of coding or of a CMS. Your future self will thank you.

Also a website builder is not that flexible and scalable, so for a simple website it can help you, but in the future you will need to start from zero again if you plan to participate in bigger projects.

Which leads to the question if you should learn how to use a CMS like Wordpress or how to code the website itself.

What they both have in common is that you need to learn how to create & maintain a website using it. Of course by using a CMS you might be a bit faster with that, but you are missing out on benefits that come by the coding option.

While you are mostly pretty flexible in your web development with a CMS because of the great community and resources available, you potentially still reach the ceiling of whats possible.

By coding hard, your ceiling is the ceiling of internet itself.

This is an advantage, yet you might say “ah, … for my purposes i won’t have such special demands” and let’s be honest, for most of you this will be true.

But there is more to it. The biggest reason for me to really suggest you rather to learn coding itself than learning a CMS is that on this journey you will learn so much about the internet and how everything in it works and after you get better and better you will benefit highly from the knowledge and opportunities a hard-coded website will provide you in terms of SEO, Cyber Security and Customisability.

That’s when you will look back and thank yourself for testing it out in the first place.

In conclusion i will focus leveraging HTML and CSS for creating your first website, as for JavaScript and it’s Frameworks, i won’t talk in detail about them in this post, because it would go beyond the scope, but it is powerful and in future posts we will talk in more detail about that topic.

3) Design

Some people combine the coding and the design part, but i don’t recommend doing that. Especially for the first few websites, where you have to concentrate very much on the coding itself and don’t have enough free brain power to simultaneously design the website.

So my recommendation is to first design how your website should like and what it should do and then later code exactly what you designed.

There are different software tools that help you designing your website like Canva or Adobe XD, but what i like most is the software Figma.

It is a completely free software, available as a web app and a downloadable application, where you can create incredible designs totally from scratch.

(Source: https://help.figma.com/hc/article_attachments/26975850870551)

Figma is pretty straightforward and really powerful for designing websites, as you can use Figma templates for website dimensions and widgets and can easily create designs for the desktop version as well as the mobile version of your website (yes you should create optimized for both).

I personally recommend starting the design with the mobile version and the implementation with the desktop version as the mobile version is more important (most people will visit your website on a phone), but it is easier to implement first the desktop version and later change the parts needed for the mobile version. Most of the time you can reuse much of your code and just need to change the scale of parts.

Try creating a design that you yourself like and don’t stress too much about everything else in the beginning. Especially crazy animations and complex scrolling mechanisms are things for later. You should start with the basics.

If you need inspiration there are some websites i would recommend to visit, then you can look for similar stuff as your website should be and you will find websites that you like and that inspire you.

Examples are: Godly Website, Darkdoes

4) Coding

Now you reached the exciting point. You can start implementing the design you created.

To start writing code comfortably you should download some kind of software development environment. Of course could you write the code directly in Notepad++ or Text-Edit, but there is powerful (free) software available that will help you to create good code fast.

The most common free software option is Visual Studio Code (find here).

(Source: https://code.visualstudio.com/assets/docs/getstarted/userinterface/hero.png)

Lastly all coding editors are just fancy text editors, but they are really worth it, every developer highly recommends using one to write code.

Also there are many tutorials of how to use code editors like VS-Code you can find one easily on Youtube.

After finishing the setup, we can start developing the brad structure in a new HTML file and create the styling with a new CSS file. I recommend checking out freecodecamp.org (totally free) for basic exercises to learn how to write code in HTML and CSS, but of course you will find nice tutorials on youtube too that really don’t take much time and effort before you are able to start coding.

It is really simple and after spending only a few hours in testing you can start creating powerful websites yourself.

PS: Don’t forget using LLMs like ChatGPT or Gemini. These can create most of the code for you and help you get really fast in developing. And of course they help in learning coding when used correctly.

Nevertheless i’d highly recommend to code the tutorial and your first website yourself, thus you understand how the code works that ChatGPT is giving you.

You will know how to use ChatGPT afterwards. And it will become your best friend.

Try it out and enjoy the journey! You are officially a developer now.

5) Deploy and Test your website

After hard work you finally created your first website! Feels nice, doesn’t it?

Now you need to launch it and deploy the code to a server, such that people can also enjoy looking at your finished website.

If you had a powerful server and high knowledge in the relevant fields of computer science, you could theoretically do this yourself, but that is unrealistic and expensive. No one really does that for the first websites and almost no one does that at all.

The better option is to find a hosting provider where you can upload your code to their server, select a domain (your-domain.com) and let them do the rest.

There are many different hosting providers you could choose from, e.g. GoDaddy or Ionos in Germany.

But if you are looking for a solution with individual advice not only with the hosting itself, but with the whole process if needed and want to work with us at SMI-Digital feel free to contact us directly. We will host your website on our server and advice you individually on everything needed.

In the beginning you will find bugs and other things that don’t work like you wanted in the first place, this is completely normal.

However, after finishing the “debugging” - process you finally can show the whole world what you created. And it is just the beginning!

6) What now?

As i said, this was just the beginning! Now you learnt the basics of web-development and you can improve your website, create new ones and let your creativity run free!

You may add functionality, like contact options or implementing an online shop.

Create award-winning designs or interactive web apps.

There is so much more to it, like JavaScript-Frameworks or SEO that you could learn.

There are no boundaries set. It all depend on what you want to do and what you want to learn.

I’d love to help you on this journey. Therefore in the future this blog will feature many topics in web development - i am sure it will bring you on new levels.

Stay tuned and always be ready to learn something new!