how to create a website from scratch

In this series, we will start from the very beginning on how to build a website from scratch. In this article we will not be using any of the popular framework, if you want to install wordpress on your own server click here. My goal is to have a fully functional website built on a solid foundation from the very beginning.

This page will be updated continuously as I add new videos. So please do come back often if you want to follow along. The content will be presented through YouTube videos so feel free to subscribe on my channel to get updates.

Watch in full screen to follow along better — Intro

YouTube Series

YouTube Playlist
Video Link	Download Asset
Website From Scratch - Part 1 - The Content	Asset 1
Website From Scratch - Part 2 - HTML Pages	Asset 2
Website From Scratch - Part 3 - PHP	Asset 3
Website From Scratch - Part 4 - The Framework	Asset 4
Website From Scratch - Part 5 - The Router	Asset 5
Website From Scratch - Part 6 - More Framework	Asset 6
Website From Scratch - Part 7 - HTML Rendering	None
Website From Scratch - Part 8 - Data Manager	Asset 8
Website From Scratch - Part 9 - MySQL Database	Asset 9
Website From Scratch - Part 10 - Back to Basic	Asset 10
Website From Scratch - Part 11 - Admin	Asset 11
Website From Scratch - Part 12 - Admin CSS	Asset 12
Website From Scratch - Part 13 - Article Editing	Asset 13
Website From Scratch - Part 14 - Add New Article	Asset 14
Website From Scratch - Part 15 - Polishing the Admin	Asset 15
Website From Scratch - Part 16 - Quick Redesign	Asset 16
Website From Scratch - Part 17 - Services	Asset 17
Website From Scratch - Part 18 - File Upload	Asset 18
Website From Scratch - Part 19 - File Upload 2	Asset 19
Website From Scratch - Part 20 - User Authentication	Asset 20
Website From Scratch - Part 21 - User Authentication Part 2	Asset 21
... In Progress

There is a challenge in finding good and complete tutorials on the web. It is mostly provided by people who use their free time to teach others entirely for free. Making a complete tutorial is hard because there is plethora of ways to get the final result. As a result you have a tutorial that starts with how to build a single module, and the next thing you know they fast forward to a completed website and tell you that you can do it too.

Every tutorial on the web

Every coding tutorial — How to draw a horse, Van Oktop

My Goal from the very beginning is to not follow this trend, but I also have to remember that making you watch a gazillion 2 hours videos is not an option. So from the very beginning, I want you to know that it's going to be a long process. If you seriously want to learn how to build a website from scratch then follow along.

In these videos, I code. And I code a lot. Some of them will be hours of coding compressed into a gullible time. The code is important, but what is more important are the insights I will provide as you follow along. So don't worry so much about matching my code to a T. Listen and you will learn concepts and you will be able to open your own editor and design your own framework as you see fit.

If you haven't started to watch already, here are the things we will be talking about.

Content Before design.

One thing I insist upon is to work on what your website is going to be offering instead of the website itself. We will be building a blog, but the same concept can be applied to any other fields. For example, if you are an artist and want to show off your art, I suggest you start by having art to show off. Take pictures, make videos or do whatever your medium of sharing is. Once you have something to show for, you build a basic website like the one we did in Part 1

Once you have a consistent way of showing your work, even if it is complicated, I suggest you keep at it while you build a more robust website on the side. No one comes on your website because it is beautiful, they come in because of what you offer them.

In the blog we will be building in these series, we focus on writing content first. If we don't know how to write HTML we can easily copy those .txt files directly on the server and get it over with. Google can still parse those.

Using a dynamic language — PHP

We will be using PHP in these series, because in my opinion it is the language with least resistance. You can quickly get started no mater what Operating System you are using.

We start by writing spaghetti code and build something convenient that we can maintain. As long as it doesn't stop us from continuing to write on our blog.

If the code becomes too complex and requires more work for the smallest change, then we will start to consider using a framework. For most people using wordpress is the option. And that is completely fine. The reason we are here however, is to be able to build things from scratch. Also you don't want to modify wordpress core.

There are many frameworks available, my favorite is Symfony. I decided to take the best features from all the frameworks I have used and build my own. So at this point, we will start building an entire framework from scratch while still having the ability to continue uploading blog posts in our website.

Building a framework.

Building a framework is a challenging task. The current framework that runs this website has been designed in 7 days, and has been in continuous development for the past 4 years. It's easy to make the blueprint and start coding right away, but it won't take long to realize that we all write shitty code with bugs.

In Part 4, I start building the framework. I show you the different sections and what we need in order to have a solid framework from scratch.

The framework has 3 major things to handle:

Route requests
Process Request
Send a Response

Routing a request

This part is handled by the Router. The router reads the URL and tell us where the code to process it is.

Processing the Request

This part is handled by the Controller. The controller takes the router's data and build a page. This is where the person using the framework will write code.

Send a Response

The response is simply an object that returns the built page back to the browser.

Of course each of those objects will have to be built by us and we are going to add additional tools to make our life easier.

This is still a work in progress. I will be updating this page as the project takes shape. Feel free to subscribe to my Rss Feed, twitter, and YouTube Page.

Thank you for reading and I hope this series will be useful to you.