{"id":31897384,"url":"https://github.com/dogxii/zero-frontend","last_synced_at":"2026-02-09T09:01:47.078Z","repository":{"id":303821374,"uuid":"1016807346","full_name":"dogxii/zero-frontend","owner":"dogxii","description":"从🥚到1学习前端 教程实践路线图 :) 前端初学者教程，HTML CSS JavaScript Nodejs React TypeScript","archived":false,"fork":false,"pushed_at":"2025-12-04T12:14:37.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-07T20:09:38.799Z","etag":null,"topics":["css","frontend","html","javascript","react","tutorial"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dogxii.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-09T14:53:33.000Z","updated_at":"2025-12-04T12:14:41.000Z","dependencies_parsed_at":"2025-09-05T17:06:04.098Z","dependency_job_id":"23a53332-4aa9-4f1c-a81a-57db49fc2eeb","html_url":"https://github.com/dogxii/zero-frontend","commit_stats":null,"previous_names":["dogyyds/summer-frontend","dogxii/summer-frontend","dogxii/zero-frontend"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dogxii/zero-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogxii%2Fzero-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogxii%2Fzero-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogxii%2Fzero-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogxii%2Fzero-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dogxii","download_url":"https://codeload.github.com/dogxii/zero-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dogxii%2Fzero-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29260426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T04:11:57.159Z","status":"ssl_error","status_checked_at":"2026-02-09T04:11:56.117Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","frontend","html","javascript","react","tutorial"],"created_at":"2025-10-13T11:27:13.686Z","updated_at":"2026-02-09T09:01:47.068Z","avatar_url":"https://github.com/dogxii.png","language":null,"readme":"# zero-frontend\n\n\u003e 因为我都要看一遍，所以正在更新中...\n\n从 🥚 到 1 学习前端，推荐我觉得不错的教程(+实践)学习路线，从上往下 :D\n\n\u003e [!NOTE]\n\u003e 学一点做一点，先做堆垃圾出来！\n\n\u003e 文字教程偏多，可能会有些乏味，可视学习效率切换视频教程学习。\n\n---\n\n### 🌐 HTML（网页结构）\n\n-\u003e [HTML - 学习 Web 开发 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Structuring_content)\n\nHTML 语言的全貌和基本的工作原理 -\u003e 学习 HTML 头部 -\u003e 语义 HTML -\u003e HTML 基本语义元素（标题 强调 列表…） -\u003e 文档与网站架构 -\u003e 不常见 HTML 文本语义标签 -\u003e 超链接 `\u003ca\u003e` -\u003e HTML 图片 (略 Canvas, SVG, WebGL) -\u003e HTML 视频音频 -\u003e HTML 表格 -\u003e HTML 表单和按钮 -\u003e HTML 调试 -\u003e over\n\n- **W3C 验证规范服务**:\n  - [Nu HTML Checker](https://validator.w3.org/nu/)\n\n---\n\n### 🎨 CSS（网页样式）\n\n-\u003e [CSS 基础 - 学习 Web 开发 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics)\n\nCSS 基础及如何运行 -\u003e CSS 添加样式的方法 -\u003e CSS 选择器 -\u003e 属性选择器 -\u003e 伪类和伪元素 -\u003e 关系选择器 -\u003e 盒模型 -\u003e 层叠、优先级与继承 -\u003e 值和单位 -\u003e 在 CSS 中调整大小 -\u003e 内容溢出 -\u003e 图像、媒体和表单元素 -\u003e 样式化表格 -\u003e 调试 CSS -\u003e Chrome DevTools -\u003e CSS 文本样式 -\u003e CSS 排版（浮动、定位、弹性盒子、网格、响应式设计、媒体查询）-\u003e over\n\n- **标准化CSS**:\n  - [normalize.css](https://necolas.github.io/normalize.css/)\n  - [modern-normalize.css](https://github.com/sindresorhus/modern-normalize)\n\n- **Chrome 开发者工具**:\n  - [Element Panel | Chrome DevTools](https://developer.chrome.google.cn/docs/devtools/elements?hl=zh-cn)\n\n---\n\n### 🏗 HTML + CSS\n\n让我们做一些挑战，fork 它并开始吧 🚀:\n\n-\u003e [30daysCSS | CSS 项目挑战](https://github.com/dogxii/30daysCSS)\n\n---\n\n### 💻 JavaScript（脚本语言）\n\n-\u003e [JavaScript 脚本交互 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting)\n\nJavaScript 了解 -\u003e 变量 -\u003e 数字与运算符 -\u003e 字符串 -\u003e 字符串方法 -\u003e 数组 -\u003e 条件语句 -\u003e 循环语句 -\u003e 函数 -\u003e 事件 -\u003e 事件冒泡 -\u003e 对象基础 -\u003e DOM 脚本简介 -\u003e 服务器获取数据(fetch) -\u003e 使用 JSON -\u003e 处理常见 JavaScript 问题 -\u003e over\n\n\u003e 与 HTML 和 CSS 相比，JavaScript 作为一门完整的编程语言，其学习路线更为复杂和多样化，所以难以用简单的步骤概括。\n\n- Other:\n  - [阮一峰 JavaScript 教程](https://wangdoc.com/javascript/) (推荐)\n  - [ECMAScript 6 教程](https://wangdoc.com/es6)\n\n---\n\n### 🧩 Mini Webs (HTML + CSS + JS)\n\n继续我们的挑战！🚀:\n\n-\u003e [20miniWebs | JS 项目挑战](https://github.com/dogxii/miniWebs)\n\n---\n\n### TypeScript （JavaScript 超集）\n\n-\u003e [TypeScript 官方教程](https://www.typescriptlang.org/zh/docs/handbook/typescript-from-scratch.html)\n\nGet Started -\u003e The Basics -\u003e Everyday Types -\u003e Narrowing -\u003e More on Functions -\u003e Object Types -\u003e Type Manipulation -\u003e Class -\u003e\n\n- Other:\n  - [阮一峰 TypeScript 教程](https://wangdoc.com/typescript/)\n\n---\n\n### ⚛ React (Web 框架)\n\n\u003e React 严格来说是一个渲染用户组件的库\n\n-\u003e [JavaScript 框架和库 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Frameworks_libraries)\n\n客户端框架介绍 -\u003e 框架主要特性 -\u003e React 事件和状态 -\u003e React 交互性 -\u003e React 可访问性 -\u003e React 资源\n\n-\u003e [React.dev | 官方文档](https://zh-hans.react.dev/learn)\n\n快速入门 -\u003e 井字棋游戏 -\u003e React 哲学 -\u003e React 安装及配置 -\u003e React 编译器 -\u003e 描述 UI -\u003e 摸鱼一天~\n\n因为还在鸽上面的 miniwebs 所以没有日更了 qwq\n\n---\n\n## 额外学习\n\n### Sass (CSS 预处理器)\n\n### Tailwindcss (CSS 框架)\n\n### Vitest (自动化测试)\n\n### Nextjs (Meta 框架)\n\n---\n\n## 其他资源\n\n- [初学者的 Web 开发课程 | Microsoft](https://microsoft.github.io/Web-Dev-For-Beginners/#/./translations/zh/README)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdogxii%2Fzero-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdogxii%2Fzero-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdogxii%2Fzero-frontend/lists"}