Para treinar minhas habilidades em HTML, CSS e JS, selecionei esse template da Yan Liu de tela de criação de conta de plataforma, traduzindo do inglês para o português brasileiro.
Estrutura HTML, estilização CSS, FlexBox, importação de fontes, FIGMA, deploy, documentação, medidas relativas, responsividade.
⏲️ Duração: 8h
Projeto inspirado no Design do Figma.
Tela original:
Tela do projeto finalizado:
Design responsível é quando a aplicação renderiza bem em diferentes dispositivos e tamanhos de telas, garantindo assim uma maior usabilidade e uma experiência consistente e agradável para o usuário, aumentando satisfação e engajamento. O projeto original no Figma não tem sua versão mobile, mas tomei a liberdade de adaptar a tela usando media query, flexbox e medidas relativas para um melhor resultado.
Visualização da tela em diferentes tamanhos antes de adicionar responsividade:
no-responsiveness_N8YF2iTP.mp4
Visualização da tela em diferentes tamanhos depois de adicionar responsividade:
responsiveness.mp4
# Clone este repositório
$ git clone git@github.com:haaveeni/create-an-account-screen.git
# Acesse a pasta do projeto no terminal/cmd
$ cd create-an-account-screen
# Acesse a pasta pages
$ cd docs
Execute o arquivo index.html
As seguintes ferramentas foram usadas na construção do projeto:
HTML: estrutura da página
CSS: estilização da página
Agradeço a Yan Liu, por ter disponibilizado o design de várias telas de login e criação de conta de forma gratuita no Figma.
Graduada em Análise e Desenvolvimento de Sistemas, com forte experiência em HTML, CSS, JavaScript, React, Figma. Experiência em Metodologias Ágeis: Scrum e Kanban. Ferramentas como Jira, Confluence, Slack, Git e GitHub.