Introduction to Web Development⌗

What is web development?

Web development is basically the creation of website pages - either a single page or many pages.

How do websites works?

Client-Server Mode

What are frontend and backend?

	FRONTEND	BACKEND
Language	HTML,CSS and JavaScript	Go,Python and Java

Learning the Basics – HTML, CSS and JavaScript
- HTML Hyper Test Markup Language, HTML is like the mother of all the websites.
- CSS: The Cascading Style Sheets, CSS, causes the website to appear more appealing.
- JavaScript: JavaScript is a programming langague that allows you to interact with certain elements on the website and change them according to your wishes.
To infinity and beyond with frameworks A framework basically is like the Legos, with which you make a structure. They are like the building blocks created by someone else, and you use these to make your own website, and use them as and how you want.
- JavaScript Frameworks
  - front-end frameworks
    - React React was first created by Facebook.
    - Vue.js is a newer framework created by a fromer Angular developer, Evan You
    - Angular Angular was created by Google.
Parting Words there are a couple of things you need to keep in mind.

Do not try learning everything once. You will end up going back to square one. And trust me, that’s not what want.
Have patience and do not jump from one video tutorial to the next. Skim through a few, but please choose only one to learn from.

Geeting Started⌗

Lession 01 - Introduction to Programming and Tools of the Trade⌗

Introduction
- What is programming? Programming (also known as coding) is the process of writing instructions for a device such as a computer or mobile device.
- Types of programming languages Programming languages enable developers to write instructions for a device. Devices can only understand binary (1s and 0s), and for most developers that’s not a very efficient way to communicate.
  
  Programming languages come in different formats and may serve different purposes.
- Basic elements of a program
  - statements
  - variables
  - control
- Useful software and tooling for the professional developer
  - Editors Developers rely on editors for a few additional reasons:
    - Debugging helps uncover bugs and errors by stepping through the code, line by line.
    - Syntax highlighting adds colors and text formatting to code, making it easier to read.
    - Extensions and Integrations are specialized tools for developers, by developers.
    - Customization enables developers to create a unique development environment to suit their needs.
  - Browsers Web developers rely on the browser to see how their code runs on the web. Many browsers come with developer tools (DevTools) that contain a set of helpful features and information to help developers collect and capture important information about their application.
  - Command line Tools Writing code requires a significant amount of typing and some developers perfer to not distrupt their flow on the keyboard.
  - Documentation
    - Mozila Developer Network (MDN)
    - Frontend Masters
    - Web.dev from Google, publishers of Chrome
    - Microsoft’s own developer docs
    - W3 Schools

Lession 02 - Basics of GitHub, includes working with a team⌗

Prerequisties

To check if git is installed

$ git --version
git version 2.34.1

To check git configure
$ git config --list

Preparation

1. Create repository on Github
1. Navigate to your working folder
```
cd [name of your folder]
```
1. Initialize a git repository
```
git init
```
1. Check status
```
git status
```
1. Add all files for tracking
```
git add .
```
1. Add selected files for tracking
```
git add [file or folder name]
```
1. Unstage all files
```
git reset
```
1. Unstage a particular file
```
git reset [file or folder name]
```
1. Presisting your work
```
git commit -m "first commit"
```
1. Connect your local Git repo with GitHub

git remote add origin https://github.com/username/repository_name.git

1. Send local files to GitHub

git push -u origin main

1. To add more changes

git add .
git comit -m "type your commit message here"
git push

Working on projects with others
- 1. Create a branch
```
git branch [branch-name]
```
- 1. Switch to working branch
```
git switch [branch-name]
```
- 1. Do work
```
git add .
git commit -m  "my changes"
```
- 1. Combine your work with the main branch
```
git switch main
git pull
git switch [branch_name]
git merge main
```
- 1. Send your work to GitHub
```
git push --set-upstream origin [branch-name]
```
- 1. Open a PR(pull request) A pull request is the place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more.
  🤞Fingers crossed that all checks pass and the project owner(s) merge your changes into the project🤞
- 1. Clean up
```
git branch -d [branch-name]
```

Here are some things that can improve your GitHub repo:

Description.
README.
Contributing guideline.
Code of Conduct.
License.

Lession 03 - Accessibility⌗

Tools to use
- Screen readers Screen readers are commonly used clients for those with vision impairments
- Zoom used by people with vision impariments is zooming.
- Contrast checkers Colors on web sites need to be carefully chosen to answer the needs of color-blind users or people who have difficulty seeing low-contrast colors.
- Lighthouse
- Designing for accessiblity
Good display principles
- Color safe palettes People see the world in different ways, and this includes colors. colorsafe

JS Basics⌗

Lession 04 - JavaScript Data Types⌗

Variables

Variables store values that can be used and changed throughout your code.

Constants

Constants are typically declared with all uppercase letters. Constants must be initialized, or an error will occur when running code.

Simple value.
Object reference is protected.
Object value if not protected.

Data Types
- Numbers
  - Arithmetic Operators
    - - Addition: Calculates the sum of two numbers
    - - Subtraction: Calculates the difference of two numbers
    - - Multiplication: Calculates the product of two numbers
    - / Division: Calculates the quotient of two numbers
    - % Remainder: Calculates the remainder from the division of two numbers
- Strings Strings are sets of characters that reside between single or double quotes. Remember to use quotes when writing a string, or else JavaScript will assume it’s a variable name.
  - Formatting Strings
    - concatenate
```
let myString1 = "Hello";
let myString2 = "World";

myString1 + myString2 + "!";
```
    - template literals
```
let myString1 = "Hello";
let myString2 = "World";

`${myString1} ${myString2}!`
```
- Booleans Booleans can be only two values: true or false.
```
let myTrueBool = true
let myFalseBool = false
```

Lession 05 - Functions and Methods⌗

Functions

Function best practices There are a handful of best practices to keep in mind when creating functions
- As always, use descriptive names so you know what the function will do
- Use camelCasing to combine words
- Keep your functions focused on a specific task

Passing information to a function

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Default values

function displayGreeting(name, salutation="Hello") {
  console.log(`${salutation}, ${name}`);
}

Return values

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Functions as parameters for functions

function displayDone() {
  console.log('3 seconds has elapsed')
}

// timer value is in milliseconds
setTimeout(displayDone, 3000);

Anonymous functions

setTimeout(function() {
  console.log(`3 seconds has elapsed`);
    }, 3000);

Fat arrow functions modern developers perfer =>

setTimeout(() => {
  console.log('3 seconds has elapsed');
    }, 3000);

Lession 06 - Making Decisions with JS⌗

Comparison Operators and Booleans
- <: Less than
- <=: Less than or equal to
- >: Greater than
- >=: Greater than or equal to
- ==: Equality operator
- ===: Strict equality: Compares two values and returns the true Boolean data type if values on the right and left are equal AND are the same data type.
- !==: Inequality
If Statement The if statement will run code in between its blocks if the condition is true.
If..Else Statement The else statement will run the code in between its blocks when the condition is false. It’s optional with an if statement.
Logical Operators and Booleans
- &&: Logical AND:
- ||: Logical OR:
- !: Logical NOT

Ternary expressions(三元运算符)

let variable = condition ? <return this if true> : <return this if false>

Lession 07 - Arrays and Loops⌗

Arrays
- arrays start at the zero index
- push values to an array is by using array operators such as array.push()
Loops Loops allow us to perform repetitive or iterative tasks, and can save a lot of time and code.
- For Lopp The for loop requires 3 parts to iterate: counter, condition, iteration-expression
```
// Counting up to 10
for (let i = 0; i<10; i++) {
  console.log(i);
}
```
- While loop
```
// Counting up to 10
let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}
```

Terrarium⌗

Lession 08 - HTML in Practice⌗

Introduction HTML, or HyperText Markup Language, is the ‘skeleton’ of the web. If CSS ‘dresses up’ your HTML and JavaScript brings it to life, HTML is the body of your web application. HTML’s syntax even reflects that idea, as it includes “head”, “body”, and “footer” tags.

Lession 09 - CSS in Practice⌗

Introduction

CSS, or Cascading Style Sheets, solve an important problem of web development: how to make your web site look nice.

Lession 10 - JavaScript Closures, DOM manipulation⌗

Introduction Manipulation the DOM, or the “Document Object Model”, is a key aspect of web development.
- JavaScript closure which you can think of as a function enclosed by another function so that the inner function has access to the outer function’s scope
- The Closure

Introduction to Web Development

Introduction to Web Development⌗

Geeting Started⌗

Lession 01 - Introduction to Programming and Tools of the Trade⌗

Lession 02 - Basics of GitHub, includes working with a team⌗

Lession 03 - Accessibility⌗

JS Basics⌗

Lession 04 - JavaScript Data Types⌗

Lession 05 - Functions and Methods⌗

Lession 06 - Making Decisions with JS⌗

Lession 07 - Arrays and Loops⌗

Terrarium⌗

Lession 08 - HTML in Practice⌗

Lession 09 - CSS in Practice⌗

Lession 10 - JavaScript Closures, DOM manipulation⌗

Lession 11 - Build a Typing Game⌗

Lession 12 - Working with Browsers⌗

Lession 13 - Building a form, calling⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Lession 05 - Functions and Methods⌗

Reference materials⌗