联系我们

课程大纲

结构与样式(HTML & CSS)

介绍与Web技术

  • Web工作原理:简要解释客户端-服务器模型
  • 浏览器作为计算机:代码解释
  • HTML:Web的骨架。结构、层次和语义标签
  • CSS:Web的样式。颜色、字体和盒模型
  • 实验1:设置容器环境并构建一个静态的“关于我”个人页面

深入学习HTML与CSS

  • HTML:列表、链接、图片和表单(用户交互必备)
  • CSS:文本和背景样式。Flexbox和Grid布局的入门
  • 响应式设计:使网站在移动设备和桌面上都能正常显示
  • 实验2:通过专业样式和移动响应性优化静态页面

与DOM(文档对象模型)合作

  • 概念:理解代码如何与视觉页面关联
  • 选择元素:如何定位网页的特定部分
  • 操作:通过代码更改内容和属性
  • 实验3:通过代码修改静态页面元素(例如,动态更改标题或图片)

大脑(JavaScript)

JavaScript编程基础

  • 变量与数据类型:存储信息(文本、数字、真/假)
  • 逻辑:If/else语句(决策)
  • 循环:高效重复动作
  • 函数:创建可重用的代码块(“食谱”概念)
  • 实验4:使用JavaScript创建一个基本计算器或逻辑游戏

交互性与事件

  • 事件监听器:响应点击、按键和页面加载
  • 表单处理:验证用户输入(例如,检查电子邮件是否有效)
  • DOM操作:动态添加和删除元素(例如,待办事项列表)
  • 实验5:将计算器转换为具有UI反馈的交互式Web应用

获取数据(API)

  • 概念:Web应用如何与其他服务器通信(例如,获取天气数据或股票价格)
  • JSON:数据交换的语言
  • 异步编程:理解“等待,然后执行”逻辑而不冻结浏览器
  • 实验6:构建一个功能,从公共API获取实时数据并显示在页面上

专业工具包(框架与毕业项目)

使用编程框架

  • 为什么使用框架?(React、Vue或Svelte概念)
  • 组件:构建模块化、可重用的UI部分
  • 状态管理:跟踪变化的数据
  • 生态系统:理解包、依赖和版本控制(Git)
  • 实验7:使用基于组件的方法重构一个简单功能

毕业项目:构建Web应用

  • 要求:参与者必须构建一个功能性的Web应用(例如,预算跟踪器、产品仪表板或作品集网站)
  • 规划:定义“用户故事”和技术范围
  • 实现:结合HTML/CSS结构与JavaScript逻辑
  • 调试:如何阅读错误信息并修复逻辑错误
  • 演示:向小组展示最终应用

结束语与下一步

  • 技术词汇:与工程师沟通的备忘单(API、后端、前端、Git、部署)
  • 资源指南:学习更多内容的地方(文档、StackOverflow、MDN)
  • 职业整合:这些技能如何在产品管理和设计角色中发挥作用
  • 问答与课程评估

要求

  • 基本的计算机使用技能
  • 无需编程经验
 21 小时

客户评论 (3)

即将举行的公开课程

课程分类