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

View • Como executar • Funcionalidades • Cronograma

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