WEB前端开发快速入门教程

目前web产品交互越来越复杂，用户使用体验和网站前端性能优化这些都得靠web前端工程师去做，web前端工程师是设计加开发的综合体，web前端工程师是在开发人员中最直接面向产品，面向用户的设计人员，一个开发团队的成果是要靠web前端工程师去展现，因为用户不会去关心后台的处理有多么强大 ；在设计人员中web前端工程师是直接面向开发人员的设计人员，向开发人员以一种计算机语言的方式传递其设计理念，web前端工程师在整个团队中是很关键的。

所以一名合格的web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一个或两个还不行，你必须对这三门语言都很熟悉。也不是说必须对这三门语言都非常精通，但你至少要能够运用它们完成大多数任务，而无需地频繁地寻求别人的帮助。

下面介绍下需要的一些基础知识

开发环境


编辑器：Phpstorm 或者sublime

浏览器：chrome（F12开启审查模式，可以看到任何一个网页的元素）或者火狐（需要安装插件firebug），当然右键还可以查看任何一个网站的源代码。

推荐阅读

HTML、CSS、JavaScript、PHP、 MySQL 的学习顺序是什么？

推荐模板网站


http://sc.chinaz.com/moban/

食用方式：先过一遍下面教程里的全部内容，然后找个好看的模板，学习index.html里的语句具体是怎么用的。一般模板都会涉及到jqeury和bootstrap，有些地方看不懂的话也没关系。

注意：提高基本功还是要靠做下面的作业，套模板只是一种实践和快速生产的方式。

作业


简易：做出登陆界面

登陆样例

较难：做出类似百度搜索界面的纯前端页面

搜索界面样例

Html


划掉的可以先不用看 其他都扫过一遍 之后就可以一边查一边写

http://www.w3cschool.cn/html/

W3Cschool Html

推荐收藏

html 速查词典 http://www.w3cschool.cn/html/dict

Css


http://www.w3cschool.cn/css/

css都稍微看下

不需要看太仔细

推荐收藏

css 速查词典|css API中文手册|css参考文档  http://www.w3cschool.cn/css/dict

CSS动画实例参考手册 http://www.w3cschool.cn/moresource/cssreference/index.html

Bootstrap


http://www.w3cschool.cn/bootstrap/

bootstrap看完css后可以看了，试试看各个控件怎么用

推荐收藏

常用的Bootstrap资源网站  http://123.w3cschool.cn/bootstrap_resources

JS


http://www.w3cschool.cn/javascript/

js也是都要看的 这个语言很强大

推荐收藏

Javascript开发资源 http://123.w3cschool.cn/javascript_resource

jquery


http://www.w3cschool.cn/jquery/

内容不多 但是这是前端的核心

推荐收藏

免费Jquery插件合集 http://123.w3cschool.cn/freejquery

前端学习资源汇总


http://123.w3cschool.cn/plk2fi

前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总，方便大家学习查阅参考。

时间： 2024-10-19 14:51:17

WEB前端开发快速入门教程的相关文章

游戏控制杆OUYA游戏开发快速入门教程

游戏控制杆OUYA游戏开发快速入门教程 1.2.2  游戏控制杆 游戏控制杆各个角度的视图,如图1-4所示,它的硬件规格是本文选自OUYA游戏开发快速入门教程大学霸: 图1-4  游戏控制杆各个角度的视图 q  蓝牙无线连接: q  用于游戏控制的按键:双摇杆(analog joystick).方向按键(D-pad).8个动作按钮(action button).1个系统按键(system button)和1个触控板(touchpad): q  2个5号电池: 提示:游戏控制杆中,电池的安装位置在

OUYA游戏开发快速入门教程1.2OUYA的硬件规格

OUYA游戏开发快速入门教程1.2OUYA的硬件规格 从官网上购买回来的OUYA产品,包含游戏主机.游戏控制杆.说明书.电源线.HDMI线.电源线和电池,如图1-2所示.本节就来简要介绍下,游戏主机和游戏控制杆的硬件规格.本文选自OUYA游戏开发快速入门教程 图1-2  Ouya游戏主机系统的各部分 1.2.1  游戏主机 游戏主机各个角度的视图,如图1-3所示,它的硬件规格是: 图1-3  游戏主机各个角度的视图 提示:图中标出了OUYA主机开关所在的位置,它类似于计算机主机箱上的系统开关,用

Apple Watch开发快速入门教程

Apple Watch开发快速入门教程 试读下载地址:http://pan.baidu.com/s/1eQ8JdR0 介绍:苹果为Watch提供全新的开发框架WatchKit.本教程是国内第一本Apple Watch开发教程,全面讲解WatchKit的各个方面,帮助读者更为快速的掌握Watch开发方式和流程. 目录 第1章  开发环境--Xcode 1 1.1  苹果账号 1 1.1.1  苹果账号的成员分类 1 1.1.2  注册免费的苹果账号 1 1.1.3  注册收费的苹果账号 4 1.2

C#游戏开发快速入门教程

C#游戏开发快速入门教程 C#游戏开发快速入门 试读文档下载地址:http://pan.baidu.com/s/1eQeSl0Y C#是微软发布的高级程序设计语言,这门语言和C语言一样,已经成为了大学计算机相关专业必学的一门语言.很多初学这门语言的同学,还以为C#只能开发Windows桌面应用程序了,写写ASP.NET网站.本书将为读者纠正这种观念,使用C#一样可以开发出精彩的游戏! 学习所需的系统和软件 安装Windows 7操作系统 安装Unity 4.5.1 目  录 第1章  使用C#编

HealthKit开发快速入门教程大学霸内部教程

HealthKit开发快速入门教程大学霸内部教程 国内第一本HealthKit专向教程.本教程详细讲解iOS中,如何使用HealthKit框架开发健康应用.最后,本教程结合HealthKit和苹果手表iWatch实现一个健身应用--立卧撑拍拍器. 试读下载地址:http://pan.baidu.com/s/1o6iLO2A 目  录 第1章  HealthKit开发概述- 1 1.1  HealthKit简介- 1 1.1.1  HealthKit特点- 1 1.1.2  HealthKit经典

OUYA游戏开发快速入门教程第1章了解OUYA及其设备

OUYA游戏开发快速入门教程第1章了解OUYA及其设备 OUYA是基于Andorid系统的游戏主机.围绕OUYA游戏机,已经形成一个完整的生态圈.在国外,OUYA已经成为知名的游戏平台.本章会站在玩家的角度上,为大家介绍这款设备,内容包括其出现背景,使用和设置方法,以及游戏体验.本文选自OUYA游戏开发快速入门教程大学霸 1.1  OUYA的诞生 OUYA是基于Android 4.1系统的开源游戏主机系统.2012年7月10日,它最先在众筹平台Kickstarter上出现并接受预定.当时单价99

干货教程 | Web前端开发学习入门指南

互联网的高速发展,让企业对于Web前端开发人员的需求越来越大,想要进入这行的人自然也逐渐增多.很多新手在进入这行时都会徘徊.犹豫.疑问,想学习又怕学不好,下面就和Web前端小编一起来看看. 1.HTML的学习 超文本标记语言(HyperTextMark-up Language简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户.因此,我们必须掌握HTML的基本结构和常用标记及属性. HTML的学习是一个记忆和理

【前端福利】用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个"真的"重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工

用grunt搭建自动化的web前端开发环境-完整教程

jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过.但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点).至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt.还有一点,它完全免费,没有盗版.既强大又免费的东西,为何不用? 当然了,你如果你能找到更好的替代grunt的其他工具也是可以