大前端之旅

大前端有很多种，Shell 前端，客户端前端，App 前端，Web 前端和可能接下来很会火起来的 VR 前端等。当然在这篇文章，集中讨论一下身为小白，我们怎样去了解 Web 前端，以至达到一种入门级别的水平。

前端篇: 前端演进史

大前端

这同时也可作为任何一门编程语言入门之旅的小参考，不足之处欢迎指出。

为什么学 Web 前端

互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。

当然，学 Web 前端的源动力也可以仅仅是想在浏览器上跑一个自己写的小游戏，或者好奇一下这个互联网的工作原理咯。

浏览器上的页面

在浏览器中输入 www.jianshu.com 访问可爱的简书，服务器就会发来简书网页的源代码和一些图片，接着浏览器执行这些代码并将结果显示在浏览器窗口中，我们便可以进一步操作。

简书

查看页面源代码

打开简书后，在( Chrome )浏览器窗口任意位置点击右键 -> 检查（快捷键 Ctrl + Alt + I 或 Alt + Commd + I）即可打开开发者模式，可见每一个我们能够看到的界面都是源代码被处理的结果。而这个源代码便是 Web 前端要去入手了解的第一步。

打开浏览器开发者模式

Web 前端小白技能点

那么都该学什么才可以做出这么好看有趣的网页呢？可以从@ Phodal 大神之前写过的 Web 技能树看出Web 前端的技能三大基石 -- HTML，CSS，JavaScript。

Web 技能树 -- Phodal

以及几年前一个很流行的前端工程师技能图谱可以借鉴学习。

前端工程师技能图谱

其中，HTML 是超文本标记语言，文件以 .htm 或 .html 为扩展名，每当有一个 HTTP 请求（可以先理解为浏览器要访问网页的标准请求），服务器便根据请求发送相应的 HTML 文档到客户端进行解析，我们便可以看到相应的网页。

一个简单的 HTML 页面

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示HTML 元素，我们可以把 CSS 写到 HTML 页面的具体元素中、<head> </head> 标签中，或者直接引入外部以 .css 为拓展名的文件（外部样式表）到 HTML 页面中，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

W3School 上一个简单的 CSS 实例

JavaScript 是因特网上最流行的脚本语言，可以在不刷新整个 HTML 的页面时根据具体事件动态的更改页面内容，使网页真正的“活”了起来。这里不得不说的是，由于 JavaScript 近年来火热发展，覆盖已经不仅仅局限于 Web 前端而涉及到服务端（Node.JS 等）甚至物联网（例：致JavaScript也将征服的物联网世界）和 VR 设备（例：打造VR世界: Oculus + Node.js + Three.js）上了。

JavaScript 在网页上的一个验证输入功能

编程语言的概念在这里只做引导，具体点进下方“去哪儿入门 Web 前端编程语言”推荐的网址进行深入理解~

去哪儿入门 Web 前端编程语言概念

这里按类别直接上几个推荐学习 Web 开发（不只是前端）的学习网站：

  • 文字类编程学习：

    • W3School
    • 菜鸟教程
    • 极客学院wiki
    • 前端技术栈(英文)
  • 视频类编程学习
    • 慕课网
    • 极客学院
    • 网易云课堂
  • 过关挑战类编程学习
    • FreeCodeCamp
    • 百度前端技术学院
  • 有趣的编程学习 App
    • Growth
  • ......

更多精彩尽在我的 Github 仓库 Coding-Full-Stack-Intro之中。

在哪儿了解 Web 前端编程语言动态

这里是一些较为经典的 IT 新闻网站，可以及时关注最新的技术改变

  • 开发者头条
  • 极客头条
  • 少数派
  • 开源中国
  • CSDN
  • ......

更多精彩尽在我的 Github 仓库 Coding-Full-Stack-Intro之中。

基本开发工具

写 Web 前端源码用什么工具写？难道就用文本编辑器编辑 .txt 文件后将后缀改为 .html 才能打开并运行吗？当然不是，这里有很多很棒的前端开发工具作为推荐。根据个人信仰，选择其一就好。

WebStorm

WebStorm 一度被广大中国 JS 开发者誉为“ Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE ”等，有智能的代码补全，代码格式化，html提示，联想查询，代码重构，代码检查和快速修复，代码调试，代码结构浏览，代码折叠和包裹或者去掉外围代码等等等等特点。可以集成 Git ，随时将自己的代码提交到远程代码托管平台。

WebStorm

Sublime Text 3

Sublime 是程序员Jon Skinner于2008年1月份所开发出来的一款跨平台轻量级文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。配合上各种开发插件，便可达到高效开发的状态。

Sublime Text 3

Atom

Atom 是由 Github 官方发布，专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaScript等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

Atom 编辑器

安利一个 Atom 上的一个插件 -- activate-power-mode，打开会有震撼的敲击代码的效果。效果演示地址。

Web 前端前期书籍推荐

好的学习道理离不开实体书的陪伴。好的书籍便是节约学习时间、拓展视野的一个高效道具。从 HTML + CSS + JavaScript 出发推荐一些书籍。

  • Head First HTML与CSS(第2版)
  • CSS权威指南(第3版)
  • 精通CSS:高级Web标准解决方案(第2版)
  • JavaScript DOM 编程艺术(第2版)
  • JavaScript 高级程序设计(第3版)
  • 高性能 JavaScript
  • 锋利的 jQuery(第2版)

节选自 FKS 前端书籍推荐

遇到问题怎么办

当然这么办咯

难道这就完了吗

说了这么多，这也仅仅才是开始。Web 前端开发之路也是认知整个计算机科学之路，这一路技术底蕴必不可少。如果能再做到下面几点就更好了。

  • 拥有自己的博客
    可以在任何文章分享平台记录自己的学习过程，分享自己学习历程。

    • cnblogs
    • CSDN
    • 简书
    • gitbook
    • github 博客
  • 提高英文能力
    • 查英文文档

      • MDN
      • Can I use
    • The Boat
    • 编程中保证英文命名规范
    • 用英文 git commit
    • 英文博客和论坛
    • freeCodeCamp -- 英文学 web 全栈
    • 引人深思的 TED
  • 掌握 Git 能力
    大部分的开源项目我们都可以在 Github 上找到，掌握 Git 能力也就可以拥有整个开源世界。

    • 中文Git入门
    • Git 在线实战
    • Git 简易指南
    • Git -- 菜鸟教程
    • Git 教程 -- 廖雪峰
    • git 官网
    • Git 教程 -- 菜鸟教程
    • GitHub 漫游指南
  • 关注开源项目
    Github 作为全球最大的代码托管平台，有一些很有趣和有挑战性的项目等着我们实战，也有许多引导性的资源整合文章值得我们去 Star 点赞。奉上一些有趣的开源项目(文档类)。

    • awesome( 英文)
    • frontend-dev-bookmarks(英文)
    • 翻译掘金上优质的英文文章
    • 全栈增长工程师指南
    • 前端工作面试问题
  • 关注业界
    了解那些互联网的引领者，他们在做什么、解决了什么问题、取得了什么成就。然后换位思考，找到自己的奋斗方向。同时关注业界动态，了解 BAT 等互联网公司的人才需求。

    • @ Phodal
    • @ icepy
    • @ justjavac
    • @ yanhaijing

HTML 5.1

9 月份就要发布 HTML 5.1 了，这么重大的新闻，还在等什么。。？

THE FUTURE IS LANDING

没有最快的捷径，只有坚持下去才能找到意义。

文／icorvoh（简书作者）
原文链接：http://www.jianshu.com/p/d74f8f6e0917
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

Web前端小白入门指迷相关推荐

  1. 2021年最新版Web前端学习路线图-前端小白入门必读-推荐

    2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...

  2. 4步带你从Web前端小白到入门！

    Web前端开发怎么入门,主要都有哪些要素组成?Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,下面就给 ...

  3. 支付宝前端推出《Web前端开发入门手册》

    web前端教程 用大白话,来讲编程 近日,支付宝前端团队写的<Web前端开发入门手册>对外公开了,原本是用于内部培训使用,现在对外公开了. 这本手册是初学者的福音,它的受众群体是前端小白, ...

  4. web前端好入门吗？

    什么是web前端? 大家越来越肯定前端的作用,如今也高端web前端开发人员依旧紧缺.而web前端技术说白了就是JavaScript.CSS.HTML等"传统"技术与Adobe AI ...

  5. Web前端从入门到精通（第五周）

    Web前端从入门到精通(第五周) b标签和i标签 strong和b.em和i? 引用标签基本操作 iframe嵌套页面 br标签与wbr标签 pre标签与code标签 map标签与area标签 emb ...

  6. web前端开发入门（一）

    web前端开发入门(一) 前端开发入门 HTML/CSS/JavaScript JavaScript 总结 思考和实践 前端开发入门 首先必须掌握 HTML/CSS/JavaScript 这三大基础技 ...

  7. web前端-JS入门

    web前端-JS入门 1.初识JavaScript 1.1 JavaScript的简单介绍 1.2 JS的三种写法 1.2.1 行内式 1.2.2 内嵌式 1.2.3 外部js 1.3 JS输入输出语 ...

  8. 支付宝前端团队整理的《Web 前端开发入门手册》

    [回复"1024",送你一个特别推送] 今天是元宵节,首先祝大家元宵节快乐.但是,我万万没想到的是,一个元宵节现在都能成为我们程序猿的节日,名曰:猿宵节. 真的是越来越佩服我们程序 ...

  9. Web前端开发入门之网页制作三要素！

    Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...

最新文章

  1. SQL语句 goto
  2. python glances来监控linux服务器CPU 内存 IO使用
  3. Oracle报错：类型长度大于最大值解决办法
  4. java非公平锁_Java多线程 -- 公平锁和非公平锁的一些思考
  5. junit 循环测试_重复运行JUnit测试而没有循环
  6. K12计算机科学标准,计算机科学新主张(K12基础教育) 翻译.pptx
  7. TensorFlow 多任务学习
  8. Docker学习总结（60）——Docker-Compose 基础知识回顾总结
  9. 如何向github上传文件
  10. 【转载】快逸报表问题
  11. [生产力]在线免费的EDA工具，可编辑AD\EAGLE等文件
  12. SCM供应链管理系统解决方案：助力企业采购流程高效运行，全面降低供应链风险
  13. 基于UDP的网络群聊系统
  14. 使用3CDaemon 进行ftp 传输文件 (linux-开发板) 的方法
  15. 《熊出没·原始时代》首映 导演点赞宋祖儿配音
  16. 微分方程模型_MIT—微分方程笔记03 一阶线性常微分方程解法
  17. 光驱放入空盘，出现无法访问函数不正确(收藏）
  18. oracle虚拟机安装苹果,虚拟机中如何安装MAC OS系统？虚拟机安装苹果系统教程
  19. 源码之家（源代码下载分享）
  20. flacs 安装教程_002.Nginx安装及启动

热门文章

  1. 【联邦学习】FATE 集群部署 step2
  2. 利用Hyperledger Fabric开发你的第一个区块链应用
  3. GBDT（MART） 迭代决策树入门教程 | 简介 .
  4. 灰度图像--图像增强 Robert算子、Sobel算子
  5. mysql服务重启后不见了_一次诡异的Mysql服务不断重启故障排查
  6. Android华容道之一步一步实现-3 -手指触摸处理
  7. Spring JDBC-使用注解配置声明式事务
  8. VirtualBox安装Kali
  9. html怎么消除打印的进纸,打印机缺纸状态怎么消除？
  10. 通过设置Cookie 让弹框显示一次