小白如何入门前端编程

写在前面本文适合非大神，非哈货，对前端编程感兴趣，但不知道怎么入门的小白阅读，阅读时间2分钟。明确你的目的如果你学习一样东西是毫无目的的，那么请点击左上角，所以你要明白自己为什么学习编程，其实无非就是以下几个方面：

学习编程最重要的是代码敲错能够有个人给你指点
所以特意建立一个web前端开发学习群
群号 569146385直达学习群
领取群里大咖每日分享和web前端学习资料

1.看到程序员是一个高薪行业，想转行获得一份高收入工作，结论告诉你，除非你觉得自己聪慧过人，而且肯下苦功夫，不然请不要抱太高的期待；

2.在校学生平常没什么事，想学习点技术，看到编程很热门选择学习它，很棒，起码你没有整天沉迷于各种游戏；

3.对编程极其感兴趣，能做一件自己感兴趣的兴趣真的很幸运，希望你能坚持；

明确了自己的目的，你就可以选择适合自己的方向去学习，有自己的学习计划的当然最好，若没有，那么我推荐你可以尝试先学习前端，主要有以下两个原因：

1.前端相对来说，门槛低，入门难度不大，而且现在发展十分迅速，有很好的前景；

2.以最小的代价验证一下自己是不是真的适合编程；

那么作为一个新手如何入门前端呢？主要可以从以下几个方面入手。前端编程是什么简单来说，前端就是你看到的东西，比如我们平常看到的各种app主页，网页，当然我们通常所说的前端编程是指Web端网页编程，当然既包括我们在电脑浏览器中看到的页面，也包括手机中的各种H5页面，相对来说，前端编程能让你们直观看到自己编写代码的效果，对于新手来说，这一点能极大的提升你的兴趣。前端三大技术我们经常看到一些很酷炫，吊炸天的页面，那么它们到底是用什么实现的呢？那就是html+javascript+css。htmlhtml是一种规范，包含各种你在页面需要使用的标签，比如标题、段落等，它是整个网页的基础，数据的载体，也是你学习前端编程最先接触到的东西。css当你写了一个页面后，想要让它变得更美观，那么就需要css了，你可以利用它来进行最基本的样式美化，比如字体大小，颜色等，当然它也有更强大的功能，比如页面布局，伪类等功能。javascript假如单纯用html和css做的页面那么只能算静态页面，但是很多时候我们需要自己的页面能跟访问者可以进行交互，比如点击某个按钮播放一首歌，那么你就需要javascript来帮助你了，它能帮你实现你想要的动态效果，并且可以在浏览器中直接运行，当然这部分内容也是最难的，需要一步一步学习。在介绍完前端开发中的相关技术后，那我们如何高效的去写代码呢？编程工具拥有一个好的开发环境是一个好的开始，如果有条件的话推荐使用Mac，当然对于前端开发的话WIndows也能够胜任，前端开发虽然只要有文本编辑器和浏览器就行，但为了提高效率，我们还是需要使用一些高效的IDE或者编辑器。

1.sublime

2.webstorm

3.vscode

4.atom

这四款软件都有Mac版和Windows版，Windows上的话vscode吧，毕竟是微软系列的产品，如果新手入门的话我推荐sublime，到你学到后期或者自己尝试做项目，电脑性能也还过的去，可以选择webstorm，当然每个人的喜好不一样，在你学习一段时间后，你可以尝试一下把四个软件都体验一下，选择真正合适的那个它。调试工具如果前端开发，强烈推荐你使用Chrome，它不仅对前端新出的各种特性提供了很好的支持，还有着很好的很调试工具：

1.可以在console之间编写javascript代码并执行；

2.支持修改html结构，也可以动态修改css样式，效果会直接反应在页面中；

3.从network中可以查看请求后台接口的情况（暂时不用关心）

使用调试工具的好处是，简单的样式修改你不必重复修改代码保存刷新看结果，而可以在Chrome中调成你想要的效果，然后复制相应代码到你的页面中就可以了，也可以利用console来打印你的javascript日志，来看代码的执行情况，在一切就绪后，我们开始尝试写自己的第一个页面。写自己的第一个页面万事开头难，写出自己的第一个页面尤其重要，我们先不关心动态效果，所以我们暂时不需要javascript，很那我们就尝试来写第一个页面：1.创建一个html文件，我们命名为demo.html:

body{

background-color:#f1f2f4;

margin:;

}

.content{

margin:100pxauto;

text-align:center;

width:500px;

}

h2{

font-size:20px;

color:#000;

font-weight:500;

}

p{

font-size:16px;

color:#666;

}

Your name

Congratulations, you had done!

2.选择浏览器打开demo.html:你将会看到以下的页面：

 

如果看到这个页面，那么恭喜你，你已经迈出第一步了，打开了前端大门。

学习编程最重要的是代码敲错能够有个人给你指点
所以特意建立一个web前端开发学习群
群号 569146385直达学习群
领取群里大咖每日分享和web前端学习资料

写在最后编程学习是一个漫长的过程，而且相对来说有点枯燥乏味，但是当你坚持下来后你将会收获到非常多，另外老师或者朋友只能当一个引路人，真正的探索还得靠你自己，多看多学多写，希望你早日成为大神。