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.
- Really fast
- Full control of the design and layout
- Easy to build
- Quite a bit slower than static pages, since computing is a nescessity
- With CMS's like Wordpress & Drupal you may not have full control about the design and layout. A text can f.e. be too long for that div..
- Things are more complicated
To build dynamic websites you actually need to think about the static part first, so it makes sense to start with static.
- Learn HTML
- Learn CSS
- Learn JS
A great source for learning these basic languages is Code Academy
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
- Sublime Text 3
- Visual Code Studio
- PhpStorm The use of a code editor is a nescessity. A website is actually a bunch of characters which the browser understands, so any text editor would do (Even notepad).
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
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)
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:
- SSH (fastest, on large projects might be a problem)
- FTP (easiest, on large projects might be a problem)
- Git & Gitlab (easy, fast and future proof)
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.
Interested in more articles about HTML & CSS?
Dec 06 2018
Learn how to use SCSS with a few basic examples using nesting, mixins and extends. Become a more efficient developer today.
Dec 06 2018