Desafio De HTML E CSS Gratuito: Pratique A Essência Do Front-End
Tags: cursogratuito, css, cursosgratuitos, html
Published: 2024-03-22 11:11:13

---
title: Desafio De HTML E CSS Gratuito: Pratique A Essência Do Front-End
published: true
date: 2024-03-08 21:15:20 UTC
tags: CursoGratuito,css,cursosgratuitos,html
canonical_url: https://guiadeti.com.br/desafio-html-e-css-gratuito/
---

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.

![](https://guiadeti.com.br/wp-content/uploads/2024/03/image-16-1024x497.png)
_Página do desafio_

### 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!

<aside>
			<div>Você pode gostar</div>
			<div>
									<div>
						<div>
															<div>
									<span><img decoding="async" width="280" height="210" src="https://guiadeti.com.br/wp-content/uploads/2024/03/Curso-De-CSS3-280x210.png" alt="Curso De CSS3" title="Curso De CSS3"></span>
								</div>
							<span>Curso De CSS3 Introdutório Gratuito Com Certificado</span> <a href="https://guiadeti.com.br/curso-css3-introdutorio-gratuito-certificado/" title="Curso De CSS3 Introdutório Gratuito Com Certificado"></a>
						</div>
					</div>
									<div>
						<div>
															<div>
									<span><img decoding="async" width="280" height="210" src="https://guiadeti.com.br/wp-content/uploads/2024/03/Imersao-Analise-De-Dadosx-280x210.png" alt="Imersão Análise De Dados" title="Imersão Análise De Dados"></span>
								</div>
							<span>Imersão Em Análise De Dados Gratuita Da EBAC</span> <a href="https://guiadeti.com.br/imersao-analise-de-dados-gratuita-ebac/" title="Imersão Em Análise De Dados Gratuita Da EBAC"></a>
						</div>
					</div>
									<div>
						<div>
															<div>
									<span><img decoding="async" width="280" height="210" src="https://guiadeti.com.br/wp-content/uploads/2024/03/Evento-Linguagem-C-280x210.png" alt="Evento Linguagem C#" title="Evento Linguagem C#"></span>
								</div>
							<span>Evento De Linguagem C# Na Prática Online E Gratuito Da Rocketseat</span> <a href="https://guiadeti.com.br/evento-linguagem-c-rocketseat/" title="Evento De Linguagem C# Na Prática Online E Gratuito Da Rocketseat"></a>
						</div>
					</div>
									<div>
						<div>
															<div>
									<span><img decoding="async" width="280" height="210" src="https://guiadeti.com.br/wp-content/uploads/2024/03/Workshop-IAx-280x210.png" alt="Workshop Inteligência Artificial Trybe" title="Workshop Inteligência Artificial Trybe"></span>
								</div>
							<span>Workshop De Inteligência Artificial Gratuito Da Trybe</span> <a href="https://guiadeti.com.br/workshop-inteligencia-artificial-gratuito-trybe/" title="Workshop De Inteligência Artificial Gratuito Da Trybe"></a>
						</div>
					</div>
							</div>
		</aside>
## 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](https://7daysofcode.io/matricula/html-css-linkedin) 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!

O post [Desafio De HTML E CSS Gratuito: Pratique A Essência Do Front-End](https://guiadeti.com.br/desafio-html-e-css-gratuito/) apareceu primeiro em [Guia de TI](https://guiadeti.com.br).