~P1

• 课程总览—学习HTML、CSS，搭建静态网站

~P2

1.The process of browsing a website

1. Browser ————Request——> Web Server (https://xxxx.com)

2. (收到HTML、CSS、JS等文件)Browser <———Response——— Web Server

3. Browser显示出画面

2.Front-End VS. Back-End Development

• Front-End（前端开发）：HTML、CSS、JS

• Back-End（后端开发）：Node JS、PHP、Python etc…

3.The Relationship between HTML CSS and JS

~P3

• 安装Visual Studio Code扩展
• Prettier - Code formatter
• Settings搜索default format第一项(Editor: Default Formatter)更改为Prettier - Code formatter
• 作用：保存时自动格式化代码，方便找到并修复错误
 

• 调整Visual Studio Code设置
• Settings搜索format on save 第一项(Editor: Format On Save) 勾选上
• Settings搜索auto save 第一项(Files: Auto Save)更改为 onFocusChange
• Settings搜索tab size 第一项(Files: Tab Size)更改为 2
• (个性化设置颜色主题)安装One Monokai扩展
• (个性化设置颜色主题)点击右下角齿轮图标 — Color Theme — 选择自己喜欢的主题(Seti)

• OK！做好写代码的准备工作了！

~P4

• 创建一个New Folder!
• 之后在VS Code中点击Open Folder打开你准备好的文件夹。

• 创建一个New File!
• 方式一：在Welcome页面点击New File，命名为index.html
• 方式二：在左上方点击New File的icon，命名为index.html

• 添加一些代码来测试一下。

• 保存！

• 打开项目文件夹，使用Chrome打开index.html

• 我可以把VS Code和Chrome水平分屏，这样在修改html时，在Chrome中可以实时预览。

～P5

• Jonas Schmedtmann的Github地址：

• 你可以对照Jonas Schmedtmann的代码，你可以下载这些代码。下面包含一些常见问题。

~P6

• 观看此课程的提示：
• You need to code along with him.
• If you want the course material to stick, take notes.
• Try all the coding challenges.
• 理解复习以前的内容
• If you have an error or a question, start by trying to solve it yourself!
• Most importantly, have fun!