DEV Community

guiadeti
guiadeti

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

Evento sobre HTML Gratuito da Alura: Responsividade

O evento 7 Days de Responsividade, promovido pela Alura, oferece uma oportunidade gratuita para os participantes praticarem uma habilidade essencial: o desenvolvimento de páginas e aplicações com layouts responsivos.

Durante o evento, os participantes utilizarão seus conhecimentos de HTML e CSS para criar uma página real a partir de um layout no Figma, uma experiência que será valiosa em suas carreiras no mercado.

Serão explorados conceitos fundamentais, como Mobile First, media queries, unidades relativas e medidas responsivas em CSS, além de aprenderem sobre temas mais avançados, que são indispensáveis para quem está ingressando na área de Front-end.

7 Days de Responsividade

O evento 7 Days de Responsividade, promovido pela Alura, oferece uma oportunidade gratuita para os participantes praticarem uma habilidade essencial: o desenvolvimento de páginas e aplicações com layouts responsivos.


Imagem da página do evento

Este evento é ideal para quem deseja aprimorar suas competências na criação de interfaces que se adaptam a diferentes dispositivos.

Prática com HTML e CSS

Durante o evento, os participantes utilizarão seus conhecimentos de HTML e CSS para criar uma página real a partir de um layout no Figma.

Essa experiência prática será extremamente valiosa para suas carreiras no mercado de trabalho, permitindo que eles vivenciem o processo de desenvolvimento de forma direta e aplicada.

Conceitos Fundamentais e Desafios

Os participantes irão explorar conceitos fundamentais, como Mobile First, media queries, unidades relativas e medidas responsivas em CSS.

Os alunos terão a oportunidade de aprender temas mais avançados, que são indispensáveis para quem está ingressando na área de Front-end.

Serão 7 desafios em 7 dias, e quem estará à frente dessa jornada é Natália F. Dev, uma desenvolvedora Front-end que começou dando aulas de computação para crianças.

Apaixonada por aprender, Natália cria e compartilha conteúdo de tecnologia no YouTube e LinkedIn, com um foco especial em CSS.

Conteúdo Trabalhado

  • 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 o cabeçalho da sua aplicação, usando o conceito de Mobile First.
  • Dia 2: Aqui, você continuará o desenvolvimento a partir do que você fez no primeiro dia, e implementará o rodapé e o botão flutuante da aplicação. Além disso, você terá um Desafio Extra mais complexo, caso queira resolvê-lo.
  • Dia 3: Nesse dia o foco vai ser em CSS. Na aplicação que você desenvolveu até agora, o tamanho das fontes e outros elementos provavelmente está fixo para qualquer dispositivo, o que pode causar problemas em telas maiores. A sua tarefa será começar a ajustar a aplicação para usar unidades de medida relativas.
  • Dia 4: Chegou a hora de usar media queries! A sua tarefa nesse dia será reorganizar a lista de consultas da aplicação para que a mesma seja exibida em uma, duas ou três colunas, dependendo do tamanho da tela do usuário.
  • Dia 5: Nesse dia você irá alterar o CSS, a fim de transformar os itens que estavam no rodapé da versão Mobile em um formato de ‘menu lateral’ sempre que o site for acessado em dispositivos com telas maiores.
  • Dia 6: Continuando as adaptações para telas maiores, nesse dia você deverá trocar o paradigma de ‘botão flutuante’ para algo mais apropriado a telas de tablet e desktop, como um formulário.
  • Dia 7: No sétimo e último dia do desafio, você irá tornar a sua aplicação disponível de forma pública na internet. A sua tarefa será hospedar a sua página na nuvem, para que outras pessoas possam acessá-la e ela se torne acessível como um portfólio.

Como Participar

Essa iniciativa é voltada para quem tem interesse em tecnologia e programação, e deseja entender como praticar as habilidades exigidas pelo mercado de trabalho.

Após a inscrição, os participantes receberão um e-mail diário com o contexto, a tarefa e links de material extra sobre o assunto do dia.

É recomendado que cada um reserve pelo menos 1 (uma) hora para visualizar todo o material e completar o exercício, garantindo assim uma experiência de aprendizado enriquecedora.

        Você pode gostar




                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/11/Evento-sobre-HTML-Alura-280x210.png" alt="Evento sobre HTML Alura" title="Evento sobre HTML Alura"></span>

                        <span>Evento sobre HTML Gratuito da Alura: Responsividade</span> <a href="https://guiadeti.com.br/evento-html-gratuito-alura-responsividade/" title="Evento sobre HTML Gratuito da Alura: Responsividade"></a>





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

                        <span>Curso de Back-End Java Gratuito para PCD’s da Ada Tech</span> <a href="https://guiadeti.com.br/curso-back-end-java-gratuito-pcds-ada-tech/" title="Curso de Back-End Java Gratuito para PCD’s da Ada Tech"></a>





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

                        <span>1ª Live do Guia de TI – Carreira, Tecnologia e Cursos</span> <a href="https://guiadeti.com.br/1a-live-do-guia-de-ti-carreira-tecnologia-e-cursos/" title="1ª Live do Guia de TI – Carreira, Tecnologia e Cursos"></a>





                                <span><img src="https://guiadeti.com.br/wp-content/uploads/2024/11/Tecnologia-da-Informacao-Beta-hub-280x210.png" alt="Tecnologia da Informação Beta hub" title="Tecnologia da Informação Beta hub"></span>

                        <span>Curso Sobre Tecnologia da Informação Gratuito da Beta hub: Conheça essa área!</span> <a href="https://guiadeti.com.br/curso-tecnologia-da-informacao-gratuito-beta-hub/" title="Curso Sobre Tecnologia da Informação Gratuito da Beta hub: Conheça essa área!"></a>
Enter fullscreen mode Exit fullscreen mode

HTML

HTML, ou HyperText Markup Language, é a linguagem de marcação padrão utilizada para criar páginas da web.

Ele fornece a estrutura básica para a apresentação de conteúdo na internet, permitindo que desenvolvedores organizem textos, imagens, links e outros elementos em um formato compreensível para navegadores.

Sem o HTML, a web como conhecemos não existiria, pois é a base sobre a qual todas as páginas são construídas.

Estrutura Básica de um Documento HTML

Um documento HTML típico começa com a declaração do tipo de documento, seguida pela estrutura básica que inclui as seções principais: cabeçalho e corpo.

O cabeçalho contém metadados, como o título da página e links para estilos e scripts, enquanto o corpo é onde o conteúdo visível da página é colocado.

Elementos e Tags HTML

HTML é composto por uma série de elementos, que são definidos por tags. As tags são geralmente agrupadas em pares, como parágrafos e suas respectivas finalizações, ou podem ser auto-fechadas, como imagens.

Os elementos podem conter atributos que oferecem informações adicionais sobre o comportamento ou a aparência do elemento. Por exemplo, a tag de imagem pode incluir um atributo que especifica a fonte da imagem.

A Importância da Semântica

A semântica em HTML refere-se ao uso de tags que transmitem significado sobre o conteúdo que elas envolvem.

Por exemplo, usar cabeçalho para o cabeçalho de uma página, rodapé para o rodapé e artigo para um conteúdo independente é uma prática recomendada.

Isso melhora a acessibilidade e a otimização para motores de busca (SEO), tornando o conteúdo mais fácil de entender para usuários e mecanismos de busca.

HTML5 e Novas Funcionalidades

HTML5 é a versão mais recente da linguagem e trouxe diversas melhorias e novas funcionalidades. Com HTML5, os desenvolvedores agora podem incorporar vídeos e áudio diretamente nas páginas sem a necessidade de plugins adicionais, utilizando as respectivas tags.

HTML5 introduziu novas APIs que permitem o armazenamento local de dados e a criação de aplicativos web mais interativos e dinâmicos.

Alura

A Alura é uma plataforma de educação online que se destacou no Brasil por oferecer cursos de tecnologia, design e negócios.

Com um portfólio abrangente, a Alura se propõe a capacitar profissionais e estudantes que desejam se atualizar ou iniciar suas carreiras em áreas em constante evolução, como programação, marketing digital, e desenvolvimento de produtos.

Abordagem de Ensino

A Alura adota uma abordagem prática e dinâmica de ensino. Os cursos são estruturados em módulos que combinam teoria e prática, permitindo que os alunos aprendam fazendo.

A plataforma oferece projetos reais e desafios que ajudam os alunos a aplicar o conhecimento adquirido em contextos práticos, preparando-os melhor para o mercado de trabalho.

Variedade de Cursos

A diversidade de cursos oferecidos pela Alura é um dos seus principais atrativos. Com mais de 1.000 opções de cursos, os usuários podem escolher entre tópicos como desenvolvimento web, mobile, ciência de dados, design, e muito mais.

A Alura também frequentemente atualiza seu conteúdo para refletir as últimas tendências e tecnologias do mercado, garantindo que os alunos estejam sempre aprendendo o que há de mais relevante.

Link de inscrição ⬇️

As inscrições para o 7 Days de Responsividade devem ser realizadas no site da Alura.

Compartilhe seu conhecimento e inspire outros a aprender com a Alura!

Gostou do conteúdo sobre o evento gratuito de HTML? Então compartilhe com a galera!

O post Evento sobre HTML Gratuito da Alura: Responsividade 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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay