---
# System prepended metadata

title: W1_現代網頁簡介及開發工具安裝.md

---

# W1_現代網頁簡介及開發工具安裝.md


## 開發工具安裝

**Visual Studio Code**
https://code.visualstudio.com/Download

**2. Visual Studio**
https://visualstudio.microsoft.com/zh-hant/vs/community/

點選 `Workloads` ->  `ASP.NET and web development` -> `Install`
![image](https://hackmd.io/_uploads/HkVsXEjHC.png)

**3. NodeJS**
https://nodejs.org/en/

**4. ngrok**
https://ngrok.com/download

需要註冊



## AI 對軟體產業的影響?

- https://www.brucehr.com.tw/post/bhrc-2023h1-chatgpt
- https://www.inside.com.tw/article/30051-nature-ChatGPT-AlphaCode-programmer
- https://www.gvm.com.tw/article/103969


從求職網站檢視職缺需求
- 104
- CakeResume
- Yurator
- Linkedin



## 網站開發裡面有哪些角色?

- Roadmap Overview: https://roadmap.sh/roadmaps
- Roles
    - Frontend Developer(FE)
    - Backend Developer(BE)
    - App Developer(iOS, Android)
    - Database Administrator(DBA)
    - DevOps Enginner
    - QA Engineer
    - Project Manager


## HTML

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello world</title>
  <link rel="icon" type="image/x-icon"
    href="https://th.bing.com/th/id/OIP.bu2Qea4bfAcVPRyUefowAwAAAA?rs=1&pid=ImgDetMain">

</head>

<body>

  Hello world!

</body>

</html>
```


## Static Content Hosting tool - serve

https://www.npmjs.com/package/serve
```
npm install --global serve
```



## Learning Resources

- HTML: https://www.w3schools.com/html/default.asp
- CSS:
    - https://developer.mozilla.org/en-US/docs/Web/CSS/



