推荐20个适合新手的前台手把手训练项目。 难度是递进的，内容也很有趣，主要是游戏和小玩意。 如果你没有前台的基础，建议从这三门开始:基础阶段:1。HTML5简明教程从网站的基本概念入手，带你了解其运行机制。 然后学习HTML的基础知识，了解各种常用标签的含义和基本用法。 另外，课程会涉及HTML5的内容。 课程地址:shiyanlou.com/courses/42. CSS3简明教程课程从最基本的CSS概念开始，越来越深入，教你如何使用CSS同时控制多个网页的样式和布局。 同时，课程还将涵盖CSS3最新版本的内容，带你掌握新的标准化组件。 地址:https://www.shiyanlou.com/courses/12373. JavaScript基础入门课程从什么是JavaScript开始，一步步讲解JavaScript的基本语法、关键特性、JSON、WebAPI等知识点。 内容会涉及到网页与窗口交互的方法，以及通过DOM对网页元素的相关操作。 地址:https://www.shiyanlou.com/courses/123820, a实习项目:1。纯CSS打造网页版“大白”。本课程利用HTML和CSS打造《大英雄6》中的“暖男”——大白。 通过这个实验，可以学习如何使用HTML结合CSS设计高端大气的图形，了解HTML布局和CSS构建对象样式。 地址:https://www.shiyanlou.com/courses/3282. HTML 5实现2048游戏本课程基于HTML+CSS+JS+jQuery实验网页版2048。可以学习web应用的开发流程，从布局和初始化到编写游戏逻辑，以及如何让应用在手机上自适应，以应对各种尺寸的屏幕。 课程地址:https://www.shiyanlou.com/courses/623. html 5实现拼图游戏。本课程基于HTML5实现网页版的拼图游戏。 在实现过程中会涉及到HTML5，CSS3，JavaScript的相关知识。 这个项目的完成可以进一步强化前台的基础知识。 课程地址:shiyanlou.com/courses/14.网页不要踩白块游戏本课程使用最基础的HTML+CSS+JavaScript实现网页不要踩白块游戏。通过完成这个简单有趣的游戏，你可以练习你的前台技能。 地址:shiyanlou.com/courses/35. HTML实现扫雷游戏本课程带领你在经典游戏中实现扫雷。通过练习JavaScript、CSS等基本的Web开发知识，可以学习如何对游戏中的对象进行泛化和封装。 地址:shiyanlou.com/courses/16. html 5实现刮刮乐游戏。本课程使用HTML5完成“刮刮乐”的刮刮乐效果 HTML5是HTML的第5代版本，也是目前最新的版本。同时，本课程由JavaScript相关技术完成。 这个课程有助于巩固前台的知识。 课程地址:https://www.shiyanlou.com/courses/1337.基于CSS3实现彩票。每到节日，抽奖活动数不胜数，奖品丰厚，但中奖概率总是很小。 我们可以自己制作抽奖转盘，探索抽奖过程的奥秘。 这个项目课将教你如何使用CSS3制作彩票卷轴，还会用到一点HTML和jQuery的基础知识。 课程地址:https://www.shiyanlou.com/courses/828. html 5画布实现放大镜效果。本课程基于HTML5画布实现放大镜效果。 主要依靠canvas中的drawImage()函数，本课也主要讲解该函数的具体用法。希望通过实现这个简单的项目，对canvas有一个初步的了解，学习canvas的基本操作。 课程地址:https://www.shiyanlou.com/courses/599. jQuery实现购物车功能。本课程使用jQuery实现了在购物车中添加和删除商品以及添加商品总价的功能。 学习之后，可以熟练操作jQuery实现更多的功能。 课程地址:shiyanlou.com/courses/610. CSS实现红包模糊效果。微信朋友圈里的红包照片，还有iOS带来的磨砂玻璃菜单效果，都很抢眼。这一次，我们将尝试使用熟悉的CSS3来实现这一效果。 地址:shiyanlou.com/courses/411. html 5 canvas实现的一个小游戏。本课程实现了一个基于HTML5 Canvas的小游戏，重点讲述了HTML5游戏开发流程的细节以及游戏开发中需要解决的事情。 对网页游戏开发感兴趣的同学可以通过这个项目练习HTML5和JavaScript的基础知识。 地址:https://www.shiyanlou.com/courses/36112. jQuery实现瀑布图片效果。该课程基于jQuery实现了近年来非常流行的瀑布图片的自动加载。此外，我们将学习如何模拟后端来提供JSON格式的数据。 这个课程比较简单，适合前台刚入门的同学练手。 课程地址:shiyanlou.com/courses/613. html 5实现局部图片裁剪。本实验的目的是利用HTML5的canvas技术，结合HTML5的文件AP I，实现局部图片裁剪。 通过这个实验，我们将学习如何结合HTML5和JavaScript来编写一个简单的单页应用程序。 这门课一般比较难，适合前台刚入门的同学。他们需要了解cavas，有JavaScript基础。 地址:https://www.shiyanlou.com/courses/36314. JavaScript实现代码压缩成圣诞树。课程主要通过JavaScript实现一个工具包。运行工具包，就可以把你的JS代码压缩成一棵圣诞树，压缩后的代码依然可以正常运行！通过课程，你的JS会更加精通。 课程地址:https://www.shiyanlou.com/courses/132615. jQuery实现图片轮播效果。轮播图片是各大网站常见的图片展示形式。本课程基于HTML+CSS+JavaScript+jQuery实现图片轮播，简单易用的前台入门练习。 课程地址:在Flask实现简单聊天室Web 2.0的时代，shiyanlou.com/courses/816.,即时通讯已经成为必不可少的网站功能。在Web上实现即时通讯的机制有哪些？在这堂专题课上，我们将一个接一个地讨论细节。 最后，我们将基于服务器发送的事件和Flask实现一个简单的在线聊天室。 本课程难度中等，属于python-中等项目课程，需要Flask和Python基础。 你可以在完成一系列简单的项目课程后，尝试突破这门课程的几个难点。 课程地址:https://www.shiyanlou.com/courses/8117. HTML实现markdown编辑器本课程将通过纯前台创建一个实时Markdown编辑器。使用的库或框架主要有marked、Ace、highlight.js和Bootstrap。 通过这个项目的完成，我们将实践web应用程序开发的相关知识。 课程地址:https://www.shiyanlou.com/courses/46018. Node.js实现私人笔记本本实验将教会你使用node . js技术完成一个私人笔记本项目。每个注册客户都可以在自己的私人空间写下自己的感受和感想。 通过Express学习Node.js Web开发的基础知识 这门课一般比较难，属于基础课。适合有Node.js基础的客户学习Node.js Web开发。 课程地址:Node.js实现私人笔记本19。jQuery实现特效导航菜单。我目前是前台开发人员。如果你现在也想学习前台开发技术，如果遇到任何关于学习方法、学习路线、学习效率等方面的问题。在入门的过程中，可以申请加入我的前台学习交流。三千人穿的裙子:前:851中:231后:348。 有少量初学者裙档正在自学前台。还有少量我在做前台技术期间整理的前台学习手册、前台面试问题、前台开发工具、PDF文档、书籍和教程。如果需要，可以自己下载。 在本课程中，我们将完成一个完整的网站导航栏。项目很简单，但是很实用，适合初学者。 项目主要使用CSS和jQuery动画方法。 地址:shiyanlou.com/courses/7.最后，去实践吧！