• Stars
    star
    2,282
  • Rank 20,182 (Top 0.4 %)
  • Language
  • Created over 6 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

All resources and notes from the Complete Web Developer: Zero to Mastery course

Complete-Web-Developer-Manual

All resources and notes from the Complete Web Developer: Zero to Mastery course


Contents

1. Introduction
2. How The Internet Works
3. History Of The Web
4. HTML 5
5. Advanced HTML 5
6. CSS
7. Advanced CSS
8. Bootstrap 4, Templates, And Building Your Startup Landing Page
9. CSS Grid + CSS Layout
10. Tailwind CSS
11. Career Of A Web Developer
12. Javascript
13. DOM Manipulation
14. Advanced Javascript
15. Command Line
16. Developer Environment
17. Git + Github + Open Source Projects
18. A Day In The Life Of A Developer
19. NPM + NPM Scripts
20. React.js + Redux
21. HTTP/JSON/AJAX + Asynchronous Javascript
22. Backend Basics
23. APIs
24. FINAL PROJECT: SmartBrain Front-End
25. Node.js + Express.js
26. FINAL PROJECT: SmartBrain Back-End -- Server
27. Databases
28. FINAL PROJECT: SmartBrain Back-End – Database
29. Production + Deployment
30. Where To Go From Here?
31. Bonus: Extra Bits (Coding Challenges + AMA)
32. Extra: For Windows Users
33. Bonus: Part 2 - Special Thank You Gift (Discount Coupons)


1. Introduction

Discord Channel:


2. How The Internet Works

Tools:

  • Chrome Developer Tools

Topics:

  • ISP, DNS and Servers
  • Traceroute (Windows: tracert)

Submarine Cable Map:


3. History Of The Web

Maps that explain the Internet:

First Webpage in the world:

Optional Videos:


4. HTML 5

Run HTML online:

Install a text editor (Select one):

Tags:

  • <html>
  • <head>
  • <title>
  • <body>
  • Headings (h1, h2, h3, h4, h5, h6)
  • Paragraph <p>
  • Bold <strong>, italic <em>
  • Ordered list <ol>, Unordered list <ul>, List item<li>
  • Break <br>, Horizontal rule <hr>
  • Image <img> and Attributes: alt, src, width, height
  • Anchor <a href="">
  •   `<div>` for Division/Section
    

Topics:

  • Relative vs Absolute Path

Zero to Mastery resources:

Reference websites:


5. Advanced HTML 5

Tags:

  • <form>
    • method, action
  • <input>:
    • type= "text", "submit", "reset", "email", "date", "radio", "password"
    • required, value, name, min
  • dropdown <select>
    • option <option>
  • comment <!-- -->
  • <div> and <span>

Semantic Elements

  • <header>
  • <nav>
  • <main>
  • <footer>

Topics:

  • Chrome view Source

Resources:

"If you take one thing from this, it is this: Don't worry if you don't feel 100% confident in HTML. Keep going as we will keep building on top of this knowledge."


6. CSS

Syntax:

Selector {
	property: value;
}

How to:

  • External
    <link rel="stylesheet" type="text/css" href="style.css">
  • Internal
    <style>
    	body {
    		background-color: purple;
    	}
    </style>
  • Inline
    <header style="background-color: green;">
  • Class
     <header class="green">
     	.green {
     		background-color: green;
     	}

Tools:

  • Chrome Inspector

Properties:

  • text-align
  • border
  • background
  • list-style
  • cursor
  • display: inline-block
  • color: hex, rgb or rgba

Selectors:

  • .class
  • #id
  • * (all elements)
  • element
  • element, element
  • element element
  • element > element
  • element + element
  • v:hover
  • :last-child
  • :first-child
  • ::before (pseudo-element)
  • !important (not recommended)

Text Properties:

  • text-decoration
  • text-transform
  • line-height
  • font-style
  • font-weight
  • font-size
  • font-family

Layout Properties:

  • float and clear

Box Model:

  • margin
  • border
  • padding
  • width and height

Sizes:

  • px
  • em and rem
  • vw and vh (viewport width and height)

Topics:

  • Cascading: Specificity, Importance !, Source Order
  • Linking fonts and external stylesheets

Exercises:

Reference websites:

Website for color check:

Website for fonts download:


7. Advanced CSS

Flexbox:

  • display: flex
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • order
  • flex: flex-grow, flex-shrink and flex-basis
  • align-self

Properties:

  • transition
  • transform
  • box-shadow

Tools:

Exercises:

Reference websites:

If you take one thing from this, it is this: Don't worry if you don't feel 100% confident in CSS. Keep going as we will keep building on top of this knowledge.


8. Bootstrap 4, Templates, And Building Your Startup Landing Page

App for creating users list:

Website with animation examples:

Website for patterns:

Generating animated patterns:


9. CSS Grid + CSS Layout

Grid Cheat Sheets:

Grid Garden:

Free Design resources:


10. Tailwind CSS

Reference websites:


11. Career Of A Web Developer

Updated Statistics and Surveys 2020:

Web Developer Roadmap:

Learning Guideline Roadmap:

Once you are Done with Learning, here is the list of best platforms for jobs and careers, which will help you get a great job or advace your career easily:


12. Javascript

Javascript Data types:

Primitive

  1. Number
  2. String
  3. Boolean
  4. Undefined
  5. Null
  6. Symbol (new in ECMAScript 6)
  7. BigInt

Non-primitive

  1. Object (Array is not a special data types in JavaScript it belongs to the object data types)

Javascript comparisons:

  • !== (not equal to)
  • === (equal to)
  • >= (greater than or equal to)
  • <= (less than or equal to)
  • > (less than)
  • < (greater than)

Javascript variables:

  • var
  • let (new in ECMAScript 6) : Used to declare variables that can be changed using code later on
  • const (new in ECMAScript 6) : Used to declare constants that remain constant throughout the execution of the program, mostly used for functions and object

Javascript conditionals:

  • if
if(condition) {
	//Code written here is executed if condition is true
}
  • else
if(condition1) {
	//Code written here is executed if condition1 is true
} else {
	//Code written here is executed if condition is false
}
  • else if
if(condition) {
	//Code written here is executed if condition1 is true
} else if(condition) {
	//Code written here is executed if condition2 is true
}
  • ternary operator
condition ? (code that runs with condition is true) : (code that runs when condition is false);
  • switch
switch(expression){
	case result1:
		//code that runs if expression gives result1
		break;
	case result2:
		//code that runs if expression gives result2
		break;
	default:
		//code that runs if expression gives neither result1 nor result2
}

Javascript logical operators:

  • && = Sees if both values are the same/true.
  • || = Sees if there is at least one of the same/ true value.
  • ! = Turns true into false, and false into true.

Javascript functions:

  • var a = function name() {}
  • function name() {}
  • return
  • () => (new in ECMAScript 6)

Javascript data structures:

  • Array
  • Object

Javascript looping:

  • for
  • while
  • do
  • forEach (new in ECMAScript 5)

Javascript keywords:

  • break
  • case
  • catch
  • class
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • export
  • extends
  • finally
  • for
  • function
  • if
  • import
  • in
  • instanceof
  • new
  • return
  • super
  • switch
  • this
  • throw
  • try
  • typeof
  • var
  • void
  • while
  • with
  • yield

13. DOM Manipulation

Reference websites:

DOM Selectors:

  • getElementsByTagName

  • getElementsByClassName

  • getElementById

  • querySelector

  • querySelectorAll

  • getAttribute

  • setAttribute

Changing Styles:

  • style.{property} //ok

  • className //best

  • classList //best

  • classList.add

  • classList.remove

  • classList.toggle

Bonus:

  • innerHTML //DANGEROUS

  • parentElement

  • children

It is important to CACHE selectors in variables


14. Advanced Javascript

Variable declaration:

  • let variableName (new in ECMAScript 6) /* its value can be altered
  • const variableName (new in ECMAScript 6) /* it stands for constant, its value can't be altered once declared
  • `` /* are used instead of '' or "". Allows us to avoid the "+" separation and elements and variables should be added with syntax ${element}
  • a**b /* it stands for a to the b potence
  • element.padStart(param1,param2) /* param1 number of characters param2 are added before the value of element declared. The default param2 is " "
  • .padEnd(param1,param2) /* Same as above but at the end
  • .trimStart() /* eliminates empty spaces from the start of a variable
  • .trimEnd() /* Same as above but from the end
  • debugger; /* Stops running the code and opens console for a step by step check

Functions:

  • Function declaration syntax: const functionname=(param1,param2...) => action /* If there is an only return, there is no need to type "return" and if it's just one parameter, no need to add "()"
  • Currying: const functionname= param1 => param2 => action /* To properly call function syntax is: functionname (param1)(param2)
  • Compose: const functionname= (param2,param3) => param1 => param2(param3(param1)) /* Being param2 and 3 functions y param1 a value. Executes a function inside a function executed with the initial param1

Arrays:

  • array.forEach(num=>{}) /* For each element num of the array, executes the actions inside {}
  • array.map(num=>{}) /* For each element num in the array, executes actions inside {} and return needs to be specified since the return will be placed in a new array.
  • array.filter(num=>{}) /* For each element num of the array a condition is checked. If the value turns out true, it will be added to the new array. If none of the elements meet the condition, it will return an empty array. Return needs to be specified
  • array.reduce((accumulator,num)=>{}, param3) /* Acumulates values of the operation performed in previous elements, param3 being the initial value of the accumulator
  • array.concat(param1) /* Concats param1 to the array
  • array.includes('param1') /* Verifies the array includes param1
  • array.flat(param1) /* Eliminates the nested arrays to a param1 level
  • array.flatMap(param1=>{}) /* For each element num, the operation inside {} is performed and the array is lowered to a level 1 nesting
  • array.fromEntries /* Turns the array into an object, making the first element of the array the property and the second the value of such property

Objects:

  • const(/let) {property1, property2,...} = obj /* Given an object obj, keeps the value of the properties in new variables property1, property2,...etc
  • {...obj} /* Creates a clone object of the object obj
  • Object.assign(param1,param2) /* Clones the lements of an object param2 in an object param1
  • Object.values(obj) /* Takes the values of the properties of an object obj
  • Object.entries(obj) /* returns an array with property,value of each element of an object obj /* .entries and .values can be used with array methods such as .map, .forEach, etc.
  • this /* when using this parameter, the method/action is applied exclusively to the element in which "this" has been summoned.

Classes:

  • Class creator syntax:
Classname {
   constructor(param1,param2){
     this.param1 = value;
     this.param2 = value2;
   }
   classmethod(){
   }
}
  • Create class object syntax: new Classname(param1,param2)

  • Class extension syntax:

Classextension extends Classname {
   constructor(param1,param2){
      super(param1,param2);
   }
   classextensionmethod(){
   }
}

/* You utilize a class when we are planning to create several objects with similar properties /* A class extension is used when those several objects can contain properties or categories with specific properties and methods, while respecting the initial constructor.

Loops:

  • for of: for (param1 of array){} /* It's a for loop in an array and an action over the element number param1 in an array array
  • for in: for (param1 in obj) {} /* It's a for loop of the properties and an action over the property number param1 in an object obj

/* both arrays and strings are iterable in JS /* for of cannot be used in objects, but for in can be used in arrays, you get the index number as a return

Extra Javascript Practice:


15. Command Line

FOR MAC OR LINUX:

Command Description
ls lists files and folders within working directory
pwd show current working directory
cd change working directory to user directory
cd .. change working directory to direct parent directory
clear clear current terminal screen
cd / change current directory to root directory
cd ~ change current directory to user directory
cd path/to/folder changes working directory to specified path
mkdir name create folder called 'name' within current directory
open foldername opens folder called 'foldername' using OS GUI
touch index.html creates new file titled index.html within working directory
open index.html opens file named index.html using default system program
open -a “Sublime Text” opens sublime text program. This syntax can be used to open other programs
open . opens and displays current folder within OS GUI
mv index.html about.html renames index.html file to about.html
up and down arrow cycles through previous commands typed within current terminal session
rm filename deletes a file called 'filename' within the current directory
rm -r foldername used to delete folders. In this case 'foldername' will be deleted
say hello (only on Mac) the mac will speak any text you enter after the 'say' keyword
rm -rf .git To remove git repo created by init
{program name } allows you to execute a program by calling it's name. Eg. codewill
open vscode. vlc will open vlc media player

FOR WINDOWS:

dir - list files
cd {directory name} - change directory
cd / - go to root (top) directory
cd .. - go up a level
mkdir {file name} - make a directory
echo > {filename} - create an empty file
del {filename} - remove a file
rmdir {directory name} - remove a directory and all files within
rename {filename} {new filename} - rename a file or folder
start {filename} - open file in default program
start . - open current directory
exit - exits the command prompt or a batch file
cls - clear the terminal screen
type {filename} - displays the content of the file 

16. Developer Environment

Popular code editors / IDE:

Development Environment Stack


17. Git + Github + Open Source Projects

Install Git:

Git GUI:

Git in one video

Git and version control practice/learning playground

Git Commands:

git clone “https:……”
git remote -v
git remote add url “https:……”
git remote add upstream “https:……”
git fetch upstream
git merge upstream/master
git status
git add “filename”
git add .
git commit –m ”message”
git commit -am "commit message"
git push
git push origin "branchName"
git pull
git branch
git branch “name”
git checkout “name”
git merge “name”
git diff
git diff "fileName"
git checkout -b "name"
git stash

Once you are in your forked project directory in your command prompt....

  1. Type git remote -v and press Enter. You'll see the current configured remote repository for your fork.

    a. git remote -v

    b. origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)

    c. origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)

  2. Type git remote add upstream, and then paste the URL you would copy from the original repository if you were to do a git clone. Press Enter. It will look like this:

    git remote add upstream https://github.com/zero-to-mastery/PROJECT_NAME.git
    
  3. To verify the new upstream repository you've specified for your fork, type git remote -v again. You should see the URL for your fork as origin, and the URL for the original repository as upstream.

  4. Now, you can keep your fork synced with the upstream repository with a few Git commands. One simple way is to do the below command from the master of your forked repository: git pull upstream master


18. A Day In The Life Of A Developer



19. NPM + NPM Scripts

npm init
npm install
npm install –g browserify

Install node and npm:

Check node and npm installed on your system by:

node -v
npm -v

If any of these command result in error then that (node/npm) deosen't installed on your system.

Reference websites:

If you want to run multiple version of node on system then we can utlized Node version manager(nvm)

Install nvm :

Steps to install NVM on local machine

Check nvm installed on your system by:

nvm -v

Check nvm list available on your system by:

nvm list 

Use nvm version on your system by (nvm use with specify version of node):

nvm use 14.12.0


20. React.js + Redux

old version

npm install –g create-react-app
create-react-app “name”
[cd "name"]
npm start
npm install tachyons

new version

npx create-react-app <App-Name>
cd <App-Name>
npm start

Website for fonts download:

Reference websites:

Action --> Reducer --> Store --> Make changes

npm install redux
npm install react-redux
npm install redux-logger
npm install redux-thunk

Additional topics you could cover

This topic is just to understand greatness of modern-day frameworks and appreciate how react will be helpful for building single page applications(CSR) or server side rendering(using NextJs) and static site generation(using Gatsby). Have a look at them Static Site Generation(SSG/Pre-rendering) vs Client side rendering(CSR/SPA) vs Server Side Rendering(SSR)

Some Additional React Based Frameworks popular now


21. HTTP/JSON/AJAX + Asynchronous Javascript


There are many ways for making an API call, but the one I recommend using is Axios. Here is why [https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5]

Other available options are Fetch API or G(old) XMLHttpRequests.

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API.

Features

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

Installing

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:

$ yarn add axios

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Reference websites:


22. Backend Basics



23. APIs



24. FINAL PROJECT: SmartBrain Front-End

Animated objects library:

Background patterns:

Animated background library:

Image and video recognition:

Icons library:


25. Node.js + Express.js

Install Postman:

Express.js:

(Getting start guide)

npm install body-parser
npm install express --save
npm install --save-dev nodemon

Node.js Reference websites:

Storing passwords securely:

npm install bcrypt-nodejs
$ npm install bcrypt
1.	/*
2.	* You can copy and run the code below to play around with bcrypt
3.	* However this is for demonstration purposes only. Use these concepts
4.	* to adapt to your own project needs.
5.	*/
6.
7.	import bcrypt from'bcrypt'
8.	const saltRounds = 10 // increase this if you want more iterations
9.	const userPassword = 'supersecretpassword'
10.	const randomPassword = 'fakepassword'
11.
12.	const storeUserPassword = (password, salt) =>
13.	  bcrypt.hash(password, salt).then(storeHashInDatabase)
14.
15.	const storeHashInDatabase = (hash) => {
16.	   // Store the hash in your password DB
17.	   return hash // For now we are returning the hash for testing at the bottom
18.	}
19.
20.	// Returns true if user password is correct, returns false otherwise
21.	const checkUserPassword = (enteredPassword, storedPasswordHash) =>
22.	  bcrypt.compare(enteredPassword, storedPasswordHash)
23.
24.
25.	// This is for demonstration purposes only.
26.	storeUserPassword(userPassword, saltRounds)
27.	  .then(hash =>
28.	    // change param userPassword to randomPassword to get false
29.	    checkUserPassword(userPassword, hash)
30.	  )
31.	  .then(console.log)
32.	  .catch(console.error)

26. FINAL PROJECT: SmartBrain Back-End -- Server

Change localhost:

If you don't want set environment variable, other option - modify scripts part of package.json from:

"start": "react-scripts start"

Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4) to:

"start": "PORT=3006 react-scripts start"

or (maybe) more general solution by @IsaacPak to:

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor solution to:

"start": "set PORT=3006 && react-scripts start"

Front-end and back-end connection:

Front-end:

fetch('http://localhost:3000/image', {
	method: 'put',
	headers: {'Content-Type': 'application/json'},
	body: JSON.stringify({
		id: this.state.user.id
	})
})
.then(response => response.json())
.then(count => {
	this.setState(Object.assign(this.state.user, { entries:count}))
})

Back-end:

const cors = require('cors')
app.use(cors());

Resource: CORS


27. Databases

Install PostgreSQL:

data types

Terminal commands for windows:

Login: (-U usuario)

psql -h localhost -U postgres

Create database:

create database database_name;

Show all datatables:

\l

Create a user:

create user moni with password ‘moni’;

Delete a database:

drop database database_name;

Connect to a database:

\c database_name;

Create a schema:

create schema friends;

Create a table:

create table Friends.test( firstname CHAR(15), lastname CHAR(20));

create table Friends.login(id serial not null primary key, secret varchar (100) not null, name text unique not null, entries bigint default 0, joined timestamp not null);

Show all information of a table:

select * from friends.test;

Describe database:

\d friends.test

Insert data:

insert into friends.test values( ‘Mike’, ‘Smith’);

insert into friends.test (firstname, lastname )values( ‘Sally’, ‘Jones’);

Add a column to an existing table:

alter table Friends.test add age smallint;

Update data from the table:

update friends.test set age = 25 where firstname= ‘Mike’;

Delete data from the table:

delete from friends.test where firstname = ‘Mike’;

Delete column from a table:

alter table friends.test drop column age;

Delete a table:

drop table friends.test;

Functions:

select avg(age) from friends.test;

Join tables:

select * from friends.test join friends.login on friends.test.firstname = friends.login.name;

Exit:

\q

List all users in postgresSQL database server:

\du

List all tables in a schema:

\d+ schema_name.*

List all tables in a database:

\dt *.*

List a table in a schema:

\d+ schema_name . table_name

Show description of a table, columns, type, modifications, etc.:

\d+ table_name

Create a backup of a database:

pg_dump -h localhost -U postgres database_name > database_name.sql

Restore a database: 1. Create a new database where the restore file is going to be placed:

psql -U postgres -d new_database_name -f respaldo.sql

*Note:  it is important to create the restore in the same root where the database copy is saved.

Enter to postgres with a user different to postgres:

psql -h localhost -d postgres -U usuario

Enter to a database with a different user:

psql -h localhost -d nombre_base -U nombre_usuario

28. FINAL PROJECT: SmartBrain Back-End – Database

Tool for db connection with back-end:


29. Production + Deployment

Environmental variables:

PORT

On terminal:

bash
-->PORT-3000 node server.js

On server.js:

	const PORT = process.env.PORT
	app.listen(PORT, ()=>{
		console.log(`app is running on port ${PORT}`);
	})

DATABASE

On terminal:

bash
-->DATABASE_URL-123  node server.js

On server.js:

	const DATABASE_URL = process.env. DATABASE_URL
	app.listen(3000, ()=>{
		console.log(`app is running on port ${ DATABASE_URL }`);
	})

OTHER OPTION

On terminal:

fish
-->env DATABASE_URL-‘hello’ node server.js

Deploy apps/websites:

Github Pages:

  • Mostly now Github is free for all students and Github pages can serve static sites
  • Also have a look at Github education pack using your Institute id and email and get access to free domains for a year and many more Github education pack

Heroku:

Not the best one:

Commands for heroku on backend folder: Install heroku:

npm install -g heroku
heroku login
heroku create

In the terminal there will be a URL : ” https://limitless-bastion-10041.herokuapp.com/”

git remote –v
git push origin master
heroku git: remote –a limitless-bastion-10041

Changes required in:

  • BACK END: PORT in server.js needs to be changed by an environment variable
  • FRONT END: fetch URL needs to be changed by the URL of HEROKU + “:3000”
git push heroku master
for checking errors:
heroku logs --tail
heroku open

Connect to pg database:

Create a new postgres database using Heroku:

Data: Heroku postgres: create new: install heroku postgres: select the app created

heroku addons
heroku info
heroku pg:psql

30. Where To Go From Here?


The Complete Junior to Senior Web Developer Roadmap


31. Bonus: Extra Bits (Coding Challenges + AMA)



32. Extra: For Windows Users



33. Bonus: Part 2 - Special Thank You Gift (Discount Coupons)


More Repositories

1

start-here-guidelines

Lets Git started in the world of opensource, starting in the Zero To Mastery's opensource playground. Especially designed for education and practical experience purposes.
Python
2,627
star
2

resources

Here is a list of best resources to get you started with learning how to code (mostly related to Web Development). Feel free to add your favorite resources as well and help others in their journey of learning.
HTML
2,592
star
3

ZtM-Job-Board

⚛️ A place for developers to show recruiters they are available for hire
TypeScript
1,102
star
4

javascript20-projects

Student submissions for the JavaScript 20 projects
869
star
5

JS_Fun_Practice

A list of small & fun functional programming exercises in JavaScript
JavaScript
732
star
6

Animation-Nation

A ZTM Challenge for Hacktoberfest
CSS
336
star
7

CSS-Art

General Edition - A CSS art challenge, for all skill levels
CSS
318
star
8

HTML-project

🌎
HTML
219
star
9

Keiko-Corp

HTML challenge for Hacktoberfest 2020
HTML
206
star
10

old-zero-to-mastery-website

This project once was the Zero To Mastery's website, created entirely by students. It has since been superseded by the new website, but this early version will remain archived for posterity and nostalgia.
JavaScript
201
star
11

Coding_Challenge-8

Realizing the power that you have as a developer to validate business ideas by developing a startups website
165
star
12

Coding_Challenge-6

Logic and problem solving - 3 JavaScript Puzzles
123
star
13

travel-guide

"A travel guide to suggest activities you can do once you arrive to a certain destination. Or you can just browse destinations and check out the different available activities."
JavaScript
112
star
14

Hacktoberfest-2023

Get started with Hacktoberfest 2023 with 3 awesome ZTM projects
103
star
15

book-tracker

"Tracks the amount of books that you've read, the ones you want to read and the progress on the ones you're reading."
CSS
103
star
16

coding_challenge-25

The #30DayProject - What will you build?
74
star
17

Coding_Challenge-3

Build a Speech Recognition Website using IBM Watson!
67
star
18

coding_challenge-46

Build a website with ChatGPT
60
star
19

zero-to-mastery-captions

All captions for The Complete Web Developer in 2020: Zero to Mastery
58
star
20

mappypals

An abandoned student led project. Reach out on Discord if you would like to revive the project!
JavaScript
56
star
21

coding_challenge-18

Solving tough JavaScript questions and improving your core understanding of the language
53
star
22

coding_challenge-24

Advent of Code 2019
52
star
23

ascii-art

A ZTM Hacktoberfest Challenge
Python
52
star
24

drum-root

A React Web App for Creating and Sharing Drum Loops.
JavaScript
48
star
25

coding_challenge-26

COVID 19 pandemic - build software that drive social impact
48
star
26

coding_challenge-42

Hacktoberfest
48
star
27

webblocks-2022

There is a big hype about front-end frameworks all over the place. But in this project we are going to build a showcase library of components using vanilla HTML, CSS and maybe some Javascript.
CSS
48
star
28

breads-client

Keep track of what you read online and see what your friends are reading.
TypeScript
46
star
29

coding_challenge-22

Hacktoberfest 2019
46
star
30

frosty-february-hackathon

Frosty February Hackathon for the ZTM community
45
star
31

coding_challenge-44

Single Page Projects
HTML
45
star
32

coding_challenge-43

Advent of Code
44
star
33

Coding_Challenge-1

Build your own blockchain competition
40
star
34

Advent-of-Code-2022

Advent of Code 2022
40
star
35

project-paycheck

A paycheck-to-paycheck breakdown of income and expenses. An abandoned student led project. Reach out on Discord if you would like to revive the project!
JavaScript
37
star
36

visual-music

An app that converts an uploaded mp3 song into visual expressions. An abandoned student led project. Reach out on Discord if you would like to revive the project!
JavaScript
35
star
37

file-io

Jupyter Notebook
35
star
38

coding_challenge-45

Voice Assistant with Socket.IO, Web Speech API, & Express.
34
star
39

Complete-Python-Developer-Manual

Class notes for Andrei Neagoie's Complete Python Developer course through Zero to Mastery.
Jupyter Notebook
31
star
40

Santafied

A ZTM Challenge for Hacktoberfest 2019
HTML
31
star
41

coding_challenge-33

Advent of Code 2020
30
star
42

coding_challenge-36

Build Your Own Blockchain...
30
star
43

coding_challenge-31

Hacktoberfest 2020
30
star
44

Canvaz

Your favourite annual creative challenge for Hacktoberfest is here! We will once again be showcasing the creative talents of our ZTM students using the HTML <canvas> element.
JavaScript
30
star
45

Hacktoberfest-2022

Hacktoberfest 2022
28
star
46

GrowersBrains

JavaScript
28
star
47

time-collector

This projects counts the time need on each project we do as freelancers or hobbyists, so we better know in the future how to estimate time for projects.
JavaScript
28
star
48

Advent-of-Code

28
star
49

canvas-2022

Your favourite annual creative challenge for Hacktoberfest is here! We will once again be showcasing the creative talents of our ZTM students using the HTML <canvas> element.
JavaScript
27
star
50

coding_challenge-27

Sudoku Goku
25
star
51

python-art

A ZTM Challenge for Hacktoberfest 2019
Python
25
star
52

CSS-Art-Hacktoberfest-Edition

Hacktoberfest Edition - A CSS art challenge, for all skill levels
CSS
25
star
53

coding_challenge-16

Design and build a portfolio project to wow your future customers/employers
24
star
54

coding_challenge-14

Understanding JavaScript and coding without the help of a library or tool
24
star
55

Canvas-Creations

A ZTM Challenge for Hacktoberfest 2020
JavaScript
24
star
56

coding_challenge-15

Simulating a real life work task that you will most likely encounter in your career.
23
star
57

GameSenshi

Hire Your Favorite Gamer! (in development)
CSS
23
star
58

coding_challenge-11

Build a website based on the designs from a fictitious client
HTML
22
star
59

coding_challenge-28

LANGO - The Complete Dev Language API
JavaScript
22
star
60

ascii-art-2021

A ZTM Challenge for Hacktoberfest 2021, converting images into text using the 95 printable characters defined by the ASCII Standard
Python
21
star
61

TheSurvey

This is our very special project, to create a zero to mastery developer survey web app. :) The development branch's result is here:
JavaScript
21
star
62

WebBlocks

zero-to-mastery re-usable web component library.
TypeScript
21
star
63

Coding_Challenge-2

Build an amazing portfolio website!
20
star
64

coding_challenge-34

Date Night
20
star
65

recycling-tracker

"A game style app that tracks the amount of waste that you have recycled and where, then calculates the amount of landfill that you prevented overall. Giving you bragging rights on your favorite social media platform."
JavaScript
20
star
66

CSS_Grid_LearnGame

This will be a game to learn CSS Grid in a Game Mode Style, to make learning more fun!
JavaScript
20
star
67

coding_challenge-35

Building Social Proof
19
star
68

coding_challenge-38

Bomberjam AI
19
star
69

coding_challenge-23

Reverse Engineering Apple Airpods
19
star
70

Halloween-Hacktoberfest-Edition

Hacktoberfest Edition - Halloween themed community challenge, designed with all skill levels in mind!
HTML
19
star
71

coding_challenge-12

Advent of Code 2018 Puzzles
18
star
72

coding_challenge-41

Build Your Own VS Code Extension!
18
star
73

coding_challenge-30

PongPongPong
18
star
74

coding_challenge-19

Building a React based personal blog using GatsbyJS
18
star
75

coding_challenge-39

Spinnin' Round
18
star
76

coding_challenge-20

Building the BEST CSS ANIMATION IN THE WORLD!!
17
star
77

coding_challenge-32

Build your own version of the Keiko Corp Website!
17
star
78

coding_challenge-40

21 day coding adventure
16
star
79

coding_challenge-21

A real life interview question from Google
15
star
80

coding_challenge-17

Artificial Intelligence and chatbots
15
star
81

coding_challenge-37

Toggle dark/light mode by clapping your hands
15
star
82

worldcup-2018

This project fetches data from a JSON file which contains all the worldcup 2018 details.
JavaScript
15
star
83

coding_challenge-29

Escape From Jurassic
13
star
84

breads-server

Server code for Breads. Keep track of what you read online, and see what your friends are reading.
JavaScript
13
star
85

Trello-Clone

A clone of trello, mimicking its basic functionality.
JavaScript
12
star
86

ZtM-Workouts

A project with a variety of exercises that will help you learn development.
JavaScript
12
star
87

starwars-spaceships

JavaScript
12
star
88

drum-root-api

An Express REST API service for Creating and Sharing Drum Loops
JavaScript
12
star
89

Coding_Challenge-5

Build an event page for a real company!
11
star
90

Coding_Challenge-7

It's time for you to build your own snake game
10
star
91

litter-finder

An app to find litter using community submitted geotagged images. The submitted areas are then tracked as to whether they have been cleaned up or not. There should be a leaderboard of submissions and the overall number of submitted images displayed.
HTML
9
star
92

house-organiser

"Registers the amount and type of items that you have and helps you reach your goal of reaching a certain number of items of your choice."
CSS
8
star
93

ascii-art-2022

A ZTM Challenge for Hacktoberfest 2022, converting images into text using the 95 printable characters defined by the ASCII Standard
Python
8
star
94

mappypals_backend

Backend repo for MappyPals. An abandoned student led project. If you would like to revive this project reach out on Discord.
JavaScript
8
star
95

ztm-events

The goal of the app is to make it easier for ZTM students to find information about both the upcoming and the past ZTM events.
TypeScript
8
star
96

zero-to-mastery-captions-advanced-js

6
star
97

coding_challenge-10

Two Hacktoberfest 2018 challenges
5
star
98

CodeofConduct

Be a good human.
5
star
99

projectLive

An abandoned student led project. Reach out on Discord if you would like to revive the project!
JavaScript
5
star
100

zero-to-mastery-captions-python

4
star