1. 建设工作环境
你能够把你的工作环境看作是办公室的延长。它就像一个虚构的桌子,外面有各种各样的工具,能够让你的代码运行起来。
以下是老手必备
代码编辑器: 代码编辑器,如 Sublime Text、Brackets 和 notepad++,相似于一般的新式纸质笔记本,你能够输出任何你想要的货色。
实践上,能够应用惯例的文本编辑器,如 notepad (Windows)或 TextEdit (OS X),然而一 些代码编辑器的代码着色、主动实现和实时预览等个性能够使编码更容易、更具交互性。
框架: 框架是代码、组件和款式的汇合,它们使生成 web 应用程序变得绝对疾速和容易。有像 Bootstrap 和 Foundation 这样的 CSS 框架,也有像 AngularJS 和 React 这样的 JavaScript 框架。
CSS 框架实质上是预约义款式和 web 组件 (如导航条、页脚、卡片、排版元素和网格) 的库。avaScript 框架相似,但它们能够满足特定于 JavaScript 的需要。稍后将进一步介绍 CSS 和 JavaScript。
ResetCSS: ResetCSS 就像 Eric Meyer, HTML5 Docto 和 Yahoo! 是一个蕴含一组标准化 CSS 款式的文件,这些款式被认为是最佳实际,并为页面提供了统一的外观基准。通常由 ResetCSS 批改的款式与行高、字体和题目大小、边框间距、列表款式等元素相干。
CMS:内容管理系统是一套复杂程度不同的套件,网站管理员能够轻松地上载,批改和治理其网站上的内容 / 资产。随着网站内容的减少,CMS 会让你的工作变得更加简略
风行的 CMS 包含:WordPress、Joomla、Drupal、Magento 和 Shopify。后两者是非常适合于电子商务网站的 CMSs。事实上,你能够在 Magento 和 Shopify 的可用性比拟中理解更多。
FTP 客户端:文件传输协定 (FTPs) 容许在的计算机和 web 服务器之间传输文件。当你摸索 web 开发的世界时,毫无疑问,你须要向服务器传输大量的文件,从你的 HTML、CSS 和 JS 文件开始,到你的图片、音乐或任何你心愿提供给访问者的货色完结。
一些风行的 FTP 客户端有:CyberDuck, Filezilla 和 transmission。
浏览器 : 这仿佛是一个愚昧的时刻,然而您对浏览器的抉择能够决定你最终产品的很多方面。例如,Mozilla 曾经在其 Firefox Developer Edition (FDE) 浏览器中构建了一个优良的开发套件。
Chrome、Firefox 和 Edge 都内置了相似的工具(只管不那么强壮)。开发工具能够帮忙查看在其余站点上应用的代码,调试代码,编辑款式,测试响应等等。
2. 理解这些理论知识
响应式设计:web 设计和开发中最热门的话题之一是响应式 web 设计(RWD),它指的是设置屏幕大小的门路点,通知页面默认为更适宜给定大小的特定布局。RWD 的崛起源于停滞不前的网页设计,它根植于无奈响应浏览器宽度变动的固定页面布局。新的实际容许对可用性进行优化,这超出了应用固定设计模型能够实现的范畴。
挪动优先: 挪动优先是古代网页设计的准则,与响应式网页设计密切相关。Mobile first 倡议你应该先设计你的页面的挪动布局,而后再设计每个更大的格局。
从实践上讲,通过遵循“挪动优先”的办法,能够使移动用户(占总用户数量十分大)的体验更加敌对。传统上,随着屏幕尺寸变小,网站会按性能和内容放大规模。然而,随着这些年来移动用户数量的微小增长,这已成为寰球设计师的次要关注点。
MVP:只管它们在 B2B 中比在集体我的项目中更重要,然而 MVP(最低可行产品)构建是必不可少的术语。MVP 背地的想法是,你仅构建必须的性能,而防止了能够为第二个版本保留的性能。
作为一个 web 开发老手,倡议在学习的同时施行这个策略。通过构建您想要的最根本的版本,你将有机会摸索外围概念和策略,而不会受到简单性能。随着你对开发、设计语言和其余相干准则的逐步相熟,你可能会想避开 MVP 构建并摸索新的信念。
3. 开始应用这些语言
Web 开发以三种外围语言为根基,它们简直涵盖了您在 internet 上看到和应用的所有内容。独自应用时,HTML、CSS 和 JavaScript 简直毫无用处。当彼此联合应用时,咱们能够看到有限的可能。
HTML: 作为一种标记语言,HTML 负责网页上文本的流程和构造,并提供了一个零碎,用于标记该文本,以便应用 CSS 进一步加强。
CSS: 层叠样式表负责形容和定义标记为 HTML 的文本的视觉方面。应用 CSS,你能够定义色彩,大小,布局,动画等等。
JavaScript: 这是目前最风行和倒退最快的网络语言之一。JavaScript 次要用于向 web 元素增加交互性。这种可能性实际上是有限的。
除此之外,能够应用 APICloud Studio、AVM 框架、Foundation,Bootstrap 和 Skeleton 之类的框架来补充学习内容,这些框架为你提供了预构建的模块,供你随便应用。
APICloud Studio 是一个全流程的开发工具,基于业界当先的代码编辑器 -Vscode 深度定制,能够疾速构建多端利用,面向 Android、iOS、Web、App、小程序打造利用, 都能够疾速编译对应终端的代码。能够无效的解决开发者多端开发这个让人头疼的问题。
APICloud Studio 试用地址
语法框架当初也很多,随着对于前端开发工作的相熟深刻,也会造成本人的一套理论体系
后面说到的 AVM 是一个跨端的高性能 JavaScript 框架,更趋近于原生的编程体验,它提供简洁的模型来拆散利用的用户界面、业务逻辑和数据模型,比拟适宜高度定制化的我的项目。
AVM 框架应用地址
4. 开始你的工作
在开发过程中: 当您编写组成 web 页面的代码时,您可能心愿看到它的运行状况,以便您可能看到哪些工作,哪些不工作,以及哪些能够更好地执行。尽管能够实时实现,但强烈建议应用本地服务器,因为这样能够将危险降到最低。
本地服务器是位于计算机上的一个软件汇合,它容许你查看和进行网页交互,就像你在互联网上一样。
开发后:一旦实现 (或大部分实现) 站点,就能够将其从本地服务器迁徙到理论服务器上了。这意味着须要领取服务器费用,购买域名,并应用 FTP 客户端将所有相干文件传输到服务器。一旦实现,世界上任何人都能够去你的网站,看到你的工作成绩。
一些风行的托管站点是:WordPress、WIX、GoDaddy,BlueHost,InMotion 和 HostGator。你能够在此处钻研可用的域名,而后在此处购买。如果您想尝试簇新的事物,请查看 Google Domains,它目前处于测试阶段。