前者攻略-从旁观者甲到英雄无敌

记得那年,我初学前端,遇见了众多底章,在万顷的知识海洋里自己惊慌失措,不知从乌开始。己所未需要,勿施于人。这首文章就是见面协助您失去旅游前端学习的深海,主要含有了当自己事先的修过程遭到整理的部分资源同片觉醒。我打算用整篇文章切分为零星片段,第一片段老生常谈HTML与CSS的基本知识,第二组成部分包括JavaScript、前端框架和设计模式。

HTML 与 CSS基础

前端的小圈子里,任何东西还去不起HTML 与 CSS。HTML与CSS基本上控制了而看看的所有东西,HTML用来定义内容而CSS负责样式和布局。

图片 1

首先从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的骨干用,下面我们设学以致用了。这等同组成部分就统筹了点滴单稍实验来叫您自己下手构建网站和界面。我是管其形容成实验,所以并非惧怕砸。

首先单试验里,我们因此的是CodePen,一个在线的HTML与CSS实验台。同时为提供了实时预览功能,一石二鸟呦。好了,下面我们要省我们开的界面的原型了,转至 Dribbble吧,
这嘎达可净是规划创意啊。
我是情有独钟了是系列:1, 2, 3, 4,
以及 5.。我选了一个运动优先的筹划是为与桌面设计相比还简便易行一点,不过你吗可以团结找一个。

图片 2

在公选定了统筹后,就足以以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

再强调下,实验二的目的并无是深受你错过重构整个页面,而是清楚怎么去分割组件和人家是怎开的。如果您从未设计之背景,可能你若过得硬发掘下您的潜能了。一个不错的前端开发者如果能够分辨好之筹划然后到地重现她。

图片 3

君得选取在线编程: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定一个得体的类名。好之命名习惯,譬如语义化的记号,可以还好地传达含义,让代码的可读性和可维护性大大增加。

完来说,我之提议是随即你的直觉来规定命名习惯,随着时空之腾飞而会觉得这样看起来非常爽快。如果您要是看好店,譬如Medium是怎行BEM这样的命名规范之,可以阅读 Medium’s
CSS is actually pretty f***ing
good即篇稿子,在此而会学到怎么在一个飞迭代地景下也保障您的实用地CSS命名习惯。

CSS Reset

不等的浏览器在譬如margin以及line-height这些不怎么之样式点之间是着一些不一致性,因此你要学会重置你的CSS环境。 MeyerWeb 就是一个常见的重置手段。

Cross Browser Support

超越浏览器支持表示你的代码要去支撑多边底现世浏览器,一些广泛的CSS属性,譬如 transition 需要 vendor
prefixes 来运行于不同之浏览器被。你可在 CSS
Vendor
Prefixes这首文章里抱更多之知识。这虽意味着你要花费还多的年华来当不同之浏览器中展开测试。

图片 4

翻看CSS的史,自90年代以来,CSS走过了平等段子老而崎岖的道路。整个UI系统变得渐渐复杂,人们呢会失掉选用有预处理器或者后电脑来治本这种复杂。CSS的预处理器或者CSS语言的扩张会在无声无息中提供类似于变量、Mixins以及连续这些特色。最紧要的有限独CSS的预处理器就是Sass 与 Less。2016年被Sass被进一步广泛地动,著名的响应式框架BootStrap就是起Less迁移到了Sass。另外,很多人谈话到SASS的时吧会干Scss。

图片 5

CSS后电脑则对此手写的CSS文件要经预编译的CSS文件进行部分甩卖,以老牌的PostCSS 为条例,它来一个插件可以帮忙您活动地抬高一些渲染前缀。
当你点了CSS的先处理与后电脑之后,你会把她提升到日常伴侣的。不过,过犹不与,像变量和Mixins这些特色不可知滥用啊,还是该在恰当的地方用。

Grid Systems and Responsiveness

网格系统就是用来水平或垂直地排布元素的CSS架构。

图片 6

老牌的网格框架来Bootstrap, Skeleton,
以及 Foundation,它们提供了用来在布局中开展排管理的样式表。这些框架用起颇方便,不过我们啊是要是明网格的干活原理,推荐看Understanding
CSS Grid
Systems 以及 Don’t
Overthink Grids。

网格系统外一个靶即凡是若的网站有响应式特性。响应式意味着你的网站可以依据屏幕的高低来动态调整而网站大小与布局。很多时刻这响应式特性还是依据CSS
media queries,
即根据不同的屏幕尺寸选用不同之CSS样式规则。

图片 7

此外,因为我们正拓展相同集所谓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立马首文章就是一个科学的读书起点。

图片 8

当您决定使重构代码之前,你如果优先扪心自问以下几点:

  • 公的类名定义是休是歪曲不穷的,6个月下您还能否理解若类名的意义。

  • 若的HTML与CSS是否足够语义化,一眼为去是否就可知知道你的代码架构和涉及意义?

  • 君是不是N次的重复使用了同样的颜色代码,别忘了可以就此Sass
    variable。

  • 您的代码是否会以Safari与Chrome都能健康运转?

  • 能否因此像Skeleton如此这般的网格框架来替代你协调的布局?

  • 卿是免是常常使用了!important
    ?

Experiment 4
最终一个试是一个好杂烩,把前面说的具有知识都混杂起来。不过若是知道之是,上面说的群顶尖级实践以一个文稿或者小型项目里难以显现分晓,只有在深种类里才会发峥嵘。
用,最后一个门类自是建议成立一个团结之著述剪辑网站,作为一个前端开发者,个人网站就是投机之电子名片。这里会展示你的著作暨品种之聚积,也是一个回忆你提高的过程和支出履历的地方。

图片 9

得参见Adham Dannaway的篇章 My (Simple) Workflow To Design And Develop
A Portfolio
Website来从零开始。
Stay current
当HTML与CSS已经是小菜一碟,你尽管终于进入了前端开发者的佛殿,一个不停产生变更的地方。

图片 10

【有一个前端学习交流QQ群:328058344
 如果你当读书前端的进程被碰到什么问题,欢迎来自己的QQ群提问,群里每天还会更新一些学学资源。禁止闲聊,非喜不进。】

相关文章