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

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

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

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]删除
最新教程 更多>
  • 如何使用FormData()处理多个文件上传?
    如何使用FormData()处理多个文件上传?
    )处理多个文件输入时,通常需要处理多个文件上传时,通常是必要的。 The fd.append("fileToUpload[]", files[x]); method can be used for this purpose, allowing you to send multi...
    编程 发布于2025-04-20
  • 如何使用不同数量列的联合数据库表?
    如何使用不同数量列的联合数据库表?
    合并列数不同的表 当尝试合并列数不同的数据库表时,可能会遇到挑战。一种直接的方法是在列数较少的表中,为缺失的列追加空值。 例如,考虑两个表,表 A 和表 B,其中表 A 的列数多于表 B。为了合并这些表,同时处理表 B 中缺失的列,请按照以下步骤操作: 确定表 B 中缺失的列,并将它们添加到表的末...
    编程 发布于2025-04-20
  • Go语言垃圾回收如何处理切片内存?
    Go语言垃圾回收如何处理切片内存?
    在Go Slices中的垃圾收集:详细的分析在GO中,Slice是一个动态数组,引用了基础阵列。使用切片时,了解垃圾收集行为至关重要,以避免潜在的内存泄漏。考虑使用slice使用slice的以下实现:字符串{ R:=(*Q)[0] *q =(*q)[1:len(*q)] 返回...
    编程 发布于2025-04-20
  • 如何干净地删除匿名JavaScript事件处理程序?
    如何干净地删除匿名JavaScript事件处理程序?
    删除匿名事件侦听器将匿名事件侦听器添加到元素中会提供灵活性和简单性,但是当要删除它们时,可以构成挑战,而无需替换元素本身就可以替换一个问题。 element? element.addeventlistener(event,function(){/在这里工作/},false); 要解决此问题,请考虑...
    编程 发布于2025-04-20
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中检索一个随机项目,利用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-04-20
  • 在所有浏览器中实现左对齐文本的斜线方法
    在所有浏览器中实现左对齐文本的斜线方法
    ] 在倾斜行上的文本对齐背景在倾斜行上实现左对齐的文本可能会构成挑战,在nectera时尤其是挑战。兼容性(返回IE9)。通过引入一系列平方元素并计算其尺寸,我们可以创建一个有效的解决方案: .loop(@i) when (@i > 0){ .loop((@i - 1...
    编程 发布于2025-04-20
  • 在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8 MySQL表中正确将Latin1字符转换为UTF8的方法
    在UTF8表中将latin1字符转换为utf8 ,您遇到了一个问题,其中含义的字符(例如,“jáuòiñe”)在utf8 table tabled tablesset中被extect(例如,“致电。为了解决此问题,您正在尝试使用“ mb_convert_encoding”和“ iconv”转换受...
    编程 发布于2025-04-20
  • 您如何在Laravel Blade模板中定义变量?
    您如何在Laravel Blade模板中定义变量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配变量对于存储以后使用的数据至关重要。在使用“ {{}}”分配变量的同时,它可能并不总是最优雅的解决方案。幸运的是,Blade通过@php Directive提供了更优雅的方法: $ old_section =“...
    编程 发布于2025-04-20
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-04-20
  • 在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...
    编程 发布于2025-04-20
  • 在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在JTable中维护jtable单元格渲染后,在JTable中,在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是,至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列,用户遇到的数字格式丢失的“价格”列的“价格”之后,问题在设置自定义单元格...
    编程 发布于2025-04-20
  • 为什么尽管有效代码,为什么在PHP中捕获输入?
    为什么尽管有效代码,为什么在PHP中捕获输入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,输出...
    编程 发布于2025-04-20
  • 在JavaScript中如何并发运行异步操作并正确处理错误?
    在JavaScript中如何并发运行异步操作并正确处理错误?
    同意操作execution 在执行asynchronous操作时,相关的代码段落会遇到一个问题,当执行asynchronous操作:此实现在启动下一个操作之前依次等待每个操作的完成。要启用并发执行,需要进行修改的方法。 第一个解决方案试图通过获得每个操作的承诺来解决此问题,然后单独等待它们: co...
    编程 发布于2025-04-20
  • 图片在Chrome中为何仍有边框?`border: none;`无效解决方案
    图片在Chrome中为何仍有边框?`border: none;`无效解决方案
    在chrome 在使用Chrome and IE9中的图像时遇到的一个频繁的问题是围绕图像的持续薄薄边框,尽管指定了图像,尽管指定了;和“边境:无;”在CSS中。要解决此问题,请考虑以下方法: Chrome具有忽略“ border:none; none;”的已知错误,风格。要解决此问题,请使用以下...
    编程 发布于2025-04-20
  • 为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    在CSS 问题:不正确的代码: 全球范围将所有余量重置为零,如提供的代码所建议的,可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如,在提供的示例中,将以下代码添加到CSS中,将解决余量问题: body H1 { 保证金顶:-40px; } 此方法更精确,避免了由全局保证金重置引...
    编程 发布于2025-04-20

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

Copyright© 2022 湘ICP备2022001581号-3