Web前端小白入门指迷
前注:这篇文章首发于我自己创办的服务于校园的技术分享 【西邮 Upper -- 004】Web前端小白入门指迷,写得很用心也就发在这里。
大前端之旅
大前端有很多种,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。
以及几年前一个很流行的前端工程师技能图谱可以借鉴学习。
其中,HTML 是超文本标记语言,文件以 .htm 或 .html 为扩展名,每当有一个 HTTP 请求(可以先理解为浏览器要访问网页的标准请求),服务器便根据请求发送相应的 HTML 文档到客户端进行解析,我们便可以看到相应的网页。
CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示HTML 元素,我们可以把 CSS 写到 HTML 页面的具体元素中、 标签中,或者直接引入外部以 .css 为拓展名的文件(外部样式表)到 HTML 页面中,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
JavaScript 是因特网上最流行的脚本语言,可以在不刷新整个 HTML 的页面时根据具体事件动态的更改页面内容,使网页真正的“活”了起来。这里不得不说的是,由于 JavaScript 近年来火热发展,覆盖已经不仅仅局限于 Web 前端而涉及到服务端(Node.JS 等)甚至物联网(例:致JavaScript也将征服的物联网世界)和 VR 设备(例:打造VR世界: Oculus + Node.js + Three.js)上了。
编程语言的概念在这里只做引导,具体点进下方“去哪儿入门 Web 前端编程语言”推荐的网址进行深入理解~
去哪儿入门 Web 前端编程语言概念
这里按类别直接上几个推荐学习 Web 开发(不只是前端)的学习网站:
- 文字类编程学习:
- W3School
- 菜鸟教程
- 极客学院wiki
- 前端技术栈(英文)
- 视频类编程学习
- 慕课网
- 极客学院
- 网易云课堂
- 过关挑战类编程学习
- FreeCodeCamp
- 百度前端技术学院
- 有趣的编程学习 App
- Growth
- ......
更多精彩尽在 Upper 主的 Github 仓库Coding-Full-Stack-Intro 之中。
在哪儿了解 Web 前端编程语言动态
这里是一些较为经典的 IT 新闻网站,可以及时关注最新的技术改变
更多精彩尽在 Upper 主的 Github 仓库Coding-Full-Stack-Intro 之中。
基本开发工具
写 Web 前端源码用什么工具写?难道就用文本编辑器编辑 .txt 文件后将后缀改为 .html 才能打开并运行吗?当然不是,这里有很多很棒的前端开发工具作为推荐。根据个人信仰,选择其一就好。
WebStorm
WebStorm 一度被广大中国 JS 开发者誉为“ Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE ”等,有智能的代码补全,代码格式化,html提示,联想查询,代码重构,代码检查和快速修复,代码调试,代码结构浏览,代码折叠和包裹或者去掉外围代码等等等等特点。可以集成 Git ,随时将自己的代码提交到远程代码托管平台。
Sublime Text 3
Sublime 是程序员Jon Skinner于2008年1月份所开发出来的一款跨平台轻量级文本编辑器。Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。配合上各种开发插件,便可达到高效开发的状态。
Atom
Atom 是由 Github 官方发布,专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。
安利一个 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 博客
- 提高英文能力
- 查英文文档
- 编程中保证英文命名规范
- 用英文 git commit
- 英文博客和论坛
- freeCodeCamp -- 英文学 web 全栈
- 引人深思的 TED
- 掌握 Git 能力
大部分的开源项目我们都可以在 Github 上找到,掌握 Git 能力也就可以拥有整个开源世界。 - Git 简易指南
- Git 教程 -- 廖雪峰
- git 官网
- Git 教程 -- 菜鸟教程
- GitHub 漫游指南
- 关注开源项目
Github 作为全球最大的代码托管平台,有一些很有趣和有挑战性的项目等着我们实战,也有许多引导性的资源整合文章值得我们去 Star 点赞。奉上一些有趣的开源项目(文档类)。 - 关注业界
了解那些互联网的引领者,他们在做什么、解决了什么问题、取得了什么成就。然后换位思考,找到自己的奋斗方向。同时关注业界动态,了解 BAT 等互联网公司的人才需求。
HTML 5.1
9 月份就要发布 HTML 5.1 了,这么重大的新闻,还在等什么。。?
小小的广告时间
看了这篇文,依然对 Web 前端有兴趣的可以加笔者为好友(微信号:CorvoH)或 Github 关注 @Corvoh ,带给你不一样的编程体验。
没有最快的捷径,只有坚持下去才能找到意义。
Web前端小白入门指迷的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- web前端开发入门全套学习方法路径,兼职在家做网站也能月入上万!
前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性.这个部分内容非常简单,而且非常容易掌握.相信你也更愿意学习这个部分,毕 ...
- 2020年最新版Web前端学习路线图-前端小白入门必读-pink老师推荐
Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业有什么帮助呢? 我学到什么程度可以胜任工作? ... 这里,p ...
- 学习web前端怎样入门?初学者赶紧看过来!
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
- web前端工程师入门须知
本文是写给那些想要入门web前端工程的初学者,高手请路过,也欢迎高手们拍砖. 先说下web前端工程师的价值,目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做w ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集
http://web.jobbole.com/89188/ 2016 – 对于未来五年内Web发展的7个预测 2015 – 我的前端之路:从命令式到响应式,以及组件化与工程化的变革 怎么成为一名优秀的 ...
- [转] Webpack 入门指迷
大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好.. Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagram.com Works ...
- Webpack 入门指迷
大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好..Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagram.com Works, ...
随机推荐
- Windows下启动各服务命令
1. gpedit.msc-----组策略 2. nslookup-------IP地址侦测器 3. explorer-------打开资源管理器 4. logoff---------注销命令 5. ...
- winedt设置自动显示行号[latex]
options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...
- ZOJ 2112 Dynamic Rankings(动态区间第 k 大+块状链表)
题目大意 给定一个数列,编号从 1 到 n,现在有 m 个操作,操作分两类: 1. 修改数列中某个位置的数的值为 val 2. 询问 [L, R] 这个区间中第 k 大的是多少 n<=50,00 ...
- 安卓开发笔记——自定义HorizontalScrollView控件(实现QQ5.0侧滑效果)
对于滑动菜单栏SlidingMenu,大家应该都不陌生,在市场上的一些APP应用里经常可以见到,比如人人网,FaceBook等. 前段时间QQ5.0版本出来后也采用了这种设计风格:(下面是效果图) 之 ...
- maven中文乱码问题——打包错误
工程采用GBK编码, web应用中的配置文件打包后,war包里的配置文件里的中文成乱码. 用notepad++打开后,可以看到是用utf-8格式的(可以通过菜单中的[格式]查看),也就是说,在经过 ...
- 专门为码农定制的14款创意的T裇(T-Shirt)设计
T裇衫是人们在各种场合都可穿着的服装,如在T裇衫上作适当的装饰,即可增添无穷的韵味.通过图案直接反映人类的精神风貌,你可以把日常生活中的兴趣.习惯.喜怒哀乐.嗜好等展露无疑,张扬个性.秀出自我.对于码 ...
- Web Service常识
1 问题的引出 位于服务器的程序需要在Web页面上显示一个订单列表,它需要访问业务对象服务器上的程序,通过它读取订单列表,业务对象服务器又要访问数据库服务器.当一台计算机上的程序调用另一台计算机上 ...
- JS&CSS文件请求合并及压缩处理研究(一)
在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...
- python面向对象编程(上)
面向对象编程(OOP,Object Oriented Programming)是每一个高级编程语言都支持的编程方法,比如JAVA/C++/C#等等.学习面向对象编程是每一个程序员都绕不开的重点内容. ...
- mysql如何修改所有的definer
mysql中的definer是什么,有什么作用? 我们在mysql创建view.trigger.function.procedure.event时都会定义一个Definer=‘xxx’,类似如下: C ...