[译] 前端攻略-从路人甲到英雄无敌
本文的 Github Repo
本文翻译自 FreeCodeCamp 的 from-zero-to-front-end-hero-part。
本文的第二部分:这里
译者的废话,不感兴趣的直接忽略
前两天才翻译了一篇文章:解决你的前端面试,这类型的文章都是关于前端的一些基础知识的,不过文章里的链接都是外文资料,更多的会学习的是思想吧和知识点列表。对于前端,或者更广泛的说的客户端开发的知识点图谱还是推荐下这个。笔者打算先写完 React+Redux+Webpack的系列笔记和实战 然后就把这些学习链接看看整理找一些中文的或者自己整理一些放出来,不过估计应该也有大神写了现成的,欢迎分享给我。
记得那年,我初学前端,遇见了很多的文章,在浩瀚的知识海洋里我手足无措,不知从何开始。己所不欲,勿施于人。这篇文章就会帮你去遨游前端学习的海洋,主要包含了在我之前的学习过程中整理的一些资源和一些感悟。我打算将整篇文章切分为两部分,第一部分重温HTML与CSS的基本知识,第二部分概括JavaScript、前端框架与设计模式。
HTML 与 CSS基础
前端的领域里,任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式与布局。
首先从HTML 以及 CSS 开始,这里推荐的是MDN的官方指南。MDN对于重要的HTML与CSS内容进行了详细条理的阐述,除此之外,每一章都是单独的一页,提供了在CodePen与JSFiddle展示的Demo。
看完了这些基础教程之后,可以来看看由CodeAcademy提供的tMake a Website系列课程。这个课程只要几个小时就能看完,如果你想要更多的锻炼,可以瞅瞅CSS Diner,这是一个CSS挑战的小游戏。
最后,可以看看怎么使用 Google Fonts,参考下 CSSTricks出的Basics of Google Font API。
国内用不了Google Fonts的话可以参考下FontAwesome,如果你要用中文字体的话建议参考FontSpider,请自行Github搜索。
Typography--排版也是个构建界面时候很重要的部分,有时间的话推荐你看看Donny Truong写的Professional Web Typography这本书,它会教你基本上关于排版的所有东西。在学习这些的时候不要太担心自己会忘了,反正记不住。你应该着重于记录这些并且理解HTML和CSS是怎么工作的。
Practicing HTML and CSS Basics
到这里你应该已经明白了HTML与CSS的基本使用,下面我们要学以致用了。这一部分就设计了两个小实验来让你自己动手构建网站与界面。我是把它们形容成实验,所以不要害怕失败。
Experiment 1
第一个实验里,我们用的是CodePen,一个在线的HTML与CSS实验台。同时也提供了实时预览功能,一石二鸟呦。好了,下面我们要看看我们做的界面的原型了,转到 Dribbble吧, 这嘎达可全是设计创意啊。
我是看上了这个系列:1, 2, 3, 4, 以及 5.。我选择了一个移动优先的设计是因为与桌面设计相比更简单一点,不过你也可以自己找一个。
在你选定了设计之后,就可以在CodePen上面开始动手了。你也可以看看其他人设计的Pen: pens on CodePen. 另外,别忘了StackOverflow ,这可是你的小伙伴呦。如果你最后实现的东西跟设计相去甚远,也不要灰心,不断尝试总会提高的。
Experiment 2
经过实验一估计你已经有点自信了,在实验二里面我们将会先借鉴一些大公司的经典站点。有不少站点会用一些CSS框架或者混淆它们的CSS类名,这会让源代码的阅读比较麻烦,这嘎达我列举了几个源代码可读性比较好的:
Dropbox for Business: Try replicating their hero section
AirBnB: Try replicating their footer
PayPal: Try replicating their navigation bar
Invision: Try replicating their signup section at the bottom of the page
Stripe: Try replicating their payments section
再次强调下,实验二的目的并不是让你去重构整个页面,而是知道怎么去分割组件以及人家是怎么做的。如果你没有设计的背景,可能你要好好发掘下你的潜能了。一个优秀的前端开发者要能够辨别好的设计然后完美地重现它们,可以参考下我的这篇文章:develop your design eye.
你可以选择在线编程:CodePen 或者直接本地开发。如果你选择本地做,那你可以使用这个 模板项目 。我推荐是使用Atom 或者Sublime这样的编辑器。另外,对于Firefox或者Chrome自带的控制台与开发者工具也要好好瞅瞅。
HTML and CSS Best Practices
好了,现在你已经能够用HTML与CSS做一些简单的事情了,下面就要看看所谓的最佳实践了。最佳实践实际上就是一系列的在日常开发中总结出来的约定俗成的规范的集合,来让你更快地开发与构建更高质量的代码。
Semantic Markup:语义标记
HTML与CSS最佳实践中重要的一条就是怎么来写出有语义可读性的标记。好的语义即是你使用了合适的HTML标签与CSS的类名来传达出你想表达的结构含义。
譬如 h1 标签会告诉我们里面包裹的是一些很重要的标题信息,另一个例子就是footer 标签,会直截了当地跟你说,这里面是包含一些页脚信息。建议你阅读 A Look Into Proper HTML5 Semantics 以及CSSTricks的 What Makes For a Semantic Class Name。
CSS Naming Conventions
下面一个比较重要的事情就是怎么给你的CSS定一个合适的类名。好的命名习惯,譬如语义化的标记,可以更好地传达含义,让代码的可读性与可维护性大大增加。你可以瞅瞅OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?这篇文章里提及的CSS的一些命名的习惯。
总体来说,我的建议是跟着你的直觉来确定命名习惯,随着时间的发展你会觉得这样看上去很舒服。如果你要看看大公司,譬如Medium是怎么实践BEM这样的命名规范的,可以阅读 Medium’s CSS is actually pretty f*ing good这篇文章,在这里你会学到怎么在一个快速迭代地情况下也维护你的有效地CSS命名习惯。
CSS Reset
不同的浏览器在譬如margin以及line-height这些小的样式点之间存在着一些不一致性,因此你要学会重置你的CSS环境。 MeyerWeb 就是一个常见的重置手段,如果你想深入了解下,推荐你阅读 Create Your Own Simple Reset.css File这篇文章。
Cross Browser Support
跨浏览器支持意味着你的代码要去支持绝大部分的现代浏览器,一些常见的CSS属性,譬如 transition 需要 vendor prefixes 来运行在不同的浏览器中。你可以在 CSS Vendor Prefixes这篇文章里获取更多的知识。这就意味着你需要花费更多的时间来在不同的浏览器之间进行测试。
CSS Preprocessors and Postprocessors
翻开CSS的历史,自90年代以来,CSS走过了一段漫长而崎岖的道路。整个UI系统变得日益繁复,人们也会去选择使用一些预处理器或者后处理器来管理这种复杂性。CSS的预处理器或者CSS语言的扩展会在无声无息之间提供类似于变量、Mixins以及继承这些特性。最主要的两个CSS的预处理器就是Sass 与 Less。2016年中Sass被越发广泛地使用,著名的响应式框架BootStrap就是从Less迁移到了Sass。另外,很多人谈到SASS的时候也会提到Scss,你可以参考 whats-difference-sass-scss这篇文章。
CSS后处理器则对于手写的CSS文件或者经过预编译的CSS文件进行一些处理,以著名的PostCSS 为例,它有一个插件可以帮你自动地添加一些渲染前缀。
当你接触过CSS的预处理与后处理器之后,你会把它们提升到日常伴侣的。不过,过犹不及,像变量和Mixins这些特性不能滥用啊,还是应该在合适的地方使用(译者注:此言非常有理)。还是推荐下Medium’s CSS is actually pretty f*ing good这篇文章。
Grid Systems and Responsiveness
网格系统即是用来水平或者垂直地排布元素的CSS架构。
著名的网格框架有Bootstrap, Skeleton, 以及 Foundation,它们提供了用于在布局中进行行列管理的样式表。这些框架用起来很方便,不过我们也是要理解网格的工作原理,推荐看Understanding CSS Grid Systems 以及 Don’t Overthink Grids。
网格系统另一个目标就是是你的网站具有响应式特性。响应式意味着你的网站可以根据屏幕的大小来动态调整你网站大小与布局。很多时候这个响应式特性都是基于CSS media queries, 即根据不同的屏幕大小选用不同的CSS样式规则。
你可以看一下 Intro to Media Queries来了解更多。另外,因为我们正在进行一场所谓mobile-first变革,推荐你看下An Introduction to Mobile-First Media Queries。
Practicing HTML and CSS Best Practices
恭喜道友,筑基成功,你已经能够了解一些关于HTML与CSS的最佳实践了,下面又到了学以致用的时间。这里的两个实验主要是让你锻炼下编写整洁的代码和保证长期的可读性与可维护性。
Experiment 3
实验3中,你需要选一个你之前自己做的项目并且用上文中提及的最佳实践去重构它们,从而保证你的代码更易读并且更简洁。掌握如何有效地重构代码是前端开发者的一个重要技能。当然,写出高质量的代码并非一蹴而就,而是需要一个长期的迭代过程,CSS Architectures: Refactor Your CSS这篇文章就是一个不错的学习起点。
当你决定要重构代码之前,你要先扪心自问以下几点
你的类名定义是不是模糊不清的,6个月之后你还能否明白你类名的意义。
你的HTML与CSS是否足够语义化,一眼望去是否就能明白你的代码架构与关系意义?
你是否N次的重复使用了相同的颜色代码,别忘了可以用Sass variable。
你的代码是否能够在Safari与Chrome都能正常运行?
能否用像Skeleton这样的网格框架来代替你自己的布局?
你是不是经常使用了
!important
?
Experiment 4
最后一个实验是一个大杂烩,把前面讲的所有知识都混杂起来。不过要知道的是,上面讲的很多最佳实践在一个草稿或者小型项目里难见分晓,只有在大项目里才能显露峥嵘。
因此,最后一个项目我是建议建立一个自己的作品剪辑网站,作为一个前端开发者,个人网站就是自己的电子名片。这里会展示你的作品与项目的积累,也是一个回溯你发展的进程与开发履历的地方。
可以参考Adham Dannaway的文章 My (Simple) Workflow To Design And Develop A Portfolio Website来从零开始。
Stay current
当HTML与CSS已经是小菜一碟,你就算是进入了前端开发者的殿堂,一个不断发生改变的地方。
这里推荐一些博客或者期刊,你可以随时关注:
CSSTricks
Smashing Magazine
Designer News
Nettuts+
CSS Wizard
Learn by example
最后,一般来说,最好的学习方式呢就是跟着例子来,这里再安利一波别人家的公司的样式与命名规范。
Styleguides
Mapbox
LonelyPlanet
SalesForce
MailChimp
Code Conventions
CSS Guidelines
Github internal CSS toolkit and guidelines
AirBnB’s CSS Styleguide
Further Reading
我的前端之路
百度前端训练营
[译] 前端攻略-从路人甲到英雄无敌相关推荐
- [译] 前端攻略-从路人甲到英雄无敌二:JavaScript 与不断演化的框架
本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part. 继续译者的废话,这篇文章是前端攻略-从路人甲到英雄无敌的下半部分,在上半篇中介绍了HTML与CS ...
- 前端攻略-从路人甲到英雄无敌
记得那年,我初学前端,遇见了很多的文章,在浩瀚的知识海洋里我手足无措,不知从何开始.己所不欲,勿施于人.这篇文章就会帮你去遨游前端学习的海洋,主要包含了在我之前的学习过程中整理的一些资源和一些感悟.我 ...
- 【前端攻略】最全面的水平垂直居中方案与flexbox布局
[前端攻略]最全面的水平垂直居中方案与flexbox布局 原文:[前端攻略]最全面的水平垂直居中方案与flexbox布局 最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定 ...
- 公众号 -「前端攻略 开光篇」
作为一枚程序员,每件重要项目的开始都忍不住使用"Hello World". 这个公众号是不是来晚了?如果你有这个疑问,那么我想说:对于写作和思考,任何时候都不晚.我用四个简单的自问 ...
- dota攻略(dota全部英雄装备合成和英雄打法)
收集整理到行业知识网关于dota全部英雄装备合成和英雄打法的所有攻略,希望给菜鸟一些提示和帮助 dota召唤师装备攻略 dota黑暗贤者装备攻略 dota不朽尸王装备攻略 dota深渊领主装备攻 ...
- 计算机 游戏攻略30,纸境英雄手游困难谜题第30关通关攻略 第30关过关步骤
困难谜题作为<纸境英雄>的附加玩法,也比较有趣,第30关是困难谜题的最后一关,那么这一关该怎么过呢?下面是困难谜题第30关通关攻略. 第30关攻略 齐心锻造→连携指挥→石衣剑术大师攻击鬼影 ...
- 计算机游戏手机攻略,云顶之弈无敌攻略,竟然是用手机玩出来的
原标题:云顶之弈无敌攻略,竟然是用手机玩出来的 话说最近游戏圈"吃鸡"已经降温,又有了"下棋",DOTA自走棋的风靡让腾讯看到了方向,于是"云顶之弈& ...
- Sentry异常监控方案部署-前端攻略
原文首发于我的个人博客: https://lonhon.top/ 凡事只要有可能出错,那就一定会出错 对于任何一个项目而言,本地测试肯定做不到100%覆盖,而且,我们也不能保证用户能按照我们的预期进行 ...
- 前端攻略系列(二) - 前端各种面试题
幸运且光荣的被老大安排了一个任务 - "去整理些前端面试题".年前确实不是招人的好时候,所以我们前端团队经过了超负荷的运转,终于坚持过了春节.春节以后就开始招人啦,这套题考察的目标 ...
最新文章
- CSS定位(postion)和移动(float)
- python ui自动化测试框架_Python自动化测试框架
- Bootstrap中的网格系统
- Hive UDAF开发
- USACO3.1.1最短网络
- PHP如何实现定时任务,PHP定时任务方法,最佳解决方案,PHP自动任务处理 自动备份
- mysql数据设置浮动_浮动float
- es中主分片和副本分片
- android textview显示表情,Android开发-TextView中显示QQ表情类的图片和超链接
- windows10应用商店下安装kali子系统
- wget 覆盖文件下载的技巧,绝对有效
- GoldWave教程分享:删除声道该怎么操作?
- C# 在wpf中如何使用image
- 【Python篇】拟牛顿法面面俱到(一)--牛顿插值法
- Confluence 6 管理协同编辑 - 代理和 SSL 的考虑
- HTC G7(Desire) Android 2.2 开启APP2SD最安全的方法(软件安装到SD卡)
- MongoDB---数据类型,集合操作
- 精简模式 大师 易水之畔 自动刷冒险任务 刷金币
- 我是怎么解决微信封了我们域名的
- 斑马ZM40条码打印机仅7K3