Desafio De HTML E CSS Gratuito: Pratique A Essência Do Front-End

Durante os “7 Days de HTML e CSS” da 7 Days of Code, uma iniciativa da Alura, os participantes explorarão a essência do Front-end. Embora a teoria seja crucial, a prática desempenha um papel essencial na consolidação dos conhecimentos.

No decorrer, propõe-se um desafio: replicar a página de perfil do LinkedIn. Desde conceitos básicos, como ‘div’, ‘section’ e medidas responsivas em CSS, até técnicas mais avançadas, como Flexbox, Grid e outros fundamentais para aqueles que estão iniciando no universo do Front-end.

Após 7 dias de prática consecutiva, a memorização da sintaxe das tags e a compreensão de suas funcionalidades deixarão de ser obstáculos, permitindo que os participantes concentrem sua energia em solucionar problemas de forma mais eficiente. Preparem-se para a transformação!

7 Days of Code de HTML e CSS

Durante os “7 Days de HTML e CSS” da 7 Days of Code, os participantes terão a oportunidade de praticar a essência do Front-end, explorando a importância da aplicação prática para solidificar conhecimentos.

Replicando o Layout do LinkedIn: Um Projeto Desafiador

A proposta envolve a criação de uma réplica da página de perfil do LinkedIn. Desde conceitos básicos como ‘div’ e ‘section’ até técnicas avançadas como Flexbox e Grid, os participantes serão guiados na construção de um projeto sólido.

Desenvolvendo Habilidades Essenciais para Front-end

Os participantes utilizarão conceitos fundamentais, como medidas responsivas em CSS, e explorarão elementos mais avançados para construir uma base sólida no Front-end. Flexbox, Grid e outras técnicas serão abordadas, essenciais para quem ingressa nessa área.

7 Dias de Prática Intensiva: Superando Desafios

Ao praticar esses conceitos por 7 dias consecutivos, os participantes superarão desafios, tornando a memorização da sintaxe das tags uma habilidade natural e permitindo uma maior concentração na resolução de problemas.

Conteúdo do 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 a seção de informações principais do perfil, que contém a imagem de capa, a foto de perfil, nome, título, informações de contato, informações da carreira e, no final da seção, botões de ação.
• Dia 2: Aqui você desenvolverá o menu de navegação, também conhecido como Navbar. Nessa seção, você terá a logo do LinkedI, uma barra de pesquisa e um conjunto de links levando para outras áreas da rede social.
• Dia 3: Nesse dia você vai precisar trabalhar bastante com alinhamento no CSS, e conhecimentos de Flexbox ou Grid vão facilitar muito a sua vida! A seção se chama ‘Publicações em Destaque’ e contém três cards lado a lado, todos com certos itens visuais.
• Dia 4: Nesse dia você irá implementar duas partes da tela hoje: a seção de ‘Atividades recentes’, que contém texto, imagens e linhas divisórias, e a seção ‘Sobre’.
• Dia 5: Esse será provavelmente o desafio mais importante, pois você desenvolverá a seção de ‘Experiências’, provavelmente a mais relevante da da página. Ela contém diferentes grupos de blocos agrupados e diversas informações sobre as experiências de emprego passadas da pessoa.
• Dia 6: Chegando quase no final, você desenvolverá as seções de ‘Formação acadêmica’ e ‘Idiomas’, que são bem parecidas com algumas das seções desenvolvidas anteriormente.
• Dia 7: No sétimo e último dia do desafio, você criará duas seções bem parecidas, que vamos chamar de seções de sugestões de perfis. A primeira se chama ‘As pessoas também viram’ e a segunda ‘Pessoas que talvez você conheça’. Elas possuem um formato um pouco diferente e vários botões. Você poderá 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!

7 Desafios em 7 Dias para Desenvolver seu Portfólio

O programa oferece uma jornada de 7 desafios em 7 dias, incentivando o desenvolvimento do portfólio e do GitHub. Criado por profissionais do mercado, o curso proporciona uma imersão prática no mundo do Front-end.

Quem Vai Te Desafiar? Conheça Natália F. Dev

Natália F. Dev, uma desenvolvedora Front-end, iniciou sua carreira dando aulas de computação para crianças. Apaixonada por aprendizado, ela compartilha seu conhecimento no YouTube e LinkedIn, com um foco especial em CSS.

Para Quem é o Programa?

Destinado a quem tem interesse em tecnologia e programação, o curso atende aqueles que buscam praticar habilidades demandadas pelo mercado de trabalho. Inscrições abertas para múltiplas tecnologias, a partir do momento da inscrição, os participantes receberão um e-mail diário com dicas práticas.

Crie Projetos e Aprimore seu Portfólio

Ao final dos 7 dias, os participantes terão criado projetos tangíveis, prontos para integrar em seus portfólios e demonstrar suas habilidades. Compartilhe seus resultados nas redes sociais e destaque-se no Instagram, Twitter e LinkedIn!

HTML

HTML, ou HyperText Markup Language, é a espinha dorsal do desenvolvimento web, permitindo a estruturação e organização de conteúdo em páginas online.

No HTML, a estrutura básica consiste em tags e elementos. As tags são instruções inseridas no código para definir o início e o fim de elementos específicos, como títulos, parágrafos, imagens e links.

Hierarquia de Documentos

A hierarquia de documentos no HTML é estabelecida por meio da aninhamento de elementos. Tags podem conter outras tags, criando uma estrutura hierárquica que organiza o conteúdo da página de maneira lógica.

Personalizando Elementos

A personalização de elementos é alcançada por meio de atributos. Atributos fornecem informações adicionais sobre um elemento e são inseridos nas tags para modificar seu comportamento ou aparência.

Elementos Semânticos

O HTML5 introduziu elementos semânticos que atribuem significado e contexto ao conteúdo. Exemplos incluem <article>, <section>, <header> e <footer>, contribuindo para uma compreensão mais clara do propósito de cada parte da página.

Links e Navegação

A criação de links é uma parte fundamental do HTML, permitindo a navegação entre diferentes páginas. A tag <a> é usada para definir links, conectando recursos online e aprimorando a experiência do usuário.

Interação do Usuário

HTML facilita a criação de formulários interativos. As tags como <input>, <select>, e <textarea> possibilitam a coleta de informações do usuário, como nome, senha e comentários.

Multimídia

HTML suporta a incorporação de mídia, como imagens e vídeos. As tags <img> e <video> permitem a inclusão de elementos visuais, melhorando a experiência do usuário.

Alura

A Alura, líder em educação online, oferece uma experiência educacional personalizada, permitindo que os alunos avancem em seus próprios ritmos. Com cursos elaborados por especialistas da indústria, a plataforma proporciona uma jornada de aprendizado flexível, alinhada às necessidades individuais de cada estudante.

Diversidade de Cursos e Atualizações Constantes

A variedade de cursos abrange programação, design, gestão e negócios, atendendo a diversos interesses e necessidades profissionais. Os conteúdos são continuamente atualizados para refletir as últimas tendências e demandas do mercado, garantindo que os alunos estejam equipados com as habilidades mais relevantes.

Comunidade de Aprendizado Dinâmica e Desenvolvimento Contínuo

Os alunos têm acesso a fóruns de discussão, mentoria e eventos exclusivos, criando um ambiente propício ao networking e ao desenvolvimento contínuo. A Alura promove uma comunidade ativa que estimula a troca de conhecimentos e experiências entre os estudantes.

Transforme seu conhecimento em ação!

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

Desafie-se e inspire outros!

Gostou do conteúdo sobre o desafio gratuito? Então compartilhe com a galera!