感谢您发送咨询!我们的团队成员将很快与您联系。
感谢您发送预订!我们的团队成员将很快与您联系。
课程大纲
结构与样式(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)
我非常喜欢学习关于AI攻击的内容,以及那些可以开始实践并积极用于安全测试的工具。我学到了很多之前不了解的知识,课程也达到了我的期望。培训中我最喜欢的部分是Comet Browser,它的功能让我感到惊叹。这绝对是我会进一步研究的内容。总体来说,这是一门很棒的课程,我很享受学习所有OWASP GenAI Top 10的内容。
Patrick Collins - Optum
课程 - OWASP GenAI Security
机器翻译
实践操作、练习、面对面帮助与答疑。
Jose Paulos - INESC TEC
课程 - Tailwind CSS
机器翻译
每个技术课程都配有多个实践练习,以巩固概念。
Andrei-Calin Bajea
课程 - OWASP Top 10 2025
机器翻译