Skip to content

Atividade da Rocketseat NLW-Return, trilha Origin, voltada a uma aplicação responsiva para agendamento de consultas médicas.

License

Notifications You must be signed in to change notification settings

Raphael-GC/doctorcare

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DoctorCare Logo

Atividade da Rocketseat NLW-Return, trilha Origin, voltada a uma aplicação responsiva para agendamento de consultas médicas.

ViewComo executarFuncionalidadesCronograma

View 👀

Visualize o projeto aqui ou nesta Pen.

Como executar 🚀

  • 1. Primeiro, para clonar o projeto via HTTPS utilize:
  • git clone https://github.com/Raphael-GC/doctorcare

  • 2. Se você já possuir uma chave SSH cadastrada, clone utilizando:
  • git clone git@github.com:Raphael-GC/doctorcare.git

  • 3. Depois de clonar, acesse a pasta do nosso projeto utilizando:
  • cd doctorcare

  • 4. Abra o projeto no VScode e instale a extensão Live Server:
  • https://github.com/ritwickdey/vscode-live-server

Funcionalidades 💬

  • Agendar consultas
  • Informar sobre a clínica

Cronograma ⌚

Dia 1

  • Criacao da main page e estilização.
      - Aprendi sobre viewBox em SVG, Responsividade (viewport, content e initial-scale) SEO (meta tags).Conceito de Landing page e One page. Conheci o atributo onscroll

Dia 2

  • Inclusao de funções (scripts), menu e acessibilidade (aria).
      - Aprendi sobre a unidade de medida rem e como utilizá-la corretamente. Assim como conheci novas propriedades do CSS: transform, object-position, gap, z-index, overflow. Usei formulas matemáticas como parâmetro para informar a margem, por exemplo. Conceito de pesos (especificidade do seletor) e childs no CSS. Conheci o sistema de cor hsl.

Dia 3

  • Criação das seções restantes no html, ajustes na sobreposição de elementos e rolagem da página.
      - Aprendi sobre o conceito de ancoras, utilizado no menu. Assim como sobre os efeitos para rolagem como o scroll-behavior(CSS) e o scrollReveal(HTML). Também entendi sobre a importância semântica da tag section.

Dia 4

  • Criação da seção Contact, adição do link para o WhatsApp e botão para voltar ao topo da página. Troca da cor dos elementos SVG de forma dinâmica.
      - Aprendi sobre importância de adicionar as funções no window.addEventListener para resolver o erro da chamada das funções antes do carregamento total da página. Também vi que no display inline, não se ajusta margin e padding. Conheci novos estilos dessas propriedades: width(fit-content), justify-content(flex-start) e filter(brightness).

Dia 5

  • Criação da versão desktop, script de section selection no topo da versão desktop e overflow: auto para tirar a sobreposição da barra de rolagem em cima do layout.
      - Aprendi sobre muito sobre css grid (grid-template-columns, grid-template-areas e grid-area), media queries e os sub-elements do CSS after e before. Entendi como usar de forma inteligente e dinâmica os valores do innerHeight e offsetTop. Assim como as funções querySelector( ) e getAttribute( ).

📝 Author

LinkedIn

About

Atividade da Rocketseat NLW-Return, trilha Origin, voltada a uma aplicação responsiva para agendamento de consultas médicas.

Topics

Resources

License

Stars

Watchers

Forks