Alura의 무료 HTML 및 CSS 챌린지: Netflix 복제본 구축-CSS 튜토리얼-php.cn

Alura의 무료 HTML 및 CSS 챌린지: Netflix 복제본 구축

DDD

풀어 주다： 2024-09-19 03:34:53

원래의

359명이 탐색했습니다.

7일간의 HTML 및 CSS 코드는 프런트엔드의 본질을 연습할 수 있도록 Alura가 제공하는 무료 온라인 기회입니다.

7일 동안 'div', '섹션', 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', '섹션', 이미지 인라인, CSS 측정 등의 기본 개념을 사용하게 됩니다.

반응형 및 기능적 레이아웃을 만드는 데 필요한 도구를 마스터할 수 있도록 Flexbox 및 Grid와 같은 고급 기술이 적용됩니다.

이 프로젝트는 각 태그의 구문을 파악하고 기능을 이해하는 데 도움을 주어 더 복잡한 문제를 해결하는 데 집중할 수 있도록 설계되었습니다.

포트폴리오 및 GitHub 개발

7일간의 집중적인 연습이 끝나면 HTML과 CSS에 대한 지식을 강화했을 뿐만 아니라 포트폴리오를 풍부하게 하고 실제적이고 도전적인 프로젝트로 GitHub를 업데이트하게 될 것입니다.

이것은 공부한 내용을 실제로 적용하고 취업 시장에서 자신의 능력을 돋보이게 할 수 있는 완벽한 기회입니다.

챌린지에서 작업한 콘텐츠

1일차: 첫날에는 Figma의 페이지 레이아웃을 제시하고 이를 분석한 후 이를 사용하여 프로젝트의 기본 구조를 구성하는 것 외에도 Netflix 페이지의 하이라이트 배너를 만듭니다. . 이미지, 버튼 등의 위치를 정하는 데 어려움을 겪게 됩니다.
2일차: 여기서는 Navbar라고도 알려진 탐색 메뉴를 개발하게 됩니다. 이 섹션에는 페이지 메뉴 로고와 검색, 알림 및 사용자 버튼이 있습니다. 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>

로그인 후 복사