我应该学习或做些什么来构建像 Behance 和 Dribbble 这样的网站?

哇。对于初学者来说,这些网站是动态的和数据库驱动的,因此需要最少的 PHP 和 mySql 知识(除了通常的 HTML5、CSS(3) 和 jQuery)。在查看他们的代码时,我发现这两个网站都在使用自制代码(不是某些模板资源),而且他们可能都有一个完整的开发团队(甚至是部门)为此。自己制作一个等价物将是……令人生畏的。
但是,您在哪里可以学习做到这一点?最好的起点和以后用作参考的地方是
W3学校
.但是你是初学者吗?
拿起 Python 和一个框架,无论是 Flask 还是 Django,然后开始逐步设置它。在您知道您有一个具有类似功能的网站之前。
前端也使用引导程序。
或者,如果您真的想要,您可以付给我 10,000 美元,我会在接下来的 6-8 个月内为您完成。 😉
首先,您需要了解 HTML5 和 CSS3。这两个是任何网站或网络应用程序的基础。
HTML(超文本标记语言)
在设计网站的布局和结构时,HTML 至关重要。如果没有 HTML,您的网站将看起来像用记事本编写的纯文档。 HTML 有助于安排内容,基本上是您希望在网站上显示的位置和内容。
CSS(层叠样式表)
CSS对于设计网站至关重要。仅 HTML 的网站可能就足够了,但它不会令人愉快。如果没有 CSS,您的网站可能看起来像是建于 80 年代。 CSS 还可以帮助您进一步安排布局和结构,因为仅使用 HTML 无法实现某些布局或结构。 CSS 还允许您的网站具有响应性(根据设备类型或显示尺寸调整大小和更改布局)
这两个是任何网站或网络应用程序前端的基础。前端基本上是指用户与之交互的网站或网络应用程序的界面。 (例如:按钮、导航栏)。虽然这两个可能足以建立一个网站,但您的网站可能没有足够的交互性。在这种情况下,您可能希望将 Javascript 合并到您的网站中。
JS (Javascript)
Javascript 是一种编程语言,主要用于构建网站的前端部分(或者至少在 NodeJS 流行之前已经习惯了)。 Javascript 可以与 HTML 和 CSS 齐头并进,使您的网站更具交互性。虽然 CSS 可以处理诸如 Hover 事件之类的事件,但这还不够。借助 Javascript,您可以做更多事情,尤其是借助 Javascript 的事件侦听器,它可以检测事件(即:鼠标单击、鼠标滚动、键盘按下等)并对其进行处理。您甚至可以使用 Javascript 来进行输入验证,这基本上是为了调整用户输入,检查输入是否包含不可接受的内容(危险的“黑客”代码),或者确保在提交之前填写您网站上的某些表单。
当时 jQuery 是著名的 Javascript 库之一,因为它包含在网站的各个方面。 (UI 设计、UI 交互性、动画等)。但如今,大多数人使用 React、Vue 和 Angular 等前端库。还有其他前端 Javascript 库,但这三个是最著名和广泛使用的。 React 和 Vue 相对更容易学习,而 Angular 有一种陡峭的学习曲线。但是,如果您要使用它们,请坚持使用其中之一并尝试“掌握”它。没有必要跳框架,因为它是徒劳的,而且它们都做同样的事情。
一旦你完成了前端,是时候向你介绍后端开发了。那里有大约 700 种编程语言。其中大部分可用于后端开发。在 Javascript 运行时环境 NodeJS 的帮助下,现在甚至 Javascript 也被用于后端。您可以自由选择要使用的任何语言。
但是,既然你问的是构建类似于 Dribbble 和 Behance 的东西,我想你可能想确切地知道它们使用什么。根据名为 Wappalyzer 的浏览器扩展提供的信息,我发现:
Dribbble 使用 Ruby 脚本语言作为他们的后端语言,使用 Ruby on Rails 作为他们的 Web 框架。 Ruby 相对容易学习,因为它是一种类似于 Python 的脚本语言。与 C++ 等编译型编程语言相比,该语法对初学者非常友好。由于它是一种脚本语言,它使用解释器而不是编译器,给您更多的自由和更少的麻烦,因为您不必像使用 C++ 之类的语言那样对每一个细节(即:内存管理、指针等)进行微观管理。
然而,Wappalyzer 没有在 Behance 上检测到任何语言,但它确实检测到 Behance 使用了 Vue、webpack 和 jQuery。由于浏览器扩展没有提及它们用于后端的内容,因此您必须自己决定使用什么。
以下是一些常用的后端语言及其著名的框架:
PHP
框架:Laravel
Python
框架:DJango、Flask
Javascript
框架:Express(Javascript 有大量的框架,Express 非常有名并被广泛使用,我会推荐 Express 而不是其他框架,但这完全取决于你)
爪哇
框架:春天
C#
框架:.NET
一旦你决定了使用什么语言和框架,你还需要决定如何存储你的数据,为此,你需要一个数据库或某种数据存储。那里有各种类型的数据库,但这两种是最常用的。
关系型数据库
关系数据库以表的形式存储数据。在表中,有属性列(什么样的数据),以及这些属性值的行。关系数据库使用结构化查询语言 (SQL)(大多数人将其发音为 Sequel)来读取、写入和修改数据库中的数据。
关系数据库管理系统示例:MySQL、PostgreSQL、Oracle DB2
NoSQL 和面向对象的数据库
NoSQL 和面向对象的数据库以对象的形式存储数据(显然)。 NoSQL 顾名思义,它不使用 SQL。 NoSQL 数据库通常使用 Javascript Object Notation (JSON)(也被一些人称为 Jason)。
使用 NoSQL/面向对象方法的数据库示例:Firebase Firestore、MongoDB
下一步是将前端和后端连接在一起,以便它们可以通信(相互传输和请求数据)。您可能还想了解如何构建应用程序编程接口 (API)。您的网站可能需要也可能不需要 API,具体取决于您使用的语言和框架以及您构建网站的方式。
希望这可以帮助。如果我的回答有任何错误、不准确之处,请随时分享解决方案或在评论中指出错误。 TIA。 😀