Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix-css教程-PHP中文网

首页

web前端

css教程

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

DDD

Sep 19, 2024 am 03:34 AM

O 7 Days of Code de HTML e CSS é uma oportunidade online e gratuita oferecida pela Alura para você praticar a essência do Front-end.

Ao longo de 7 dias, você será desafiado a replicar o layout da página de filmes e séries da Netflix, aplicando desde conceitos básicos como ‘div’, ‘section’, inline para imagens e medidas em CSS, até técnicas mais avançadas como Flexbox e Grid.

Esse projeto foi desenvolvido para ajudá-lo a fixar a sintaxe de cada tag e entender suas funções, permitindo que você se concentre na resolução de problemas.

Ao final, você terá um portfólio mais robusto e um GitHub atualizado, evidenciando sua evolução. Com 7 desafios em 7 dias, é a oportunidade perfeita para colocar seus estudos em prática e aprimorar suas habilidades no desenvolvimento Front-end.

7 Days of Code de HTML e CSS

O “7 Days of Code” de HTML e CSS é uma oportunidade online e gratuita oferecida pela Alura para quem deseja aprofundar suas habilidades no desenvolvimento Front-end.

Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix
Imagem da página do evento

Durante 7 dias, você será desafiado a replicar o layout da página de filmes e séries da Netflix, aplicando desde conceitos básicos até técnicas mais avançadas, essenciais para qualquer desenvolvedor.

Aplicando Conceitos Essenciais

Neste desafio, você utilizará conceitos básicos como ‘div’, ‘section’, inline para imagens, e medidas em CSS.

Técnicas mais avançadas como Flexbox e Grid serão aplicadas para garantir que você domine as ferramentas necessárias para criar layouts responsivos e funcionais.

Este projeto foi desenvolvido para ajudá-lo a fixar a sintaxe de cada tag e entender suas funções, permitindo que você se concentre na resolução de problemas mais complexos.

Desenvolva Seu Portfólio e GitHub

Ao final dos 7 dias de prática intensa, você terá não apenas consolidado seus conhecimentos em HTML e CSS, mas também enriquecido seu portfólio e atualizado seu GitHub com um projeto real e desafiador.

Essa é a oportunidade perfeita para colocar seus estudos em prática e destacar suas habilidades no mercado de trabalho.

Conteúdo Trabalhado no Desafio

Dia 1: Já no primeiro dia, você vai ser apresentado com o layout de uma página no Figma, analisá-lo e usá-lo para criar desenvolver o banner de destaque da página da Netflix, além de organizar a estrutura básica do seu projeto. Você vai mexer com posicionamento de imagens, botões e mais.
Dia 2: Aqui você desenvolverá o menu de navegação, também conhecido como Navbar. Nessa seção, você terá a logo o menu das páginas e os botões de busca, notificação e usuário. Conhecimentos de Flexbox vão facilitar muito a sua vida!
Dia 3: Esse será provavelmente o desafio mais importante, pois você irá começar a trabalhar com os trilhos de filmes e séries. Você irá criar o trilho ‘Minha lista’, que contém os filmes salvos por um usuário para assistir mais tarde. Você vai poder usar seus conhecimentos de Grid.
Dia 4: Nesse dia você irá implementar o trilho ‘Em alta’, mas aplicando a animação de hover quando o usuário passar com o mouse por cima da imagem de algum item.
Dia 5: Aqui você continuará a brincar com trilhos e animações. Você irá fazer o efeito de slide, como se você tivesse um carrossel de filmes/séries que gira ao clicar nas setas de navegação.
Dia 6: Chegando quase no final, você desenvolverá o footer, também conhecido como rodapé, e terá a chance de usar os conhecimentos adquiridos nos últimos dias para deixá-lo bem charmoso.
Dia 7: No sétimo e último dia do desafio, você irá publicar a sua página gratuitamente na internet, para que outras pessoas possam acessá-la e ela sirva como portfólio para você. Você irá fechar com chave de ouro!

Quem Vai te Desafiar?

Fernanda Degolin, desenvolvedora Front-end que atualmente atua no time de tecnologia da Globoplay, será a mentora deste desafio.

Fernanda acredita que a arte e a tecnologia têm o poder de transformar o mundo, e está pronta para guiá-lo no aprendizado e desenvolvimento.

        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>

HTML E CSS

HTML (HyperText Markup Language) e CSS (Cascading Style Sheets) são as bases do desenvolvimento web.

Enquanto o HTML é responsável pela estrutura e conteúdo de uma página, o CSS define sua aparência visual, incluindo layout, cores, fontes e outros aspectos de design.

Juntos, eles permitem a criação de páginas web ricas e interativas, que são acessíveis em qualquer navegador.

A Importância do HTML

O HTML é a linguagem de marcação usada para estruturar o conteúdo de uma página web. Ele utiliza uma série de tags para definir elementos como títulos, parágrafos, imagens, links e muito mais.

Sem o HTML, não seria possível organizar e exibir o conteúdo de forma lógica e compreensível em uma página web.

Ele também permite a inclusão de metadados e otimização para motores de busca, melhorando a visibilidade e o desempenho de um site.

Como o CSS Transforma Páginas Web

Enquanto o HTML organiza o conteúdo, o CSS cuida da apresentação. Com o CSS, você pode definir estilos que são aplicados consistentemente em toda a página ou site, garantindo uma experiência visual coesa e atraente.

O CSS permite criar layouts responsivos, que se adaptam a diferentes tamanhos de tela, tornando o site acessível em dispositivos móveis e desktops.

Técnicas como Flexbox e Grid revolucionaram o design web, oferecendo maior controle sobre o posicionamento e alinhamento de elementos.

A Integração de HTML e CSS

A verdadeira magia do desenvolvimento web acontece quando HTML e CSS são usados em conjunto.

Ao combinar a estruturação de conteúdo do HTML com os estilos visuais do CSS, é possível criar sites que são apenas funcionais e esteticamente agradáveis.

Essa integração permite que designers e desenvolvedores trabalhem juntos para criar experiências de usuário envolventes, garantindo que o conteúdo seja acessível e atraente para todos os visitantes.

Alura

A Alura é uma plataforma de ensino online que surgiu com o objetivo de democratizar o acesso à educação tecnológica de alta qualidade.

Fundada no Brasil, a Alura tem se destacado por oferecer uma vasta gama de cursos voltados para áreas como programação, design, marketing digital, dados e muito mais.

Diversidade de Cursos e Metodologia de Ensino

A Alura oferece uma diversidade impressionante de cursos, que vão desde introduções básicas à programação até treinamentos avançados em ciência de dados, desenvolvimento web, mobile, e outros campos em alta no mercado.

A plataforma adota uma abordagem prática, com projetos reais que permitem aos alunos aplicarem o que aprendem imediatamente.