🎨 HTML/CSS 初学者项目教程

从零开始学习前端基础 — 每个项目都是完整的 HTML+CSS 代码,可直接运行。适合初学者动手实践。

📚 纯前端 · 零依赖 · 手把手教学
🪪

制作个人简介卡片

Learn how to create a stylish personal profile card with avatar, social links, and gradient backgrounds. Perfect for your portfolio or resume page.

CSS 布局 开始学习
🧭

响应式导航栏

Build a fully responsive navigation bar with hamburger menu, dropdown effects, and smooth transitions. Works on mobile, tablet, and desktop.

响应式设计 开始学习
🔐

登录表单设计

Design a beautiful login form with input validation styles, floating labels, and a modern glassmorphism aesthetic. A must-have for any web app.

表单设计 开始学习
🛍️

产品展示页

Create an attractive product showcase page with pricing cards, feature lists, and call-to-action buttons. Great for landing pages and e-commerce.

页面布局 开始学习

倒计时页面

Make a dynamic countdown timer page with animated number cards, event info, and festive styling. Ideal for launch events and promotions.

CSS 动画 开始学习
🖼️

图片画廊

Build a responsive image gallery with CSS Grid, hover overlay effects, and lightbox-style previews. Perfect for photography portfolios.

CSS Grid 开始学习
🎬

CSS Animations

Master CSS animations with @keyframes, transforms, transitions, and performance tips. Create stunning visual effects without JavaScript.

CSS Animation Start Learning
📐

CSS Custom Properties

Learn CSS variables for theming, maintainable code, and dynamic design. Complete guide with practical examples.

CSS Variables Start Learning

Web Accessibility

Make your websites accessible to everyone. Learn semantic HTML, ARIA, keyboard navigation, and WCAG standards.

A11y Start Learning
📝

HTML Forms Guide

Complete guide to HTML forms — input types, validation, labels, security, and beautiful CSS styling techniques.

HTML Forms Start Learning
🧩

JavaScript DOM

Learn to manipulate the DOM with vanilla JavaScript. Select elements, handle events, create interactive pages.

JavaScript Start Learning
🔗

Git for Beginners

Learn Git version control from scratch. Master commits, branches, merging, and GitHub collaboration workflows.

Git Start Learning

VS Code Tips

Boost your productivity with VS Code shortcuts, extensions, Emmet, multicursor, and built-in Git integration.

Productivity Start Learning
🗺️

Frontend Roadmap

Complete 2025 frontend developer roadmap — from HTML basics to React, portfolio projects, and job preparation.

Career Start Learning