If you want to present yourself on the internet these days, you don’t just need social media. With your own website you have a very individual presentation independent of the large networks such as Facebook, Youtube …
This is the state of affairs in today’s world dominated by the Internet. How should a customer find you if you don’t have a website? Hiring a web developer to make a website for you can get very expensive. Learning how to develop a website yourself can be a more sensible alternative. In this tutorial you will learn how to develop a website from the beginning.
Website creation methods
If you don’t know how to build a website from scratch, the whole topic can seem complex at first. Hosting, domain names, programming …
Confused already?
Stay tuned. Read this guide and the confusion will be resolved forever.
The success and the feeling of creating something that wasn’t there before is comparable to almost nothing in the world. The aspects you learn while creating websites will always be with you.
You may even enjoy creating websites so much that you decide to change careers. Did you know that there is currently an enormous shortage of skilled web developers in the world?
Maybe you are the next developer. But let’s start with the fundamental question:
How do you create a website? All your questions answered.
In this section, we’re going to tell you everything you need to know to build a website. There are four aspects and one further point:
Where can I get a domain from?
How do I get web hosting?
How do I create the concept for a website?
How can I code in HTML?
How can I design websites in CSS?
How can I program in JavaScript
Summary: HTML, CSS, JavaScript
First, let’s define what a simple website is. For the purposes of this tutorial, it’s a small website that advertises what you’re doing and provides contact information from future customers.
It aims to answer three questions:
- Who are you?
- What are you doing?
- How can I contact you?
One to three pages are sufficient to provide the visitor with this information. With HTML and CSS you can not only equip the website with simple functions, but also make it look good.
If there is more you can expect from your website, such as providing some sort of ecommerce functionality or hosting a blog, you need to learn more about web development including a backend programming language. “Wait a minute, what the hell is a backend?” You should ask us now.
When a website appears on my screen, it’s the front end. If you can’t see it, it’s the backend.
Frontend: buttons, images, text – that’s the frontend.
Backend: How does your website process an order for shoes? This is the backend.
In order to program the backend of your website, you need to learn a programming language like JavaScript. We don’t recommend doing this yourself. When it comes to money transactions, as is the case with an online shop, it is best to have an experienced professional take care of it.
However, having a simple website is a different matter. You can do that yourself.
Now let’s dive deeper into how to build your first website from scratch.
Where do I get a domain / internet address from?
Before we tell you how to buy a domain, it might be a good idea to know what a domain is.
Just like you have an address in the real world, your website must also have an address on the internet. The domain is your address. www.webcodes.net is ours.
Okay, how do you register a domain? First you have to think about who you are and what you are doing. If you’re creating a personal website to promote yourself, consider calling it firstnamelastname.net. If your name sounds complicated, you may need to get creative. Keep in mind that a .net or .com address is considered the most reputable in many industries. Try to choose one of the two domain extensions.
Don’t forget !
Don’t forget that the name should be related to what you do and who you are.
Once you’ve decided on a few domain name options, you’ll need to use a domain availability checker to see which are available. Once you have decided on the name you want, you need to buy the rights to the domain you want. Usually your chosen hosting provider will allow you to purchase the domain as part of the hosting setup process.
Create a website concept / brainstorm ideas
Before you sit down at the keyboard and make all possible attempts to set up a website as quickly as possible (who doesn’t want to get this topic over with as quickly as possible?), You should think about the content, structure and appearance of your website.
So when you have your idea of a website, start a little brainstorming to find out what it should be about. Write down which points would be important to your visitors and what look your visitors might like, simply said as done 😉
If this is difficult for you, then take a look at current websites and let yourself be inspired. Then you should still think about which functions should be found on your website. Can your visitors register? Can they only retrieve information? Should it be possible to comment or create content?
The more special interactions you want to offer your visitors, the more complex the programming becomes. If your website is “only” a business card and sales presentation, the effort is more manageable. Once you have put your idea in concrete terms, the concept begins.
This is how you create the concept:
Define a specific topic, the type of your content and the content structure. The user should be able to find the right information as quickly as possible, because nowadays it takes only seconds for a website visitor to leave your website because they cannot find the right one.
If this is your first time creating a website, start small. You can gradually make your project bigger and bigger. Start with one or two pages and build your page bigger the more you learn. Then it comes to the design. You choose the colors and layout of your website, as well as the navigation.
You sketch all of this on a piece of paper (you can use software to do this, but paper is really easier to start with).
From paper to website
Now that we know what our website should look like, let’s start programming the website. If you’re just starting out, you’ve probably been looking for “easy” ways to create your website. Modular programs or content management systems such as WordPress are very tempting when you are just starting out.
The problem: As soon as things get a little more special, you stand on the hose. From experience you can say:
If you are not familiar with the standard supplied, e.g. from WordPress (by the way, this also applies to website construction kits), you will have to make adjustments. But even if you just want to click your website together with a simple modular system, you will not be able to avoid working with web technologies such as HTML at one point or another.
Zack! And that’s where the first technical term was used. If you have at least the basics on it, you will be able to create really beautiful websites with the right tools.
What is HTML?
HTML (or Hyper Text Markup Language) is not a programming language, despite what many people believe. HTML is responsible for making the elements work on your website. It’s like the framework that you build the website on. Every aspiring programmer should be proficient in HTML, as it will accompany you again and again.
HTML tells your website what text should appear on the page, where images should be, where links should direct the user.
To see what HTML looks like on a website, let’s open the website “webcodes.net”. If you use Firefox or Chrome, click the right mouse button anywhere in the browser. Click “View Page Source” to see what HTML looks like on a website, open the website in the Google Chrome web browser.
A new tab opens with the website code. Don’t let our source code intimidate you. Your website will look much simpler and cleare. It is not necessary to write 5000 lines of code to make a well-functioning website.
Okay, now you have an idea of what HTML is. Now is the time to learn how to build a website using HTML.
There are hundreds of HTML courses, how-tos, and tutorials on the Internet. We also write a Learn Programming tutorial on how to learn HTML quickly. This tutorial will tell you everything you need to know to get started.
Alternatively, you can take our HTML course or the beginners course. In both courses you will learn HTML. So if you want to create your website this is the way to go.
Unfortunately, HTML is not enough. In addition, there is CSS for the graphic design and if your website is to function nicely dynamically, then you should also learn Javascript. Even if that sounds like a lot of work: This combination of three is the best you can learn.
What is CSS?
We mentioned CSS before, but didn’t really say what it is. It is time to change that. Because it is a very important step on your way to your first website.
We found that HTML is used to “show” the Internet where text and other elements of the website belong and what they should do. CSS, or Cascading Style Sheets, is a language that tells the website what all the different elements should look like. While it designs your website elements, it is NOT a pure programming language.
Please what?
With HTML, you can turn your website into a simple line of text that represents the phrase, “I’m learning how to create a website from scratch”. This text will be very simple and understandable.
With CSS, you can change the font, size, color, alignment, and position of this text on the page, as well as many other aspects.
With more complex websites, your options are really only limited by your imagination and your knowledge of HTML and CSS. At least when it comes to the look of the website. For functionality, you should at least learn the basics of JavaScript.
What is JavaScript?
If HTML and CSS are languages that tell the browser how to create a page, JavaScript is a real programming language. It is important that every front-end developer understands this demarcation.
For a simple website, that’s fine. But what if you want to get fancier with it and add some animation? You can create pretty cool animations with simple JavaScript.
For a simple website, that’s fine. But what if you want to get fancier with it and add some animation? You can create pretty cool animations with simple JavaScript.
Once you have a set goal for creating your first website, you need to learn HTML for the framework, CSS for the styling, and JavaScript for the functionality.
Summary: HTML, CSS and JavaScript
HTML, CSS and Javascript, once you have learned these programming languages, you can program anything you can imagine. But with that you only have the absolute basics.
If you try to build a professional website with these basics alone, you will despair very quickly. You can try this for learning, but to build a serious website you have to use or learn other tools.
As already mentioned, a content management system can be used to create a professional looking website, but you can’t avoid the basics. Once you’ve created your website, the big day comes to bring it to the internet.
The finished website from the example sketch could look like this:
Website creation software
Okay, let’s say you have learned everything to build your dream website using HTML, CSS, and JavaScript. You know how to define the elements you want, what they look like and what they do.
That won’t make your website appear out of nowhere. You need to write the code in .html, .css and .js files and upload it to your website through the hosting provider.
But what tools do you need to write the code?
IDEs
IDEs, or Integrated Development Environments, are specialized programs that contain everything you need to build a website or application.
The best IDEs like WebStorm, Visual Studio Code or Adobe Dreamweaver may have hundreds of features, including a live preview of the website, but the truth is, you don’t need them for your project.
If you’re looking to build your first website, there’s no need to buy an expensive professional IDE. Instead, you should use a text editor.
Text Editor
A free (open source) text editor is all you need to create a website and get it on the internet. There are a variety of tools available to choose from. You can download Atom, Notepad ++, Vim or Sublime Text 3.
How does it all work? It’s easy. You create a new document, format it HTML-compliant and save it with the extension.html, e.g. index.html. You then link your .css file to determine how elements look in the HTML framework. That’s all you need to make a simple website.
Now you’re probably asking: “It’s just text, how do I know what my website looks like on the Internet?”
Very gently. All you have to do is open the HTML file with any internet browser. With the text editor of your choice and a web browser, you can change and design your page until you are satisfied. At this point, you will upload the files through your hosting provider and the website will be online soon.
Automated tools
While it’s great that you want to build a website from scratch, it can also cause problems. You can develop a simple website to tell people who you are, what you do, and how to contact you.
But what if you want to add a blog? Of course you can add a blog.html and link it to the rest of the website, but posting new posts without a backend solution becomes extremely annoying. With a backend you can create and publish new blog posts much more easily.
WordPress
There’s a reason most of the internet is based on WordPress. It is a content management system with an extensive library of templates and plugins. If you want to equip your website with functionality of any kind, the chances are high that there is a suitable WordPress plugin for it.
Setting up a website with WordPress is 100x easier than programming your own content. All website hosting providers have tools to automatically set up your website on WordPress. When that’s done, log into WordPress and you can change the design, add plugins and add the desired content (images, text, video).
If you try to create a website, your new knowledge will not be lost through WordPress. On the contrary, because WordPress can also be customized with HTML and CSS.
Website Builder Services
You can definitely learn how to create a website from scratch, but there are people who have looked at the topic years ago. These people created websites that you can use to drag and drop elements into your own website.
A website within a website ?! That’s crazy.
Website builders are currently heavily promoted on YouTube. Chances are you’ve at least heard of these. If not, these complete solutions are just a Google search away. For most purposes, tools are a quick and hassle-free way to build a simple website.
Remember, the latest website trends tend to rely heavily on images. You will likely need lots of professional photos. Pro tip: Upload the pictures to the kraken.io website. This website makes the image files smaller without deteriorating the quality. Smaller image files will make your website load faster.
Fast loading times are very important for user-friendliness. The general conclusion is that the faster your website loads, the more likely it is that a visitor will stick around and look around.
Off to the Internet: Publish your website
As soon as you feel that your website is ready for the wide internet, you want to bring it to the internet ANYWHERE. The whole thing is of course not that easy if you have absolutely no idea how the Internet actually works and what actually happens on the Internet when you want to surf a website.
This means you should learn a few basics of how the internet works roughly. Except for the bit and byte level, knowledge is not necessary, but you should be able to do something with terms such as IP, HTTP, DNS and FTP so that you do not spend hours looking for errors.
In order for your website to be accessible on the Internet, it must be hosted on the Internet. This means that the files and data of your website must be on a computer (web server) on the Internet, which can send them to a browser on request. So that you can easily reach it, you also need a domain address and our website has the domain lerneprogrammieren.de.
Usually you have to register with a web host for a fee.
In the basic cases, hosting costs no more than € 5 per month, that’s only 16 cents a day!
Most of the time, your own e-mail addresses with the appropriate domain are also included. That is really cheap, and there are also free hosters, but these have restrictions due to advertising or domain selection.
Your own computer is not suitable for this, because it would have to be switched on 24/7 and should have enough computing power and a stable internet connection (which must be available 24/7).
Otherwise your website will be offline faster than you would like, e.g. When the internet line is overloaded by streaming or there is a power failure. The web hosts guarantee you a certain high availability and are really cheap. To be honest: If you don’t have 60 € a year left for web hosting, you should first take care of other problems than hosting a website 😉
Advanced topics (only as an additional indication of how to proceed!)
Once your website is on the Internet, you will quickly notice that there is still a need for further adjustment. A functionality that you want to add or new content. For example, you can use Javascript to make your website react dynamically and in a modern way or even convert it into a web app that can even be called up as an app on a mobile phone.
Backend of a website
Then there is the topic of the backend: As soon as you want to offer a member area, shop or similar, you will have to have a place where this information is managed and kept. In the meantime, you can also do this with the Javascript language, so you don’t have to switch to another programming language, at least at the beginning.
Other popular programming languages for the backend are for example PHP or Java.
In the backend, you usually create a service that accepts or delivers data for your web application. The data is then saved in a database. Security and usability are added as further advanced topics.
When it comes to advanced subjects, you can never really stop learning, especially because new technology comes out every few months that makes everything easier and more beautiful.
Conclusion on website creation
How do you build a website from scratch in a TL; DR version? Building it can be simple or complex. Depending on which method you choose.
If you choose to learn to code, it can get challenging. But in the end it is worth the effort. On the other hand, using one of the numerous website builders available will make the process a lot easier.
The whole thing looks like a lot of work at first glance, but a few points can be learned within minutes. Other topics are easy to learn, but you have to gain a lot of experience before you get satisfactory results.
The important thing is to just jump in and get started. If you use the right courses, nothing can really go wrong.
If you want a challenge, start learning HTML and CSS first. Don’t buy a domain or hosting yet. First open the created HTML and CSS files with your browser. Write your website with a normal text editor that you like.
As soon as you know how to use HTML and CSS, you should learn the basics of JavaScript in order to equip your website with fancy animations and functions.
When you have what you need, start creating the website files you need. As soon as you have created the website according to your wishes, create the respective files. Now it makes sense to order the domain and the hosting. The hosting providers (at least the reliable ones) will have tutorials on how to get your website published in a few clicks.
