零基础怎么系统学Web前端？

一 零基础小白应该怎么学习前端才能少走弯路？

关于前端这一块的学习，我不主张自学，因为前端的知识体系是很庞大的，如果你自学，遇到一些问题，你自己很难解决，至少需要有专业的前端人士指导你，站在高手的肩膀上，才能看的更高更远，当然很多小伙伴会说，我也知道学习前端有高手指点挺好啊，可是我怎么知道去哪里找高手，高手又为什么愿意指导我呢？

这个问题问的好，其实现在是互联网时代，网上有很多的相关视频和直播课，我平时就经常去上网听一些前端高手讲课。作为想从事前端这个行业的小伙伴，一定要有一个平常心，只要能学到知识，去学就是了，不要磨磨唧唧的的做什么事情，否则什么也做不好。

二 学习前端，你需要具备哪些素质？

（1）如果web的任何一个元素（web界面，灵活的编程风格等）有一点吸引了你，让你着实着迷，恭喜你，有了一个完美的开始。确认一下自己是否喜欢和合适前端，而不是为了一份看起来体面而且薪水不菲的工作。

（2）不断学习，每日的积累，关注前端动态，是你跟上前端潮流的主要途径。前端的体系过于庞大，技术框架争涌而出，如果你经常抱怨累死码农的节奏，那就审视一下自己对前端的态度。

（3）主抓基础，避免盲目。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段，到头来框架们都一个一个被淘汰，你仍在原地踏步。

（4）整理总结，先模仿后创造。将每日的积累做好规整，记录到博客也好，笔记也好。多看看牛人的源代码，等你达到了一定的层次水准，自然会得心应手。

（5）持有一颗造福前端社区的心。写一些有意思的小工具、插件，推广出去， 始终坚信，在从事前端的道路上You are not alone。

（6）要有专业人士的指导，尤其是学习前端找工作的，不要妄想自己一个人自学前端能找到工作，现在非常难，如果没有一个明白人帮你解决一下问题，会有非常多的弯路，中间很容易放弃，学习的不专业不说，最重要是浪费时间。

（7）一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

三 web前端开发需要学习什么?

第1阶段：前端页面重构(4周)

内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段：JavaScript高级程序设计(5周)

内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段：PC端全栈项目开发(3周)

内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段：移动端项目开发(6周)

内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段：混合(Hybrid,ReactNative)开发(1周)

内容包含：(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段：NodeJS全栈开发(1周)

内容包括：(WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库)

以上学习内容相关配套的视频教程请移至B站尚学堂官方，更多好看教程等你来看！

分析如下：

1、首先下载安装Dreamweaver，打开后，新建一个网页，一般选择“HTML”建立网页。选择“经典”界面，有助于我们更便捷使用这个软件。

2、下面选择这三个界面，代码、拆分、设计，一般默认设计界面，对于新手这个功能具有可视化，能更好的制作网页。

3、下面我们来制作网站站点，在电脑上建一个文件作为根目录。我们所建网站的所有文件和网页都保存在这个文件中。站点的作用就是使你的网站网页之间框架清晰。同时给站点起个名字。

4、然后再在站点根目录下建立一个专门储存网站图片的文件，并设置默认。这样你添加到这个网站的所有图片都自动保存到这个文件，不会丢失。注意文件命名要用英文。下面我用我建立的（篮球资讯网）来介绍，点击右下方篮球资讯网——下拉点击管理站点——点击高级设置——设置默认图像文件夹为刚建立的images。保存。

5、下面我们来制作这个网站首页，先学习添加图片。插入——图像——选择素材添加。点击图片，下面属性可以编辑修改图片大小，添加超链接等等。下面我修改图片大小做示范。

6、下面学习添加文本。编辑“篮球资讯网”，下面属性可以设置文本字体、添加超链接等等，点击页面属性，可以详细编辑文本属性。

7、网页基本就是文字和图片的组合，添加视频还需要学习者好好搜索Dreamweaver 的使用视频加以学习。最后制作完一个网页要记得保存。左上角文件——保存。

8、最后我们学习添加超链接。我用建立的第二个网页来做示范。选中篮球资讯网文本，点击页面下方属性——链接——点文件小按钮——选中第一个网页，这样篮球资讯网文本变成蓝色。这是网站内部链接，相反就有外部链接。添加如图，一定要写http://......就可以了。

9、最后我们浏览网页。左上角文件——在浏览器中浏览网页，点击网页中两个链接都能到达指定网页。

扩展资料：

网页设计

设计网站要注意两个要点：整体风格和色彩搭配。

风格

网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。

风格（Style）是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。

色彩搭配

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。

网页配色小技巧：

1．用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感；

2．用两种色彩：先选定一种色彩，然后选择它的对比色；

3．用一个色系：简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：

1．不要将所有颜色都用到，尽量控制在三至五种色彩以内；

2．背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。

参考资料：百度百科：设计

---