后端开发教程 - Java、Spring Boot 实战 - msg200.com
通过克隆这些网站掌握前端开发💻💯
更新
我克隆了其中一个网站！我已经很久没用纯 HTML、CSS 和 JS 搭建过网站了，所以我尝试了#14 Discord。结果就是这样。虽然不是最好的，但我工作速度很快！ 🤣
Discord 克隆
为什么要克隆网站？
前端开发与客户端息息相关，包括用户在 Web 浏览器上可以看到并进行交互的所有内容。
研究表明，如果网站在2秒内加载失败，用户就会离开。如果网站设计不符合现代设计和潮流，您认为用户会作何反应？
话虽如此，设计与所有在后台进行的前端编程同样重要。毕竟，开发人员的任务始终是将专业的设计融入到可运行的网站上。这是前端开发人员武器库中非常重要的一部分。好好掌握它吧！
目标
通过克隆尽可能相同的网站来掌握这项前端技能。
尝试融入一些功能，例如模态框和下拉菜单。并加入响应式设计，例如移动导航和网格。
下面列出的所有网站都很相似，但又有一定的差异，从而形成了不同的设计理念。例如，大多数网站都具备以下特点：
- 大型主页横幅
- 大块设计
- 反转网格列
- 整页或半页菜单
- 粘性或绝对定位导航
- 画廊
- 下拉菜单/手风琴
- 淡入淡出或类型效果等小动画
- 两个网格列
- 响应式设计等等！
提示：你还可以使用网页爬虫下载网站上找到的所有资源。Extract
Pics
图片下载器
额外福利🔥
如果你想完全使用 leet 模式，请添加 JavaScript 功能。例如路由、动态内容、第三方 API（例如 Google 地图）等。
⚠️ 如果您将项目推送到网络上，请确保不要将您的设计或资产声明为您自己的！
供您克隆的网站！
1.Netflix
登录 Netflix 后，界面设计相当简洁。水平排列，画廊，还有一个巨大的特色横幅。
2. Hulu
与 Netflix 一样，Hulu 的登录体验也非常相似。它有一个很大的推荐横幅，基本上是一排排的电影或电视节目，每隔几行就有一个推荐部分。
3.苹果
你会明白我所说的“大块”设计是什么意思。苹果在这方面做得很好。它简洁、直观，而且非常直接。如果你把所有东西分解成更小的组件，你就会发现实现这种设计是多么容易。
4. Airbnb
Airbnb 的网站真是漂亮极了！素材也棒极了。把这个设计拆成更小的组件，你就会发现它其实就是一堆大大小小的行。这些块要么跨越多列，要么占据整行。
5.SpaceX
超级简单的设计。SpaceX 基本上是多个全屏图像，内容淡入淡出，并带有链接部分。
6.英伟达
另一个简单但看起来很专业的设计。只有一个横幅、网格布局和行。
7.雷蛇
大型首页横幅、全页精选栏目和大方框设计的完美结合。尽情享受这炫酷的配色方案吧！
8. Salesforce
另一个很棒的网站，可以提升你的 CSS 技能。它融合了横幅、行、列、反向列和大盒子设计，还包含特色列表、多个行动号召和有趣的图片。
9. Adobe
又一个大盒子设计。但也有一些很酷的背景渐变。
10.微软
拥有模态框、大横幅、多个精选版块和醒目的行动号召。设计简洁直观，却又不失专业感。
11.区块链
复制这个设计的同时，也学习一下区块链。这个设计融合了一些比较难的设计理念。它还包含一个大横幅、行动号召、渐变效果，还采用了大方框设计作为链接，并加入了动态折叠面板。所以，折叠面板标签页不仅可以在下方显示更多内容，还能改变旁边的图片！你可能已经找到了合适的工具来做这件事了🤔
12.贝宝
以大横幅、行动号召和反向行布局为特色。设计简洁明了，却效果显著。
13. Slack
Slack 的主页横幅设计得很有趣。横幅中包含一个提示横幅、一个行动号召、一个 Google 登录按钮，以及一排展示使用 Slack 公司的图标。其余布局采用简单的网格系统，并采用典型的反向行设计。动画效果极简，例如悬停效果。
14. Discord
这可能是我在这个列表中最喜欢的网站。它色彩鲜艳有趣，首页横幅简洁，带有行动号召，采用反向行网格布局，还有一个漂亮的大功能区。
15.亚马逊
电商之王。这是一款纯粹的“炫耀”模型。如果你能驾驭亚马逊的设计，你的前端开发设计技能就达到了行业标准。它采用略微复杂的网格布局，内容跨越一行或多列。导航栏中有一个搜索栏。此外，它还具有推荐区、悬停效果、轮播等功能。尽情享受这个庞然大物吧！
16.PlayStation
Playstation.com 有一个漂亮的大型主页横幅，其中包含带有淡入淡出效果的幻灯片。你可以从零开始编写代码，也可以使用你最喜欢的库。克隆网站真的会让你思考你的工具。它还具有单行画廊、大型特色横幅、点击动态内容、多个全屏行动号召以及一些小动画。这可能是我第二喜欢的网站了。我非常喜欢它精妙的动画和用户界面。它还能帮助你完善各种设计理念。
17.任天堂
啊啊啊，童年的回忆！嗯，有点像世嘉玩家的回忆。不过我跑题了！任天堂官网的主页横幅色彩鲜艳，下方有一个简洁的行动号召。它有一个连续滚动的单行画廊，这是新加入的。所以这能给你提供一些很好的练习机会。同样，你可以用库来做这件事，这样你就不用每次都重新设计轮子了。除此之外，它还有简洁的大方格网格设计和单行画廊。单行画廊可以帮助你练习“快速收藏”项目。
结论！😎
这就是“通过克隆这些网站💻掌握前端开发💻 ”的总结。我坚信克隆一个或多个这样的网站将显著提升你的CSS。克隆网站需要大量的分析思维，因为你要将设计从大到小分解成多个组件。在处理新问题时，你还需要思考最佳的工具。此外，还有响应式设计。移动优先还是桌面优先？例如，你认为Microsoft.com应该优先考虑桌面体验还是移动体验？如果由我决定，我认为大多数人会等到能够使用桌面设备后再购买台式机和笔记本电脑等大型设备。因此，我可能会优先考虑桌面设备。这是前端开发人员工作的重要组成部分！无论你是自由职业者还是公司员工，设计要么由你决定，要么由专业设计师负责。掌握前端开发的这一部分！
在Twitter上关注我
用于字节大小的 Web 开发内容！
