Altcademy’s Full-stack Web Development with Data Science & Applied AI Syllabus (2024)
Every component you should learn to master software engineering, including full-stack web development, python automation, data science, and A.I. application
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 Full-stack Web Development with Data Science & Applied AI Program, and list all the "need to know" topics.
Who is this for?
Anyone interested in, planning to learn, or already learning 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. 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 11 sections. Each one covering a major component of 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 web development is, you can skip ahead and go straight to the topic you want to read about.
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. You will need to learn any one of the following back-end languages and frameworks:
Node.js (JavaScript but for backend; used by many startups)
Java (used by Google)
PHP (used by Facebook)
C# (used by Microsoft)
Python (popular amongst solopreneurs)
And you need to learn about database, model-view-controller, testing.
You will build a unique full-stack project, Capstone project, and even learn how to deploy your project so it's live and accessible on the Internet.
What is data science and A.I.?
Our world is full of data, whether it’s internet browsing behavior, city traffic, country demographics, all data could be analyzed for insights. Data science is the subject of data collection, cleaning, and analysis.
A.I. is the general term for artificial intelligence. With the breakthrough of large language models (LLM), we are approaching a point where computer systems start to appear as intelligent, but cannot quite yet be classified as true intelligence. We are probably still decades away from artificial general intelligence where agency could be achieved. For now, it’s best we learn how to utilize LLM to maximize efficiency in our workflow.
In the program, you will learn Python, and how to use Python for task automation. You will learn data analytics and visualization. You will learn about LLM prompt engineering and how to integrate LLM services into a web application.
Get the PDF version of this syllabus sent to your email
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 VSCode for beginners.
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.
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.
Get the PDF version of this syllabus sent to your email
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.
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
Get the PDF version of this syllabus sent to your email
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.
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.
Get the PDF version of this syllabus sent to your email
In programming, a framework is a standard for building applications. Frameworks deal with low level details so engineers can focus on high level problems that actually matter. Frameworks can significantly reduce development time.
A front-end framework is usually capable of speeding up the development of DOM manipulation programs significantly. Some frameworks are focused on building user interfaces only, while others provide a full suite of tools such as state management and routing. The three most popular frameworks of today are React (by Facebook), Angular (by Google), and Vue.js (independent).
React - Popular amongst startups with a strong job market. Designed for gradual adoption. Has lots of resources and third party tools with a large active ecosystem. But lots of choices for supporting tools can be overwhelming for beginners. Learning curve can be steep.
Angular - A full monolithic approach that comes with default systems for state management, routing, and a development language called Typescript. It is popular amongst large companies due to strong corporate support by Google. Learning curve can be steep.
Vue.js - Similar to React, it is a lightweight, gradual adoption framework that mostly focuses on building user interfaces. But also comes with optional official tools for state management and routing. Popular amongst early stage startups.
We teach React as it is currently the most popular one with the most resources. Also, with a good understanding of React, you can transition into the other frameworks quite easily. Following are the fundamental topics you need to learn for React.
Part 1: JavaScript ES6
Part 2: Basic React
Part 3: Intermediate React
Part 4: Create React App
Part 5: React Project
Part 1: JavaScript ES6
JavaScript goes through continuous improvements and the organisations in charge of writing JavaScript standards is ECMA International.
The 6th JavaScript edition which was published in 2015 is the latest supported version across major browsers. This version is referred to as ECMA 2015 or ES6 (6th edition).
Many updates were added to ES6. The important ones you will learn are:
Arrow functions - A new way to define functions () => {}. Arrow functions are not the same as standard functions. They don’t have a separate this variable, they can’t be used as constructors, and they don’t have their own arguments object.
Classes - ES6 Class is a syntactic sugar that coats the JavaScript prototype based Object Constructor to look like a more traditional OOP Class object. It's the industry's attempt to make JavaScript more similar to traditional OOP languages and easier to pick up by OOP language developers.
Object enhancements - New property shorthand for assigning key value pairs from variables. Support for computed property key name during object definition. Plus shorter syntax for object method definitions.
Template literal - This is a new way to construct text strings. With this, there is no need to worry about escaping quotation marks, and dynamic content can be added using a special syntax.
Rest param and spread operator - ES6 rest param allows us to group function parameters into a JavaScript array. Then we can access it in the function as an array. We can also spread an array into comma separated output using the new spread operator.
Default params - We can now define default parameter values in the parentheses with a new syntax e.g. function(a = 1). This reduces written code.
Let and const variables - In ES6, two new keywords for creating variables are added, let and const. let will replace var, and const is for creating constant variables.
Part 2: Basic React
React is designed for gradual integration. In this part, you will learn to add React to an existing project, learn to write in React JSX, compile JSX locally, learn to construct React components, use props, add state to a component, and handle events.
Smallest React example - Learn React by creating the smallest React component and inject it into the DOM. You will learn how to use React library methods such as React.createElement, ReactDOM.render. Learn to use props, and style React elements.
Use same React component in multiple places - We can insert as many react components to a HTML page as we want. Learn to do this with a simple react component.
React JSX - React’s templating language that lets us combine HTML and JavaScript in one fluent structure. This is a powerful feature of React. Learn to add styles in JSX, and incorporate JavaScript expressions.
Custom components and props - Learn to create custom React components that are fully programmable to do anything. Learn to use props to pass in data to custom components.
Composing components - Learn to nest custom components in other custom components to create larger, more complex components.
Add state to components - React components can store states that are independent for each component instance. Learn to use states in React class components.
Component lifecycle - React components have helper methods that are called during the render lifecycle. Learn to use methods such as componentDidMount, and componentWillUnmount to run code that modifies component states.
Event handling - Learn to attach event handlers to React elements through JSX attributes. This enables the building of interactive React components.
Build a stopwatch - Learn to build a stopwatch that can start, stop, and reset. Using all the concepts learned above.
Part 3: Intermediate React
After learning how to create basic React components. You will get into the more advanced concepts and learn to use React to build more complex components. Learn to render lists, handle form elements, structure conditional rendering, make ajax calls with the new fetch API, and more.
Rendering lists - Learn to convert array values into React elements. Learn about the importance of the key attribute. Learn to embed map() expressions in JSX.
Form elements - Form elements are usually used as controlled elements in React. What that means is the values of form elements come from component states. Learn to handle value change and state updates for different types of form elements, such as, input, textarea, select, checkbox, etc.
Build a stock portfolio - Deepen your understanding of lists and forms by going through a stock portfolio building tutorial.
Handling state in a parent component - States are often seen as single source of truth for data, and often flow down from parent to children components. Learn to construct composed components that have state stored at the top parent component.
Build a currency converter - Learn to build a currency convertor that will simultaneously update values of both currencies based on an editable conversion ratio. While keeping state of all values in a parent component.
Conditional rendering - In React, we can conditionally render outputs using if statements, logical &&, || and ternary operators. We can incorporate them either as inline JSX expressions, or as final return values.
Fetch and promises - A new ajax tool amongst modern web browsers is the Fetch API. Key difference between Fetch and traditional XMLHTTPRequest is that Fetch uses promises instead of callbacks to handle request response. Promise is a new feature in ES6 for asynchronous programming. You will learn to use Fetch and promise to make ajax calls.
Build a movie finder - Build a React application that searches a movie database and render the results.
Build a to do list - Build a to do list React application that connects with a back-end api for persistent data storage.
React hooks - The two main hooks are, State Hook, and Effect Hook. State hook is for adding and using state in a component. Effect Hook is for performing side effects after React updates the DOM, it's the combination of componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
Learn to use the Create React App NPM package to create SPA (Single Page Applications). You will learn the folder structure, learn how to install additional dependencies, import a component, add a stylesheet, and run the app locally and deploy it live.
Node and NPM - Node is a runtime environment for JavaScript and is often used for running JavaScript based back-end web servers. NPM (Node Package Manager) is the package manager for Node packages, which are libraries. You will learn to install Node and NPM in your local system in order to use Create React App.
Run app locally - Learn to setup a new React app and serve it locally.
Add dependencies - Learn to add dependencies to a React app with NPM.
Single Page App - Single page apps are web applications that load a single HTML page and update the page dynamically using JavaScript. Learn the single page app structure for React.
Front-end routing with react router - Routing, changing of url and subsequent page content, is done in the front-end for single page apps. Learn to use react router to handle routing.
Build a movie finder 2 - Combine all the knowledge into a multi route single page app that lets you search for movies and view individual movie details.
Deploying an app - Learn to deploy a React app onto static file hosting servers and server hosting platforms.
Part 5: React Project
You will combine all the knowledge you learnt to build a currency exchange app with React. The app will fetch live currency data from a back-end API. The app will allow user to calculate currency conversions based on custom amounts.
Get the PDF version of this syllabus sent to your email
Unlike front-end, where the core languages are fixed, namely HTML, CSS, and JavaScript. Back-end web applications can be written in many different languages and frameworks. Our goal is not to teach you a particular framework, but to teach you the fundamental back-end concepts which are transferable. We need a system that won’t get in the way of our teaching, and will just function nicely. The criteria that we went with for selecting the framework for our web development curriculum are the following:
The programming language should be easy to pick up for beginners.
The framework should be convention based and has strong model view controller structure.
The framework should require the least effort to setup.
The framework should have a long history of development and a continuity outlook of at least five years.
Based on these, we chose Ruby on Rails because Ruby code is very readable and easy to learn. Rails is based on conventions rather than configurations which means a lot of design decisions are already made for you; it has a strong model view controller structure, which is arguably the most important concept in back-end server applications; it’s easy to setup and to get going; and has been around since 2005 and will likely stay around for years to come.
But why not JavaScript and Node.js? Yes, using JavaScript for back-end too means you only have to learn one programming language. However, JavaScript back-end frameworks are mostly configuration based which means they tend to require a lot of setup and decision making. The other downside is JavaScript frameworks tend to go out of fashion every two to three years. And you end up having to learn a brand new one when it is the hot new thing, and repeat this process every now and then.
That’s not to say you shouldn’t learn a Node.js framework in the future. But learning all the crucial concepts through Ruby on Rails will make future transitions much more manageable.
To learn Ruby on Rails, you first need to learn basic programming in Ruby. You won’t have to dive too deep into Ruby programming as generic back-end web server applications rarely requires advanced programming concepts.
Part 1: Ruby Installations
Part 2: Ruby Basics
Part 3: Program Structure
Part 4: Data Structure
Part 5: Object Oriented Programming
Part 6: Ruby Exercises
Part 1: Ruby Installations
Getting Ruby setup is quite simple, we will provide you installation guides for Mac, Windows, and Linux. After installing Ruby, you need to learn how to execute a Ruby script file in your terminal.
Part 2: Ruby Basics
You will learn about the different value types in Ruby, operators for manipulating and comparing data, and built in methods for different values.
Values and Types - Back-end web development is all about dealing with data. So you need to know the types of data you use in Ruby. A quick overview of Numbers, Strings and Booleans is minimum. Also review the different operators for Numbers, such as +, -, *, /, %, **. And how to concat strings in Ruby.
Comparison and Logical Operators - Study how to compare values in Ruby using comparison operators ==, >=, <=, !=. Learn to combine comparison operators using logical operators and, or, not.
Built-in Methods - Ruby comes with plenty of built-in methods for its data types. Noteworthy ones include odd? and even? For Numbers; reverse and to_i for Strings. Get comfortable manipulating different data types using methods and method chaining.
Part 3: Program Structure
As you will learn, the constituents of writing programs for most programming languages are quite similar. It can generally be broken down into variables, statements, conditionals, loops, and functions.
But different languages will have different strictness. A stricter programming language requires the programmer to define more details in a program. Such as the datatype of the parameters a function accepts, or how to handle errors when it happens.
More old school languages such as C++ and Java are stricter and harder to learn. While Ruby and JavaScript are less strict and easier to pick up. You will learn the syntax of Ruby and how to create basic programs.
Variables - Variables are memory boxes used to remember values so they can be used later. Learn to create variables in Ruby; assign and re-assign values to them; learn the list of reserved words that cannot be used as variables names.
Functions / Methods - Function is a box of program that takes inputs and returns an output. In Ruby, functions are also called methods. Learn to define custom methods that accept parameters and return outputs; and learn how to execute custom methods.
Control Flow - Ruby executes programs in a top down flow. We can alter this flow by adding control flow statements to our programs. These include conditional statements that will only execute programs when certain condition is true; for loops and while loops that let you repeat certain programs over and over again. Learn to incorporate control flow into methods too.
Ruby Best Practices - You will adopt a good best practice guide for code indentation and variable naming convention. Keeping your code consistent and clean will make it easy to read and extremely beneficial when it comes to bug finding.
Part 4: Data Structure
Apart from standard data values such as Numbers and Strings, you will learn how to create, read, and manipulate data structures such as Array and Hashes. These are frequently used to structure data sent between front-end and back-end applications, and are common data types amongst most programming languages.
Array - Array are used to store a collection of data. Usually, you would keep data of the same type in an array. You will learn to create arrays, read values, and manipulate arrays. Also learn to use array methods such as push, pop, shift, unshift, and how to iterate arrays using loops.
Hashes - A hash, also called a dictionary, is a data structure used to store a collection of arbitrary data. A hash is made up of properties, each property will have one key, and one value. The key is used to retrieve the value, and each key needs to be unique in a hash. You will learn how to create a new hash; how to read, add, and remove properties; and how to iterate a hash.
Part 5: 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. Ruby is also an OOP language. You will understand the fundamental design idea of OOP and how it’s applied in Ruby programming.
Class - A class is a concept in OOP where certain types of objects belong to the same class. An analogy would be that Cats, Dogs, Lions all belong to the Animal class. Because they share certain common characteristics. Different breeds of cats will then be subsets of the Cats class. And Animal is the superset of all those classes. You will learn how to define custom classes.
Instance - Classes can be thought of as blueprints, which are used to create actual objects from. The objects created from a class are called class instance. Learn to generate object instances from classes using the new keyword.
Inheritance - A class will inherit methods and properties from its superclass, e.g. Cats and Dogs will inherit from the Animal class. This reduces redundancy so code that is common across multiple classes do not have to be repeated. Learn to declare inheritance when creating a new class.
Attributes - Learn to create instance attributes in Ruby classes that have both read and write capabilities. Also learn to instantiate attributes during the class instance creation process and to define default attribute values.
Attribute Visibility - You can set the visibility of class methods and attributes to one of three values, public, protected, *or private*. Public attributes can be accessed outside of the class definition, while protected and private attributes can only be accessed during class definition. Protected attributes are inherited by subclasses but private attributes are not. Learn to create all three types of class attributes.
Instance vs Class Attributes - Instance attributes are independent between class instances, edits to one won’t affect others. But we can also create class attributes too. Class attributes are tied to a class, it can be used to store data that needs to be shared amongst class instances. Learn to create class attributes during class definition.
Super - When you create a new subclass that inherits a parent class but you have a method in the subclass that shares the same name as a method in the parent class, the subclass method will completely overwrite the parent class method. If you want the method of the parent class to run before the subclass method executes, you can use the super keyword in the definition of the subclass method. This is also useful for instance initialization so that attribute instantiation code doesn’t have to be repeated in subclasses.
Part 6: Ruby Exercises
You need to get comfortable coding in Ruby before learning how to write Ruby on Rails applications. The best way to improve is to practice. We will provide you plenty of Ruby programming exercises.
If you have noticed, front-end is mostly just the UI (user interface) view of an application. All of the front-end website that you build are not able to remember states, unless you connect them with a back-end application.
A back-end web server application deals with data storage and business logic. It’s all about creating, retrieving, modifying, and deleting data. Say a message board such as Twitter, where the core business logic is tweet creation and tweet retrieval. But of course there are also other things to consider, such as user authentication, data validation, and security.
So how does a back-end server application interaction work? Well there are three parts to it. First, the party that wants to interact with the back-end has to send a request. This is usually a person on a web browser. For example, Lily who wants to post a new tweet on her Twitter feed.
Lily types a message and clicks the tweet button. The JavaScript program in the browser that handles this action translates it into a Post request and sends it to the back-end of Twitter.
The Twitter back-end receives the request and starts processing it. It adds the tweet to the database and does whatever tasks it needs to.
Twitter back-end then sends a response back to Lily’s browser. Most likely saying that the tweet has been successfully added. Also, the data of the new tweet is usually sent back with the response as well.
At this point, the job of the back-end is done. It is up to the front-end how to deal with the response. If the tweet was successfully added, then the front-end will likely update Lily’s feed to reflect that. Otherwise, it will show an error message.
But here’s the thing, a back-end server is only able to execute the tasks it is programmed for. You cannot send a request to post a new tweet on your Twitter account to Google’s back-end server. So, how do we know what kind of tasks a back-end server can carry out?
This is exactly the purpose of an Application Programming Interface (API). An API is a set of definitions of routines. For a back-end web application, an API refers to the logic of all the requests it is programmed to handle. APIs will generally come with API documentation too, which is how other programmers can learn how to use a particular back-end API.
You will learn the model-view-controller (MVC) structure of a Ruby on Rails back-end application. How to define routes for a back-end server. How to create, edit, delete data in a database. How to process requests and send back responses. How to write application features such as user authentication, photo upload, email sending. How to write automated tests. And finally deploy your back-end application live onto the web.
Part 1: Rails Installations
Part 2: What is Model-View-Controller
Part 3: Writing Back-end Web Application with Ruby on Rails
Part 4: Learn by Example - ToDo List
Part 5: Deploying Your Application
Part 6: Model Validations
Part 7: User Authentication
Part 8: Project - Twitter Clone
Part 9: Libraries and Integrations
Part 1: Rails Installations
If you have Ruby installed successfully, installing Rails becomes fairly straightforward. Since Rails is really just a Ruby package, it only takes one command line instruction to install.
Third Party Services - After installing Rails, create your accounts for Heroku and Amazon Web Services (AWS). Heroku is a minimal setup hosting service for web applications, we will be deploying our back-end applications on Heroku. AWS is a suite of tools for web hosting when you need fine control over your servers. We will use some of its services for data storage.
Part 2: What is Ruby On Rails
Ruby on Rails is a web application framework built using the programming language Ruby. Its purpose is to provide web developers tools and standards to build back-end web applications very quickly.
The key difference between Ruby on Rails and other web frameworks is its convention over configuration philosophy. In Ruby on Rails, much of the mundane decisions are already made for you by ways of convention. So programmers can focus on things that actually matter, i.e. the business logic.
What is Model-View-Controller - Model-View-Controller (MVC) is an architectural concept for developing computer applications. It was widely adopted in web application development, the Rails’ application structure is based on the MVC pattern. Model handles the data side of the application, and much of the business logic. View is responsible for creating a user interface output that will be sent to the user client. This is either in the form of a front-end web page (HTML, CSS, JavaScript), or just pure data. Controller is the interface between Model, and View. It handles incoming requests, instructs the Model for data manipulation tasks, and instructs the View for rendering output.
Intro to Rails - MVC sits at the core of a back-end application. But there are many other components that require management too. For example, route management, database configuration, package dependency, application versioning, environment control, etc. Rails is a suite that offers to take care of all things in web development. You will start by learning how to create a new Rails application, run the server, and visit its homepage on your browser.
Part 3: Writing Back-end Web Application with Ruby on Rails
You will learn the complete process of how to create a back-end application with Ruby on Rails. Study topics such as database, migrations, associations, testing, routing, and the crucial MVC components.
Database - Back-end applications’ primary task is permanent data storage. You will understand the concept behind relational databases. Which is a type of database structure popular for mission critical applications amongst financial institutions and large internet companies. Also learn about database schema and migration.
Model - Model is the first component of MVC. It's the core of data management in Rails because it lives between the controller and the database. Rails has a feature called Object-relational Mapping which lets you interact with the database without using the database’s native programming language. Learn to create new models in Rails using the generator command; add data attributes to migration files and run migration to edit the database; and create a new data entry using the Rails console.
Controller - Controller is the interface between model and view. When a request is sent to the back-end, it will first be filtered by route management, then passed to the corresponding controller for handling. In the controller file, you can define how you want to handle and process the request. Learn to create controller methods and corresponding route end points for GET/POST/PUT/DELETE requests; learn to test your end points with the Postman app; learn to craft text and JSON responses directly in the controller; and learn to read request params in the controller.
Database Migrations - Migrations are a convenient way to alter database structure over time in a consistent and simple manner. Traditionally, you have to write raw SQL to modify the database schema. In Rails, you only need to write Ruby code to do the migrations. Learn to add tables, attributes, and modify the database structure by using migration.
Associations - Association is a connection between two data tables. For example, you can have a table for authors, and a table for books. And you can create a connection between the books and their authors. This kind of connection is called an association. Learn to add associations such as has_many, has_one, belongs_to to Rails models.
Gemfile - The Gemfile allows us to define which Ruby libraries (gems) we want to use for our Ruby project. Gemfile can be used for all Ruby projects, so it's not unique for Rails. Learn how to read the Gemfile, and how to add gems to it.
Testing - Automated testing is important in back-end applications. Often, test specifications would be written for model, controller, and view, and the tests would be run when changes are made to ensure everything works as expected. Learn to use the rspec gem to add automated testing to your Rails application.
Views - Back-end applications have the ability to return responses in different formats, such as HTML, JSON, XML. The view component is in charge of determining the response format. You will focus on using Rails as a pure API application and only write responses in JSON for now. Learn to use the Jbuilder gem to construct JSON views.
Environments - In Rails, there are three main environments: development, test and production. Essentially, environments are segregated boxes where your actions in one box don't affect other boxes. This allows you to do whatever you want in one environment without worrying about messing up another environment. Learn to set up different environment variables, gems, and behaviors for your Rails application.
Part 4: Learn by Example - ToDo List
Plan and implement the API endpoints of a ToDo list application. There is one model, and five endpoints. The front-end application is already written and ready to connect with the API endpoints.
Tasks model - a model containing 3 attributes, content, completed, timestamps. And a validation that content must be present.
GET /tasks - return all tasks from database.
POST /tasks - create a new task based on given parameters.
DELETE /tasks/:id - delete a task identified by its object id.
PUT /tasks/:id/mark_complete - update a task to change completed to true.
PUT /tasks/:id/mark_active - update a task to change completed to false.
It doesn’t matter how awesome your application is unless you are able to deploy it live. Also, there are often many kinks in the way when you try to deploy a local project. So it is recommended to deploy your application as early as possible, even if it doesn’t do anything yet. So that you have the deployment process ironed out.
Deploy to Heroku - Heroku is a simple to use application hosting service provider. It acts as a layer on top of Amazon Web Services (AWS) that manages all the small details of running your web server instance for you. Learn to create and deploy your local Rails application to Heroku.
Part 6: Model Validations
When you submit a tweet on Twitter, it has a default limit of 140 characters. The best place to validate this is in the model. Since model is the MVC component that manages all the business logic for data. To do this, we use something called model validations. Learn to add model validations such as length, presence, absence, uniqueness, allow_blank.
Part 7: User Authentication
When you post a new tweet on Twitter, the back-end needs to make sure you are the owner of the account. Without a user authentication mechanism in place, users will be able to impersonate each other. You will learn how to setup a login system to enable user authentication.
User - User authentication starts with a user model. Websites often use the user model to hold information such as contact email, username, first and last name, and password. Learn to create a user model to store username and password for a ToDo list application so users can sign up for an account.
Session - Once users can sign up, they need to be able to sign in too. Signing in requires a concept called session. A session is simply a database entry that records a user’s unique sign in token which is also stored on a user’s browser. Everytime a user makes a request from the browser, this token is sent together with the request. The back-end application then checks and validates this unique token to authenticate the user, before carrying out the tasks requested. Learn to implement the session system and use it to ensure users are authenticated before carrying out tasks in other API endpoints.
Encrypting Passwords - If we store user passwords as plain text, we risk exposing them if the server or database is compromised. This is especially damaging when users use the same password across many different websites. Making their accounts on multiple websites vulnerable. To combat this, we should encrypt the user’s password stored in our database. Learn to use BCrypt to encrypt passwords for storing and decrypt them when users login.
Part 8: Project - Twitter Clone
You are going to combine all the concepts you learned and build the API back-end for a Twitter clone. The application comes with a front-end application that is ready to consume the API endpoints you create. There will be three models and nine endpoints.
Models - You will create three models, Users, Sessions, and Tweets.
POST /users - create a new user based on given parameters.
POST /sessions - create a new session based on given parameters.
GET /authenticated - validate user authentication by comparing cookie with session token.
DELETE /sessions - delete session token from database to logout a user.
POST /tweets - create a new tweet based on given parameters.
DELETE /tweets/:id - delete tweet based on given id.
GET /tweets - get all tweets by all users.
GET /users/:username/tweets - get all tweet by one user.
GET /tweets/search/keyword - get all tweet based on given keyword.
Part 9: Libraries and Integrations
Learn to add more features to a Rails back-end application by integrating third party libraries for handling email sending and image uploads. These features will be incorporated into the Twitter clone project.
Photo Upload - Features in Rails can be quickly implemented by leveraging open source libraries. Learn to use the Paperclip gem to add image upload capability to your Twitter project. Learn to modify your database, model, controller, and view to allow users to upload an image when creating a new tweet.
Photo Upload with AWS S3 - Heroku servers are not designed for permanent data storage. So we need to store the images in a dedicated file storage server. Learn to create an AWS S3 bucket for cloud data storage. And configure your Twitter project to store the user uploaded images to S3 instead.
Mailer - Emailing is a huge part of web applications. It's used for email confirmation, notifications and more. Learn to add mailing capability to your Twitter project and send out an email notification whenever a user successfully posts a new tweet.
Get the PDF version of this syllabus sent to your email
It needs to have a back-end application that handles business logic and permanent data storage; and a front-end application that acts as the interface for users to interact with the back-end.
For example, Facebook, Twitter, and Google are all full-stack application. Each has a back-end API application that handles API requests. And a web interface that lets users interact with the API.
Monolithic Structure vs Split Structure?
There are two general approaches to developing and running a full-stack web application. You can either separate the front-end from the back-end, called the split approach. Or you can create one monolithic structured full-stack application that handles both front-end and back-end.
If you take the split approach, you will need two independent servers. One is responsible for serving the front-end web application, and the other will host the back-end API application. If your front-end web application is simple and only consists of static files, e.g. HTML, CSS, JavaScript, images, etc. It can easily be hosted and served using cloud based file hosting services, such as AWS S3, or Netlify.
Furthermore, the split structure is the better approach if you plan to build multiple front-end applications, such as a website, and a mobile app. So the back-end application only functions as an API endpoint application which the different front-end applications interact with. This way you will have better separation of concerns.
The monolithic approach is combining the front-end application and back-end application into one. A monolithic application will handle business logic, data storage, and serving the front-end interface to the user. This means the application will be serving HTML, CSS, JavaScript files as well.
The monolithic approach is great if you are low on developer resources, and only building a web application as the user interface. There will only be one server to take care of, hence lower probability of service outage. In this course, you will learn to add front-end to a Ruby on Rails project to create a monolithic full-stack web application.
Part 1: Front-end in Ruby on Rails
Part 2: Full-stack Airbnb Project
Part 3: Deployment and Enhancements
Part 1: Front-end in Ruby on Rails
Ruby on Rails was originally designed as a monolithic full-stack framework. Which means it has the capability to serve front-end files as well as handle back-end business logic. In this section, we will look at how to add front-end resources to Rails, and turn one of the previous Rails API app into a full-stack application.
Ruby on Rails for Front-end and API - There are two ways to incorporate the front-end with the API endpoints within a Rails application. You can either change all the views of existing API endpoints into front-end pages with HTML, CSS, and JS files. Or keep front-end and the APIs separate and use ajax requests in the front-end app to request data from the APIs. We will go with the latter approach as it makes splitting the front-end and back-end much easier when that becomes necessary.
Add Route, View, Controller for Front-end - The structure for adding front-end to a Rails app still relies on the MVC model, except you don’t need the model component for this. You start by defining the routes and controller for handling requests, then you can add HTML content as the view output.
Insert CSS, JavaScript Files - Rails has folders for adding CSS and JavaScript files to the front-end application. Files you add in these folders will be packaged together and sent along with the HTML file for each resource the user requests.
Add Page Specific JavaScript - Rails compiles all the JavaScript files into a single file and sends it to the client. To add page specific JavaScript programs, we need to make use of a custom ready function that will execute JavaScript code only on specific pages.
Install and Import Front-end Libraries - You can add JavaScript libraries to the front-end application by installing Ruby gems.
Build a Full-stack To Do List - Go through the motion of full-stack Rails development by converting the To Do List Rails API only application into a full-stack application.
Part 2: Full-stack Airbnb Project
Build a full-stack Airbnb Rails project and learn to create a booking system that incorporates Stripe payment gateway for checkout.
API Endpoints and Starter Kit - Build multiple endpoints on top of a starter kit provided to you. Starter kit includes models and endpoints for users, and sessions. You will build the endpoint for listings and learn to populate the database with seed data programmatically.
Add a Booking System - The main purpose of Airbnb is for users to browse listings, and make reservations. You will build a booking system from scratch. And add the corresponding front-end for users to make reservations.
Incorporate Stripe Payment Gateway - A booking system is not complete without payment. Learn to incorporate the popular Stripe payment gateway to your Airbnb application for a complete booking experience.
Part 3: Deployment and Enhancements
There can be unforeseen issues when you deploy your application live. Therefore you must always try to deploy as early as possible. You also will learn how to add a custom domain to your application, and how to secure your app with HTTPS.
Add a Custom Domain - When you deploy your application to Heroku, you will be given a subdomain that points to your application. If you want a custom domain instead, you will need to purchase one first then adjust some configurations.
Secure Your App with HTTPS - HTTPS is the more secured version of HTTP. After adding a custom domain to your application, you will have to configure it to be served over the HTTPS protocol. Learn to use free HTTPS service from cloudflare to enhance the security of your application.
Heroku Add-ons for System Monitoring - Once your application is up and running, it is important to add monitoring services to track uptime, and record server logs. When the application encounters bugs, the server log is where you will go to investigate. Learn to add add-ons for your Heroku instance.
A capstone project is an integrative experience of your learnings. The term derives from the final decorative coping or "cap-stone" used to complete a building or monument. You will plan and build your project by leveraging all the knowledge and practical skills you've learnt so far.
A capstone project is likely the centerpiece of your portfolio and the main talking point for you when you attend job interviews. As it is where you will convey your knowledge and capabilities to potential employers.
The process of developing a capstone project includes project idea generation, planning, drafting, prototyping, user testing, and finally building. Learn best practices in each part of the process to ensure you create a project that accurately reflects your abilities.
Part 1: Project Scope
Part 2: Project Idea Generation
Part 3: Planning
Part 4: Building
Part 1: Project Scope
You will be calling the shots on what you want to build. But we will be setting some minimum requirements to ensure you have a project that is technically advance enough that it will be the most prominent one in your portfolio.
Project Requirements - You will build a full-stack application that has an interactive front-end. It needs to be a complete product. It needs to have permanent data storage. It needs to be visually impressive. And it needs to be deployed online.
Deliverables - The deliverables include your working application hosted live on the internet, the link to the Github repository of your project, and a readme file in your Github repository that explains what the project does.
Project Evaluation - Your project will be evaluated on your workflow and code quality, complexity of the project, and your creativity towards problem solving.
Part 2: Project Idea Generation
To help you come up with a project idea. We have prepared a workflow that you can use to generate, evaluate, and choose your idea.
Brainstorming - Let your mind run wild and generate as many ideas as possible. It is important to not say no here.
Market Research - Choose up to five ideas from the brainstorming stage and perform market research on those ideas. Look for existing products in those industries and try to deduce if they are meeting the demands of their customers.
Idea Refinement - Shortlist to only three ideas based on all the data you have gathered. The most important factor is how excited you are to work on an idea.
Part 3: Planning
Planning is key for a smooth building process. You will decide on the features you want to build; wireframe the user interface; carry out user testing with real people; plan the data structure and the API endpoints.
Scope and Timeline - The timeline for the capstone project is 4 weeks, you will scope the project into something you can comfortably finish in this time. That means you have to choose only a few features that are the most important and representative for your idea.
Wireframing The User Interface - Actual development is costly, so you should never start by coding. Instead, spend a day to build a fake product through wireframing. You will sketch out the user interface and envision how it will be used.
Conduct User Testing - Take your wireframe and conduct interviews with real people. This is the best way to get feedback on whether users understand what your product is, and how to use it. This feedback will help you revise your design and features.
Plan Your Database Structure - Based on your wireframe, you should have a decent idea of how your application is going to work and what features you will build. You should plan out your database structure. What kind of data you will store, and what are the relationships between the data.
Plan Your API Endpoints - The API is the node between the front-end and the back-end. You will list out each API endpoint’s route, the controller it connects, and a simple description of what the end point does.
Plan Your Build Process - We recommend building one feature at a time. For each feature, you can build the front-end first, then the back-end. You should decide on the order of the features based on the their importance.
DIY vs Community Packages - For many common features, there will be community packages that you can use, so you don’t have to build from scratch. We recommend only using packages if the feature would take you too long to build it yourself. Plan ahead and research on community packages, then decide which features you would build from scratch, and which you will leverage on community packages.
Part 4: Building
If you planned everything out, your building process shouldn’t be too difficult. The most important thing to remember here is to deploy all the time, so you know that your application works in the production environment.
Create an Empty Rails App - Always start by creating an empty application, and make sure the server runs fine.
Always Be Deploying - Make sure you deploy your application at every stage of the build process. That is after you complete each feature, you should deploy it live.
Python is the most popular programming language for general purpose applications, workflow automation, and machine learning today. It has a relatively flat learning curve and therefore very beginner friendly.
A simple web content scraper can be easily written in 15 lines of Python code thanks to its vast and powerful built-in and community package catalog. If you plan to learn machine learning or data science, Python is the number one language for that.
Part 1: Python Basics
Part 2: Flow Control
Part 3: Functions
Part 4: Lists
Part 5: Dictionaries
Part 6: Advanced Concepts
Part 7: Object Oriented Programming in Python
Part 8: Python Project
Part 9: Python Automation
Part 1: Python Basics
Learn the fundamentals of Python
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 and, or, not.
Values and Types - Programming is mostly for dealing with data. You will learn the most basic four first. Integers, Floating Point Numbers, strings, and booleans.
Variables - Variables are used to temporarily store values, so we can reuse them at different stages of a program. Learn how to create new variables; assign and re-assign values to variables; and variable naming conventions in Python.
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.
Part 2: Flow Control
Learn to write basic programs using if/else statements and loops.
Flow control statements - When you want to execute some code only on certain conditions, you will need to use conditional statements. Learn to use if, else, elif 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 two basic types of loops in Python, while, and for.
*Python native modules *- Learn about Python’s native builtin modules called the standard library and how to import them into a custom program.
Part 3: Functions
Functions is a very important concept in Python, it allows you to run a piece of program again and again at different places.
Defining custom functions - Functions can be created and stored in variables so they can be used again at multiple places. You will learn how to create functions and assign them 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. Python functions can also be useful for their side effects. Functions that only have return value and no side effects are called pure functions.
*Arguments and optional parameters *- Arguments is another name for inputs. Learn how to define arguments in a function. You can make certain arguments 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.
Exception Handling - Whenever we see an exception or error, it means that our program has crashed. To fix our program, we can use Exception Handling techniques, and try to find out where the error or exception occurred.
Part 4: Lists
Learn to use lists to create and store indexed data in efficient ways.
List Data Type - In Python, there are two list data types called List and Tuple. Lists and tuples can contain multiple values, which makes it easier to code while working with a large amount of data.
Set Data Type - Set is similar to a List, but it can only have unique values.
List Methods - Learn to use .index(), .append(), .remove(), .sort(), and other methods to manipulate lists.
Part 5: Dictionaries
Learn to use dictionaries to create and store key-value paired data.
Dictionary Data Type - Dictionary allows you to store data as key-value pairs, this makes a lot of tasks really efficient.
*Dictionary Methods *- Learn to use methods like keys(), values(), items(), clear(), setdefault() and get().
Nested Dictionaries and Lists - These can be "Dictionary within a Dictionary", "List within a List", "Dictionary within a List", "List within a Dictionary" and any other combination you can think of. This is a very interesting and powerful concept.
Part 6: Advanced Concepts
Learn to use higher order functions, and how to write lambda functions as input for other functions.
*String Data Manipulation *- Learn to write escape characters, slice strings, find substrings in a string, and other useful string methods.
List and Dictionary Comprehension - Learn to use comprehension to create lists and dictionaries in fewer lines of code.
Built-in Functions - Python has a lot of useful built-in functions. Learn about len(), min(), max(), sum(), zip(), map(), filter(), any(), all().
Higher Order Functions - Understand what constitutes a higher order function and how to write lambda functions to be used in higher order functions.
Recursion - A function that calls itself is called a recursive function. This is a useful concept and can be used to write easy to understand functions.
Part 7: Object Oriented Programming in Python
A familiar topic amongst many other OOP programming languages, this is a concept you must learn about.
Classes and Objects - Learn to create custom classes and objects in Python.
Object Methods - Learn to add custom functions in a class and how to use the init method to initialize an object.
*Object Inheritance *- Learn about subclass inheritance and how to leverage it to write complex yet easy to understand programs.
Part 8: Python Project
The final project to conclude Python fundamentals is building a word guessing game called Hangman.
Part 9: Python Automation
Learn how to run Python on Google Colab and write basic automation programs that involve making requests to other APIs or scrape the content of a website.
Running Python on Google Colab - Google Colab is a cloud-based Python development environment that provides many of the same features as Jupyter Notebook. It allows you to write and execute Python in your browser, with zero configuration required, free access to GPUs, and easy sharing of your work. It's incredibly useful for developing deep learning applications, data analysis, and more.
Installing Conda for running Python locally - (Optional) Conda is an open-source package management system and environment management system that runs on Windows, macOS, and Linux. It allows you to install multiple versions of software packages and their dependencies and easily switch between them. It is particularly useful for projects that require different versions of Python or specific libraries. Installing Conda is optional, but it can make running Python locally on your computer easier and more flexible. It's also a common tool in the data science and machine learning fields.
Calling APIs - APIs, or Application Programming Interfaces, allow your Python programs to interact with external services or resources. By calling APIs, you can retrieve data, send commands, or perform various operations on web services without having to handle the low-level details like network connections and data formatting. Python's requests library is commonly used to make HTTP requests to APIs, and there's a rich ecosystem of libraries for interacting with specific APIs.
Web Scraping - Web scraping is a technique used to extract large amounts of data from websites. Python provides various libraries to automate the process of web scraping, such as BeautifulSoup and Scrapy. These tools parse the HTML content of web pages to extract the data you need. Web scraping can be useful for gathering data that is not provided by a public API, for example, extracting product details from e-commerce sites, or compiling statistics from various web sources.
The main purpose of Data Science is to extract knowledge and insights from data in various forms, both structured and unstructured, similar to data mining. Simply put, we as humans collect data, and we want to make sense of it. With the explosion of the amount of data on the internet, we need to use computers to help us make sense of natural phenomena and human behavior.
Part 1: Pandas and Plotting
In Data Analysis, we need to deal with a lot of data. There should be an easy and systematic way to read, write, update and delete data. Pandas is a Python library that helps us do all these things.
What is Pandas? Pandas is a Python library used for working with data sets. It has functions for analyzing, cleaning, exploring, and manipulating data. I bet many of you might be familiar with Excel spreadsheets. What we are about to talk about is very similar to spreadsheets. It's a tabular representation of data. Simply speaking, we are using tables. Pandas is similar to Excel spreadsheets in many ways. We can read data from a file, write data to a file, update data, delete data, and do many other things.
We will learn about the following visualization techniques: Line Plots, Histogram, Box Plots, Scatterplots and Line of Best Fit.
Part 2: Data Analysis and Visualization
Before we jump into visualization, we need to understand the basic steps involved in analyzing data. This often starts with data cleaning and preparation, where Pandas can be extremely useful. Once the data is clean and ready, we can use various visualization techniques to represent data graphically, which can reveal insights that are not apparent from raw data alone.
Python offers a range of libraries for visualization, such as Matplotlib, Seaborn, and Plotly. These libraries can create a wide array of static, animated, and interactive plots.
Learning to create and interpret these visualizations will allow you to extract meaningful insights from datasets and communicate findings effectively. With the integration of Pandas for data manipulation and libraries like Matplotlib and Seaborn for data visualization, Python becomes a powerful tool for conducting thorough data analysis and visualization.
We will explore these visualizations using real datasets and practical examples to not only understand the theory behind these techniques but also to gain hands-on experience in applying them.
Part 3: Analyzing and Understanding a Real-world Dataset
In this section, you'll tackle a hands-on project by analyzing a real-world dataset. Your journey will involve:
Crafting specific questions to guide your analysis.
Sourcing relevant datasets to provide the answers.
Cleaning and preparing data for examination.
Delving into analysis with Python tools to uncover trends and patterns.
Visualizing findings with clear, compelling charts.
Interpreting the results and understanding their significance.
Communicating your insights through concise reports.
By the end, you'll have the skills to transform raw data into meaningful stories, showcasing the practical impact of data science.
Get the PDF version of this syllabus sent to your email
Applied AI # Large language models and their applications
What is Applied AI and How to Apply AI?
Applied AI refers to the practical use of artificial intelligence (AI) technologies to solve real-world problems. Unlike theoretical AI, which focuses on developing and understanding AI algorithms and their potential capabilities, Applied AI is about implementing these AI systems to create solutions that can perform tasks typically requiring human intelligence. These tasks can range from recognizing speech and images to making decisions and predictions.
Part 1: Large Language Models (LLM)
Dive into the world of LLMs like OpenAI's GPT series, exploring their capabilities and how they can be accessed via APIs. Grasp the concept of Langchain - a framework designed to leverage LLMs for complex tasks and workflows.
Part 2: Prompt Engineering
Learn to craft effective prompts to elicit the best responses from LLMs. Understand how to use input data to guide the model's output, how to chain prompts for advanced queries, and how to refine wording for precision.
Part 3: Incorporate LLM and Prompt Engineering in Full-stack Web Apps
Combine your knowledge of LLMs and prompt engineering to enhance web applications. Create interactive experiences such as chat applications or customer service chatbots, harnessing the power of AI to engage users and improve services.
"Full Stack" generally refers to a class of programming that takes care of both the backend and the front-end of the web, integrating the two to create a single, cohesive piece.
A full-stack web developer must be fluent not only in front-end design/development (HTML, CSS, JavaScript) but be conversant in back-end programming (Rails, Python, PHP). They will also need to understand database and server management or system administration.
Full-stage web developers should have knowledge about front-end design, back-end development, database management, servers, and system administration.
Which full-stack is the best?
Ruby on Rails is one of the best web development stacks because it's very popular. Developers typically feel more comfortable learning a widely used, established tech stack rather than something that has less exposure.
And, the reason developers like Ruby on Rails is that it's a great stack for beginners since it provides a clear, coherent structure and doesn't require a lot of advanced knowledge.
Ruby on Rails is used mainly for developing web applications, websites, or interactive web applications in the programming language Ruby.
Many companies have adopted this framework because it is easy to use, is customizable, is editable, and has a built-in testing suite.
What are the topics in full stack developer?
The full-stack developer should know how to develop, deploy, and debug his/her applications with some of the following specific skills:
- knowledge of code libraries/frameworks like Ruby on Rails, Symfony, AngularJS, Node.js...
- be familiar with SQL/NoSQL database toolset
- ability to tweak their site via disparate options like WordPress and Drupal
- ability to deploy apps on one or more cloud providers
