50 Projects In 50 Days – HTML, CSS & JavaScript
50 天内 50 个项目 – HTML、CSS 和 JavaScript

Sharpen your skills by building 50 quick, unique & fun mini projects
通过构建 50 个快速、独特和有趣的迷你项目来提高你的技能

教程演示🔗

更多前端教程

What you’ll learn 学习内容

  • Project based teaching to sharpen your HTML, CSS & JavaScript skills
    基于项目的教学,以提高您的HTML,CSS和JavaScript技能
  • Perfect for beginners looking for things to build unique projects in a short timeframe
    非常适合寻找在短时间内构建独特项目的东西的初学者
  • Modern styling with flexbox, CSS animations, custom properties, etc
    使用 flexbox、CSS 动画、自定义属性等进行现代样式设计
  • DOM manipulation, events, array methods, HTTP requests & more
    DOM操作、事件、数组方法、HTTP请求等

Requirements 要求

  • A very basic understanding of HTML, CSS & JavaScript
    对HTML,CSS和JavaScript有非常基本的了解

Description 描述

This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HTML, CSS & JavaScript that relate to the DOM (Document Object Model). Here is a list of what we will create in this course:
这是一门纯粹基于项目的课程。它面向初学者,但中级开发人员也可以享受创造新事物的乐趣。本课程包括 50 个与 DOM(文档对象模型)相关的 HTML、CSS 和 JavaScript 迷你项目。以下是我们将在本课程中创建的内容列表:

  1. Expanding Cards 扩展卡

  2. Progress Steps 进度步骤

  3. Rotating Navigation Animation
    旋转导航动画

  4. Hidden Search Widget 隐藏搜索小部件

  5. Blurry Loading 加载模糊

  6. Scroll Animation 滚动动画

  7. Split Landing Page 拆分登陆页面

  8. Form Wave 形成波浪

  9. Sound Board 音板

  10. Dad Jokes 爸爸笑话

  11. Event Keycodes 事件键码

  12. Faq Collapse 常见问题 收起

  13. Random Choice Picker 随机选择器

  14. Animated Navigation 动画导航

  15. Incrementing Counter 递增计数器

  16. Drink Water 喝水

  17. Movie App 电影应用程序

  18. Background Slider 背景滑块

  19. Theme Clock 主题时钟

  20. Button Ripple Effect 按钮涟漪效应

  21. Drag N Drop 拖放

  22. Drawing App 绘图应用程序

  23. Kinetic Loader 动能装载机

  24. Content Placeholder 内容占位符

  25. Sticky Navbar 粘性导航栏

  26. Double Vertical Slider 双垂直滑块

  27. Toast Notification Toast 通知

  28. Github Profiles Github 配置文件

  29. Double Click Heart 双击心脏

  30. Auto Text Effect 自动文本效果

  31. Password Generator 密码生成器

  32. Good Cheap Fast 好便宜快

  33. Notes App Notes 应用程序

  34. Animated Countdown 动画倒计时

  35. Image Carousel 图片轮播

  36. Hoverboard 气垫板

  37. Pokedex 口袋妖怪

  38. Mobile Tab Navigation 移动选项卡导航

  39. Password Strength Background
    密码强度背景

  40. 3d Background Boxes 3d 背景框

  41. Verify Account UI 验证帐户 UI

  42. Live User Filter 实时用户筛选器

  43. Feedback UI Design 反馈UI设计

  44. Custom Range Slider 自定义范围滑块

  45. Netflix Mobile Navigation
    Netflix 移动导航

  46. Quiz App 测验应用程序

  47. Testimonial Box Switcher 感言盒切换器

  48. Random Image Feed 随机图像馈送

  49. Todo List 待办事项清单

  50. Insect Catch Game 捕虫游戏

Many people jump into a frontend framework too early. Learning vanilla JavaScript and understanding how the document object model works are essential before moving to a framework. This course teaches you this by creating real-world projects of all types.
许多人过早地进入前端框架。在迁移到框架之前,学习普通 JavaScript 并了解文档对象模型的工作原理至关重要。本课程通过创建所有类型的真实世界项目来教您这一点。

You will also learn more about HTML5 and CSS including semantic tags in your markup, basic CSS properties such as colors, alignment, flexbox, and shadows as well as creating responsive layouts with CSS media queries, CSS custom properties, animations/transitions, and more.
您还将了解有关 HTML5 和 CSS 的更多信息,包括标记中的语义标签、基本 CSS 属性(如颜色、对齐方式、flexbox 和阴影),以及使用 CSS 媒体查询、CSS 自定义属性、动画/过渡等创建响应式布局。

50 projects may seem like a lot, but we were able to make them small enough to where you can complete a project in just a few hours. Of course, this depends on your skill level.
50 个项目可能看起来很多,但我们能够将它们缩小到足以在短短几个小时内完成一个项目。当然,这取决于您的技能水平。

Who this course is for:
本课程适用于谁:

  • Beginner and intermediate web developers that want to build fun, unique projects with HTML, CSS & JavaScript
    想要使用 HTML、CSS 和 JavaScript 构建有趣、独特项目的初级和中级 Web 开发人员

更多前端教程

Embark on a unique journey of front-end development with our ’50 Projects in 50 Days’ course, designed to boost your skills in the dynamic world of HTML, CSS, and JavaScript. This course offers a perfect blend of creative coding challenges and interactive web projects, allowing both beginners and intermediate developers to enhance their abilities in modern web applications. You’ll dive into responsive web design, JavaScript DOM manipulation, and build an impressive portfolio through a series of small projects, each crafted to sharpen your proficiency in frontend technologies. Whether you’re looking to improve your expertise or build a diverse project portfolio, this course is your gateway to mastering the art of dynamic user interfaces and becoming a skilled web developer.

启程踏入前端开发的独特旅程,通过我们的‘50天内50个项目’课程,旨在提升您在 HTML、CSS 和 JavaScript 这个活跃世界中的技能。本课程提供了创意编码挑战和交互式网络项目的完美结合,让初学者和中级开发人员都能在现代网络应用程序中增强他们的能力。您将深入响应式网页设计和 JavaScript DOM 操作,并通过一系列小型项目来构建一个令人印象深刻的作品集,每个项目都旨在提升您在前端技术方面的熟练程度。无论您是想提高专业知识还是构建多样化的项目组合,这门课程都是您掌握动态用户界面艺术和成为熟练网络开发者的通道。

 

发表回复

后才能评论

尊敬的用户,您好!由于部分培训机构和留学生的举报,近期导致网站大量链接暂时失效。对此给您带来的不便,我们深表歉意。任何链接失效的资源,欢迎您添加侧边栏二维码随时反馈,我们将在48小时内为您提供新的网盘链接。如果您对此不便感到不满,您也可在48小时内申请无理由退款。感谢您的理解与支持!

Windows播放器推荐:Potplayer Potplayer 是免费的 Windows 播放器,支持双字幕和自动翻译功能。以下是操作指南: 挂载字幕 加载中文字幕:右击选择 字幕 -> 字幕设置,取消“只匹配文件名字幕”选项。可调整字幕颜色、位置和大小。 双字幕设置:右击 字幕 -> 选择字幕 -> 次字幕输出,设置主字幕和次字幕。 自动翻译 若可访问 Google 翻译服务,选择 字幕 -> 实时字幕翻译,勾选 总是使用 和 Google Translate,即可实时翻译英文字幕。 Potplayer 让观看更智能,学习体验升级。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可联络站长解决。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源