---
tags: CSS, flex, Javascript
---
# CSS tips+ JavaScript basic(2022/01/24):

## :memo: todo list

1. What's DISPLAY in CSS
2. Introduce `flex` in CSS
3. Introduce JavaScript
4. Why we need to learn JavaScript?
5. How to delpoy the website?
6. Exercise

### 1. What's DISPLAY in CSS
display: https://www.w3schools.com/cssref/pr_class_display.asp

### 2. Flex
隆重介紹Flex: https://wcc723.github.io/css/2017/07/21/css-flex/
補充說明：

圖片來源：[CSS Inline Layout Module Level 3](https://www.w3.org/TR/css-inline-3/)

### 3. Introduce JavaScript

**JS: 能夠在瀏覽器運行的程式語言**

**JavaScript 和 Java 之間有關係嗎？**

初次接觸 JavaScript 的人常會有的疑問，答案是沒有，別被混淆囉。
1995 年時，JavaScript 隨著 Netscape 2.0 首次推出，它原本要被命名為LiveScript，
但因為行銷策略為了強調昇陽的 Java 程式語言的普遍性，改名為 JavaScript，
即便 Java 和 JavaScript 之間沒有太大的關係，從此之後，這便成為了混淆的元兇。
What is the difference between #java and #Javascript ?
It’s the difference between dog and hotdog!


### 4. Why we need to learn JavaScript?
**What JavaScript can do?**
1. Front-End development (React.js, Angular.js Vue.js)
2. Back-End development (Express.js, Koa.js, Nust.js)
3. Mobile App development (React Native)
4. Desktop App development (Electron)
### Summary: Learn once write anywhere.

**JavaScript is still most popular programming language**
https://insights.stackoverflow.com/survey/2021?_ga=2.101268358.687021007.1628675795-1764609170.1622104162#most-popular-technologies-language

**You can do everthing by JavaScript**

**It's small but can make huge thing**

**Strong open source commuinty**

**It's cool!**

5. JavaScript 101

1) How to use JS?
https://www.fooish.com/javascript/basics.html
JSFiddle
CodePen
JSBin
2) Basic Syntax:
https://www.fooish.com/javascript/syntax.html
### 5. How to delpoy the website?

https://app.netlify.com

### :snowboarder: Exercise

4. https://vannilla-js-basic-project-1-background-color.netlify.app/

4. https://vanilla-js-basic-project-2-simple-counter.netlify.app/