DEV Community

guiadeti
guiadeti

Posted on • Originally published at guiadeti.com.br on

1

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

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.


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>
Enter fullscreen mode Exit fullscreen mode

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.

Comunidade e Reconhecimento Profissional

Um dos grandes diferenciais da Alura é a comunidade ativa de alunos e profissionais que participam ativamente dos fóruns, eventos e grupos de estudo.

Essa comunidade permite trocas valiosas de conhecimento e networking, o que enriquece ainda mais a experiência de aprendizado.

Link de inscrição ⬇️

As inscrições para o 7 Days of Code de HTML e CSS devem ser realizadas no site da Alura.

Compartilhe e chance de colocar teoria em prática!

Gostou do conteúdo sobre o desafio de HTML e CSS? Então compartilhe com a galera!

O post Desafio De HTML E CSS Gratuito Da Alura: Desenvolva Uma Réplica Da Netflix apareceu primeiro em Guia de TI.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay