search

iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 41 forks source link

16º Desafio: Progresso passo a passo - Peso 1 #20

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

E aí, crianças inocentes! Tudo bem por aí? Hoje eu tenho um desafio para vocês: desenvolver uma animação incrível utilizando HTML, CSS e JavaScript! Mas não é qualquer animação, é uma progresso passo a passo! Será que vocês estão prontos para esse desafio?

Primeiramente, vamos lembrar que a programação é como uma receita de bolo. Temos que seguir as instruções com cuidado para que o resultado final fique delicioso. Então, lembrem-se de prestar atenção aos detalhes e seguir as etapas do desafio.

Exemplo: CPT2303080859-350x104

A implementação dessa funcionalidade NÃO pode ser feita utilizando bibliotecas e frameworks já existentes, APENAS criando um código personalizado do zero.

Lembrem-se de testar a animação em diferentes navegadores e dispositivos para garantir que tudo esteja funcionando perfeitamente. E não se esqueçam de se divertir e experimentar coisas novas durante o processo!

Eu sei que vocês são capazes de criar uma animação incrível de progresso passo a passo utilizando HTML, CSS e JavaScript. Então, vamos colocar a mão na massa e mostrar para o mundo do que somos capazes! Ah, e não se esqueçam de comer umas guloseimas pelo caminho!

Additional tips

Em suma, a elaboração de um site com funcionalidade de progresso é um desafio interessante e enriquecedor para os alunos de programação, pois desenvolve habilidades de programação, além de permitir a criação de diferentes tipos de conteúdo para a web.

Outra dica para contrução do circulo e da barra de progresso é criar duas classes de css no seguinte estilo

.progress {
 // aqui ficará o código CSS responsável por controlar a barra de progresso.
 // Alguns comandos css podem ser úteis para ajudar na construção, por 
 // exemplo:   background-color, transform: translateY(-50%),  transition
}
.circle {
// aqui ficará o código CSS responsável por controlar a barra de progresso.
 // Alguns comandos css podem ser úteis para ajudar na construção, por 
 // exemplo:   background-color,  color, border-radius,  display: flex ,  justify-content: center;
 }
huannyy commented 1 year ago

Equipe: Elektras huanny.zip

iurygdeoliveira commented 1 year ago

Equipe: Elektras huanny.zip

Resposta aceita