【准备工作】

选择一款顺手的 IDE +配置好 本地开发环境+代码版本控制

IDE：VSCode 

开发环境：VSCode 中安装插件  Live Server ，作为本地服务器 

版本控制：① 版本管理软件 Git ② 在线托管平台 Github

【动手思考】

1.网页设计

html 基本知识

参考：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

css 知识

盒子模型

参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

css3 边框特性

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

2.移动端适配

html 移动端知识

https://developer.mozilla.org/zh-CN/docs/Mobile/Viewport_meta_tag

css 弹性盒子布局

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

3.版本控制

谷歌：Git+Github+VSCode

【代码调试】

调试方法：设置家中路由器，映射本机 IP 及 Live Server 端口号（PC端访问：chrome 浏览器 输入本地 IP + Live Server 端口号 + 项目目录 / 移动端访问：手机浏览器访问电脑 IP + Live Server 端口号 + 项目目录）

1.调试知识

谷歌：chrome 浏览器中如何审查代码

谷歌：路由器中，如何绑定静态IP，如何设置端口映射

【项目发布】

谷歌：Github 静态项目展示