# HOUCLOUD.COM > 黄同学的个人站。前端与移动端实战课程、可以直接 clone 的源码仓库、可交互的产品原型。 > 课程按真实项目写成，源码随课开放；免费课也有，订阅即可解锁全部章节。 站点：https://houcloud.com 作者：黄同学，产品设计师 / 独立开发工程师，现居广州。 联系：hi@houcloud.com ## 课程 - [前端静态网站HTML+CSS+JS入门](https://houcloud.com/course/html-css-js)：Bilibili 视频随课文档《HTML 静态入门案例》： 源码在课程的源码仓库里（右侧「课程源码」），可以直接克隆或下载 ZIP。两个阶段分开放：01-html-basics/ 是 HTML + CSS 阶段…（免费） - [一个开工红包让您学会如何封装Vue3组件](https://houcloud.com/course/vue3-component)：用一个开工红包，把 Vue3 组件封装的六件事走一遍： 1. 定义组件界面 2. 定义组件传入参数（props） 3. 定义组件内部方法 4. 定义组件 Emit 响应事件 5. 定义 slot 插槽 6. 定义组件暴露…（¥2.98） - [如何定义一个React组件](https://houcloud.com/course/react-component)：用 React + Next.js + Tailwind CSS 写一个红包组件：界面怎么拆、props 怎么传、回调怎么接、动画状态放在哪，把「一个组件该怎么定义」按顺序走一遍。 源码在课程的源码仓库里…（免费） - [Skyline 跑步打卡小程序](https://houcloud.com/course/skyline-running)：微信原生小程序 + Skyline 渲染引擎，配一套 Spring Boot 后端。完整源码含后端、小程序、数据库脚本，可直接跑起来…（¥28） - [C语言基础经典题库](https://houcloud.com/course/c-exam-bank)：这里包含了60道经典考试题，可作为面试笔试或机器试题，提醒包含填空题、改错题和程序设计题。（免费） - [PaddleOCR实践视频配套文档分享](https://houcloud.com/course/paddleocr-notes)：Bilibili PaddleOCR 随课文档（免费） ## 源码仓库 - [HTML + CSS + JS 入门 · 随课源码](https://houcloud.com/code/html-css-js-code)：从空文件写到静态网站的完整源码：HTML/CSS 阶段（导航、Banner、卡片、布局）+ JS 阶段（弹窗、加法计算器、轮播图）。 - [如何定义一个 React 组件 · 源码](https://houcloud.com/code/react-component-code)：Next.js 14 + React 18 + Tailwind CSS 实现的红包组件：组件拆分、props、事件、受控动画。 - [Vue3 红包组件 · 源码](https://houcloud.com/code/vue3-component-code)：Vite + Vue3 + TypeScript 红包组件：defineProps / emit / slot / defineExpose 全流程。 - [跑步打卡 · 小程序 + 后端](https://houcloud.com/code/skyline-running)：微信原生小程序 + Spring Boot 3 后端，单仓 - [运动健康 App 源码](https://houcloud.com/code/sports-app-code)： ## 产品原型 - [可拖拽进度圆环](https://houcloud.com/design/progress-ring)：用指针事件做的圆环拖拽：跟手、带弹性回弹，后面挂一排 scroll-snap 指标卡。深色底 + 荧光绿，适合运动、习惯类的首页。（¥1） ## 关于 - [关于我](https://houcloud.com/about)：经历、技能与联系方式 - [作品登记](https://houcloud.com/case)：学员用课程内容做上线的东西 - [站长笔记](https://houcloud.com/note)：技术笔记与项目复盘 ## 其他 - [简历](https://houcloud.com/resume) - [订阅协议](https://houcloud.com/subscription) - [隐私政策](https://houcloud.com/privacy)