Web前端和全栈的定义:

A、什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的行为(包括页面的效果和整合);

B、HTML5时代的大前端:要处理各种端的兼容开发(PC,移动端,各种浏览器)、移动APP开发和移动站点开发,Ajax+服务器端技术开发,异步开发和后台的交互、高级设计模式和框架(MVC,AngularJS...)、运用自动化工作流(Grunt)、网站安全、SEO、测试、源代码管理、团队合作、制作HTML5游戏等。

C、全栈时代:集前端和后端一体的大牛,会前端的语言和后台的语言,前后台通吃,能够快速的找到问题和解决问题的能力。

D、NodeJS:就是用JS为基础的一门后台的语言,让前端无所不能,现在的前端已经是突破所有边界。

web前端开发环境的搭配:

A、Sublime3安装配置:Sublime跨平台的前端开发神器,是一个共享软件,免费使用;下载最新Sublime3安装包;

-官网地址:http://www.sublimetext.com/

-网盘地址:http://pan.baidu.com/s/1ntszCgT

-安装包管理器

打开Sublime3控制台,ctrl+~

输入安装包管理器命令代码,注意需要联网才能安装,因为是在线下载包

包管理器的官网地址:https://packagecontrol.io

-安装第三方插件(包)

打开命令面板:ctrl+shift+p;

输入install,然后回车,然后可以搜索想要的插件,回车安装;Atom工具使用

B、Atom工具使用:由github发布的前端开发工具,集成了chrome的调试工具,是一款非常强大和开发的开发工具平台。在file里面的setting里面进行设置,包括字体的大小,快捷键,背景颜色主题等;

官网地址:https://atom.io/

百度网盘下载地址:http://pan.baidu.com/s/1ntszCgT

C、WebStorm10的安装与使用:WebStrom是最专业的前端IDE开发工具,是一个非常重量级的开发工具,是专业为我们前端设计的IDE,用他来开发是效率非常高;

D、总结三款开发工具的优劣:Sublime3:需要安装第三方的包,一般。Atom:集成度非常好,也很轻,需要自己安装第三方的包。Webstrom:大项目,建议使用webstrom,非常强大,但是也很重。

操作系统常用快捷键:快捷键是让你成为高级的,专业的前端工程师必经的途径,是大家必须要掌握的。

Win+数字键:打开/显示超级任务栏第N个图标代表的程序

Win+D:快速显示桌面

Win+R:快速运行,打开软件,cmd命令行等

Win+E:快速打开资源管理器

Win+方向键:最大化,还原/最小化窗口

Win+L:快速锁定计算机

Ctrl+Alt+Del:显示以下选项:锁定计算机,切换用户,注销,更改密码,和启动任务管理器

CTRL+SHIFT+ESC:打开任务管理器

Alt+F4:关闭当前活动项目或退出活动程序

Alt+Tab:在打开的项目中进行切换

Alt+向上方向键:在Windows Explorer 中查看当前文件夹的上一级目录

Ctrl+A:在文档或窗口中全选Ctrl+C:复制选中的项目

Ctrl+向下方向键:将光标移到下一段的段首

Ctrl+Esc:打开开始菜单

Ctrl+F4:关闭活动文档(在程序中能够让你同时打开多个文档)

Ctrl+上方向键:将光标移动到之前一段的开头

Ctrl+V:粘贴选定项目

Ctrl+X:剪切选定项目

Ctrl+Y:还原一个操作

Ctrl+Z:撤销一个操作

DELETE:删除选定项目并移动到回收站

ESC:取消当前任务

F2:重命名选定的项目

F4:在Windows Explorer 中显示地址栏列表

F5:刷新活动窗口

前端基础入门第一阶段-Web前端开发基础环境配置的更多相关文章

  1. 我的第一个web应用开发搭建-环境配置

    MyEclipse 2014 破解图文详细教程 MyEclipse作为Java EE最受欢迎的IDE,最新版本为2014版,MyEclipse 2014破解的方法. 一.安装完成MyEclipse20 ...

  2. 绝对精品推荐做前端的看下:Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  3. “零基础”如何快速掌握web前端核心技术?

    前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML.CSS和JavaScript这些基础知识点,今天想强调一下,学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联 ...

  4. 范仁义web前端介绍课程---2、web前端是干嘛的

    范仁义web前端介绍课程---2.web前端是干嘛的 一.总结 一句话总结: 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技 ...

  5. 前端进阶(1)Web前端性能优化

    前端进阶(1)Web前端性能优化 Web前端性能优化, 不仅能够改善站点的用户体验,并且能够节省相当的资源利用.下面将从1)服务器.2)html内容.3)css. 4)javascript. 5)图片 ...

  6. PHP基础入门(三)---PHP函数基础

    PHP基础入门(三)---函数 今天来给大家分享一下PHP的函数基础.有了前两章的了解,想必大家对PHP有了一定的基础了解.想回顾前两章的朋友可以点击"PHP基础入门(一)"&qu ...

  7. 在cocos code ide的基础上构建自己的lua开发调试环境

    对于一种语言,其所谓开发调试环境, 大体有以下两方面的内容: 1.开发, 即代码编写, 主要是代码提示.补齐, 更高级一点的如变量名颜色等. 2.调试, 主要是运行状态下断点.查看变量.堆栈等. 现在 ...

  8. Java/javaEE/web/jsp/网站编程环境配置及其软件下载和网站路径

    Java/javaEE/web/jsp/网站编程环境配置及其软件下载和网站路径 (2015/07/08更新) JDK下载地址(JDK官网下载地址) 下载地址为:http://www.oracle.co ...

  9. Selenium2学习-001-Selenium2 WebUI自动化Java开发 Windows 环境配置

    此文主要介绍 Selenium2 WebUI自动化Java开发 Windows 环境配置,供各位亲们参考,若有不足之处,敬请各位大神指正,非常感谢! 所需软件列表如下所示: 所属分类 具体名称 备注 ...

随机推荐

  1. 字体的设置 REM EM PX

    px 1 一般设置页面的字体使用px 2 优点:字体设置比较稳定和精确 3 缺点:他会修改用户浏览器中的字体大小 EM 相对于父元素的字体大小,字体大小不确定,容易混乱,“em”是相对于其父元素来设置 ...

  2. (bmp格式)用CDialog的OnCtlColor()消息响应处理背景画刷。

    (bmp格式)用CDialog的OnCtlColor()消息响应处理背景画刷. 加载位图资源IDB_BITMAP1,在Dlg类头文件中加入: CBrush m_brush; 在OnInitDialog ...

  3. k8s-创建自定义chart及部署efk-二十五

    一.chart的结构 (1)更改helm为阿里云仓库源 [root@master helm]# helm repo remove stable "stable" has been ...

  4. win10部署Python3和Python2

    首先添加两个的环境变量, 使用python3 -m pip -v (后面为自己的pip命令) 工具: pip install you-get you-get -url

  5. 斯坦福CS231n—深度学习与计算机视觉----学习笔记 课时14&&15

    课时14 卷积神经网络详解(上) CNN处理的是一些数据块,在这之间有很多层,一系列的层将输入数据变换为输出数据,所以完成操作的中间量不仅是NN时候讲的那些向量,而是立体结构,有宽,高和深度,在整个计 ...

  6. c++ 头文件 及 sort 和 vector简单介绍

    c++  sort :http://www.16kan.com/post/997260.html http://wenku.baidu.com/view/e064166daf1ffc4ffe47ac6 ...

  7. (水题)Codeforces - 630H - Benches

    https://codeforces.com/problemset/problem/630/H 又一个组合数学的问题,我们先考虑在 $n$ 列中选出 $5$ 列来放椅子,然后对第一列有 $n$ 种放法 ...

  8. vector中插入pair

    我们知道map和multimap的作用,这两种数据类型在存储数据时,会根据pair<>的first成员进行排序,不同的时前者将不会插入对first成员重复的结构,后者可以.那如果我们只想存 ...

  9. python __builtins__ help类 (32)

    32.'help', 接收对象作为参数,更详细地返回该对象的所有属性和方法 class _Helper(builtins.object) | Define the builtin 'help'. | ...

  10. GraphicsLab Project学习项目

    作者:i_dovelemon 日期:2016 / 05 / 30 主题:3D,Graphics 引言 进公司以来,主要在学习的就是如何保证代码的质量,以前热爱的图形学也放置了.但是,作为游戏程序员,特 ...