Praticar HTML5 e CSS3 diariamente a partir de um repositório de desafios que foram criados aqui no Github com o nome

  • By André Marques
  • Last update: Jan 12, 2022
  • Comments: 0

Welcome 👋 - #30diasDeCSS

SobreObjetivoRegras GeraisProjeto DesafioReferênciasDesafios

📝 Sobre


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 visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de pequenos projetos. A ideia é todo dia aplicar o conhecimento no qual venho adqirindo através de cursos voltados para o desenvolvimento Front-end. Ao fim desses 30 dias desejo aprender novas aplicações e abordagens diversas no HTML5 e CSS3.

Regras Gerais


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

🗂 Projeto Desafio


Gostou da ideia? Clique aqui para conhecer esse projeto de desafios criado pela @milenacarecho


📹 Referências


Youtube Referências dos desafios

Online Tutorials - Creative Creations - DarkCode


🎯 Desafios



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

Dia 01

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 02 - Loader animado

Dia 02

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi

  • Animação @keyframes
  • Aplicação do :before
  • Movimentação de objetos através do TOP e LEFT em conjunto com o position


Desafio dia 03 - Mudar a cor do texto

Dia 03

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 04 - Efeito em botão

Dia 04

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 05 - Efeito pulsar

Dia 05

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 06 - Efeito Lightning Text

Dia 06

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 07 - Loader com animação

Dia 07

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 08 - Coração com animação

Dia 08

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 09 - Pêndulo de Newton

Dia 09

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 10 - Texto de digitação animado

Dia 10

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 11 - Botão com efeito Hover

Dia 11

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 12 - Texto com efeito mouseover

Dia 12

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 13 - Loading com efeito

Dia 13

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 14 - Texto animado com efeito no Background

Dia 14

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 15 - Texto com efeito flutuando

Dia 15

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 16 - Botão com efeito

Dia 16

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 17 - Loader animado

Dia 17

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 18 - Texto com efeito fumaça

Dia 18

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 19 - Efeito fundo partículas

Dia 19

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 20 - Botão com efeito gradiente

Dia 20

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 21 - Efeito com bolinhas

Dia 21

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 22 - Ícones com efeitos

Dia 22

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 23 - Botão com efeito neon

Dia 23

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi



Desafio dia 24 - Preloader com animação v2

Dia 24

Meu código

Post LinkedIn

Post Twitter

O que eu aprendi

Github

https://github.com/andremksdev/30diasDeCSS-Challenge