web 前端开发工程师是一个很新的职业, 是从事 Web 前端开发工作的工程师. 主要进行网站开发, 优化, 完善的工作. 网页制作是 Web 1.0 时代的产物, 那时网站的主要内容都是静态的, 用户使用网站的行为也以浏览为主.
给你学习路线, html-CSS-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd
现在互联网发展迅速, 前端也成了很重要的岗位之一, 许多人都往前端靠拢, 可又无能为力, 不知所措, 首先我们说为什么在编程里, 大家都倾向于往前端靠呢? 原因很简单, 那就是, 在程序员的世界里, 前端开发是最最简单的编程, 甚至都不能叫做编程, 因为它真的很简单很简单, 下面呢, 我们就开始一点一点的教大家如何开始前端知识的学习 (小学生都能学会的语言)!
首先我们学习前端, 要知道前端的三个大内容, HTML,CSS,JS, 其中 HTML 和 CSS 是相互结合着学习, 掌握了这两个了以后我们就算真正入门了, 然后再深入学习 JS 等等.
小编推荐一个学 Web 前端的学习裙 [ 五四七, 三零二, 三八三 ] , 无论你是大牛还是小白, 是想转行还是想入行都可以来了解一起进步一起学习! 裙内有开发工具, 很多干货和技术资料分享!
HTML,CSS,JS
一, 首先我们要理解 HTML,CSS,JS 分别是什么?
HTML 就相当于一个人, CSS 相当于一个人穿着的衣服, JS 相当于让这个人做什么动作, 这样一形容呢, 我们就很好理解了, 这个人就是网站, 需要有 header 头, body 身体, footer 脚...... 而网站所呈现给我们各种各样的样子就是我们写的 CSS 样式, 网站里的动态效果就都是我们的 JS 去实现的.
二, 零基础就能学会前端.
说到这里, 可能大家看这么多的文字有点看不下去了, 那我们废话不多说, 只要你决定了要学习前端, 那就跟我们的课程一点一点学习去设计制作属于你自己的网页吧!
我们用到的软件呢, 对于入门级来说我们一般推荐大家用 Dreamweaver, 简称 DW, 新建一个 HTML 后, 出现的界面是这样的,
看到这么多代码不要慌, 对我们敲代码没啥影响, 下面我们开始敲代码, 我们可以看到这里有这样的代码, 这个就是我们网页的身体, 我们接下来要敲的内容都是在这中间输入的, 这个括号表示的标签, 标签都是一前一后的, 成对儿出现的, 除了一些特殊的标签, 随后我们再一一给大家讲解. 现在我们输入点内容, 看看效果.
我们输入一个标签
, 点击右上角的地球浏览一下, 会发现弹出了一个空网页, 什么也没有, 那是因为我们现在只书写了 HTML, 还没有写 CSS, 简单来说就是, 我们创建了一个东西在页面里, 但是还没有设置这个东西长什么样子, 现在我们在设置它的样子,
1, 我们为了给这个 div 设置样式, 所有先给它起个名字不然, 电脑不知道我们要给谁加样式, class="aaa" 的意思是起名为 aaa
2, 在里写入这样一组标签这个 style 的意思就是 CSS, 我们整个网站要加的所有样式都是写在这个中间的.
3, 我们在 style 里写样式, 电脑首先要知道我们给谁加样式, 所有我们写个. aaa 这个.(点) 的意思是我要给 aaa 加样式, 电脑会自动把.(点) 后面的名字, 跟下面 body 里的名字做一个匹配, 这样电脑就知道, 哦~ 原来你是要给这个 div 加样式呀,
4, 然后我们把要给这个 div 加的样式写在大括号里, width:100px; 意思是这个 div 的宽是 100 像素, height:100px; 意思是高是 100 像素, background-color:#FF0000; 意思是背景颜色是 #FF0000 这个颜色,
注意:(1) 这里我要给大家解释一下, 大家别看这么多代码, 这么多单词, 其实软件有提示, 像下面这样, 直接输入第一个字母后面的单词就出现了, 直接选中就行了, 连单词都不用背, 前端真的很简单,
输入 w 和输入 h, 会自动弹出单词框
小编推荐一个学 Web 前端的学习裙 [ 五四七, 三零二, 三八三 ] , 无论你是大牛还是小白, 是想转行还是想入行都可以来了解一起进步一起学习! 裙内有开发工具, 很多干货和技术资料分享!
(2) 每一个单词都有提示, 说到这里, 不会英语的同学就不要给自己找借口说英语不好, 学不会编程了, 当然, 这么简单是不是说大家都容易学会, 那大家都会了, 我们还有什么优势呢, 其实不然, 虽然说很简单, 但是要想真真的把前端学好是需要下功夫的, 主要就是要坚持, 虽然很简单, 但是能坚持下来的人很少, 这也就是为什么我们给学生一直提倡要坚持, 做任何事既然决定了, 就要坚持,
下面我们继续, 设置好了以后, 我们就可以点右上角的 "小地球" 来浏览了,
如果你做出来了, 跟我的效果一样, 那么你就成功了, 那我就可以恭喜你, 你已经入门了, 真的很简单!
到这里大家可能还会有疑虑:
1, 可能会有同学觉的, 前端好难, 写了那么一大堆, 才出了个这个. 2, 另外就是觉的这一下子蹦出来了这么多代码, 这么多单词, 记不住. 3, 对未来恐惧, 感觉还不知道要有多少单词, 多少代码要涉及.
在这里呢, 我要给大家解释一下, 前端呢, 其实我们真正常用的单词也就 20 个左右, 今天我们就已经用 3 个了, width,height,background, 当然这 3 个也是最最常用的, 是每次都要书写的.
另外就是像格式之类的, 同学可能也会有疑问, 这次的是 div 要起名字, style 写在 head 里, div 写在 body, 那还会有多少这样的写法,
小编推荐一个学 Web 前端的学习裙 [ 五四七, 三零二, 三八三 ] , 无论你是大牛还是小白, 是想转行还是想入行都可以来了解一起进步一起学习! 裙内有开发工具, 很多干货和技术资料分享!
这一点呢, 我可以告诉大家, 大家不用担心, 因为这是每次我们写前端都要首先写的东西, 可以说是固定格式, 就类似于做数学应用题, 我们首先要写个 "解" 字, 一个道理.
最后呢, 我想跟同学们说, 不管我们以后选择做什么, 一定都要坚持去做, 世上没有难的事, 只有放弃的事.
来源: http://www.jianshu.com/p/7d8b467747d5