一起自学前端开发!

零基础开始学 Web 前端开发,有什么建议吗?

来源:知乎    更新时间:2017-08-09 14:04:04    编辑:子珂    浏览:1211

作者:子珂

链接:https://www.zhihu.com/question/19637373/answer/64621143
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

====================================
0基础怎样开始学习做网站?

目标读者:完全0基础的人,Rails Girls,想了解技术的同学,产品新人


大多数教学, 都太有条理了。先讲概念, HTML是什么,CSS是什么,HTTP请求是什么....但是一次性听到这么多陌生的概念,很容易晕的。过于抽象了,所以试着写一篇以例子为导向,而不是以概念为导向的介绍,来帮助大家入门Ruby on Rails


Ruby on Rails是做什么的?做网站的,你知道什么是网站(淘宝,知乎..),Rails能做这些,就行了


1. 网站->网页->按钮

我们要做的是什么?是网站,那么就直接以知乎为例好了

4.jpg

这样一个网站,是怎么和“代码”,Rails联系起来的呢?

这个太复杂了,我们不如只看他的首页(上图)

就拿这个页面来说,他是有3部分构成的,HTML,CSS,JS。不过这样说,依然没有什么用

我们只拿出其中的一个按钮,来解释这个概念

width="304">5.jpg

我应该怎么来写代码,来实现这个按钮?

这个时候,就要用到HTML了,代码如此:

< button class="sign-button submit" type="submit">注册知乎</button>

写好以后,生成的就是按钮了(如图)

"靠,可是这也差得太远了吧?这两个怎么能是一个东西呢!!",你可能会想

但是他的功能,是不是都是一样的呢?(就是点击)

这个时候,就用到CSS了。(不要在意代码具体什么意思,知道这是CSS就行了)


(至于JS,可以以后再说)

上 面想说的就是,我们看到的网页,都是用HTML,CSS,JS写的:HTML来说明这个内容是什么,CSS来让这个内容变好看(How it looks)。这里说的是按钮,其实,网页上的所有这些文字,标题等等都是这样,都是HTML+CSS+JS写的,如下图的头像,链接等等


再举个例子,上面的指向某个问题的链接

纯粹的HTML,以及加上CSS来改变他的样子之后


小结一下,上面介绍了什么是HTML,CSS,(JS)

[如果有任何问题,可以直接提问]


2. 难道要重复写很多遍吗?

再看知乎里面的“发现”页面,一条一条的“回答”

这些“回答“的结构,都是相似的。那是不是,我们的代码就要这样一条一条的写下去呢...?


显然,这太麻烦了,所以要用到循环,也就是用编程语言(e.g. Ruby)来做 (e.g for loop )

或者,想根据用户登录/未登录的状态,来调整页面的内容



这里,知乎对于未登录的用户,会有登录的按钮;登录的用户,则显示消息,头像等等。这就用到了编程的东西(if else判断)

[if else, for loop,这些应该还能理解吧?]


3. 怎么实现注册功能?

上面,我们讲到了看到的网站是如何由代码构成的


不过,写到这里,你可能还在想,这不拖拖拽拽就行了吗?e.g. Dreamwaver, front page等软件


确实如此。


不过,我们怎么实现“用户注册”的功能呢?


这个时候,就不仅仅是”循环“、”判断“了。显然,这时候,要涉及到更多更为复杂的逻辑。这个时候,就要用到Rails了,我们要用他来实现——注册、登录的功能,发帖的功能,提问的功能,点赞的功能等等等。


所以,Rails(PHP, Python等等)就是用来实现这些“功能的”。这里不再举例子了,因为太复杂,只提几个问题,让大家思考一下,拿论坛发帖子来说:


我们怎么实现“创建”一个帖子的功能?又怎么“修改”,怎么“删除”


这下,应该能感到这些功能的复杂了。不过,现在依然不用深究,只要知道Rails是用来处理这些复杂逻辑的东西,就行了(此外,我们有这么多用户的数据,帖子的数据,点赞的数据,就又牵扯到数据库了)。


4.  小结

到这里,我们主要介绍了:

(1) 什么是HTML + CSS +JS (显示网页)

(2) 什么是Ruby on Rails (复杂的逻辑功能)

前面的,就是我们所说的前端,后者,就是常称的后端


如果你下次还有疑问的话,不妨顺着这个思路理一理:

(1) “网页是由什么构成的?”

(2) “怎么实现注册的过程?”

(3) “网站上有这么多数据,怎么保存?”


“可是我想要设计一个很漂亮的网站诶.....”,那个是设计师做的


对于一个网页来说,设计师决定这个按钮的颜色,阴影,怎样才好看

前端工程师(HTML CSS JS),来负责用代码实现这些东西(写具体的代码)

比如设计师说,希望这个按钮是蓝色的,那么工程师就根据这个要求写具体的代码:

button {color:blue}

对于小的创业团队来说,可能最开始就直接写代码做完了,不会有专职的设计师


5. 那么,我接下来该怎么学习Rails呢?

好了,写到这里,应该基本了解什么是Rails了(其实主要介绍的是前端),接下来的问题可能就是:那我应该怎么学会Rails,来自己做网站呢?

不过我先写这么多了,如果有足够的人需要的话,再继续写吧


注:原标题为Rails in Plain Language,即用浅显的语言,告诉准备学习Rails的同学们,Rails到底是什么。不过本文实际上并没有谈到Rails是什么,更多的写的是前端。因为大多数0基础的同学,并不理解这些,所以先了解一下,我觉得会有帮助。

评论区

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

相关内容

点击排行

随机新闻

评论排行榜