Web Development

SYLLABUS
10 Sections
Introduction

1Introduction

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 get into Computer Science. Starting out is simple and it slowly builds in complexity as you gain more knowledge.

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 syllabus.

The syllabus is outlined as followed, we’re going to get you set up with all the materials you need (really that’s just an editor). Next, you’ll learn the languages of the Web: HTML and CSS. You can think of a coding language as simply a way to communicate instructions to your computer, to do stuff like render this NoviceDock page!

Once you’ve learned the syntax of the languages (syntax being the “grammar” of a coding language), you’re going to need to practice. This is the fun part where you can be extremely expressive and do anything you’d like! If you don’t know where to go, we’ll provide you options as always.

You’ll then move onto JavaScript which is another additional language of the Web. It can make your website less static and more dynamic. You’ll read more about what that means in the JavaScript section.

We’ll finish the syllabus off with helping you get your website online, and then getting you involved in the community through Github (a code sharing platform) and Plugins and Frameworks to take advantage of code already written by others for your own use!

Prerequisites

2Prerequisites

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.

Dont be afraid of failure, it can be common to be stuck on a single problem for days. While that can make you angry or annoyed, that’s exactly how you learn.

Be patient, this isn’t an overnight syllabus. It may take you 3 months, it may take you a year. You got this!

Editors

3Editors

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.

HTML & CSS

7HTML & CSS

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…

HTML & CSS Analogy

Imagine you are a professional developer opening your own office in downtown Manhattan, New York. After weeks of hiring construction workers to help build the office, you drive past it on a cold fall morning, and see the wood frame of the building emerging out of the ground. You can start to see the outline of your soon to be masterpiece! This is the html, the structure. It includes all the pieces you need, but it’s only a light outline, and not everything is put together yet. From this point on, it’s all about decoration and positioning. What color walls are you going to use? Where is the desk going to go in the office? This is the CSS, the design.

Still confused? It’s okay, I’m here to point you in the right direction. The resources provided will go in much more detail!

Practice

10Practice

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.

Options:
  1. Think of something to make, and make it! You started learning to programme, for this reason, didn’t you?
  2. Click on the resources tab to find a ton of practice material.
  3. Learn more advanced CSS. This is relatively new and replacing a lot of what Javascript used to do. There are some really cool animations you can make!
  4. Head on over to the Javascript section to make your webpage even more alive. Remember though, this is a completely new language, and the first “real” programming language you’re going to learn. I’ll explain why in the Javascript section.
  5. You’ve learned everything you need to put a simple webpage on the internet. Want to do it now? Skip a few sections and go to making a webpage go live.
CSS3

8CSS3

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.

If you’re into Web Design – you’ll find there’s a lot more to learn when it comes to CSS. Developers used to use Javascript for most of a website’s animation, but CSS3 (along with a lot of wait time for it to become the standard, FINALLY) allows you to create incredible fluid animation.

So this section is dedicated to those who really want to go more into design. The next section, Javascript, achieves a few similar goals. It’s up to you if you want to learn CSS animation, otherwise head over to Javascript.

Javascript and jQuery

6Javascript and jQuery

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.

Javascript will be your first introduction to programming logic. You’ll learn topics like loops, conditional statements, variables. Don’t worry if you don’t know what these are now, that’s what the resources button are for.

Launching Your Creation on the Web

8Launching Your Creation on the Web

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).

So you really only need three things: your files, a domain name and someone to host your files (a web hosting company like NameCheap).

Analogy

You’re building a new home a few miles away – it has three parts: your street address, the building itself, and the land. The street address tells people where to go, just like the domain name! You have the building itself which is equivalent to all your projects files. Then you have the land, which essentially hosts the building. If you want to make any changes, you have to drive to this new home of yours. If you want to make changes to your website online – your going to have to connect to the server that’s hosting it via FTP.

There might be times at first when you say, I must be doing something wrong, this should not be this hard. While it may seem hard at first, it gets a lot easier. Hosting a website on the web requires learning some material first, like learning any new language. You can do it!

It also may depend on who you choose as a host. So once you choose a host if these resources aren’t helping you, Google “How to put your website online with [insert_host_name]” or “How to get FTP Access with [insert_host_name]”.

Github

7Github

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.

Github uses Git, which is a version control system. All that means is it keeps track of all the changes you make to your code. This allows you later to go back to certain versions. More importantly, it’s great for collaboration on your own project, so two people can work on the same project at once, and still stay organized.

So Github is just a hub to host and view your own projects, and other projects that use Git (a lot do). Thus, you can use Github as your own code management, and also a resource center, kind of like this website!

To use Github and Git, you’re going to learn a lot about interacting with the terminal. It’ll be great experience, and knowledge of Git looks great on a resume!

Plugins & Frameworks

4Plugins & Frameworks

So now that you’re a part of the developer community, you may as well take advantage of it!

  • Want a photo slider on your site but don’t have one?
  • Want to build a site that’s mobile ready?
  • Want anything?

Chances are, a lot of what you need have already been built. Let me give a few examples.

There’s a CSS framework called Bootstrap. All it is a series of classes that you can add into your HTML. It’s mostly known for it’s grid layout that works mostly on mobile. With most plugins and frameworks, you add their files and code to your project, and then you have access to them and can manipulate them.

There’s a jQuery plugin called Slick Slider. Obtain the code from their website, and add a few lines of jQuery, and boom, you’ll have a perfectly working slider.

Every framework and plugin may have a slightly different installation, so in the resources I’m going to list a few popular ones, and tutorials to install them. Remember, if you ever don’t know something Google it or ask for help on sites like StackOverflow.

Reading documentation is a skill that takes some time to develop, sounds a little silly doesn’t it? Really though! You’ll slowly get more comfortable using plugins and frameworks, and it will make you a better programmer.

Once you become more involved in the community, you should be set to go off on your own for the rest of your Front-End Web Development journey. Sigh! They grow up so fast. Best of luck!

Bradley Mitchell
MENTOR
Founder at NoviceDock. Student at Rutgers University studying Computer Science. I like tacos and working out, even though I'm very skinny.