Now, it’s time to start the actual website development.
So, where do you start?
There’s an endless number of web development guides and resources telling you how to go about developing a website.
In this post, I’ve collected the very best resources and divided them into different groups.
The groups will be similar to the ones you found in the technology selection article, with a few additions.
Some of them are guides written by me, but most of them are in-depth guides and resources written or presented by other experts that love to share their knowledge and experience.
Content Management Systems
A Content Management System is a software application that allows users to easily create, modify and publish content on the web without knowing how to code (HTML, CSS, JS, etc.).
Since they make it so easy to create an update content, a CMS is a really good option for websites that frequently update their content. That could be websites such as blogs, news sites, portfolios, and online stores.
Since there no coding involved, it’s also a very popular option amongst beginners.
Below you’ll find guides and resources that will help you get started with either of the three most popular Content Management Systems.
The most popular CMS in the world. It’s known for its intuitive user interface and low learning curve, making it a popular choice for beginners.
Official WordPress site – Get a feel for the different themes and plugins available. Download WordPress if you want to try it out locally on your computer. Check out the available documentation containing instructions relevant for both beginners and experienced WordPress developers.
How to create a WordPress site – A detailed guide on how to get started with your first WordPress site.
How to install WordPress locally – A detailed guide on how to test out WordPress locally on your own computer.
The second most popular CMS. Provides a more content and structure flexibility compared to WordPress, but also has a slightly steeper learning curve.
Official Joomla site – Download Joomla if you want to try it out locally on your computer. Check out the available documentation containing instructions relevant for both beginners and experienced WordPress developers.
How to create a Joomla site – A detailed guide on how to get started with your first Joomla site.
The third most popular CMS. Known for its flexibility, security and power, and its steep learning curve.
Official Drupal site – Download Drupal if you want to try it out locally on your computer. Check out the available documentation containing instructions relevant for both beginners and experienced WordPress developers.
How to create a Drupal site – A detailed guide on how to get started with your first Drupal site.
If you’re opting for more technical development options than Content Management Systems, you’ll eventually have to do some coding on your own.
If you have no prior experience, I strongly recommend getting a basic understanding of the relevant languages. That is before you dive into one of the many web development frameworks.
Let’s start with the best free resources that span across several languages
Mozilla Developer Network (MDN) – “Resources for developers, by developers”. You can’t go wrong with MDN. It is probably the most reliable and up-to-date web development resource out there. Consists of in-depth guides covering everything from basic HTML to more advanced topics such as API’s and cross-browser testing. Definitely worth checking out.
FreeCodeCamp – Looking for more interactive tutorials? Then you should definitely check out the thousands of coding lessons offered by FreeCodeCamp. Solve tasks by doing actual coding in the browser, and see the result right away. (Pst! They have a YouTube channel as well)
Traversy Media – Reading isn’t your thing? Then you’re in luck! Brad Traversy have created an impressive collection of more than 600 YouTube videos describing different aspects of web development. The 44 million views he currently has, just confirms that this is top notch quality.
Scrimba – Scrimba takes it even further and have managed to combine a screencast with interactive coding. Pause the screencast at any time and play around with the instructor’s code directly in the screencast.
html-css-js.com – A bit different than the other resources. It doesn’t really have a lot of tutorials, but it does have online code editors, cheat sheets, code generators, and much more. So, when you’re tired of tutorials and want to start experimenting, check out this page.
Edabit.com – Learn to code by solving a wide variety of interactive coding challenges. They have a huge collection of challenges spread across several different languages and difficulties. Definitely worth checking out if you want to put your newly acquired skills to the test.
CSS (Cascading Style Sheets) is a design language that handles the look and feel of a website. With CSS you can control font styles, text and background colors, page layout and much more.
If you’ve been through the resources above, you should already have a good grasp of what CSS is, and what it can be used for.
Here are a few additional resources that are specifically targeted at CSS.
CSS Playground – Reading long tutorials is rarely enough. CSS Playground gives you an environment where you can easily test and visualize CSS code. It’s also possible to see what others have been experimenting with.
One very important feature of CSS is its ability to control the page layout. This is an essential feature to master if you want to make sure your website content appears in the right place, regardless of whether it’s viewed on a laptop or a mobile phone.
Grid guide by css-tricks.com – A detailed guide on CSS grid
Flexbox guide by css-tricks.com – A detailed guide on CSS flexbox
Grid guide by Laracast – If you prefer videos over reading, check out these six grid videos by Laracast
CSS Grid Garden – A simple game that helps you practice and learn CSS grid.
Flexbox Froggy – A simple game that helps you practice and learn CSS flexbox.
Grid generator by layoutit – An interactive grid code generator
This is getting a bit more advanced and is probably not something you have to learn. That being said, CSS animations can be pretty impressive!
Animista – A playground for CSS animations. Play around with predefined CSS animations, tweak the input parameters to your liking, and get the code.
Moving letters by Tobias Ahlin – See examples, get inspired, and get the code for some really cool text animations
Probably the most popular backend language on the web. It’s not the “best” or “fastest” language out there, but it’s stable, well documented, fairly easy to learn and it gets the job done.
PHP for beginners by Laracast – Larcast consistently delivers high-quality tutorials, and this PHP course is no different. If you’re completely new to PHP, I would totally recommend to check out this course. (They also have more advanced PHP courses, but they are unfortunately not free)
PHP front to back by Traversy – Again, I don’t want you to miss out on the awesome content Traversy produces, so here are his 22 videos on PHP.
PHP full course by freeCodeCamp – A 4-hour long PHP video that hopefully will prove valuable to some of you.
With its emphasis on simplicity and readability, Python is considered to be among the easiest languages to learn.
Python basics by freeCodeCamp – Explains the basics of the Python language. A nice read for anyone just starting out on their learning journey.
Learn Python by freeCodeCamp – A 4-hour long video taking you through the basics of python.
When you’re about to start developing a website, there are a few tools could become handy.
Firstly, you need something to write your code in. The text editors you already have installed, like Word, are not really suited for the job. Instead you want an editor that is designed for coding. They typically provide benefits like syntax highlighting, debugging assistance, and easy code navigation.
Visual Studio Code – A very popular editor, my personal favorite, and the one I would recommend.
Atom – A very good alternative, if you want something different than VS Code.
CodeSandbox – Want to code without installing a code editor? Then this online code editor might exactly be what you’re looking for.
Version control system (VCS)
Git is by far the most popular version control system, both for companies and individuals. A VCS is essential if you want the possibility to track and revert changes, have a team work on the same code base, and avoid editing/merge conflicts.
Combined with a web-hosted code repository, you also ensure that your code is available everywhere and is backed up at all times. GitHub is probably the most well know web hosted code repository.
Git and GitHub for beginners by Traversy – A crash course to Git and GitHub for beginners.
LearningGitBranching – An interactive tutorial that lets you try Git commands directly in the browser.
GitHub guides – A collection of short guides about git and Github.
GitHub guides on YouTube – A collection of video tutorials about GitHub.
Git branching model by Vincent Driessen – An example of a Git branching model that could be used in development projects.
The intention of these frameworks is to make it easier to develop websites and web applications, by providing code libraries, structure, and tools that simplify common development tasks.
Bootstrap is probably the most popular CSS-framework in the world. It provides you with a lot of predefined CSS-code in order to make it easier for you to style your website.
Bootstrap beginners guide by Traversy – Need a good video introduction to Bootstrap? Then look no further, Traversy delivers exactly what you need (as always).
Learn React byScrimba – You should also check out the very detailed interactive coding screencast developed by Scrimba. Spread over 48 small lessons, you’ll build your first two React applications.
The React handbook by Flavio Copes – Need a more in-depth guide? Check out this 220 page long React guide by Flavio Copes. Yes, you will have to sign up for his newsletter to get it, but it’s worth it.
React crash course by Mosh – If you prefer videos over reading, I would recommend that you check out this two- and half-hour long introduction to React by Mosh.
Learn the MERN stack by Traversy – If you want to take it one step further, Traversy has made a series of videos explaining of how to create a web application using mongoDB(M), Expess(E), React(R), and Node.js(N).
Official Angular documentation – The official documentation is a really good place to start.
Build your first Angular app by Dan Wahlin – Taking you through all you need to know in order to build your first basic Angular App.
Build a web app by Hamed Baatour – Part 1 on how to build a good-looking web application with Angular 7. Covers everything from the design to the actual implementation. Part 2 is not out yet.
Official Vue guide – The official guide is a very good starting point for anyone new to Vue.
Getting started with Vue by Tania Rascia – Yet another great beginner guide written by Tania Rascia.
Vue step-by-step – If you would like to see videos instead, you should definitely check out this detailed introduction series created by Laracast (34 of 48 videos are free).
Vue handbook by Flavio Copes – If you’re still in need of another Vue resource, you might also want to check out this very detailed introduction to Vue.js.
The backend is what makes the frontend works, and refers to the server-side of a website. Most major websites today use some kind of backend technology in order to store data in the database and fetch data from a database in order to display it on a website.
Backend developers can choose from a wide variety of scripting languages, and they all differ in performance, programming style, lines of code required and use cases. With different languages comes different frameworks, so before you’ll be able to choose a backend framework, you’ll have to decide on a language.
As with frontend frameworks, the intention is to make it easier to develop secure and robust websites and web applications. This is done by providing code libraries, structure, and tools that simplify common development tasks.
Django is a popular Python framework.
Official Django documentation – The official Django documentation is a good starting point for anyone interested in learning Django.
Django tutorial by djangogirls – A detailed introduction to Django that will show you how to create a blog with Django, step-by-step.
Django web framework by MDN – MDN always delivers quality content, and this tutorial is no exception. This guide covers all the essentials, from introduction to deployment.
Laravel is a popular PHP framework
Laracasts – Laracast is by far the most comprehensive Laravel learning resource, providing an endless number of high-quality videos (both free and paid).
Official documentation – The official Laravel documentation can be nice to have as a reference point when the Laracasts videos aren’t enough.
Laravel from scratch by Traversy – Yet another great set of videos from Traversy. Worth checking out if you run out of free videos on Laracast.
Flask is a yet another popular Python framework. Whereas Django is powerful and feature-rich, Flask considers itself as a microframework, providing the bare minimum.
Official flask tutorial – This tutorial, which is a part of the official documentation, is probably a good starting point for anyone curious about flask. It takes you through the creation of a basic blog application.
Flask from scratch by Traversy – A great video series taking you through the creation of a basic Flask application.
Flask mega-tutorial by Miguel Grinberg – A comprehensive Flask tutorial taking you through the creation of a Flask blog app including user registration, login, and password reset capabilities.
Although there’s a lot of systems, frameworks, and libraries that can speed up the web development process, it’s still possible to create websites without them.
That’s what these tutorials are all about.
Responsive, mobile first website by Traversy – Learn how to build a responsive single page photography website just by using HTML5 and CSS3.
Building your first web page by Shay Howe – A detailed introduction to both HTML and CSS that takes you through the process of creating a good-looking conference site.
Website for beginners by web dev simplified – A video showing you how to use HTML and CSS to create a band site.
Create a CRUD database app by Tania Rascia – This guide will help you create a web app that performs Create(C), Read(R), Update(U), and Delete(D) operations towards a database. The focus will be on the backend interaction and not on making the website look good.
Static Site Generators
Since all the content and structure is predefined in static HTML-file, there’s no need for database queries or template processing. All that needs to be done by the server is to send the static files to the user, and then the web browser will do the rest.
The result is often a significant decrease in load time, compared to websites using databases.
Staticgen – A comprehensive list of the most popular static site generators. If you follow on to their respective websites, you will usually find guides on how to get started.
Gatsby crash course by Traversy – Gatsby is one of many popular static site generators. This video gives you a basic introduction to Gatsby and shows you how to publish it online with Netlify.
If we look at traditional Content Management Systems like WordPress, we could say that they consist of two parts, the frontend, and the backend. The backend is where you as an administrator or content editor, edits and publishes content from. The frontend is the part that fetches the content from the backend and presents it to the user in the browser.
A headless CMS is then basically a CMS without a frontend.
That means that you will have an intuitive admin interface for managing your content, but since you are missing the presentation layer, the content will only be made available through API’s.
How you decide to structure and present that content is entirely up to you, and is not affected by the headless CMS at all.
HeadlessCMS – A comprehensive list of the most popular headless content management systems. If you follow on to their respective websites, you will usually find guides on how to get started.
Whichever development path you ended up choosing, I truly hope some of these free guides got you on the right track.
There are of course a lot more guides out there, but these are the ones I personally believe are the best ones that are free.
If you have other guides that you think should be added to this list, or have any questions, let me know in the comments below.