HTML & CSS

Creating a website is not a one-step process, you need an idea, a design, the program, deployment and last but not least you'll need to optimise it for SEO.

Creating a website these days can be quite easy, depending on your needs you can decide to go the static route or the dynamic route. I'll explain the differences and show you how to get started.

Static vs Dynamic websites

The difference between these two are usually very clear. A dynamic website it's dynamic data is stored on some kind of database, be it SQL or NOSQL. Systems like Wordpress, Drupal, .. and many other CMS's are all dynamic.

A static website is really simple: it's static. Nothing will change to this page unless the developer gets involved.

Static advantages:

Dynamic advantages:

Static websites

To build dynamic websites you actually need to think about the static part first, so it makes sense to start with static.

Webpages exist out of HTML & CSS, to add some interaction like click-events you'll also need Javascript.

  1. Learn HTML
  2. Learn CSS
  3. Learn JS

A great source for learning these basic languages is Code Academy

Dynamic sites

Now that you know how static sites work you'll quickly notice the annoying parts of static, which is code duplication.

Dynamic systems solve this problem by allowing the developer to re-use code on similar pages. A header is mostly the same everywhere, right?

The use of dynamic websites also introduce the option to work with databases, for example a simple blog will store it's articles in the database. For each article the same code will be executed.

PHP, Node, Python, Ruby and much more can be used to create these dynamic webpages, they're called backend languages since they run on the server, not in the browser.

Code editor and IDE

But to simplify your work with code syntax and highlighting you should use a code editor. I prefer Visual Code Studio since it's free, but Sublime Text is just as great. I don't like Atom, to laggy for me.

To program backend code I use PhpStorm since PHP is my go-to backend language, it supports code generation, and works great with namespaces and PSR standards.

Wireframe, design, develop

  1. Wireframe
  2. Design
  3. Develop

Wireframe, design and develop are the three steps to create a website. Wireframing is creating the general structure of where the data should be. F.e. the header, the top 3 blocks, a middle section and a footer is a really simple wireframe.

Next up is the design, you can choose to skip this part and start working directly in the browser. But from my experience I feel that this limits my imagination during the designing process and might not save you time after all.

Now comes development, take a look at the wireframe and design and maybe sketch on a piece of paper how the general layout of the pages is structured.

I always start with the homepage and create the needed html elements on the page and style them afterwards. This requires some practice already though, so it might be good to style them one by one if you're just getting started.

Now that you basic HTML is ready and your CSS, you can start making some elements dynamic. Remember that blog I was talking about?

You should not create dynamic websites from scratch anymore, you should now start using frameworks such as laravel, ruby on rails, django or Symfony. (I prefer Symfony)

Deploy

Deploying can be done several ways. You'll first need a domain name, a hosting provider or your own hosting server.

You can deploy via:

You should now know all the steps needed to configure a website from scratch, if you've got any questions about each step feel free to comment below and I'll answer them accordingly.

Written by Ciryk Popeye
Founder of Web hints and professional web developer