如何快速入门前端开发,你只需要这4步

256 阅读7分钟

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框架,更趋近于原生的编程体验,它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型,比较适合高度定制化的项目。

4.开始你的工作

在开发过程中:当您编写组成web页面的代码时,您可能希望看到它的运行情况,以便您能够看到哪些工作,哪些不工作,以及哪些可以更好地执行。虽然可以实时完成,但强烈建议使用本地服务器,因为这样可以将风险降到最低。

本地服务器是位于计算机上的一个软件集合,它允许你查看和进行网页交互,就像你在互联网上一样。

开发后:一旦完成(或大部分完成)站点,就可以将其从本地服务器迁移到实际服务器上了。这意味着需要支付服务器费用,购买域名,并使用FTP客户端将所有相关文件传输到服务器。一旦完成,世界上任何人都可以去你的网站,看到你的工作成果。

一些流行的托管站点是:WordPress、WIX、GoDaddy,BlueHost,InMotion和HostGator。你可以在此处研究可用的域名,然后在此处购买。如果您想尝试崭新的事物,请查看Google Domains,它目前处于测试阶段。

本文使用 mdnice 排版