Tabelas de Projetos do #boracodar
- Calculate
- BoardingPass
- Carnival block
- Dashboard
- Conversor de moedas
- Página de Login
- Meu KanBan
- Um Formulário de Cartão
- Componete Upload
- Photo gallery
Você pode visualizar o Deploy do projeto através 🔗 desse link.
Tecnologias
- HTML
- CSS
- JavaScript
- git & github
Você pode visualizar o Deploy do projeto através 🔗 desse link.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML
- CSS
- git & github
Você pode visualizar o Deploy do projeto através DESSE LINK.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Git e Github
- Figma
- Phosphor Icons
📚 O que podemos extrair desse desafio:
- Input, Select e Button customizados
- Uso de ícones e fontes customizdas
- HTML:
form,header,main,section,form,select,img, - CSS:
all,overflow,::before,::after,rem,position,fit-content,flex e grid,@media,responsividade - Novo DevTools do Edge
Você pode visualizar o Deploy do projeto através DESSE LINK.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML, CSS e SVG
- Figma
- https://bennettfeely.com/clippy/
📚 O que podemos extrair desse desafio:
# CSS
- aplicar variável pelo atributo HTML
- animations / @keyframes
- column-gap / row-gap
- grid-template-columns / grid-template-rows / grid-column / grid-auto-flow
- fit-content
- margin-top: auto
- place-content / align-self / justify-items / justify-content
- centralizar div com position/grid/flex/margin
- :nth-child() / ::before
- transform / matrix() / rotate()
- stroke / dasharray / dashoffset / stroke-width / linecap
- fill
- responsividade / mobile first / @media
- clip-path / polygon
- linear-gradient()
- calc()
# SVG
- viewBox
- circle
- cx / cy
- r
- stroke
- defs
- linearGradienthttps://www.fronteditor.dev/gists/e7d5a452582ebe081f81dee776bca246/view
Você pode visualizar o Deploy do projeto através DESSE LINK.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML, CSS e JS
- Figma
- Apex Charts
- Flag Icons
📚 O que podemos extrair desse desafio:
outlinexborderCSS property- Custom
<select> - Ícones com bandeiras
flag icons - Gráfico de area
area chart - Configuração do Apex Charts
String()e.replace()- muito mais...
Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- JavaScript e DOM
- Figma
- propriedades CSS
all,position,top,right,margin-block,flex,outline - seletores CSS
> *,+,:focus.:disabled,:hover,::-ms-reveal - responsividade
- Javascript: variáveis, estrutura de repetição, condicionais (if/else) e ternários
- DOM:
querySelectorAll(),getAttribute(),setAttribute(),classList,.toggle()
Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Figma
Input, Select e Button customizados
- Uso de ícones e fontes customizdas
- HTML:
form,header,main,section,form,select,img, - CSS:
all,overflow,::before,::after,rem,position,fit-content,flex e grid,@media,responsividade
Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- JavaScript e DOM
- iMask
- Figma
Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- JavaScript e DOM
- Phosphor Icons
- Figma
Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.
Esse projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- Ion Icons
- Figma
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.