Desafio criar 30 mini projetos utilizando HTML e CSS em 30 dias

  • By Milena Carecho
  • Last update: Jan 9, 2023
  • Comments: 15

🚀 30diasDeCSS 🚀

Fala Devs, beleza? 🖖

30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3

Objetivo

30 dias de CSS3 é um desafio que vou aceitar (e você também pode participar) a partir de 20 de Julho de 2020, que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos

Se você chegou agora e quer começar o desafio, fique a vontade, o desafio não tem data de inicio fixa, cada um faz os seus 30 dias, eu ficarei honrada com sua participação 😉

Regras gerais

  • Realizar um projeto por dia
  • Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS
  • O projeto deve ser concluído até 23:59

Regras pra mim

Eu criei algumas regras para mim que não quero impor a ninguém, mas fique à vontade para fazer o mesmo, se quiser!

  • Se eu não concluir o projeto do dia, as 5 primeiras pessoas a apontar no Twitter @MilenaCarecho receberão R$5 via PicPay (total de R$25). Adicionando um pouco de motivação para mim! 😉 (Antes de solicitar qualquer coisa, verifique primeiro a hora no meu fuso horário - para mim, o fuso horário é Brasília - DF (GMT-3)) 💸
  • Vou criar um artigo tutorial no medium para todos os projetos

Gostou da ideia? Clique aqui para participar

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode

Desafio dia 01 - Ícone de mídia social em camadas

Dia 01

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 02 - Loader animado

Dia 02

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 03 - Mudança de cor de texto quando entra em outra div

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

Dicas

Desafio dia 04 - Botão com efeito

dia 04

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 05 - Efeito pulsar

dia 05

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 06 - Efeito lightning text

dia 06

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 07 - Preloader animado

dia 07

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 08 - Coração batendo

gif

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 09 - Pendulo de Newton

gif (1)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 10 - Animação texto alternando

gif (2)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 11 - Botão com efeito hover

gif (3)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 12 - Efeito de preenchimento ao passar o mouse

gif (4)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 13 - Loading com efeito

gif (3)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 14 - Fundo de texto animado

gif (4)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 15 - Texto flutuante

gif (5)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 16 - Botão com efeito

gif (6)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 17 - Loader animado

gif (7)

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 18 - Texto esfumaçado

gif (9)

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 19 - Efeitos de animação fundo de partículas

gif (10)

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 20 - Botão com efeito

gif (13)

Meu código

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 21 - Esferas quicando

gif (14)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 22 - Icones com efeito

gif (15)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 23 - Botão com efeito

gif (17)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 24 - Preloader animado

gif (18)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 25 - checkbox animado

gif (20)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 26 - Loading com efeito

gif (21)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 27 - Efeito pulsar

gif (22)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 28 - cor do background mudando

gif (23)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 29 - Menu responsivo com Media Queries

gif (24)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Desafio dia 30 - Fogos de artificio

gif (25)

Meu codigo

Tutorial Medium Ainda não disponivel

Post LinkedIn

O que eu aprendi

Github

https://github.com/MilenaCarecho/30diasDeCSS

Comments(15)

  • 1

    Olá pessoal, desafio aceito !

    Quem quiser acompanhar o meu progresso e dar uma olhada no meu código, me acompanhe nas redes sociais abaixo.

    GitHub: https://github.com/MatheusGomesWeb Twitter: https://twitter.com/MatheusGomesWeb LinkedIn: https://www.linkedin.com/in/matheusgomes/

    Bom desafio a todos !

  • 2

    Desafio aceito !

    Olá pessoal, desafio aceito !

    Quem quiser acompanhar o meu progresso e dar uma olhada no meu código, me acompanhe nas redes sociais abaixo.

    GitHub: https://github.com/MatheusGomesWeb Twitter: https://twitter.com/MatheusGomesWeb LinkedIn: https://www.linkedin.com/in/matheusgomes/

    Bom desafio a todos !

  • 3

    opaaa, me chamo Romulo!!!

    GitHub: @romulosous Instagram: @romimcarvalho LinkedIn: @romulosous

    Originally posted by @ThamirysAbilio in https://github.com/MilenaCarecho/30diasDeCSS/issues/1#issuecomment-657726551

  • 4

    Eae Povo o/

  • 5

    Desafio 30 dias css

    Comente aqui com: Seu nome: Luis Henrique Seu perfil no GitHub: luis-marques11 Seu perfil no Twitter: Seu perfil no LinkedIn: https://www.linkedin.com/in/luis-henrique-marques-5117473a/

  • 6

    #30diasDeCSS

    Olá, Me chamo Jailton, Sou Analista de Sistema. Em constante estudo e apaixonado pelo Front-End.

    Linkedin: https://www.linkedin.com/in/jailton-mendes/ GitHub: https://github.com/jailtonmendes

  • 7

    ESTOU DENTRO!

    Olá pessoal, Eu me chamo Émerson🖐️ :octocat: Meu perfil no github é @EAbeier icons8-twitter-quadrado-25Meu perfil no Twitter é @EA_beier icons8-cor-25 Meu perfil no LinkedIn é Émerson Alves Beier

  • 8

    * Duvida anonima *

    pra quem não tem conhecimento, eu não estou achando o tutorial no medium. Achei que iria aprender como fazer e fazer algo similar... o que devo fazer?

  • 9

    Desafio 30 dias CSS

    Olá meu nome é Michele Alves,

    meu perfil no github: https://github.com/mialq meu twtter: https://twitter.com/AlvesPotenza LinkedIn: https://www.linkedin.com/in/michelequeiroz/

    Estou com dúvidas sobre o projeto e o que eu devo subir aqui para o Git hub. Muito obrigada por sua iniciativa.

  • 10

    Desafio 30 dias de Css

    Olá, me chamo Tiago e fiquei muito animado para participar do desafio 30 dias de CSS,

    :fast_forward: Meu perfil no GitHub: TiagoRidev :fast_forward: Seu perfil no LinkedIn: TiagoRibeiroRj

    Vamos codar! :computer:

  • 11

    Problema de ordenação de diretórios

    Alguns diretórios estavam em caixa alta, fazendo com que o github mudasse a ordenação e ficasse incorreta. Portanto tais diretórios foram renomeados seguindo o padrão da maioria.

    Parabéns pelo repositório, ótima iniciativa 🥇

  • 12

    EU ACEITO O DESAFIO 🎉

  • 13

    Eu aceito o desafio!

    Seu nome: Ana Luisa Seu perfil no GitHub: https://github.com/analuisadev?tab=stars Seu perfil no Twitter: i do not have Seu perfil no LinkedIn: https://www.linkedin.com/in/ana-luisa-/

  • 14

    Atrasados do Enem 2021 mas nunca antes do portão fechar 😅😅

    Atrasados do Enem 2021 mas nunca antes do portão fechar 😅😅

    GitHub: https://github.com/kKzagrande LinkedIn: www.linkedin.com/in/yan-bortoleto/ https://twitter.com/Kzagrandee

  • 15

    Desafio dia 3

    Bom dia! No desafio número 3, o código disponibilizado não muda a cor da fonte dentro da div vermelha, mesmo o código sendo praticamente o mesmo que o seu... Nem idéia onde está o erro! Se puder ajudar :)