”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > Alura 的免费 HTML 和 CSS 挑战:构建 Netflix 副本

Alura 的免费 HTML 和 CSS 挑战:构建 Netflix 副本

发布于2024-11-08
浏览:590

7 天 HTML 和 CSS 代码是 Alura 为您提供的免费在线练习前端精髓的机会。

在 7 天的时间里,您将面临复制 Netflix 电影和剧集页面布局的挑战,应用从“div”、“section”等基本概念、CSS 中的图像内联和测量到更高级技术的所有内容例如 Flexbox 和 Grid。

这个项目旨在帮助您明确每个标签的语法并了解其功能,让您专注于解决问题。

最终,您将拥有更强大的作品集和更新的 GitHub,展示您的进步。 7 天 7 项挑战,这是将学习付诸实践、提高前端开发技能的绝佳机会。

7 天的 HTML 和 CSS 代码

HTML 和 CSS“7 Days of Code”是 Alura 为那些想要加深前端开发技能的人提供的免费在线机会。

Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix
活动页面图片

在 7 天里,您将面临复制 Netflix 电影和剧集页面布局的挑战,应用从基本概念到更高级技术的所有内容,这对任何开发人员来说都是必不可少的。

应用基本概念

在本次挑战中,您将使用“div”、“section”、图像内联以及 CSS 中的测量等基本概念。

将应用 Flexbox 和 Grid 等更先进的技术,以确保您掌握创建响应式和功能性布局所需的工具。

这个项目旨在帮助您明确每个标签的语法并理解它们的功能,让您专注于解决更复杂的问题。

开发您的作品集和 GitHub

在7天的紧张练习结束后,您不仅巩固了您在HTML和CSS方面的知识,而且还丰富了您的作品集,并用一个真实且具有挑战性的项目更新了您的GitHub。

这是将您的学习付诸实践并在就业市场上突显您的技能的绝佳机会。

挑战赛中涉及的内容

  • 第一天: 第一天,您将在 Figma 中看到页面布局,对其进行分析并使用它来创建 Netflix 页面的亮点横幅,此外还组织项目的基本结构。您可能会搞乱图像、按钮等的位置。
  • 第 2 天: 在这里您将开发导航菜单,也称为导航栏。在此部分中,您将看到页面菜单徽标以及搜索、通知和用户按钮。 Flexbox 知识将使您的生活变得更加轻松!
  • 第 3 天: 这可能是最重要的挑战,因为您将开始处理电影和系列曲目。您将创建“我的列表”栏,其中包含用户保存以供稍后观看的电影。您将能够运用您的网格知识。
  • 第 4 天: 在这一天,您将实现“High”轨迹,但当用户将鼠标移到某个项目的图像上时应用悬停动画。
  • 第五天:在这里您将继续玩轨道和动画。您将创建幻灯片效果,就好像您有一个电影/系列的轮播,当您单击导航箭头时会旋转。
  • 第6天:快要结束的时候,你将开发页脚,也称为页脚,你将有机会利用这几天学到的知识,让它看起来非常迷人。
  • 第 7 天: 在挑战的第七天也是最后一天,您将在互联网上免费发布您的页面,以便其他人可以访问它,并且它可以作为您的作品集。您将以蓬勃发展结束!

谁会挑战你?

目前在 Globoplay 技术团队工作的前端开发人员 Fernanda Degolin 将担任本次挑战赛的导师。

Fernanda 相信艺术和技术拥有改变世界的力量,并准备好指导您的学习和发展。

        Você pode gostar




                                Desafio De HTML E CSS Netflix

                        Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix 





                                Evento AWS Rumos

                        Evento Sobre AWS Gratuito Da Rumos: Boas Práticas De Segurança Na Cloud 





                                Bootcamp Java

                        Bootcamp De Java Com Spring Boot Gratuito Da DIO   Claro 





                                Lógica de Programação e Carreiras

                        Cursos De Lógica De Programação E Carreiras Em Tecnologia Gratuitos Da Estácio 

HTML 和 CSS

HTML(超文本标记语言)和 CSS(层叠样式表)是 Web 开发的基础。

HTML 负责页面的结构和内容,而 CSS 定义其视觉外观,包括布局、颜色、字体和其他设计方面。

它们一起可以创建可从任何浏览器访问的丰富的交互式网页。

HTML 的重要性

HTML 是用于构建网页内容的标记语言。它使用一系列标签来定义标题、段落、图像、链接等元素。

如果没有 HTML,就不可能在网页上以逻辑且易于理解的方式组织和显示内容。

它还允许包含元数据并优化搜索引擎,从而提高网站的可见性和性能。

CSS 如何改变网页

HTML 组织内容,CSS 负责表示。使用 CSS,您可以定义在整个页面或网站上一致应用的样式,从而确保具有凝聚力和吸引力的视觉体验。

CSS 允许您创建响应式布局,适应不同的屏幕尺寸,使网站可以在移动设备和桌面上访问。

Flexbox 和 Grid 等技术彻底改变了网页设计,提供了对元素定位和对齐的更好控制。

HTML 和 CSS 的集成

当 HTML 和 CSS 一起使用时,Web 开发的真正魔力就会发生。

通过将 HTML 的内容结构与 CSS 的视觉样式相结合,可以创建既实用又美观的网站。

这种集成使设计人员和开发人员能够共同努力创造引人入胜的用户体验,确保所有访问者都可以访问并吸引内容。

阿鲁拉

Alura 是一个在线教学平台,旨在实现高质量技术教育的民主化。

Alura 成立于巴西,因其提供广泛的课程而脱颖而出,这些课程专注于编程、设计、数字营销、数据等领域。

课程和教学方法的多样性

Alura 提供令人印象深刻的多样化课程,从基本介绍到编程,再到数据科学、网络开发、移动和市场上其他热门领域的高级培训。

平台采用实用的方法,通过真实的项目让学生立即学以致用。

社区和专业认可

Alura 最大的区别之一是活跃的学生和专业人士社区,他们积极参与论坛、活动和学习小组。

这个社区可以进行有价值的知识交流和网络交流,从而进一步丰富学习体验。

报名链接⬇️

必须在 Alura 网站上注册 7 天 HTML 和 CSS 代码。

分享和将理论付诸实践的机会!

您喜欢有关 HTML 和 CSS 挑战的内容吗?那就分享给大家吧!

Alura 的免费 HTML 和 CSS 挑战:开发 Netflix 副本这一帖子首先出现在 IT 指南上。

版本声明 本文转载于:https://dev.to/guiadeti/desafio-de-html-e-css-gratuito-da-alura-desenvolva-uma-replica-da-netflix-3fgm?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在 C++ 中使用虚拟模板方法实现多态性?
    如何在 C++ 中使用虚拟模板方法实现多态性?
    C 虚拟模板方法在 C 中,将静态时间多态性(模板)与运行时多态性结合起来可能具有挑战性。这在以下抽象类中很明显:class AbstractComputation { public: template <class T> virtual void setData...
    编程 发布于2024-11-08
  • 多线程:工程师的关键概念 - 第 1 部分
    多线程:工程师的关键概念 - 第 1 部分
    了解关键的多线程概念对于软件开发人员至关重要,因为它不仅可以增强技能,还可以直接影响应用程序开发、可扩展性和软件解决方案的整体质量。 原子性 在多线程上下文中,原子操作确保一个线程可以执行一系列操作而不会被其他线程中断。多个线程可能会尝试同时读取或写入共享数据。如果没有原子性,并发...
    编程 发布于2024-11-08
  • 后端开发路线图
    后端开发路线图
    对于所有有抱负的后端开发人员,我知道导航您的学习道路是多么令人畏惧。这就是为什么我很高兴能够提供详细的路线图来帮助您掌握用于后端开发的 JavaScript!? 1️⃣ 从基础开始:熟悉 JavaScript 基础知识。理解变量、函数和控制结构至关重要。 2️⃣ 深入了解 Node.js:这个强大的...
    编程 发布于2024-11-08
  • 如何在Go中调用Linux共享库函数?
    如何在Go中调用Linux共享库函数?
    在 Go 中调用 Linux 共享库函数在此问题中,开发人员寻求从共享对象 (.so) 调用函数的帮助他们的 Go 代码中的文件。 Python 中的 ctypes 包可以访问 C 函数,可以作为所需的功能。使用 cgo 进行静态共享库加载静态调用函数在编译时已知共享库,可以使用 cgo 包。以下是...
    编程 发布于2024-11-08
  • Java 中的字符串文字是否会被垃圾收集?
    Java 中的字符串文字是否会被垃圾收集?
    字符串文字的垃圾收集Q1:如果一个字符串在编译时被定义为文字(例如,String str = "java"),它会被垃圾收集吗?通常不会。代码对象包含对文字 String 对象的引用,使它们保持可访问性。垃圾回收仅在代码对象变得不可访问时发生。Q2:如果使用 intern 方法(...
    编程 发布于2024-11-08
  • 跨平台使用 RSA 加密和解密保护数据
    跨平台使用 RSA 加密和解密保护数据
    RSA加密简介 在当今的数字环境中,保护敏感数据对于个人和组织都至关重要。 RSA (Rivest-Shamir-Adleman) 加密作为保护数据的强大解决方案脱颖而出。它是一种非对称加密算法,这意味着它使用一对密钥:用于加密的公钥和用于解密的私钥。 RSA 加密的主要好处之一是...
    编程 发布于2024-11-08
  • 如何利用导师在数字营销中实现职业发展
    如何利用导师在数字营销中实现职业发展
    在当今快速发展的数字营销环境中,保持领先趋势并提高您的技能至关重要。加速该领域职业发展的最有效方法之一是利用指导。无论您是刚刚起步还是希望晋升为领导角色,数字营销导师都可以提供宝贵的指导和见解,帮助您实现职业目标。本文探讨了指导如何塑造您的职业轨迹,并提供了充分利用指导经验的策略。 ...
    编程 发布于2024-11-08
  • 将 Cloudinary 集成到 Next.js 应用程序中
    将 Cloudinary 集成到 Next.js 应用程序中
    了解 Cloudinary 及其定价。 1. 创建一个Cloudinary账户 如果您没有帐户,请在 Cloudinary 注册并创建一个新帐户。 2.安装Cloudinary SDK 您可以使用npm或yarn安装Cloudinary SDK: npm instal...
    编程 发布于2024-11-08
  • 我们如何在 CSS 中对后代元素进行分组?
    我们如何在 CSS 中对后代元素进行分组?
    用于后代分组的难以捉摸的 CSS 选择器虽然 CSS 为样式元素提供了强大的选项,但一个值得注意的缺失是轻松对后代进行分组的能力。当对 HTML 表格等复杂元素进行样式设计时,这种限制变得很明显,其中为列标题和单元格分配相同的样式需要繁琐的选择器。后代样式设计的困境考虑下面的表示例:<tabl...
    编程 发布于2024-11-08
  • ## 如何在 PHP 中可靠地确定目录是否为空?
    ## 如何在 PHP 中可靠地确定目录是否为空?
    在 PHP 中验证目录是否为空确定目录是否为空可能是各种 Web 开发场景中的一项重要任务。但是,某些脚本可能会遇到问题,即输出错误地建议空或非空目录,尽管其中存在或不存在文件。原始脚本提供的脚本尝试使用以下代码检查目录是否为空:$q = (count(glob("$dir/*"...
    编程 发布于2024-11-08
  • `&deployment` 指针如何实现 Kubernetes 中的 `runtime.Object` 接口?
    `&deployment` 指针如何实现 Kubernetes 中的 `runtime.Object` 接口?
    &deployment指针如何满足运行时对象接口在Kubernetes代码中,kubectl/run.go中的Generate函数返回包含runtime.Object 和错误的结果列表。函数最后一行,return &deployment, nil,将局部变量deployment的地址赋值给r...
    编程 发布于2024-11-08
  • 用于带或不带协议的 URL 匹配的通用正则表达式
    用于带或不带协议的 URL 匹配的通用正则表达式
    匹配带或不带协议的 URL 的正则表达式对于可能包含或不包含“http://www”前缀的 URL ,可以使用正则表达式来执行匹配操作。下面提供了详细的正则表达式模式:((https?|ftp)://)?([a-z0-9 !*(),;?&amp=$_.-] (:[a-z0-9 !*(),;?...
    编程 发布于2024-11-08
  • 如何防止 Foreach 循环输出中出现尾随逗号?
    如何防止 Foreach 循环输出中出现尾随逗号?
    消除 Foreach 循环中的尾随逗号在编程中,通常需要迭代项目列表并单独输出每个项目通过分隔符,例如逗号。但是,当使用 foreach 循环执行此任务时,您可能会遇到最后一项后面出现尾随逗号的问题。考虑以下 PHP 代码:foreach ($this->sinonimo as $s){ ...
    编程 发布于2024-11-08
  • LZ C++ React Native 绑定,实现极快的压缩算法
    LZ C++ React Native 绑定,实现极快的压缩算法
    我最近开始涉足 JSI 和 C,因此,我必须构建一个名为react-native-lz4 的小包。它是一个在 React Native 中使用 C 编写的 LZ4 算法进行快速文件压缩的​​库。 它仍处于实验阶段,因为我仍在完善错误处理并扩展其 API,但它已经可以使用(谨慎!) 包:https:/...
    编程 发布于2024-11-08
  • JVM GC 能像 Go 一样实现 1ms 以下的暂停吗?
    JVM GC 能像 Go 一样实现 1ms 以下的暂停吗?
    JVM 能否像 Go 一样将 GC 暂停时间减少到 1 毫秒以下?Go 编程语言拥有较低的 GC 暂停时间,通常低于 100 微秒。然而,Java 虚拟机 (JVM) 在实现类似性能方面面临着挑战。架构限制历史上,Go 和 Java 之间的架构差异影响了 GC 暂停时间.Go 的非压缩收集器: Go...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3