」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Alura 的免費 HTML 和 CSS 挑戰:建立 Netflix 副本

Alura 的免費 HTML 和 CSS 挑戰:建立 Netflix 副本

發佈於2024-11-08
瀏覽:209

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如有侵犯,請聯絡study_golang @163.com刪除
最新教學 更多>
  • JavaScript 如何控制逾時執行並確定剩餘時間?
    JavaScript 如何控制逾時執行並確定剩餘時間?
    JavaScript 中的暫停和恢復逾時使用 JavaScript 時,可能需要控制非同步操作的流程,例如逾時。在這裡,我們探索暫停和恢復活動逾時的方法,以及檢索當前逾時的剩餘時間。 暫停和恢復逾時要暫停逾時,您可以使用包裝器攔截 window.setTimeout 呼叫並提供必要功能的函數。包裝函...
    程式設計 發佈於2024-11-08
  • 提高 Spring Boot 應用程式的效能 - 第一部分
    提高 Spring Boot 應用程式的效能 - 第一部分
    啟動Spring Boot應用程式時,我們通常使用啟動器提供的預設設置,這對於大多數情況來說已經足夠了。但是,如果我們需要效能,則可以進行具體調整,如本文第一部分所示。 將 Tomcat 替換為另一個 servlet 容器 應用程式web、RESTFul,使用Spring MVC,...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中高效合併關聯數組並實現健全的單元測試?
    如何在 PHP 中高效合併關聯數組並實現健全的單元測試?
    在 PHP 中合併關聯數組:高效選項和單元測試策略在 PHP 中合併關聯數組:高效選項和單元測試策略簡介組合關聯數組是 PHP 程式設計中的常見任務。在本文中,我們將探討將兩個或多個關聯數組合併為單一內聚數組的最佳實踐。我們還將討論有效的方法並提供詳細的單元測試策略。 array_merge 與&q...
    程式設計 發佈於2024-11-08
  • 抽象:一種程式化的思考方式
    抽象:一種程式化的思考方式
    「為什麼程式設計師拒絕起床?他們陷入了太多的抽象層!」 在程式設計中,就像在生活中一樣,我們經常需要簡化複雜的事情以使它們更易於管理。想像一下,試圖向從未見過電腦的人解釋互聯網,您不會從談論伺服器和協定開始。相反,你可以使用類比、故事或簡化版本來傳達這個想法。這就是程式設計中抽象的意義所在:簡化複雜...
    程式設計 發佈於2024-11-08
  • 您可以將內聯腳本與 JavaScript 中的「src」屬性結合嗎?
    您可以將內聯腳本與 JavaScript 中的「src」屬性結合嗎?
    JavaScript 中具有SRC 屬性的內聯腳本在JavaScript 中,通常使用 標籤包含腳本,其中src 屬性指定外部腳本檔案。然而,有時會想知道是否可以將內聯腳本與 src 屬性組合起來。 規則官方行為受 HTML 4.01 規範管轄,該規範聲明 src 屬性優先於 標記的主體。這意味著...
    程式設計 發佈於2024-11-08
  • 不可變資料結構:ECMA 4 中的記錄和元組
    不可變資料結構:ECMA 4 中的記錄和元組
    不可變資料結構:ECMAScript 2024 中的新功能 ECMAScript 2024 引入了幾個令人興奮的更新,但對我來說最突出的一個功能是引入了不可變資料結構。這些新結構——記錄和元組——改變了 JavaScript 中資料管理的遊戲規則。它們提供了一種令人滿意的方式來保持...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中為註冊用戶自訂 URL?
    如何在 PHP 中為註冊用戶自訂 URL?
    在PHP 中為註冊用戶設定自訂URL對於電子商務平台來說,為每個用戶提供唯一的URL 對於展示他們的產品至關重要單獨的產品。透過產生單獨的網址(例如 www.seloncart.com/customername),您可以顯示客戶的特定產品。為此,請按照下列步驟操作:設定伺服器路由: 修改伺服器設定以...
    程式設計 發佈於2024-11-08
  • 我如何用 Python 建立 QR 碼產生器
    我如何用 Python 建立 QR 碼產生器
    這將是一篇簡短的文章,介紹我如何在 Python 中建立一個簡單的二維碼產生器 對於此步驟,您需要使用 qrcode 函式庫:https://pypi.org/project/qrcode/ 建立專案資料夾後我所做的第一步就是建立一個虛擬環境。 Python 中的虛擬環境只是電腦上另一個獨立的工作區...
    程式設計 發佈於2024-11-08
  • 如何在 PHP 中驗證整數資料型態?
    如何在 PHP 中驗證整數資料型態?
    在驗證 PHP 中的整數資料類型在 PHP 中處理數位資料時,確定變數是否表示整數至關重要。為了解決這個問題,通常會使用 is_int() 函數。然而,它的行為有時可能是意想不到的,導致混亂。 為了修正這個問題,我們引入了驗證整數資料型別的替代方法:FILTER_VALIDATE_INT使用該方法,...
    程式設計 發佈於2024-11-08
  • 為什麼 DOMSubtreeModified 在 DOM Level 3 中被棄用以及替代方案是什麼?
    為什麼 DOMSubtreeModified 在 DOM Level 3 中被棄用以及替代方案是什麼?
    在DOM Level 3 中棄用DOMSubtreeModified 事件DOMSubtreeModified 事件曾經是跟踪文檔子樹中更改的基本元素,現在已被跟踪在DOM level 3 中已過時。了解這種棄用背後的基本原理並確定合適的替代方案至關重要。 DOM Level 3 規範對 DOMSu...
    程式設計 發佈於2024-11-08
  • 將 PDO 連線設為 NULL 是否真正關閉連線並釋放資源?
    將 PDO 連線設為 NULL 是否真正關閉連線並釋放資源?
    關閉PDO連線在PHP中,有兩種​​流行的資料庫連線介面:MySQLi和PDO。雖然兩者的用途相似,但它們處理連接關閉的方式不同。 MySQLi 需要明確關閉函數呼叫來釋放連接:$this->connection->close();相反,PDO 使用空賦值來終止連線:$this->...
    程式設計 發佈於2024-11-08
  • 動態資料管理:了解 Vue.js 中的資料屬性
    動態資料管理:了解 Vue.js 中的資料屬性
    Vue.js 是用於開發現代 Web 應用程式的最受歡迎的 JavaScript 框架之一。它提供了一種創建互動式動態應用程式的有效方法。在本文中,我們將深入研究 Vue.js 中的 data 屬性,並探討它的工作原理、為什麼要使用它以及圍繞它的最佳實踐。 什麼是資料屬性? 在Vu...
    程式設計 發佈於2024-11-08
  • 如何有效地檢查 Python 字串中是否存在列表元素?
    如何有效地檢查 Python 字串中是否存在列表元素?
    檢查Python 中字串中清單元素的存在Python 程式設計中的一個常見任務是驗證字串是否包含給定的元素列表。傳統方法採用 for 循環,如下面的程式碼所示:extensionsToCheck = ['.pdf', '.doc', '.xls'] for extension in extensio...
    程式設計 發佈於2024-11-08
  • \'window.JSON\' 如何在現代瀏覽器中提供本機 JSON 支援?
    \'window.JSON\' 如何在現代瀏覽器中提供本機 JSON 支援?
    瀏覽器原生JSON 支援:window.JSON 物件瀏覽器原生JSON 支援:window.JSON 物件window.JSON 物件為現代Web 瀏覽器提供原生JSON 解析與序列化功能,實現結構化資料的高效能、安全處理。本文探討了該物件的詳細信息,包括其支援的方法和瀏覽器相容性。 window...
    程式設計 發佈於2024-11-08

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3