50 Projects In 50 Days – HTML, CSS & JavaScript
50 天内 50 个项目 – HTML、CSS 和 JavaScript
通过构建 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 迷你项目。以下是我们将在本课程中创建的内容列表:
-
Expanding Cards 扩展卡
-
Progress Steps 进度步骤
-
Rotating Navigation Animation
旋转导航动画 -
Hidden Search Widget 隐藏搜索小部件
-
Blurry Loading 加载模糊
-
Scroll Animation 滚动动画
-
Split Landing Page 拆分登陆页面
-
Form Wave 形成波浪
-
Sound Board 音板
-
Dad Jokes 爸爸笑话
-
Event Keycodes 事件键码
-
Faq Collapse 常见问题 收起
-
Random Choice Picker 随机选择器
-
Animated Navigation 动画导航
-
Incrementing Counter 递增计数器
-
Drink Water 喝水
-
Movie App 电影应用程序
-
Background Slider 背景滑块
-
Theme Clock 主题时钟
-
Button Ripple Effect 按钮涟漪效应
-
Drag N Drop 拖放
-
Drawing App 绘图应用程序
-
Kinetic Loader 动能装载机
-
Content Placeholder 内容占位符
-
Sticky Navbar 粘性导航栏
-
Double Vertical Slider 双垂直滑块
-
Toast Notification Toast 通知
-
Github Profiles Github 配置文件
-
Double Click Heart 双击心脏
-
Auto Text Effect 自动文本效果
-
Password Generator 密码生成器
-
Good Cheap Fast 好便宜快
-
Notes App Notes 应用程序
-
Animated Countdown 动画倒计时
-
Image Carousel 图片轮播
-
Hoverboard 气垫板
-
Pokedex 口袋妖怪
-
Mobile Tab Navigation 移动选项卡导航
-
Password Strength Background
密码强度背景 -
3d Background Boxes 3d 背景框
-
Verify Account UI 验证帐户 UI
-
Live User Filter 实时用户筛选器
-
Feedback UI Design 反馈UI设计
-
Custom Range Slider 自定义范围滑块
-
Netflix Mobile Navigation
Netflix 移动导航 -
Quiz App 测验应用程序
-
Testimonial Box Switcher 感言盒切换器
-
Random Image Feed 随机图像馈送
-
Todo List 待办事项清单
-
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 操作,并通过一系列小型项目来构建一个令人印象深刻的作品集,每个项目都旨在提升您在前端技术方面的熟练程度。无论您是想提高专业知识还是构建多样化的项目组合,这门课程都是您掌握动态用户界面艺术和成为熟练网络开发者的通道。