学了半年前端，基本的html+css+js都会了，有没有什么好的项目可以当案例做的。

html-css014

学了半年前端，基本的html+css+js都会了，有没有什么好的项目可以当案例做的。,第1张

前端涵盖技术范围之广，不仅只是html+css+js。下面推荐几个前端实战项目：1.京东登陆注册案列（HTML+CSS）,登陆页面指的是需要提供账号密码验证的界面。

2.个人博客项目（HTML5+CSS）,个人博客是涉及前端领域的第一个项目，运用前端基础知识，培养项目思维。

3.企业网站，强化对HTML+CSS+PS(切图)、各种布局等初期所学全部知识的综合应用，培养遇到问题时的分析与调试能力。

4.H5音乐播放器、H5小游戏（HTML+CSS+JAVASCRIPT），通过游戏应用开发，强化JAVASCRIPT基础、DOM操作和事件机制在实际场景中的运用。

5.楼层跳动、轮播、表单验证（HTML5+CSS3+jQuery）,掌握jQuery插件的运用。

电商购物网站（HTML5+CSS3+jQuery+EasyUI），掌握动画开发能力，及常见插件的使用

所有的网页项目都是纯 html+css+js，网上遍地都是，里面的库也都是由 html+css+js 写的。

但如果你是指不用任何第三方库的那种‘纯’的话，简单项目是很多的，而复杂项目基本是没有的。

不用任何库写前端复杂项目，这对应到 java 上就是指不用第三方库来做，也就是不用 jsp ，直接用原生手写功能，自己解析 html 页面，自己解析 IP 地址，自己读取数据库而不通过库，自己要实现一个静态资源服务器而不是通过那些框架，自己用正则之类的方法怼一个模板引擎出来等等。当然其实前端会比后端相对简单一点点。

这样，一个不用第三方库和框架实现一个复杂、业务齐全的前端页面有多难，大概就能对比出来了。

如果能做出不用任何第三方库的“复杂网页项目”的话，那就很强了，你对语言本质的理解和对数据结构跟设计模式的理解可能还要在你的老师之上，这类似于能够实现一个框架的难度。

所以符合这样标准的复杂网页，未经过前端学习的人，其实是看不懂的。

写写接口可不是什么挑战，去尝试看懂框架的代码，去做个小框架吧！

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。

Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架—-Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站，本文结尾有他们的简介，最近想换工作的朋友可以看一下。

一、简介

Bulma 框架最大的特点，就是简单好用。所有样式都基于class，只需为 HTML 元素指定class，样式立刻生效。

JavaScript

1

<a class="button is-primary is-large">Login</a>

上面代码中，a 元素只需加上几个class，就会出现一个主色调（is-primary）的大（is-large）按钮。

Bulma 是一个手机优先的框架，提供五个宽度断点，具有良好的自适应特性，可以随心所欲为不同设备设置不同样式。

mobile：小于等于768px

tablet：大于等于769px

desktop：大于等于1024px

widescreen：大于等于1216px

fullhd：大于等于1408px

它提供二十多种常用组件，比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站，可以不用写任何 CSS 代码。

二、基本用法

Bulma 的安装只需一步，把样式表插入网页即可。

JavaScript

1

   

<link rel="stylesheet" href="css/bulma.min.css"/>

   

使用更简单，就是为 HTML 元素加上class。

JavaScript

1

   

<a class="button">Button</a>

   

上面的代码为 a 元素加上button类，这个链接就会被渲染成按钮。

Bulma 提供大量的修饰类，用来改变基类的样式。它们都是以is-或has-开头。比如，要改变 Button 的大小，就可以使用下面的修饰类。

JavaScript

1

2

3

4

   

a class="button is-small">Small</a>

<a class="button">Normal</a>

<a class="button is-medium">Medium</a>

<a class="button is-large">Large</a>