Making a website can sound scary and difficult, but if you strip it out into pieces, you’ll see its really one of the easiest and most accessible ways to begin studying Computer Science. Starting out is simple and it slowly builds in complexity as you learn more advanced topics.
The scariest part is figuring out where to start, and what path to follow. Luckily, we want to solve that first problem for you by putting together this Web Development syllabus.
There are none! This is a start-from-scratch beginner syllabus. If you are more experienced, feel free to skip sections and get resources specifically for what you need.
Although there is no prerequisites, there’s one thing you should know: be prepared for a lot of small failures along the way. It’s just like learning anything new, except sometimes you don’t know where to go to get the answer. The resources in the syllabus will be your friend, so will Google, and especially StackOverflow – a question and answer website for all types of Computer Science studies.
Where are you going to write code? You write code in an editor! An editor is simply a program that can read your code, and save it. For example, you may write HTML in an editor, save it as a .html file, and then open it up in your web browser (such as Google Chrome), and see your creation. Click on the resources button below for a ton of cool editors that are most commonly used!
There are also online editors such as JSFiddle that you can use – but they are mainly for testing code, sharing pieces of code or to teach you coding. They are not used for large projects really – but you’ll definitely find them useful. Some tutorial websites like Codecademy use their own online editors to help teach you.
You’re going to start by learning two computer languages: HTML (a markup language) and CSS (a stylesheet language). Every page you see on the internet uses them! There’s a lot of really cool languages you can use to complete different tasks, but for Web Development, you’ll start by focusing on HTML and CSS, and later learn more advanced languages.
HTML is used to create the structure of a webpage – the paragraphs, headings, forms, bulleted lists, images, etc. CSS is used to design the page – where are the paragraphs going to go? What’s the font-size of the heading? What’s the width of the image? What background-color will the navigation bar be? etc…
You’ve been following tutorials for a few weeks, and you find yourself now rereading a lot of information you already know. This is the sign that you’re ready to step back from basic tutorials!
So… now what? You have a few options. Choose what YOU want! Don’t be scared, you’re not going off the path into uncharted territory. I’ve mapped it out so all routes will lead you to similar places.
When you were learning the basics, you probably heard HTML5 and CSS3 thrown around a lot. They are the newest versions of these languages. HTML5 really didn’t offer too much new that’s worth dedicating a whole section too, so I wanted to focus on CSS3 – and more specifically CSS animations.
If you consider yourself a creative artistic person, CSS3 animations are going to open up a whole new world of possibilities! Here’s one of my favorite animations: simple fire animation. The creator animates a series of figure elements to create the effect of a flame. If you don’t know what a figure element is, think of it as a div, something that holds content.
This is an incredibly versatile language. It can take a static HTML & CSS Webpage and bring it to life. It’s used to make animations, parallaxes, music players, progress bars, popups, web games, and a lot more. You’ll read later that it can also be used as a backend for a website. So if you do learn it, it’s a worthy investment.
Javascript is incredibly different than the last two languages you learned. HTML and CSS are the backbone of the internet, but it’s been heavily debated whether they’re real programming languages. The reason it’s argued is because they’re used for markup and design – and don’t necessarily follow the Computer Science logic that all other languages follow. They can’t really automate anything or be that dynamic. That’s not to take away from their extreme importance.
Up to this point, you’ve been working locally on your Computer, or with online editors. You must be eager to put something on the web!
Think of it this way… you currently have all your website’s files locally on your computer. You need someone to host these files on a server (just another type of computer where everyone on the internet can access them).
You’ve probably realized there is an incredible community of developers. The amount you can learn and share is truly astounding, and it’s time you become a part of it.
Most likely, you’ve ended up on Github at some point, and if not, that’s okay. Check out their video “What is GitHub” for a great explanation.
So now that you’re a part of the developer community, you may as well take advantage of it!
Chances are, a lot of what you need have already been built. Let me give a few examples.
Buy me a coffee
