× 首页 Web全栈开发 数据分析师DA 商业实习 学员案例 关于我们
长按扫码报名
+1 647-41-7219

扫码报名

chloezhang
05/27/20 18:29

JavaScript是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。 作为一门是Web 的编程语言,所有现代的 HTML 页面都在使用JS,它十分容易上手。 JS虽然简单,但是不可否定的是,它是前端的基石,毫不夸张地说,一定程度上,对JS理解的深度决定了你未来发展的长度,因此一定要认真学习。

随着互联网技术的发展,越来越多的朋友开始在网上学习JS。之前的文章中有提到,学习编程,最重要的就是做项目。前端的学习十分有意思,那么有什么有趣的前端项目可以拿来练手呢?

  1. Costco官网

在最初开始学习的时候,我们可以选择一些网站作为参考点。因为在IT公司中,一个项目的运作方式是先拿到设计师的图纸,然后开始进行部署的。我们一开始没有这样的资源,因此不如从模仿开始。我们可以仿照Costco购物网站来熟悉div和css布局。另外站点比较偏向目前的卡片式设计,实现常见效果。并且Costco的Banner还可以帮助我们理解计时器,同步和异步等常见问题。

项目技术:

HTML+CSS+Div布局

2. 迅雷官网

迅雷的官网设计可谓是十分漂亮。因此,该网站可以被着重用来练习CSS3的新特性,比如说过渡与动画的实现。网页设计简洁美观,是不可多得的好的练习项目。

项目技术:

HTML5+CSS3新特性

3. 天气预报组件

天气预报组件的项目可以帮助我们使用React构建一款漂亮的天气应用程序。这个项目可以锻炼我们从设计到开发的全部流程。以及使用实时更新的API来提升React的技能。这个项目不仅使用了React组件,很多hooks以及外部的API,和CSS样式的使用。

项目技术:

React+API+axios+CSS

4. Spotify网页音乐播放器



Spotify是北美很流行的一款音乐软件。项目主要实现音乐首页展示,今日推荐类别,歌曲列表,歌曲播放及歌手列表和搜索功能。这个项目可以作为前端框架的练习,学习React基础引用和组件的设计。我们可以使用框架,利用这个网站学习项目如何构架和测试。这个项目可以让小白快速熟悉React等框架的使用,对组件之间的传值有一个更好的认识。

项目技术:

React+Router+ES6Router

5. 网页评论框

网页评论框项目可以锻炼我们对Bootstrap或者其他布局工具的使用。Bootstrap预先定义了很多CSS类,使用的时候直接给class赋予对应的类名即可,如text-left,text-align,.table等。最有代表性的就是btn类,Bootstrap定义了一个.bt的基础类,如果还想要其他样式可以在这个基础类上进行扩展,实现不同的视觉效果。Boootstrap的使用非常简单,最大的优势是响应式布局,用好Bootstrap可以让我们事半功倍。同时,该项目还可以锻炼我们使用faker的能力,因为有时候我们需要内容进行填充来看效果,那么faker是一个不错的选择。最后就是用户输入评论,提交,向服务器发送请求,最后页面渲染用户评论内容,也可以锻炼实时渲染内容的能力。

项目技术:

React+Bootstrap+faker npm

如果这些你觉得还不够,那么不要犹豫,立刻联系我们! Mark2Win作为北美本地最专业全栈工程师培训机构,拥有最成体系化的培训结构。每节课配合上课内容进行项目开发作业布置练习,精简版企业级项目,帮助你在最短的时间获得最大的提升。

再苦再累,有mark2Win在你身边。我们是你IT路上最强大的后盾。

你可能感兴趣的Posts