如何自学网站开发

一、Coursera

https://coursera.与全球一流大学和机构合作提供在线课程，课程偏向概念和理论，包含一些ux设计、交互设计、图形设计；

二、Lynda

https://lynda/

包罗万象的学习网站；商学、软件、技术等，为不同的用户提供不同的设计基础和设计工具方面的课程；

三、Skillshare

https://skillshare/

这个网站更加注重工具技能的共享，这里有提供创意和开发教育方面的课程。网站里还提供众多设计师和设计创意的短视频；

四、Envato

https://envato/

较纯粹的设计教学网站，注重一步一步的教会用户学习使用设计工具；

五、HH Design

https://hhdesign-la/

这是一个设计反馈网站，可以让众多设计师交流自己的看法，并且有很多网络社区可以供设计师们使用，可以说是一个功能相当丰富的软件了；

近几年Web前端框架层出不穷，比如 React, Vue, AngulaJS等吸引了大量的注意力，前端技术发展势头迅猛，各大互联网公司也越来越重视前端开发，前端开发再也不是过去那种按照设计图做静态网页，再随便写点jQuery的职位了。现在，市场上对于前端开发的需求越来越大，我们经常听说前端开发入门难度低，但学习前端开发究竟需要多长时间呢？学多长时间就能找到工作赚到钱？结合了周边同事和自身的经验来谈谈学习网页开发到底需要花多长时间。

Note：一定要下定决心，并且要坚持。

1. 网页设计的基本概念和理论知识（10天）

在学习制作网页之前，必须掌握网页设计的基本概念和理论知识。什么是静态网页？什么是动态网页？网页的整体布局是什么？网页设计的原则是什么？网页基本构成要素是哪些？基础的网页设计概念都不了解，那么对于之后要制作网页更是难上加难。我认为利用10天时间了解网页设计的基本概念和理论是必不可少的，时代在不断变化，网页设计也会更新换代。所以了解基础知识是为了之后设计制作打好基础。当然，还需要了解基础的SEO知识。网上的视频教程个人建议还是少看，一本好的书绝对让你受益匪浅。推荐几本好书供大家学习：

制作网页设计

1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT

如何让网页设计更加功能化

2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT

前端开发

3. LEARNING WEB DESIGN: A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS

可用性：

4.DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG

2. CSS+HTML+JavaScript（1个月）

相对来说， HTML是最简单的，只是标签语言， 格式规范; CSS相对来说复杂一些, 有浏览器的兼容问题等。但二者组合就能实现很多页面效果, 里面涉及的变化太多了。如果你只会基础语法, 而没有实际去写过, 那样是很难真正掌握的。我在这里说说我的经验吧，我一开始学习的Bootstrap，简单点说，就是给现有电商项目套上Bootstrap做的响应式皮肤。Bootstrap确实挺好上手，靠着官网的手册，基本上遇到的问题都能自己解决。

JavaScript 也没有那么难，你要知道Brendan Eich创建JavaScript语言一共就用了10天时间，所以它的语法并不复杂，相信你很快就能掌握基本语法。你可能还需要学习一些常见的库的API，这个可以根据你的需求来安排，你要用到什么库，就学习它的文档。

我觉得最好的网页开发学习资料就是 Mozilla Developer Network(https://developer.mozilla.org)的文档了，涵盖了HTML, CSS, JavaScript的方方面面，不论是初学还是老手查阅都是非常有用的，推荐给大家。

3. 开始制作网站（1个月）

了解了基本的知识，做了一些小练习之后，我认为最重要的是尽早参与实际项目，这样才能得到真正的锻炼。使用 Jekyll + GitHub Pages 为自己搭建一个静态博客是一个很好的开始，只需要简单的配置，不需要任何后台开发，几乎完全是前端开发。

建站的时间取决你自己对网站完成的满意度，如果参考模板， 那么几个小时内就可以搞定了；如果是要独立开发一个新的网站又要内容全面好看，1个月是跑不掉的，甚至需要更长时间。

4. 工具软件学习（半个月）

工具的掌握程度完全靠个人的领悟能力和学习，网上有很多关于以下这些工具的教学视频，跟着学会事半功倍的。需要学习的基本软件：

编辑器：Sublime Text

初学者我不建议立即使用强大的 IDE，先使用编辑器有利于学习。Sublime Text 是一款我个人非常喜欢的编辑器，界面优雅，操作流畅，自动支持语法高亮，还有丰富的插件，你也可以试试。

设计出图、切片：Photoshop

Adobe Photoshop，简称“PS”，是由Adobe开发和发行的图像处理软件，Photoshop主要处理以像素所构成的数字图像，使用其众多的编修与绘图工具，可以有效地进行图片编辑工作，PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。Photoshop非常专业，也稍显复杂，是专业的平面图片设计人员必须掌握的一款工具。作为前端开发，你需要跟设计师紧密配合，学习一些 PS 知识会对你之后的开发更有帮助。

原型设计：Mockplus（时间成本最低）

是一款上手非常简单的网页原型设计工具，通过拖拽就你完成一个简单的交互，项目类型诸多，有自由项目，网页项目，自定义项目，当然还有APP项目。网页项目最大的尺寸为3000*6000，你可以任意设计都没问题。200个封装组件和3000个图标可供使用，最近新出的格子功能更是方便使用，减少了很多重复设计的时间。

掌握一些原型设计知识绝对非常有必要，这是我投入最少却收益最多的事情之一，我强烈建议你尝试一下Mockplus，对之后在团队工作的沟通会非常有帮助。

5. 学习设计知识（持续）

前端开发是一个直接面向用户的职位，跟后端开发不一样，你的成果是用户直接可以看到的，我认为提高自己的审美，多掌握一些设计方面的知识，把握当下流行趋势和动向也是很有必要的。而这一过程是不能用具体时间来衡量的，需要不断持续吸收新的东西才能设计出理想的网站。这里有15个最好的网页设计博客资源可供大家每日阅读，我个人还是最喜欢medium。UI设计资源网站相信大家都了解了，dribbble和behance等都是每日必逛，必定是受益良多。

总结：

软件开发是一个需要持续学习的过程，尽管前端开发入门难度低，但是近几年来前端开发的复杂度越来越高，对个人素质的要求也越来越高。本文只是针对想要入门前端开发而找不到方向的人，经过这个过程后，你可以找到一个初级的开发职位了。不论做什么事情，学习是根本，希望这篇文章能帮助到新手。

如何自学网页设计？在众多行业中选择什么非常重要。想转业的朋友未必全都会下决心去学习一两个月然后马上转行。很多都是要先自学入门，觉得适合自己，然后，才敢继续下去。

如何自学网页设计？网页设计要学什么？

小编来告诉你：

一、首先。PS及FLASH是必须学的了。

这个毫无疑问。教程网上也很多。

二、其次。无论你将来用什么语言做网页，都要先学习HTML。

一种很简单的语言，也是网页设计的基础，找本自己能看懂的教材，浏览为主，不用记住所有的概念，只要记住使用原理就行了，这一阶段，估计得一个星期，当然，有老师教的话应该很快了。

这就包括了网页切图和p+css，css是网页制作人员必备的工具，经验是否丰富直接决定你能否胜任网页前段设计师的工作。CSS教程也可以在大部分网站中找到。

三、Dreamweaver。

掌握HTML以后，其实你就可以设计一些简单的静态页面了，再接下来就是学习可视化设计软件，有些东西。可以用可视化界面，代码由软件代替你自动生成，可以大幅提高效率。

------------------------------------------

热门职业测试丨30秒测试你适不适合学网页设计：

http://tianhujy/list-93-1.html?wm=tt_ljj_uizg (可复制到浏览器打开)

如何自学网页设计？当然，学习网页设计还是需要掌握一些小小技巧的。小编也顺便透露一下，如何学呢？

一、首先是合适的时间

对于经验的人来说非常的重要。如果一件需要花时间的学习任务超出了你的时间成本，你就不应该去碰它，或者换一个更好的方式。转行要考虑目前的状况及时间成本。比如，你现在一直在学网页设计，不去接触移动端，但是，很快移动端已经覆盖了大部分用户了，你之前所学的电脑端的知识，能比得上人家现在直接学移动端来的快么？

二、其次是正确的方法是重要的

这个就不多说了，学习什么都需要正确的方法。方法不仅是你练习的方式，还有思考问题的方式，这里强调的是设计师快速发现问题的能力。

三、再着是起跑的地点

理念比软件操作更加重要。比如：你想自学网页设计，并把网页视觉设计师作为自己的职业发展，你就应该首先了解，一个网站的基本结构，每个结构需要哪些工作岗位，他们的职责有 何不同，一个网站视觉设计师应该干什么，抓住重点。

四、设计需要一些小技巧

良好的网页设计是件很难实现的事情。一个好的网页设计，不仅吸引眼球，也是实用的、直观的、层级简单却足够复杂到保持用户的兴趣。字体、色彩、空白与内容间的完美平衡可以构成一个非常好看的设计，你的用户也会再次回来。因此，好的设计很重要哦。看看一些小小的技巧吧。

1、要有足够的空白

空白可以说是设计中最重要的一部分。它有助于防止用户在浏览网站时变得疲惫，它可以在内容中划出距离，而且它本身也看上去不错。空白不是必须用白色的，而是，它仅仅是为其他设计元素提供间隔和缓冲的空间。

2、不要有太多的字体及色彩

一般一个简单的网页设计，一般字体不超过3种。多则乱。

多重 渐变、几种鲜艳的色彩和大量有鲜明对比的色调及饱和度，会破坏你网站的层次和空白概念。

尝试限制自己只用一种鲜艳的色调（如蓝色），再搭配反相的单色（白、灰、黑）以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。

3、要考虑用户的分辨率

你的屏幕 分辨率有2560像素，这非常好。但很多人还在屏幕上用1024像素的分率，有些还在用640*480或800*600。虽然这种分辨率的显示器正在减少，但采用更小的分辨率的手机设备也来了。

5、要有足够的文字间距

与空白有关，文字间距有两个部分，一个是字距（这个不能用CSS直接调整，可以通过一些高级技术解决），关系到字母之间的空白。一个是行距，可以用CSS直接调整，关系到两行文字之间的距离。这些有助于区分行与段落，使用户更容易阅读文字。

6、网页色调，大小之类的不一致

一致性是网页设计的关键。它是把网页设计组织在一起的方式，可以创造一种紧密结合的感觉。在网站页面互相链接的情况下，它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体、大小和色彩，用户很快会觉得不知所措。

---------------------------------THE END-----------------------------------------

如何自学网页设计？给自己制定个学习规划，会让你事半功倍：

http://tianhujy/tg-81.html?wm=tt_ljj_wysj