Altcademy’s Front-end Web Development Syllabus (2023)

Every component you ought to learn about front-end web development

Have you ever wanted to learn how to build websites, but don’t know where to start? The most common deal breaker of self learning is the lack of structure and direction. This syllabus will provide a detailed overview of what’s involved in Altcademy’s Front-end web development program, and list all the "need to know" topics.

Who is this for?

Anyone interested in, planning to learn, or already learning front-end web development. If you don’t know what programming is or don’t know whether you should learn web development, data science, or mobile development, read "What should I learn first in coding?" and “What is code?.”

This syllabus covers the fundamentals. Front-end web development can get much more complicated than this. The additional skills and knowledge you need will vary for each project / job.

How to use this syllabus?

This syllabus is divided into 3 sections. Each one covering a major component of front-end web development and the fundamental topics you should learn. Each topic is accompanied by detailed instructions, and explains its importance.

If you already have an idea of what front-end web development is, you can skip ahead and go straight to the topic you want to read about.

This syllabus is the cornerstone of Altcademy’s Front-end Web Development Program with mentorship and career guidance.

What is web development?

Web development is building websites and web applications like Facebook, Twitter, or internal web portals within businesses. Web development has two disciplines: front-end and back-end.

Front-end is visual and interactive aspects of a website. You will learn HTML, CSS and JavaScript to master front-end web development.

Back-end is all the logic behind the scenes that supports your website: databases, user management, etc.

HTML & CSS #
Content, layout, and styling of web page

What is HTML and CSS?

To understand what HTML and CSS are, we need to understand the process of viewing a website. When we enter a website’s address on a browser, a request is sent to a computer, usually referred to as a web server, somewhere in the world.

This web server then sends a bunch of files back to our browser. Our browser renders these files into human readable content that we commonly call a website. These files are usually HTML and CSS files.

When you are looking at a website, say Facebook, you are essentially looking at a newspaper, or more precisely an animated and interactive newspaper.

A web developer defines a website’s content using HTML (HyperText Markup Language). You can add structural meaning to content using HTML tags, such as headings, paragraphs, lists, links, and media items such as images, videos or even embed other websites.

The first website mainly consists of plain text and links. It has no styles, such as colors, fonts and positioning. You can checkout a brief history of the World Wide Web by W3C. (See alternative ways to explain what is HTML?)

A website with merely plain text would be boring and indifferent, so websites are dressed up with styles. A developer defines a website’s styles with CSS (Cascading Style Sheet).

CSS allows you to specify the exact styling at the exact place on your website, so you can make it look the way you want. Just to name a few, you can specify the following styles of a website with CSS:

• Position of any content

• Spacing between content, borders

• Font style, color, weight, size of text

• Backgrounds

With HTML and CSS, you can make a good looking static website, just like how you can make a good looking image with photoshop. Static websites are not interactive and their contents don’t dynamically change (i.e. no matter what you do to a newspaper, its content cannot dynamically change, you will not get a live feed of the stock index prices on a print newspaper).

We have divided the fundamental topics and concepts you need to learn into multiple parts.

• Part 1: Intro to HTML and CSS

• Part 2: HTML Fundamentals

• Part 3: CSS Fundamentals

• Part 4: Positioning

• Part 5: Bootstrap 3

• Part 6: Advanced CSS and Bootstrap 4

• Part 7: Development Cycle With Git

• Part 8: HTML CSS Project

• Part 9: Migrating to Bootstrap 5

• Part 10: Deploying Basic HTML CSS Website

Part 1: Intro to HTML and CSS

You will learn how to write basic HTML and CSS. Install and use a code editor. Create and view a bare bone website locally on your computer.

• HTML and CSS syntax - Just like grammar in spoken languages, each computer language has their own syntax. Syntax is a set of rules that you must follow when you write code, otherwise the computer cannot understand your instructions. You will learn the syntax for HTML and CSS.

• HTML elements - Elements are the basic building blocks of HTML. Each element represent a certain content type. Elements are defined using HTML tags. HTML elements give meaning to your content as well as help you organise it.

• HTML document structure - HTML documents have a standard structure you need to follow otherwise browsers won’t be able to read, process, and render it properly. You will learn what this structure is and adhere to it.

• CSS selectors, properties, and values - CSS can target specific elements in HTML and apply styles to it. In order to do this, you need to specify a selector, choose the correct property and define its property value. Selectors do the targeting, properties and values do the styling.

• Where to write CSS - You can write inline CSS directly on HTML elements, inside a style element, or in a separate dedicated CSS file. You will learn know how to write CSS in all three ways and how to connect CSS files with HTML files.

• Code commenting in HTML and CSS - Comments are not interpreted by the browser so they don't get rendered for the user to see when they are looking at your website. You can use comments to leave commentary in your source code and help you compartmentalize sections of code.

• Pick a code editor - When working on HTML and CSS files locally on your computer, you will learn to use a text editor. Your efficiency can be greatly improved if you use a text editor designed for coding. We recommend Atom for beginners. See this Minimum setup on Atom (text editor) for front-end development guide to get started. Alternatives include SublimeText, Brackets, Visual Studio Code.

• Build your first web page - Create a simple webpage with a heading using one HTML file and one CSS file and view it with a web browser. You will learn to do this correctly and your HTML and CSS files are connected and syntax error free.

• Get familiar with browser DevTool - Most modern web browsers will have developer tools that aids developers in website development. You should get familiar with the devtool of your browser. If you don’t know which browser to choose, we recommend Google Chrome or Mozilla Firefox.

Part 2: HTML Fundamentals

Learn about different types of HTML elements and the semantic meaning they carry. Adopt best practices for writing HTML to keep your code clean and readable.

• Semantics of HTML - Most HTML elements carry semantic values. Semantic values are used by screen readers and search engines to make sense of what the content represents; such as using the <address> element for addresses, or the <h1> element for primary heading. Using correct semantic elements can potentially improve your search engine ranking.

• Block and inline elements - Most HTML elements are either block or inline elements. Block elements always start on a new line and span the full width of its parent element. Inline elements can stack horizontally since they only take up the width of their content. You will understand thoroughly the difference between block and inline elements so you know when to use which.

• Nesting of elements - You will learn how to nest elements within elements, it is often used to create complex layout structures.

• Text elements - Text elements are used to contain text content. You will learn about the six heading elements, the paragraph element, and inline elements such as strong and emphasize. Text elements are the bread and butter of most informational websites.

• Structure elements - Structure elements are used to break up an HTML page into compartments so search engines understand the structure better. Learn about header, nav, articles, sections, aside and footer. Those carry semantic values and should be used to layout your HTML file.

• Hyperlinks - Hyperlink, or anchor tag, is an element that links to another file, page or website. You will use it to build connections between pages of your website. It is what search engines will use to map out the relationship between pages of your website, and even relationships between different websites.

• Lists - Unordered and ordered lists are used to create lists in HTML. You will learn the structures.

• Image, video, audio elements - You can add media content to a web page by using image, video, and audio HTML elements. Each of them have their own set of attributes you can use for fine tuning.

• Iframe elements - Iframe elements are used to embed and render other websites. Think of it like screen within screen on TV. It is often used to embed services provided by third parties, such as map, forms, booking management, etc.

• Tables - Tables are used for, well tables. This element requires the use of multiple HTML elements and can be a bit confusing at first.

• Forms - Forms are the predominant way to retrieve information from users. You will learn about form, input, textarea, select, and button element.

• HTML best practices - Just getting the syntax right doesn’t mean your code will be clean and easy to read. Just like knowing how to spell and form sentences doesn’t mean your handwriting is legible or you can write wonderful novels. It is important to adapt a good set of best practices for writing HTML. These are usually called style guides and you can find many popular ones by searching.

• Create a basic multi page website - At this point, you should try to create a multi page website with multiple three to four HTML files. Use hyperlinks to connect each HTML file. Launch the website on your browser and make sure you can access all pages. Keep the content minimal.

Part 3: CSS Fundamentals

Get really familiar with the cascading effect of CSS and learn how to combine selectors to target HTML elements you want to style. Learn basic CSS style properties for typography and background.

• Cascading effect - CSS stands for Cascading Style Sheet. Cascading means CSS code is read and processed from top to bottom. You will learn how this affects your CSS code.

• Specificity - CSS selectors, used for targeting HTML elements, each carry a specificity weight. Selectors with higher specificity will get to render their styles, while styles from selectors with lower specificity will be ignored.

• Combining and layering selectors - You can combine different types of selectors, namely Type, Class, and Id, for HTML targeting. You will learn how to calculate the specificity from combined selectors. You can leverage this to write efficient, modularized CSS.

• Advanced selectors - You will learn how to use pseudo-classes, such as :hover, :focus, :first, and attribute selectors to effectively target elements. As an example, the selector p:nth-child(odd) will let you target and apply styles to all odd numbered paragraph elements.

• Colors - Colors are used in defining font colors, border colors, background colors and box shadow colors. You will learn how to define colors using color keywords, e.g. blue, white, black; hexadecimal code, e.g. #fff, #678998; rgb(), rgba() functions; and hsl(), hsla() functions.

• Lengths - Length is used to define the size and position of things. It is used for font size, height, width, padding, margin and many more size and position properties. You will learn about absolute lengths, e.g. pixel, points, cm, mm, inch; and relative lengths, e.g. percentage (%), em, rem, vh, vw.

• Typography - Most websites are for serving information, text styling is therefore a large part of front-end development. You will learn how to use common CSS typography properties. These properties deal with text and are categorized into font- and text-. Common ones include font-family, font-size, font-weight, text-align, text-decoration, text-transform, letter-spacing, word-spacing.

• Backgrounds and gradients - Learn how to add background colors and background images to elements. Be able to position and repeat background images. Learn how to add gradient color backgrounds.

• CSS resets - Every browser has their own set of default styles for rendering HTML. To tackle this cross-browser consistency issue, we can use CSS resets. A CSS reset is a set of CSS rules that strips or tones down the styles of each HTML element, setting a consistent base for us to work on.

• CSS best practices - Adapt a good style guide for writing clean CSS. Learn to name your class and id selectors effectively. This is very important for writing CSS that can be easily understood by fellow developers.

Part 4: Positioning

Content of a webpage can be laid out for better design and user experience. To do this effectively, you need to understand the box model, position elements using different methods, and be able to create simple grid structures.

• The box model - All HTML elements are basically rectangular boxes made up of content, padding, border, and margin. You will be able to understand the real size of an element based on the dimensions of each component. And to adjust the size of each component. This is important for creating spacing around elements and for aesthetics.

• Positioning with floats - Float is a CSS property that lets you position an element to either the left or right of its parent element. It is a very old technique but it is a hardy one. When using floats, you need to take care of clearing the float.

• Positioning with inline-blocks - An inline-block element is a cross between a block element and an inline element. You can set elements to inline-block so they will stack horizontally one after the other. This is the preferred method for creating horizontal column structures for the last decade.

• Creating a grid structure - You will learn how to create reusable grid structures using classes that define columns of different widths. This is important for creating structure layouts very quickly.

• Precise Positioning - Learn how to fine tune the position of elements using the position property and its three values, relative, absolute, and fixed.

• Basic website clone - At this point, you should have enough knowledge to try to build a simple website. Instead of coming up with something of your own, you will learn more by trying to clone someone else’s website. Pick a website that is simple in design and consists of mostly static content. Do it a couple times until you are ready to move on.

👋 If you are looking for a full fledged program with mentorship and career guidance, check out our Front-end Web Development Program.

Part 5: Bootstrap 3

Bootstrap is a CSS framework that lets front-end web developers add style and structure to websites very quickly. Bootstrap provides a set of standards in spacing, typography, color, interactive behaviors, and more.

Bootstrap 3 was released in 2013 and has remained popular to this day. 15% of the top 100 thousand most visited websites are built with Bootstrap. Even though a new version, Bootstrap 4, was released in 2017, it is worth learning Bootstrap 3 as many companies still use it.

Apart from Bootstrap 3, there are other alternatives. Popular ones include Foundation, Bulma, Semantic UI. You should learn to use at least one CSS framework.

• Installation - There are multiple ways to add Bootstrap in a project. The easiest way is to link to Bootstrap’s official CDN (content delivery network) and let the CDN handle serving Bootstrap’s CSS file to the clients. The other way is to install Bootstrap locally into your project. This is useful if you are working without internet. You will learn the pros and cons of each method.

• Responsive grid system - Probably Bootstrap’s most popular feature is its grid system. You need to know it well enough to create complex nested grid structures with ease. This is used to create responsive layout for web content very quickly. Responsive layout means the layout will change based on the screen size of the viewing device.

• Bootstrap's style standards - Bootstrap comes with a standardised set of styles for typography, colors, buttons, forms, tables, images and more. It also has a large selection of helper classes that lets you add predefined styles to elements. You will gain a good command of these styles and classes.

• Responsive CSS - You will learn how to write CSS that is effective only on specific screen width ranges. This is called responsive CSS and it is how Bootstrap’s responsive grid is made. Knowing this will allow you to create custom responsive styles for web pages.

• Responsive development with browser devTools - When working on responsive CSS, it would be useful to quickly view the result on screen sizes of different devices. Most web browser devtools will have a device mode that lets you do exactly this. Use this feature to increase your efficiency.

• Responsive website clone - Equipped with Bootstrap 3, you should try to build a responsive webpage. Pick a couple simple responsive pages to clone.

Part 6: Advanced CSS and Bootstrap 4

At this point, you should have a good foundation of the basics. So it’s time to move on to more advanced CSS. Learn how to layer elements in the z-axis, modify the shape and position of elements using transform, and create simple state transitions and animations.

It is also a great opportunity to learn the new CSS flexbox module that lets developers create flexible layouts. This will set you up for Bootstrap 4 which has a revamped grid structure based on flexbox.

• Z dimension - There is a third dimension in web pages for depth, it’s the z-axis. You will learn about stacking context, its rules, and how to change the z-axis position of an element using the z-index property. This is a complex topic to master with many conditions that affect outcomes. But it is an important one. So I urge you to spend adequate time on it to fully understand it.

• Transform - Transform is a CSS property capable of distorting and moving a HTML element. Learn how to use scale, skew, rotate, and translate.

• Transition - The CSS transition property is used to add transition effects during element state changes. Elements change states when they are hovered, focused, or active. Such as making a link change color when the mouse is hovering it. You will learn how to write basic transitions and understand the difference between each transition timing function.

• Animation - You can create animations using the CSS animation property. Although animations are generally frowned upon, you will at least know how it works.

• Flexbox - Flexbox is a CSS module that lets you create flexible layout structures. It is super convenient and a must learn for the modern developer. You will understand the relationship between a flex container and its flex items; flex container properties such as flex-direction, flex wrap, justify-content, align-items; flex item properties such as order, flex-grow, flex-shrink, flex-basis.

• Bootstrap 4 - Bootstrap 4 was released in 2017 and the team rewrote the grid structure from the ground up using CSS flexbox. Bootstrap 4 is super fun to use and it has a new set of helper classes that you can use for margin, padding, border, backgrounds, flex behavior. Be sure to learn about the major changes in Bootstrap 4. Which includes a new responsive breakpoint for extra large devices.

• Responsive website clone - Clone a couple more complex web pages using Bootstrap 4. I suggest Airbnb as its grid structure is very similar to Bootstrap. Make sure your clone is responsive too.

Part 7: Development Cycle With Git

When working on projects that involves multiple developers, version control becomes super important. Version control is the management of versions. In a web dev project, a new version is created whenever someone edits part of a project.

A version control system will let you review new changes before it is deployed live. It will also let you revert back to a previous working version when you discover an unforeseen software bug in the live site.

The most popular version control tool is Git and you ought to learn how to use it. You should also learn how to command your computer through the command line interface, as it is paramount when it comes to deploying your projects.

• Command line interface - Command line interface is a text based interface you can use to command your computer. Learn to navigate folder structures; create, move, delete files and folders. You need to know this well in order to use Git.

• Track versions with Git - Git is a version control system. It means that if you are editing a project, you can save a version of the project as snapshot. It is also very useful for managing projects with multiple contributors. You will understand the Git lifecycle, from initiation to commiting changes.

• Cloud storage with GitHub - Just like backing up your photos to Google drive or iCloud, developers back up their project to third party storage services like GitHub. GitHub is also a project management tool that offers issue tracking, code reviews, and project collaboration.

Part 8: HTML CSS Project

To further solidify all the skills you learned, you will come up with a simple website idea and build it out. If you don’t know what to build, consider creating your personal portfolio page. Use a CSS framework and track your project with Git. Try to achieve the following in your website.

• Has a navigation bar, a main content section, and a footer

• Has at least two pages

• Design is mobile responsive

Part 9: Migrating to Bootstrap 5

A stable version of Bootstrap v5 was released in the summer of 2021. The biggest changes in Bootstrap v5 happened in the background, such as removing the jQuery dependency and rewrote all its functionalities in regular JavaScript.

This is good news because you can start using Bootstrap v5 instead of v4 almost immediately, but for some small breaking changes that requires updating your old v4 code.

You will learn the most important changes in v5, such as:

• A new breakpoint, xxl, for 1400px and up.
• Improved gutters. Gutters are now set in rems, and are narrower than v4 (1.5rem, or about 24px, down from 30px).
• Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
• Dropped the jumbotron component as it can be replicated with utilities.
• Renamed several utilities to use logical property names instead of directional names with the addition of RTL support.

You will also follow a cloning exercise walkthrough to get handson experience using Bootstrap v5.

Part 10: Deploying Basic HTML CSS Website

You should know how to host your simple HTML CSS websites on third party services so people can access it. For a basic website to work, you simply need a dedicated computer that will listen for requests to serve the corresponding HTML CSS files.

Many web hosting services offer free hosting for static file websites, that is websites that only consist of static files, such as HTML, CSS, JavaScript and images. But you will be restricted to a subdomain. Getting a custom domain will usually cost you 8 to 10 USD a month. Below are some free services to host your HTML CSS projects.

• GitHub Pages (https://pages.github.com/) - GitHub offers one free site for each project. You just need to activate it in your project settings.

• Netlify (https://www.netlify.com/) - Netlify is a simple to use static web project hosting service. You just need to drag your project folder onto the browser to upload the deploy your projects.

• Neocities (https://neocities.org/) - Also an easy to use web hosting site that offers free static file hosting with a subdomain of your choice.

JavaScript Programming #
Programming language of the web

What is JavaScript?

We have already established that HTML and CSS can build static websites. But if we want to have dynamic content, such as a live feed of stock prices, or live chat, the browser needs to be able to get the data and inject it without refreshing the page. It needs a programming language for executing tasks.

JavaScript is the programming language for websites. It was initially designed as the ‘glue’ to HTML so web developers could assemble components such as images and plugins. Since then, JavaScript has been getting more and more powerful in the tasks it can perform on the browser.

JavaScript enables developers to create interactive functions, such as live polls and games, and build web applications, such as accounting and budgeting apps. Pretty much anything you can write in a program, you can do it on a web page with JavaScript.

To fully utilize JavaScript on a website, you first need to learn how to program in JavaScript. The parts below cover all the fundamental topics for programming in JavaScript. Having a good understanding of the following will help you make the connection between JavaScript and HTML CSS much smoother.

• Part 1: Intro to JavaScript

• Part 2: Basic Program Structure

• Part 3: Function Fundamentals

• Part 4: Object Data Structure

• Part 5: Advanced Function Concepts

• Part 6: Advanced Object Concepts

• Part 7: Bonus Concepts

• Part 8: JavaScript Project

Part 1: Intro to JavaScript

Get a sense of the basic building blocks of programming in JavaScript. You will learn about values and types, some simple arithmetic, and comparison operators, how to create variables, and where to write and test your JavaScript programs.

• Values and Types - Programming is mostly for dealing with data. There are six basic types of data values in JavaScript. You will learn the most basic four first. Numbers, strings, booleans, and undefined values.

• Operators - Operators are used to combine, compare, and manipulate data values. Learn to use arithmetic operators such as +, -, *, /, %; comparison operators such as <, <=, ===, !==, >, >=; logical operators such as &&, ||, !. You also will learn the automatic type conversion that happens in JavaScript operators, which can lead to unintuitive outputs.

• Variables - Variables are used to temporarily store values, so we can reuse them at different stages of a program. For example, when you are counting in your head, you keep check of the current count and continue to add numbers to it. In JavaScript, you create a variable to do this. Learn how to create new variables; assign and re-assign values to variables; use variable update shortcuts such as -=, +=, ++, --; and variable naming conventions in JavaScript.

• Where to write and test JavaScript - To improve, you need to practice. The most accessible resource for you to write and test JavaScript programs is to use the browser devTool JavaScript console. Most browser’s that have a devTool suite will have a JavaScript console. It works when you don’t have internet connection too. If you want something more sophisticated, check out online coding environments such as [repl.it](www.repl.it). It offers a side by side view of a text editor and a JavaScript console for you to write and test your code.

Part 2: Basic Program Structure

You will learn about the basic constituents of JavaScript programs. How to write simple programs, conditional statements, loops, and switch statements. You also need to follow a good syntax guide and learn how to add comments to programs.

• Statements, expressions and programs - An expression is a fragment of code. While a statement is a line of expression(s) with a semicolon after it. A program is simply a collection of statements. Understand the difference between the three and learn about the straight control flow of JavaScript programs.

• Conditional statements - When you want to execute some code only on certain conditions, you will need to use conditional statements. For example, the alarm should only sound on Sundays. Learn to use if, else, else if conditional statements with comparison expressions to create basic programs.

• Loops - Loops are very common in programming. It is used when we want to repeat the execution of some tasks. There are three basic types of loops in JavaScript, while, do, and for. Each has their own syntax and quirks. You also will learn how to conditionally break out of a loop.

• Switch - A switch statement is a special construct that lets you write easier to read conditional statements. You can use switch statements to replace lengthy and convoluted if/else statements.

• Syntax guide and commenting - Following a good set of best practice for JavaScript syntax will keep your code consistent and easy to read. Which makes bug finding a lot easier. You also will learn how to add comments to your code so you can leave reminders or explanations.

Part 3: Function Fundamentals

A function can be thought of as a machine that performs a specific task. Such as make sandwich. Every time you want a sandwich to be made, you just have to turn on the machine. Or execute the function, as programmers would say.

Functions are important in programming because it allows programmers to dissect parts of the program where the same task is carried out repeatedly.

Instead of repeating all the instructions to make a sandwich. The programmer can pack all the instructions inside a function, call it makeSandwich. And execute the function whenever a sandwich needs to be made.

Functions can take inputs, and give outputs. You can think of the inputs as ingredients. Outputs as the end products. For makeSandwich, you can give it inputs of bread, peanut butter, and jelly. The output would be a peanut butter jelly sandwich.

• Defining custom functions - If we want to create a reusable program that does some custom things, we have to define our own function. Functions can be created using a specific syntax. You will learn how to create functions and assign it to variables.

• Side effects and return value - The output of a function is called a return value. Each function can only output one return value. Apart from return values, JavaScript functions can also be useful for their side effects. Learn about what constitutes as side effects in JavaScript. Functions that only have return value and no side effects are called pure functions.

• Parameters and optional parameters - Parameter is another name for inputs. Learn how to define parameters in a function. You can make certain parameters optional by giving them default values. This reduces the amount of inputs needed when functions are executed. But still allows for on the fly customization.

• Scope and closure - Learn about how functions can use and store data in the global scope, local scope, and nested scope. Scope makes each function execution an independent siloed environment that won’t affect each other. When a function returns a local nested function as the return value. Local variables created in the outer function are still alive even though the outer function is no longer in effect. This effect is called a closure. Scope and closure are important concepts you need to understand thoroughly if you want to write clean and efficient programs.

• Declaration and expression - There are two ways to define a new function, declaration and expression. Function defined through declaration is hoisted to the top of its scope, which can cause some unexpected bugs. In general, try to define functions through expression only.

• Call stack - You will understand the flow of how a computer executes a program. Especially when you have functions in your program. The computer uses something called a call stack to remember the current location in the program it is at whenever it encounters a function. So that it can return to this position when the function has returned. Learn about the "Maximum call stack size exceeded" error and how to make functions return early.

• Learn to keep your code DRY - DRY stands for Don’t Repeat Yourself, it is a principle in programming that strives for reduction in repetition of code. When you have to repeat a very similar code at multiple places, you should write a function instead and replace those code. Because more code means higher probability for mistakes.

👋 If you are looking for a full fledged program with mentorship and career guidance, check out our Front-end Web Development Program.

Part 4: Object Data Structure

Object is the most complicated data type in JavaScript. You will use it to store complex data structures. Such as product inventories, user profiles, etc. You will learn how to create arrays and objects; and learn how to use properties and methods of objects.

• Array - Array is a special kind of Object that is very good at storing data of the same type. Such as a list of numbers or strings. You will learn how to create arrays; how to access individual values using bracket notation; how to iterate the values using a for loop; how to create nested arrays and iterate them.

• Object, properties, and methods - Object is also called a hash, a collection, a map, or a dictionary in other programming languages. Object stores data in key value pairs. These data are called properties. You can store any other types of values as a property. Properties that store functions are called methods. You will learn how to create complex objects with properties and methods; how to add and remove properties; and how to iterate an object’s properties. You also will learn about the difference in mutability between the object data type and other data types such as number and string.

• Array properties and methods - The array object has a bunch of useful default properties and methods. Learn about length, push, pop, shift, unshift, indexOf, slice, join. You also will learn about method chaining, which is to execute one function after another consecutively.

• Built-in data object - All the JavaScript data types have a counterpart built-in object, and each of them will have a unique set of properties and methods. As an example, Number is the built-in object that represents the number data type. You should take a look at the properties and methods of each data type’s built in object. Especially for Number and String, since they are the most common data types you will use in programs.

• Arguments object - A function provides a special default parameter called arguments which is an object that contains all the input provided to a function when it is executed. You will learn how to utilize this object to write functions that can accept variable amount of inputs.

• Math object - Math is a standard built-in object that is not associated with data types. It is used to contain a bunch of useful math related properties and functions. Useful methods include round, ceil, floor, abs, pow, sqrt, min, max, random, and trigonometry functions.

Part 5: Advanced Function Concepts

It is important to dive deeper into JavaScript functions and understand that functions are actually just values. Like other data values, you can use functions as input arguments and return values in other functions. You also will learn how to create recursive functions; and learn about the implication of input data mutation caused by the pass by reference mechanism. These concepts will help you write easier to read and less buggy programs.

• Recursive function - A function that calls itself is called a recursive function. A function is allowed to call itself, as long as you don't create infinite recursions in anyway that will overflow the stack. The advantage of recursion over loops is that recursive functions can sometimes be easier to understand. However, for programs that require heavy workload, you should use loops instead.

• Higher order functions - A higher order function is a function that accepts another function as an input, or returns a function as an output, or both. Higher order functions are useful because you can use them to create abstraction. Abstraction helps us make clearer, easier to understand commands by hiding parts of the inner workings of our programs. It’s like giving directions to a tourist by saying, "Walk straight down this street until you see a bakery, then turn left". Instead of saying “Put one foot in front of the other foot towards 60 degree direction for 100 metres, then turn 90 degrees counterclockwise and put one foot in front of the other foot for 200 metres”. The first direction is much more concise because we abstracted the action “walk” and the expression of “orientation”.

• Array's Higher Order Functions - The built-in array object contains a bunch of higher order function properties that can help you abstract a lot of the code. The most commonly used ones include map (iterating), forEach (iterating), filter, reduce (summarizing), sort. Having a good command of those methods will allow you to write less bug prone programs.

• Passing by Reference - When arguments are passed to functions during a function call, they are either passed by value, or passed by reference. Simple data types such as number, string, boolean, and undefined, are passed by value. While objects are passed by reference. Manipulating object arguments inside a function will change the original object too. You will have a clear idea what consequences passing by reference implies and know how to write programs that will account for this behavior.

Part 6: Advanced Object Concepts

The topics in this part are more theoretical than practical. But understanding the theory is going to give you more clarity on why JavaScript works the way it does. You will understand a well known computer science paradigm called Object Oriented Programming and how it influenced the design of JavaScript. You also will learn how to use the "this" variable in objects and methods; how to create new object instances using constructors; and the relationship between primitive data values and object wrappers.

• Object oriented programming - Object Oriented Programming, or OOP, is a design pattern for writing computer programs. Many significant languages such as Java, C++, C#, Python, Ruby, Objective-C are OOP languages. You will learn the basic design idea of OOP as it has significant influence on JavaScript and programming in general.

• Prototype-based programming - JavaScript is classified as Prototype-based programming, which is a style of object-oriented programming. You will learn how to set and get the prototype of objects using Object.setPrototypeOf() and Object.getPrototypeOf(). And understand that objects can inherit properties from its prototypes.

• Everything is an object - Almost everything in JavaScript is an object. Functions are also objects, if you get the prototype of a function variable, it will return the Function prototype. However, if we get the prototype of the Function prototype, it will return the Object prototype. You will learn that almost everything in JavaScript is based off the Object prototype. And additional functionalities are added to different data types through their own specific prototypes. But it all links back to the Object prototype.

• The "this" variable - When a function is called as a method of an object, it will have access to the properties of the object. Calling object.method will give method access to object through the use of the special variable this. You will know how to use this variable to write methods that uses object properties. And know how to attach a different object to a function using apply, bind, and call. Understanding how the this variable works will make life easier when using JavaScript libraries such as jQuery and frameworks such as Angular and React.

• Constructors - JavaScript functions serve dual purposes. The first purpose, is to store a particular program that we can execute as needed. The second purpose, is that functions can be used as constructors for other objects. Executing a normal function with the new keyword in-front will turn it into a constructor. A constructor returns a new object. Learn how to use the this variable in constructors to assign arguments as properties of the new objects. You will know how to override properties of an object instance from its prototype, and how to create private properties in a constructor. Also learn about the special get and set methods for setting custom functions for getting and setting public properties of a method. Even though constructors might be an overkill for simple JavaScript programs, having it in the back pocket is never a bad idea.

• Prototype interference and inheritance - Learn how to create objects using Object.create() that don’t have any prototypes so it is not prone to prototype interference where we can alter the properties of an object by changing/adding methods to its prototype and subsequently calling it on the object. Learn how to link one custom prototype to another custom prototype through prototype inheritance by using the call method in a constructor. Similar to constructors, you might not ever add prototype inheritance to your code, especially for simple programs. But it’s important to understand how it’s applied.

• Primitive values and object wrappers - Some values in JavaScript are primitive values, they are string, number, boolean, null, and undefined. Primitive values are not able to store properties because they are not objects. But you can still execute methods of primitive values, such as "abc".charAt(0). The reason this works is because JavaScript automatically wraps the primitive string value in the String object, so that you can use the properties available in String.prototype. You will learn the difference between object values and primitive values and how to create the object version of a primitive value by using value type object constructor, such as new String(‘foo’).

Part 7: Bonus Concepts

At this point, you should be able to create most basic programs. It is a good time to learn regular expressions and improve your programming skills by solving some common programming exercises.

• Regular expressions - Regular expression, or regex, is a text pattern matching system for performing text search in strings. For example /abc/ is a regex pattern that will match strings that consist exactly the characters 'abc'. Meaning 'abc 123' will give a positive match whereas 'Happy crab Sunday' will give a negative match. You will learn how to create complex regex patterns using special characters such as *, \, ^, $, +, ., [ ]; use regex flags; and apply the regex using methods such as match, replace, search, split, exec, test. Regex can be hard to understand and master, but it might prove to be quite useful in many work scenarios.

• Debugging - Bugs are inevitable when it comes to programming. Therefore, it is crucial that you develop a sturdy protocol for writing programs and debugging. Many trivial bugs can be avoided if you have a habit of testing programs while you write them, instead of typing out 100 lines of code and test at the end. When you do encounter bugs, the general rule of thumb is recreate - analyze - locate - fix - test.

• Programming exercises - The best way to improve is to practice. Aim to solve as many JavaScript fundamental and algorithm exercises as you can. When solving those exercises, try to keep your code clean, efficient, and precise.

Part 8: JavaScript Project

It will benefit you to work on a medium scale pure JavaScript project to apply all the concepts you have learned. Look for a project idea that can be useful to you. If nothing comes to mind, consider building a text based game such as black jack, rock paper scissors. Or financial calculation functions such as mortgage payments, stock investment returns. Try to ensure that your project covers the most of the following points.

• Has custom functions

• Use objects or arrays

• Use higher order functions

• Is DRY "Don’t repeat yourself", clean, and efficient

• Has no bugs

Dynamic Website Development #
Make a web page interactive and do things

How does JavaScript work with HTML and CSS?

We know that HTML is the file format for web page contents, and CSS is the file format for styles. Early websites were constructed from just HTML and CSS files for the purpose of providing static information. But as people started discovering new uses for the Internet, engineers needed a way to add new functionalities to websites.

A programming language called JavaScript was created to be executable on the browser (client-side). It allows engineers to add features like live chat, payment processing, animation and all kinds of interactivity to web pages.

The fundamental use case of JavaScript in websites is its ability to manipulate content on a web page, such as:

• JavaScript can add, change, and remove all of the HTML elements and attributes in the page

• JavaScript can change all of the CSS styles in the page

• JavaScript can react to all of the existing events in the page

• JavaScript can create new events within the page

• Animation of page elements, fading them in and out, resizing them, moving them, etc (source WikiPedia)

The other very important use case is JavaScript can utilize the networking protocols of a browser to communicate with other computers, clients and servers alike. This allows the user to post a new status update on a social network without leaving or refreshing a page. Because JavaScript is run on the browser, it makes the web browsing experience much faster and more responsive.

• Part 1: Document Object Model

• Part 2: DOM Manipulation

• Part 3: DOM Events

• Part 4: JavaScript Libraries (jQuery and Underscore)

• Part 5: Persistent Data Storage With Back-end Servers

• Part 6: Simple HTML CSS JavaScript Project with AJAX

Part 1: Document Object Model

The Document Object Model, or DOM, is a representation of the HTML (and CSS) documents created by the browser to be used as an interface between the documents and JavaScript. You will learn how to add JavaScript to HTML, how the DOM is structured, how to access, traverse, find elements in the DOM, and be comfortable working with the DOM.

• Adding JavaScript to HTML - You can write JavaScript directly inside a HTML file by using an HTML <script> tag. Or write JavaScript in a separate .js file and link it to the HTML file also using a <script> tag. Learn about the pros and cons of the two different methods.

• The DOM Structure - Explore and understand how a DOM looks like, and how to access it in JavaScript. Understand that HTML elements are represented as JavaScript objects in the DOM. The DOM is the interface that JavaScript uses to manipulate content in a web page.

• Trees and Nodes - Learn about the tree structure of the DOM, and how every element is a node. There are 12 different node types, such as element nodes, text nodes, etc, representing the different content types in a HTML file. Explore the different properties available in a node object.

• Traversing the DOM - You can access different parts of the DOM tree by moving from one node to another. Each node has a selection of properties that will give you access to its neighboring nodes. Learn to use parentNode, childNodes, children, firstChild, lastChild, nextSibling, previousSibling, hasChildNodes().

• Finding Elements - Accessing elements by traversal can be slow and cumbersome. The document object has some better methods you should learn to use to find elements in the DOM quickly. They are getElementsByTagName, getElementsByClassName, getElementById, querySelectorAll, and querySelector. Learning how to use those methods will be super useful when it comes to DOM manipulation.

Part 2: DOM Manipulation

Having a JavaScript representation of the HTML document wouldn’t be very useful unless we can manipulate it. You will learn how to move and remove HTML nodes, create, inject, and edit nodes. And create simple animation by editing node styles using JavaScript.

• Move and Remove Nodes - Understand how to use methods such as removeChild(), appendChild(), replaceChild(), and insertBefore() to edit the position of HTML nodes in the DOM. Changes in the DOM are directly reflected on the web page. This is a crucial part of dynamic website development.

• Create and Insert New Nodes - Learn to create new nodes using createElement() and createTextNode(). Simultaneously create and insert new HTML content into the DOM using the innerHTML property of element nodes. This is useful for creating infinite load feeds such as the ones in facebook and twitter and many other dynamic features.

• Edit Node Attributes and Styles - You can use JavaScript to edit all the attributes in an HTML node. Such as class, id, style, etc. Learn to use the classList property to edit classes; style property to edit inline-styles; getAttribute(), setAttribute(), and removeAttribute() to edit other attributes. Learn how to add CSS to the DOM by inserting <style> elements, and manipulate existing style sheets.

• Animation with JavaScript - Before CSS animation was available, developers used JavaScript to create simple animations. JavaScript animation is done by changing the top, left, right, and bottom value of an element periodically. This is done by using timing functions such as setInterval() and requestAnimationFrame(). JavaScript animation is particularly good for animations that need to be calculated dynamically, such as a trail of stars that is following the movement of the mouse pointer on the web page.

Part 3: DOM Events

The interactive input of a user is registered by the browser as DOM events. User activated events include mouse movements, mouse clicks, keyboard inputs, drag and drop, and more. DOM events also include non user input events, such as when the DOM is loaded and ready, or when a CSS animation has started or stopped.

You can add JavaScript programs to the webpage that will be triggered when a specific event occurs. This is what makes a website interactive. Such as when the user clicks the search button and gets a list of results; or a 2d snake game that is controlled by the keyboard arrow buttons.

• Event Listeners and Handlers - Learn how to attach and remove programs to events on particular HTML nodes using on- attributes, addEventListener(), removeEventListener(). Understand what properties are available inside an event object, how does event propagation work, and how to prevent default browser behaviors when an event is triggered.

• Mouse Events - Mouse events include clicks, double clicks, mouse movements, wheel scroll and more. Learn to attach programs to those events to create interactive features.

• Scroll Events - The scroll event triggers whenever the user scrolls a web page. It lets us know which part of the page the user is viewing, so we could use this information to change some elements' CSS, or switch off some calculation heavy animation that is not in view anymore.

• Key Events - When the user presses on any keys, a key event would be triggered. Learn how to determine key combinations and use key events to create good user experience features.

• Focus Events - HTML elements like buttons, inputs, textareas, links, enter the focus mode when you click on them. This is especially useful for signaling the user where they are inputting in forms, and for users with disabilities which element they are focused on the page. Learn how to use the focus and blur event to create good user experience features.

• Load Event - Understand the order of which the browser reads and execute programs in a HTML file. Learn to use the load and DOMContentLoaded events to run JavaScript programs only after HTML content and dependent resources are loaded and parsed.

• Timers - Learn to use JavaScript timing functions such as setInterval() and setTimeout(). The former lets you repeat a program periodically until you terminate it. The latter lets you set a time delay for running a program. For programs that require precise timing, learn to incorporate the JavaScript Date object in your timing functions.

• Debouncing Events - For events that can fire in succession very quickly, such as scroll, keydown, mousemove, you will learn how to delay the execution of the linked event listener program. This technique is called debouncing and involves the use of the setTimeout() function. Also learn how to rate limit the firing of some event listeners. Debouncing and rate limiting are handy techniques for real work.

• Small Project In Vanilla JavaScript - Build a simple HTML CSS JavaScript project that combines all the concepts you have learned. You can base the project on a previous pure JavaScript project you worked on. The key learning goal is to combine HTML CSS with JavaScript to make your JavaScript programs come to life. Such as a rock paper scissors game, or a financial calculator.

👋 If you are looking for a full fledged program with mentorship and career guidance, check out our Front-end Web Development Program.

Part 4: JavaScript Libraries (jQuery and Underscore)

In programming, a library is a collection of programs that perform specific tasks. Engineers incorporate libraries into their projects so they don't have to write the programs themselves, to save development time.

Different libraries solve different problems, big or small. Engineers pick and choose the libraries they use based on their project needs.

You should get introduced to JavaScript libraries through exploring two sturdy and easy-to-use libraries. jQuery deals mostly with DOM manipulation and traversal, events, animation, and network requests. Whereas Underscore is a collection of useful functions that deal with JavaScript data manipulation and functional programming, but not much about the DOM.

• jQuery Object and Selector - For our DOM elements to be able to use the methods in the jQuery library, we first need to turn them into jQuery objects. You can do so by either passing a DOM node reference to the jQuery() function, or use the jQuery() function to select HTML nodes from the DOM using a CSS selector string. This is the first step to using jQuery.

• jQuery DOM Traversal - Learn to use jQuery’s traversal methods that are more convenient than the ones supplied by vanilla JavaScript. You can use CSS selector strings in jQuery traversal methods to refine selections. Noteworthy ones includes parents(), closest(), next(), prev(), siblings().

• jQuery DOM Manipulation - The jQuery() function can create new HTML nodes by passing a HTML string to it. You can then use one of jQuery’s DOM manipulation methods to insert those new nodes to the DOM. jQuery’s manipulation methods include append(), prepend(), before(), after(), replaceAll(), remove() and more. You can also edit existing DOM contents, attributes, and properties using jQuery.

• jQuery DOM Events - jQuery’s purpose is to make developer’s life easier. You can see this especially in its event handling suite. jQuery adds an array of convenience methods that let you easily add event handlers to DOM nodes. These include click(), focus(), scroll(), hover(), keypress(), etc. Learn how to add the same event handler to multiple DOM elements in one step; how to add event handlers to nodes that are not yet in the DOM; add the same handler to multiple events; and how to use the trigger() method to programmatically trigger events.

• Other jQuery Methods - Learn to use each() and map() to iterate jQuery objects and get() to convert jQuery objects back into standard JavaScript data. Learn to use basic jQuery animation functions such as show(), hide(), slideUp(), and fadeIn() to create simple transition for your HTML elements.

• Underscore - When dealing with data in JavaScript, you are likely to write quite a bit of custom functions to clean and manipulate data. Since many of those manipulations are commonplace, someone decided to write a library to collect and share them. Underscore is regarded as the utility belt of JavaScript. You will find useful functions such as pluck(), which lets you pluck out certain properties from an array of objects; where(), which lets you look for objects that have a qualifying property value from an array of objects; shuffle(), which will shuffle the order of values in an array. It is worthwhile to spend some time poring over all the available functions in Underscore.

• Small Project Using jQuery - It’s a good point to work on another HTML CSS JavaScript project to solidify your learning. Except this time, you will be soliciting the help of libraries such as jQuery and Underscore. You can either rebuild a previous project using jQuery, or build an entirely new one. Stick to simple one page projects that has a good amount of dynamic interaction. Keep the scope small. Apart from games and calculators, consider building individual components of everyday websites. Such as a shopping cart or a to do list.

Part 5: Persistent Data Storage With Back-end Servers

Basic front-end websites that only has HTML CSS and JavaScript cannot store state. What that means is if you built a website for an investment portfolio return calculator, the user will have to re-input all the information every time they open it. Because the webpage has nowhere to store the data.

How can we solve that? Well, we need a back-end server to help us remember the states of our applications and to provide us the data when we need it.

This is the relationship between front-end and back-end. A front-end application is usually just an interface for users to interact with a back-end server. While all data and business logic is handled in the backend server.

A front-end website can use network requests to retrieve data from a back-end server. It can then inject this data into the DOM as HTML nodes. All of this is done using JavaScript.

• TCP/IP, HTTP - Before starting to make network requests, you will gain a brief understanding of how the internet works. Especially around the topics of Internet Protocol (IP), Transmission Control Protocol (TCP), which are the standard protocols that computers use to send and receive data with each other. You will also read about Hypertext Transfer Protocol (HTTP), which is the protocol to exchange or transfer hypertext documents.

• XHR And AJAX - XMLHttpRequest (XHR) is the interface that browser JavaScript uses to make HTTP requests. Request can either be made synchronously, or asynchronously. A synchronous request means the browser will wait for the back-end server to return a response before continuing on executing the rest of the program. Whilst an asynchronous request will continue to process and execute other programs, then come back to handle the server response when it’s received. Asynchronous XHR is also called AJAX, which stands for Asynchronous JavaScript And XML. You will learn how to create and send an Ajax request, and handle the success and error state of the request when it returns.

• API and JSON - Application Programming Interface (API) is an interface that programmers can use to interact with a software system. For example, Bob is a waiter at a restaurant. He relays your order to the kitchen, and Bob brings the food back to you. The kitchen is the software system, and Bob is the API. Most back-end servers will have a well defined API for developers to interact with. Explore some public APIs to get a sense of how they function. JavaScript Object Notation (JSON) is a widely used data format for storage and communication on the web. Many back-end servers send back data in the JSON format. Learn to parse and create JSON data in JavaScript.

• CRUD and RESTful API - CRUD stands for Create, Read, Update, Delete. These are the four basic functions of persistent storage on back-end servers. Most back-end web servers are just dealing with CRUD data manipulation. REpresentational State Transfer, Application Programming Interface (RESTful API) is a set of standards for building back-end web server APIs. Learn about those standards and how to make AJAX requests to RESTful APIs to perform CRUD operations on back-end servers. These include Post, Get, Put, Delete for Create, Read, Update, Delete.

Part 6: Simple HTML CSS JavaScript Project With AJAX

Combine all the skills you have learnt and build a front-end website that utilizes a back-end API for persistent storage. You can pick a public API from this API list. Try to satisfy the following criteria.

• Data from the API is retrieved and rendered in the DOM through JavaScript DOM manipulation in a meaningful way.

• An index (list) view of the data and a detailed view of individual data, preferably in two seperate pages.

• A search feature for the user to search for data in the API database, result is injected into the DOM as list view.

• Allow user to sort or filter data.

• API allowing, add a feature for the user to create new data points and persist it in the back-end server.