🚀 30diasDeCSS 🚀

Bom dia/tarde/noite, tudo bom ?

30 dias de CSS3 é um desafio que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de mini projetos diários. Todos os créditos à @MilenaCarecho 😄

Objetivo

30 dias de CSS3 é um desafio que vou aceitar (e você também pode participar) a partir de 30 de Janeiro de 2022 (estou começando dia 28), que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos

Regras gerais

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

Regras pra mim

Vou aderir as regras tambem haha, mas vou fazer uma alteração, lembrando que não é obrigação, fique à vontade para fazer o mesmo, se quiser!

• Se eu não concluir o projeto do dia, as 5 primeiras pessoas a apontar no Linkedin https://www.linkedin.com/in/thiago-tassinari-dev-front-end/ eu vou somar R$5 (total de R$25) numa quantia e ao final dos 30 dias irei doar toda essa quantia a uma instituição(a ser definida ainda).Adicionando um pouco de motivação para mim! 💸

Gostou da ideia? Clique aqui para participar

Youtube Referencias dos desafios

Online Tutorials - Creative Creations - DarkCode

Achei muito divertido ideia, e desafio todos que tenham interesse 🤗

Novamente, todos os créditos à criadora do desafio 👉 @MilenaCarecho 👈

Minhas redes sociais

• LinkedIn
• GitHub

Vou atualizando aqui diariamente, qualquer dúvida estou a disposição

• Dia 01 - Calculadora
• Dia 02 - Action Menu Microinteractions
• Dia 02 - Game of the Snake
• Dia 03 - Modern Animated_Menu_Toggle
• Dia 03 - Custom_Emoji_Range_Slide
• Dia 04 - Game Memory Card
• Dia 05 - Sidebar Menu
• Dia 06 - Sound Plus
• Dia 07 - Bulb on && off
• Dia 08 - Analogic Clock
• Dia 09 - Theme Button Mode || Dark and Light
• Dia 10 - Custom Select Menu

Sites de referência

• MDN
• CSS tricks
• W3School

Desafio do dia 01 - Calculator UI Design - Claymorphism with Button Toggle to Dark | Light Mode

Link da URL para acessar aplicação: https://calculator-glaymorphism.surge.sh

O que eu aprendi

• CSS. Seletor de classe - w3school
• CSS. Translate()
• CSS. :nth-child()
• type="checkbox" in CSS
• Js. Document.querySelector()

Desafios do dia 02 - Action Menu Microinteractions

Link da URL para acessar aplicação: https://animation-menu.surge.sh

O que eu aprendi

• CSS. Seletor de classe
• CSS. Translate()
• CSS. :nth-child()
• type="checkbox" in CSS
• Js. Document.querySelector()

Desafios do dia 02 - Game of the Snake

Link da URL para acessar aplicação: https://jogo-cobra.surge.sh

O que eu aprendi

• HTML. CanvasElement.getContext()
• Métodos LocalStorage
• Js. addEventListener()
• Js. Object keys
• DOM. Keydown

Desafios do dia 03 - modern_animated_menu_toggle

Link da URL para acessar aplicação: https://menu-toggle-button.surge.sh

O que eu aprendi

• CSS. Transform
• CSS. Transform origin
• Blog
• *CSS. @Support *

Desafios do dia 03 - custom_emoji_range_slide

Link da URL para acessar aplicação: https://custom-emoji.surge.sh

O que eu aprendi

• Js. oninput Event
• Js. GlobalEventHandlers.oninput
• HTML. input type="range"
• HTML. Range Inputs
• Gerador de range input

Desafios do dia 04 - Game Memory Card

Link da URL para acessar aplicação: https://game_memory_card.surge.sh

O que eu aprendi

• CSS. Display grid
• Css. Display grid
• Css. Transform-style
• Css. backface-visibility
• Css. backface-visibility
• Js. Sort()
• Js. forEach()
• Js. setAttribute()
• Js. setAttribute()
• Js. setTimeout()
• Js. setTimeout()
• Js. classlist()
• Js. textContext()

Desafios do dia 05 - Sidebar Menu

Link da URL para acessar aplicação: https://sidebar_menu_toggle.surge.sh

Desafios do dia 06 - Sound Plus

Link da URL para acessar aplicação: https://sound_plus.surge.sh

O que eu aprendi

• CSS. gradient
• CSS. background
• Js. keyboardEvent
• Js. keyboard

Desafio do dia 07 - Bulb on && off

Link da URL para acessar aplicação: https://on_off_bulb.surge.sh

O que eu aprendi

• Css. :checked
• Css. filter:drop-shadow()

Desafio do dia 08 - Analogic Clock

Link da URL para acessar aplicação: https://clock-analogic.surge.sh

O que eu aprendi

• Css. :checked
• Css. grid
• [Css. grid] (https://css-tricks.com/snippets/css/complete-guide-grid/)
• Css. z-index

Desafio do dia 09 - Toggle Button Mode || Dark and Light

Link da URL para acessar aplicação: https://theme_mode.surge.sh

O que eu aprendi

• Js. String.prototype.replace()
• Css. setProperty()
• Css. getComputedStyle()

Desafio do dia 10 - Custom Select Menu

Link da URL para acessar aplicação: https://custom_select_menu.surge.sh

O que eu aprendi

• Css. scrollbar
• Css. scrollbar
• Css. scrollbar
• Css. scroball
• Css. boxShadow
• Js. Array.prototype.filter()
• Js. Map
• String.prototype.startsWith()

Desafio do dia 11 - Not war

Link da URL para acessar aplicação: https://not_war.surge.sh

O que eu aprendi

• Css. -webkit-text-stroke