Alura 的免費 HTML 和 CSS 挑戰：建立 Netflix 副本-css教學-PHP中文網

首頁

web前端

css教學

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

DDD

Sep 19, 2024 am 03:34 AM

7天HTML和CSS代碼是Alura為您提供的免費線上練習前端精髓的機會。

在7 天的課程中，您將面臨複製Netflix 電影和劇集頁面佈局的挑戰，應用從“div”、“section”等基本概念、CSS 中的內聯圖像和測量值到更先進的技術，如Flexbox 和Grid。

這個專案旨在幫助您明確每個標籤的語法並理解其功能，讓您專注於解決問題。

最終，您將擁有更強大的作品集和更新的 GitHub，展示您的進步。 7 天 7 個挑戰，這是將所學付諸實踐、提升前端開發技能的絕佳機會。

7 天的 HTML 和 CSS 程式碼

HTML 和 CSS「7 天程式設計」是 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」軌跡，但當使用者將滑鼠移到某個項目的圖像上時套用懸停動畫。
第 5 天： 在這裡您將繼續玩曲目和動畫。您將創建幻燈片效果，就好像您有一個電影/系列的輪播，當您單擊導航箭頭時會旋轉。
第6天：快要結束了，你將開發頁腳，也稱為頁腳，你將有機會利用這幾天學到的知識，讓它變得非常迷人。
第 7 天： 在挑戰的第七天也是最後一天，您將在互聯網上免費發布您的頁面，以便其他人可以訪問它，並且它可以作為您的作品集。您將以蓬勃發展結束！

誰會挑戰你？

目前在 Globoplay 技術團隊工作的前端開發人員 Fernanda Degolin 將擔任本次挑戰賽的導師。

Fernanda 相信藝術和技術具有改變世界的力量，並準備好指導您的學習和發展。

        Você pode gostar




                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/09/Desafio-De-HTML-E-CSS-Netflix-280x210.png" alt="Desafio De HTML E CSS Netflix" title="Desafio De HTML E CSS Netflix"></span>

                        <span>Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix</span> <a href="https://guiadeti.com.br/desafio-html-css-gratuito-alura-replica-netflix/" title="Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix"></a>





                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/09/Evento-AWS-Rumos-280x210.png" alt="Evento AWS Rumos" title="Evento AWS Rumos"></span>

                        <span>Evento Sobre AWS Gratuito Da Rumos: Boas Práticas De Segurança Na Cloud</span> <a href="https://guiadeti.com.br/evento-aws-gratuito-boas-praticas-seguranca/" title="Evento Sobre AWS Gratuito Da Rumos: Boas Práticas De Segurança Na Cloud"></a>





                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/08/Bootcamp-Java-280x210.png" alt="Bootcamp Java" title="Bootcamp Java"></span>

                        <span>Bootcamp De Java Com Spring Boot Gratuito Da DIO + Claro</span> <a href="https://guiadeti.com.br/bootcamp-java-spring-boot-gratuito/" title="Bootcamp De Java Com Spring Boot Gratuito Da DIO + Claro"></a>





                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/01/Logica-de-Programacao-e-Carreiras-280x210.png" alt="Lógica de Programação e Carreiras" title="Lógica de Programação e Carreiras"></span>

                        <span>Cursos De Lógica De Programação E Carreiras Em Tecnologia Gratuitos Da Estácio</span> <a href="https://guiadeti.com.br/cursos-logica-de-programacao-carreiras-tech/" title="Cursos De Lógica De Programação E Carreiras Em Tecnologia Gratuitos Da Estácio"></a>

登入後複製