Curriculum

In this 12 month course, you will learn the basic and intermediate skills of frontend web development. We will follow two tracks at the same time. In track one, you will learn HTML & CSS, which are the languages that are used to visualize the elements on a webpage. In track two, you are going to learn JavaScript, which is the programming language used to give life to the elements on a webpage.

Track One

A modern website consists of two main aspects: What is shown on a website, and the way that we interact with the website. In this track, we are going to focus on how to present a website's content. You will learn two main languages that describe the content and styling of a website. These are HTML and CSS.

HTML

You will start by learning the HTML language. The language that actually shows the elements on a webpage. The elements that we are going to be creating will be very basic building blocks. They will look more like a skeleton or a pizza without toppings. Even with these basic skills you will be able to make a webpage that is useful and educational. By the end of this chapter, you will have learned all the important HTML elements that you will be using throughout this course and your career as a developer.

Chapter Title	Content
Introduction to HTML	Introduction of the HTML language to describe the content of a webpage. Explaining what a webpage is in terms of HTML language.
Basic HTML Tags (I)	Introducing some basic HTML tags to represent common content, such as a paragraph, a title, and list items.
Basic HTML Tags (II)	Continuing on HTML tags by introducing links, styles texts and images.
HTML Tag Attributes	What are tag attributes and how to use them.
Basic HTML Tags (III)	Introducing some more HTML tags with which you can represent content.
Forms	Covering HTML tags that are used to work with user input, such as forms, text boxes and dropdowns.
Display Level	Introducing the important topic of the display level of an element.
HTML Media Tags	Introducing tags that are used to put media content on a website, such as`video` and `audio`.
Semantic HTML	Introducing HTML elements that are meant to represent content with a specific purpose.
Advanced HTML Tags	Introducing advanced HTML tags. These tags are usually used to embed a website into another website, or tags that show custom graphical/interactive content

CSS

After having learned HTML, CSS is the next thing to learn. With this language, we are going to dress up our skeleton website content, add toppings to our pizza. More precisely, this is where we code the presentation of our website. You are going to learn about color, background, alignment, animations, responsiveness and much more.

Basics, Colors, Texts & Fonts

Chapter Title	Content
Introduction	Introducing what CSS is and why it is used. Explaining the structure of the CSS language.
Selectors	How to tell CSS what part of the content should be styled.
Text Colors	How to change the colors of texts in CSS.
Background Colors	How to change the background color of elements.
Color Representations & Spaces	How a color is represented in CSS and different ways to represent colors.
Color Gradients	How to make patterns with different colors.
Box Shadows	How to create a shadow effect and give the illusion of elevation.
Font Families	How to change the font family of a text.
Font Styles	How to make text bigger/smaller, italic, bold, underline and strikethrough in CSS.
Line Heights	Learning the line height of a text and how it affects readability.
Letter Spacing	How to manipulate the space between each letter in a text.
Font Variants	How to make the letters in a text uppercase and lowercase using CSS.
Variables	Learning what variables are and how to use them.
Specificity	When there are two similar CSS rules, which circumstance to consider and how to choose which one to use.

Borders, Paddings, Margins & Size of an Element

Chapter Title	Content
Content Borders	How to create border lines for a content and manipulate different border properties.
Padding	How to manipulate the space between a content's border and the content itself.
Margin	How to manipulate the space between a content's border and other content.
Width & Height	How to manipulate the width and height of an element and which rules to follow.

Developer Tools & Length Units

Chapter Title	Content
Devtools Intro	The developer tools in a browser are a priceless way to inspect the effects of your code.
Basic Manipulation of HTML	How to manipulate a website's HTML using developer tools, as it allows you to try out things quickly.
Inspecting CSS	How to inspect and prototype CSS in the developer tools.
Absolute Length Units	Examining different length units at this point, and we will start with the most simple ones: absolute units.
Relative Length Units	Continuing to examine the CSS units with relative units.

Building Layouts

Chapter Title	Content
Box Model	Introducing the CSS box model which allows for an easier way to create layouts.
Display Modes	Learning the different display modes of an element.
Flex Box	A way of making layouts that combines multiple elements in an easy way.
Grid	Another way of making layouts for more complicated scenarios.
Position Property	We will look at ways to get an element out of the layout flow for specific purposes.

Responsive Styles

Chapter Title	Content
CSS Math Functions	Basic strategies to size a content with respect to its surroundings.
Media Queries	We will use media queries to style a content with respect to different screen sizes, for the layouts where math functions alone are not enough,
Responsive Images	Strategies on how to make images more responsive in different screen sizes.
Responsive Videos	Strategies on how to make videos more responsive in different screen sizes.

Transformations

Chapter Title	Content
Translation	How to move an element in a direction.
Rotation	How to rotate an element by an angle.
Scaling	How to make an element bigger/smaller by a factor.
Combining Transformations	How to combine different transformations.
Matrix Transformations	The core logic of transformations.

Animations

Chapter Title	Content
Transitions	The basic form of animating a style property.
Filters	How image filters work and how we can use them in animations.
Keyframes	How to implement more complicated animations with keyframes.
Animation Recipes	Common scenarios and problems when dealing with animations, and how to solve them.

Track Two

In this track, we will learn JavaScript, the programming language of websites, and attain general knowledge of programming. The JavaScript programming language is the elixir that gives life and reactivity to a website. It allows us to code the interactions, such as clicks, mouse hovers and many more. JavaScript is not only used on the web. Since it is a general purposeprogramming language, you can use it to program other things as well, like games and robots.

By the end of this track, you will have acquired the solid basics of programming and algorithms, you will have learned to use JavaScript to create different kinds of website interactions and knowledge of the famous JavaScript frontend framework React.

Programming Basics

Chapter Title	Content
Basic Command Line	Learning the basics of command line terminal.
NodeJS Command Line	Getting started on programming in JavaScript in the command line.
Running JavaScript Programs	Defining what a "program" means. Writing programs in a text editor and running them.
`console.log()` Function	How to print something onto the screen.
Variables	The most basic construction? of a programming language that allows you to alter the state of a program.
Basic Data Types	Looking at different data types with their specific purposes.
Arithmetic Operations	Introducing how to work with arithmetics in a computer program, such as summation, differentiation or multiplication.
Basic String Type	Representing words, letters and phrases.

Directing the Program Flow

Chapter Title	Content
The Boolean Type	A very important data type that usually represents truth or falseness.
Logical Operations I	Operations that allow you to make boolean values out of non-boolean data types. Such as comparing two words or numbers on similarities.
If Statements	One of the most basic constructs of JavaScript that allows you to change or direct the flow of the program.
Logical Operations II	Continuing logical operations with combining boolean values and producing new boolean values in different ways.
Nested If Statements	Introducing how to control the flow of another flow in the program.
Switch Case	We use switch cases, when we need to write a lot of "if statements", e.g when the program can go in many different directions depending on the value of a variable.

Loops

Chapter Title	Content
While Loop	How to write a program statement that repeats itself as long as a specific condition is met.
Loop Exercises I-II-III-IV	The most common loop scenarios and how to solve them.
Controlling the Loop Flow	Taking a look at the techniques and statements that will allow you to control the flow of a loop.
For Loop	More compact and easy to use version of the while loop.
Nested Loops	Creating loops inside loops.

Compound Data Types

Chapter Title	Content
Array Introduction	Introducing ‘lists’, the first of the compound data types in JavaScript.
Object Introduction	Yet another compound data type in JavaScript that is a key value dictionary.
Good to Know Array Properties	Some of the most useful aspects and properties of arrays.
Good to Know Array Methods	Some of the most useful methods that are included in arrays.
Good to know Object Operations	Some operations that we can apply on objects to retrieve important information about them.

Functions

Chapter Title	Content
Introductions to Functions	What are functions and how do they make our lives easier?
Function Parameters	How to provide input for a function.
Result of a Function	How can we get the result of a run function?
Callstack	Learning what happens when you call a function that calls another function.
Recursive Functions	An interesting kind of function that calls itself repeatedly.
Closures	We will look at functions that create more functions.
Array `map`, `filter` and `reduce`	Introducing some array methods that are useful to transform and process data.

DOM Manipulation

Chapter Title	Content
API (Application Programming Interface)	What is an "API" and how does its meaning change in different contexts?
Document Object Model (DOM) API	What is a DOM and how to use it in JavaScript.
Selecting Elements in JavaScript	How to get a reference to the elements inside HTML using JavaScript.
Manipulating Elements	How to retrieve and change the properties of an HTML element using JavaScript.
Creating Elements in JavaScript	How to create new HTML elements in JavaScript and add them to the website.

Events

Chapter Title	Content
Events Introduction	What are events and how to use them.
Click Events	How to catch user clicks on elements and react to them.
Mouse Events	How to recognize different mouse movements/gestures and react to them.
Keyboard Events	How to recognize different keyboard gestures, such as key press, and react to them.
Input and Form Events	How to recognize when a user has typed something in an input field and submitted a form.
Touch Events	What are touch events and how are they different from mouse events.
Animation Events	What are animation events and how they help us to have more refined control over animations.

Networking

Chapter Title	Content
Networking Introduction	An introduction to the protocols and components that make the web work.
HTTP Protocol	Introduction of the HTTP network protocol that websites are based on.
Hosts in HTTP	Introduction of the HTTP host term.
Path in HTTP	Introduction to paths.
URLs	Introduction of URL (Unified Resource Locator) term.
HTTP Methods	Introduction of methods in HTTP protocol.
HTTP vs HTTPS	How communication between a web browser and server is encrypted and its importance.
HTTP Requests in JavaScript	How to send HTTP requests with JavaScript, its benefits and the rules that govern it.

Asynchronous Programming

Chapter Title	Content
Threads	Introducing threads.
Multi Threaded Programs	How multi threaded programs work and their pros and cons.
Single Threaded Programs	How single threaded programs work and their pros and cons.
Thread Model in JavaScript	How a JavaScript program is executed with regards to its thread model.
Defining Asynchronous Programs	What is an asynchronous programming paradigm.
Event Loop	How the event loop in JavaScript works internally.
Promises	How to represent asynchronous parts of the program with `Promise` structures?.
`async` and `await`	Keywords to easily make asynchronous functions.

React Framework

Chapter Title	Content
React Intro	Setting up a React project from scratch, introducing the basics and learning the JSX syntax.
Components	What is a React component and how it works.
Composition	How to compose different React components together to build a website.
Conditional Rendering	Rendering some of the elements if some condition checks to true.
Lists and Keys	What is the `key` property for rendering lists and why it is important.
Forms in React	Strategies related to dealing with forms in React.
DOM Manipulation vs React	We will compare DOM manipulation techniques with the way that it is done in React.
Component States	How component states work and why we use them.
Event Handling	How to handle events in React and how to create custom events that are specific for your components.
App Architecture	Some common problems that occur in most React projects and how to solve them.

Object-Oriented Programming & Modules

Chapter Title	Content
Modules	Defining the term "module", discussing the different modules and their limitations.
Module Bundlers	Introducing the concept of a module bundler, how a generic module bundler works and real world module bundlers.
Classes	The basic structure of object-oriented programming, the class and its features.