阅读 1366

50 天学习 50 个项目 - HTML/CSS and JavaScript

👍 👍 👍 项目源代码，点击【Github 原文链接】

所有项目如下所示：

#项目在线演示
01Expanding CardsLive Demo
02Progress StepsLive Demo
03Rotating Navigation AnimationLive Demo
04Hidden Search WidgetLive Demo
05Blurry LoadingLive Demo
06Scroll AnimationLive Demo
07Split Landing PageLive Demo
08Form WaveLive Demo
09Sound BoardLive Demo
10Dad JokesLive Demo
11Event KeycodesLive Demo
12Faq CollapseLive Demo
13Random Choice PickerLive Demo
14Animated NavigationLive Demo
15Incrementing CounterLive Demo
16Drink WaterLive Demo
17Movie AppLive Demo
18Background SliderLive Demo
19Theme ClockLive Demo
20Button Ripple EffectLive Demo
21Drag N DropLive Demo
22Drawing AppLive Demo
23Kinetic LoaderLive Demo
24Content PlaceholderLive Demo
25Sticky NavbarLive Demo
26Double Vertical SliderLive Demo
27Toast NotificationLive Demo
28Github ProfilesLive Demo
29Double Click HeartLive Demo
30Auto Text EffectLive Demo
31Password GeneratorLive Demo
32Good Cheap FastLive Demo
33Notes AppLive Demo
34Animated CountdownLive Demo
35Image CarouselLive Demo
36HoverboardLive Demo
37PokedexLive Demo
38Mobile Tab NavigationLive Demo
39Password Strength BackgroundLive Demo
403d Background BoxesLive Demo
41Verify Account UiLive Demo
42Live User FilterLive Demo
43Feedback Ui DesignLive Demo
44Custom Range SliderLive Demo
45Netflix Mobile NavigationLive Demo
46Quiz AppLive Demo
47Testimonial Box SwitcherLive Demo
48Random Image FeedLive Demo
49Todo ListLive Demo
50Insect Catch GameLive Demo
文章分类
前端
文章标签
前端
JavaScript
CSS
相关推荐
  • 程序员鱼皮
    4月前
    前端
    完了，又火一个前端项目
    大家好，我是鱼皮。 今天逛 GitHub 的时候，在趋势榜上看到一个项目，竟然短短一天的时间内，涨了 1000 多个星星！ 就是这个名为 solid 的项目： 要知道日增上千 star 可是非常难得的
    • 7.6w
    • 141
  • 天明夜尽
    11月前
    GitHub JavaScript
    推荐 12 个学习前端必备的神仙级工具类项目与网站
    猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。 已经推荐了 面试项目、css 奇技淫巧项目、代码规范项目、数据结构与算法项目、JavaScript 奇技淫巧项目、前端必备在线工具 等专题的近 100 个优秀项目了。 以…
    • 2.3w
    • 25
    推荐 12 个学习前端必备的神仙级工具类项目与网站
  • alphardex
    1年前
    CSS
    请收下这72个炫酷的CSS技巧
    CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非…
    • 4.1w
    • 76
    请收下这72个炫酷的CSS技巧
  • 掘金安东尼
    15天前
    前端 JavaScript CSS
    把收藏力拉满，前端 50 个优质 Web 在线资源~
    感谢缤纷多彩的 Web 世界！一个链接，就是打开一个新世界大门的钥匙！本篇带来 50 把钥匙，请把收藏力拉满~~
    • 2.0w
    • 25
    把收藏力拉满，前端 50 个优质 Web 在线资源~
  • Jimmy
    1年前
    CSS 前端
    CSS八种让人眼前一亮的HOVER效果
    巧用伪元素:before、:after等，让你的页面按钮眼前一亮。更多内容：https://github.com/reng99/blogs
    • 3.3w
    • 90
  • 天明夜尽
    1年前
    CSS GitHub
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
    一般人没事的时候刷刷朋友圈、微博、电视剧、知乎，而有些人是没事的时候刷刷 GitHub ，看看最近有哪些流行的项目。 久而久之，这差距就越来越大，因此总会有开源信息的不对称，有哪些优秀的前端开源项目值得学习的也不知道。 初步前端与高级前端之间，最大的差距可能就是信息差造成的。 …
    • 3.7w
    • 37
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
  • hanmin
    3年前
    JavaScript 前端 HTML
    别找了，这就是你想要的年会抽奖开源项目
    项目是在2016年年底给公司做的年会抽奖项目，自豪的采用jquery和原生js开发，利用非工作时间于一个月左右独立开发而成，想当年，那时我还没在项目中使用MVVM框架开发，而是稳妥的采用了我的jQuery老朋友，最后在公司年会上因为我们技术部抽的奖比较多而被群众纷纷质疑(虽然项…
    • 1.4w
    • 59
  • 刘小爱
    1年前
    Java
    学了14天，终于把Java项目一做完啦
    今天是刘小爱自学Java的第113天。 感谢你的观看，谢谢你。 今天过后项目一也就算是结束了。 明天开始学SSM框架，再用SSM框架优化这个小项目作为练习。 先对昨天收藏业务代码的纠错，自己犯的一些错误点小结。 然后学下事务在项目中的使用。 最后说点闲话。 有的因为自己没有理解…
    • 147
    • 评论
    学了14天，终于把Java项目一做完啦
  • 前端小智
    2年前
    JavaScript ECMAScript 6
    我从来不理解JavaScript闭包，直到有人这样向我解释它
    大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 正如标题所述，JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章，在工作使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。 最近看到的一些文章，终于，有人用于一种让我明白方式对…
    • 5.9w
    • 157
  • 人人网FED
    3年前
    CSS JavaScript 前端
    怎么实现一个3d翻书效果
    这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…
    • 2.5w
    • 49
    怎么实现一个3d翻书效果
  • 关关_关关
    6年前
    程序员
    有了这个列表，程序员不愁没练手的小项目了
    小项目
    • 3099
    • 2
    有了这个列表，程序员不愁没练手的小项目了
  • Gopal
    1年前
    CSS
    最强大的 CSS 布局 —— Grid 布局
    Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 讲到布局，…
    • 4.6w
    • 93
  • PHANTOMLI
    1年前
    前端
    50小时就能掌握任何WEB开发框架
    一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架 ORM中的hasone,manytomany,onetomany关系,概念很复杂，其实只是多写/少写一个查询字段的关系，学习成本太高，初学者完全不需要理会，直接跳过。
    • 179
    • 评论
  • 王仕军
    3年前
    React.js JavaScript Vue.js
    2017 年崛起的 JS 项目
    和 2016年 一样，又到了我们回顾 2017年 Javascript 领域发展与变化的时候。 通过对比各项目过去 12 个月在 GitHub 上新增 star 数量，来评估其在 2017 年度的受关注程度，进而选出 2017 年度 JavaScript 领域崛起的明星项目。 …
    • 2.8w
    • 76
    2017 年崛起的 JS 项目
  • 李不远
    3年前
    CSS JavaScript 前端
    实战项目之自动简历
    一个可以自动播放书写过程简历，主要运用原生JS和CSS3的知识点。 既要开始，也要结束。想办法取消闹钟 运行一下。黑人问号脸——我的换行没啦？？？ 但是在CSS中这样的语法是不允许的。 我们需要让代码默认是平平无奇的样子，然后再增加高亮效果。这样活增加视觉的观赏性。 我们需要在…
    • 8707
    • 20
    实战项目之自动简历
  • jiangqizheng
    3年前
    React.js Node.js CSS
    2017年前端工作小结，个人踩坑之旅，前端学习者的杂谈
    写多少项目就得写多少css，我曾一度轻视它，认为实现预期效果便是大胜利，滥用各类选择器，命名杂乱无章，为了解决bug，而写入行内式，然后在工作中顺利的发展成为一名css上的残障人士，偶尔面对曾经写过的css，总是无语凝噎，但这种情况在近期得到了控制。 BEM命名法：在初学前端时…
    • 5942
    • 47
  • Alaso
    3月前
    CSS 设计
    巧用CSS filter，让你的网站更加酷炫！
    CSS filter在日常开发中是很常见的，这里我们将使用它实现一些动画效果，让网站交互更加酷炫，同时也加深对CSS filter的理解。
    • 3.0w
    • 245
    巧用CSS filter，让你的网站更加酷炫！
  • 小生方勤
    2年前
    CSS 前端
    【前端词典】提高幸福感的 9 个 CSS 技巧
    在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…
    • 5.2w
    • 122
  • 李振文
    4月前
    CSS JavaScript
    能用CSS实现的就不用麻烦JavaScript
    前言 凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。——Atwood定律 虽然万物都可以是JavaScript，但某种程度css的运行效率会比JavaScrip
    • 5608
    • 36
    能用CSS实现的就不用麻烦JavaScript
  • keephhh
    4年前
    CSS 前端 JavaScript
    关于移动端开发1px边框的一些理解及解决办法
    学习前端方向也有一段时间了，起初做过一些项目，总是发现做完之后自己的边框会变得比较粗，后面翻阅了部分资料慢慢的才了解了这个问题，大致列举了几种解决的办法。 在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的…
    • 7428
    • 15
    关于移动端开发1px边框的一些理解及解决办法
    • 关于作者
    打酱油的~~ @ 闹着玩
    获得点赞2,839
    文章被阅读91,634
    下载手机APP
    一个帮助开发者成长的社区
    相关文章
    50道 CSS 基础面试题（附答案）
    1245
    18
    资源工具分享（第2期）：160个电子书下载网站
    7
    0
    10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
    1366
    37
    JS高级之面试必须知道的几个点
    994
    35
    字节跳动最爱考的前端面试题：JavaScript 基础
    3297
    205