# - Painel de mídia social com alternador de temas ## Índice
- [O desafio](#the-challenge) - [Visão geral](#visão-geral) - [Captura de tela](#captura-de-tela) - [Links](#links) - [Meu processo](#meu-processo) - [Tecnologias](#tecnologias-utilizadas) - [O que aprendi](#o-que-eu-aprendi) - [Desenvolvimento contínuo](#desenvolvimento-contínuo) - [Recursos úteis](#useful-resources) - [Autor](#autor) - [Agradecimentos](#agradecimentos)
## Visão geral ![](./meuprocesso.jpg) ### O desafio Os usuários devem ser capazes de: - Visualizar o layout ideal para o site, dependente do tamanho da tela do dispositivo - Ver os estados de foco para todos os elementos interativos na página - Alternar o tema de cores para sua preferência

### Captura de tela

Tema Dark

Tema Light

### Links - Veja o deploy: [Painel de Mídia Social](https://paineldemidiasocial.netlify.app/)

## Meu processo ### Tecnologias utilizadas - Semantic HTML5 - markup - CSS - Flexbox - CSS Grid - Mobile-first - JavaScript

### O que eu aprendi Neste projeto evolui na técnica de posicionamento dos elementos, utilizando o Flexbox e Grid layout. A responsividade foi um dos desafios a serem superados neste projeto, mas depois de tanta persistência e estudo consegui solucionar os problemas que apareceram. Usei o JavaScript para fazer alteração de tema do painel, e foi mais fácil do eu imaginava.

Voltar ao topo

### HTML Em contato diariamente no desenvolvimento deste projeto, venho cada vez mais consolidando os meus conhecimentos, e a cada projeto realizado esta ficando mais fácil na declaração das div's e classes. ```html

Page Views

87

3%

```

### CSS Este projeto foi ótimo para eu evoluir minha técnica na utilização da propriedade display Grid. ```css .dashboard-overview { display: grid; height: 10rem; grid-column-gap: 24px; grid-row-gap: 20px; grid-template-columns: repeat(4, 1fr); } ```

### JavaScript Estarei incremetando esta linguagem nos meus projetos, a minha meta é me aprofundar nos conceitos e praticas para aprimorar os meus conhecimentos e técnicas. ```js const checkbox = document.querySelector('#checkbox'); const body = document.querySelector('body'); checkbox.addEventListener('click', function(){ body.classList.toggle('toggle') }) ```

### Desenvolvimento contínuo Estou em contato diariamente com código, e está sendo incrível a evolução que venho obtendo nesses últimos dias, meu objetivo principal é estar cada dia mais preparado tecnicamente para realização de novos projetos.

### Recursos úteis - [Grid Layout](https://grid.layoutit.com/) - Isso me ajudou a elaborar o display grid no projeto. Gostei muito deste modelo e vou usá-lo daqui para frente.

## Autor LEANDRO PEREIRA ## Me siga nas Redes:

## Agradecimentos Quero agradecer o Andre Cruz da comunidade CODE, por ter disponibilizado o seu tempo para me ajudar no conceito inicial da linguagem Javascript.

Voltar ao topo

OLeandroPereira / social-media-dashboard-with-theme-switcher-master

readme

### Captura de tela

Tema Dark

Tema Light

### HTML Em contato diariamente no desenvolvimento deste projeto, venho cada vez mais consolidando os meus conhecimentos, e a cada projeto realizado esta ficando mais fácil na declaração das div's e classes. ```html

Page Views

87

3%

```

87

### CSS Este projeto foi ótimo para eu evoluir minha técnica na utilização da propriedade display Grid. ```css .dashboard-overview { display: grid; height: 10rem; grid-column-gap: 24px; grid-row-gap: 20px; grid-template-columns: repeat(4, 1fr); } ```

### Desenvolvimento contínuo Estou em contato diariamente com código, e está sendo incrível a evolução que venho obtendo nesses últimos dias, meu objetivo principal é estar cada dia mais preparado tecnicamente para realização de novos projetos.

### Recursos úteis - [Grid Layout](https://grid.layoutit.com/) - Isso me ajudou a elaborar o display grid no projeto. Gostei muito deste modelo e vou usá-lo daqui para frente.

## Autor LEANDRO PEREIRA ## Me siga nas Redes:

## Agradecimentos Quero agradecer o Andre Cruz da comunidade CODE, por ter disponibilizado o seu tempo para me ajudar no conceito inicial da linguagem Javascript.

Voltar ao topo

OLeandroPereira / social-media-dashboard-with-theme-switcher-master

readme

### Captura de tela

Tema Dark

Tema Light

### HTML Em contato diariamente no desenvolvimento deste projeto, venho cada vez mais consolidando os meus conhecimentos, e a cada projeto realizado esta ficando mais fácil na declaração das div's e classes. ```html Page Views 87 3% ```

87

### CSS Este projeto foi ótimo para eu evoluir minha técnica na utilização da propriedade display Grid. ```css .dashboard-overview { display: grid; height: 10rem; grid-column-gap: 24px; grid-row-gap: 20px; grid-template-columns: repeat(4, 1fr); } ```

### Desenvolvimento contínuo *Estou em contato diariamente com código, e está sendo incrível a evolução que venho obtendo nesses últimos dias, meu objetivo principal é estar cada dia mais preparado tecnicamente para realização de novos projetos.*

### Recursos úteis - [Grid Layout](https://grid.layoutit.com/) - Isso me ajudou a elaborar o display grid no projeto. Gostei muito deste modelo e vou usá-lo daqui para frente.

## Autor LEANDRO PEREIRA ## Me siga nas Redes:

## Agradecimentos *Quero agradecer o Andre Cruz da comunidade CODE, por ter disponibilizado o seu tempo para me ajudar no conceito inicial da linguagem Javascript.* Voltar ao topo

### HTML Em contato diariamente no desenvolvimento deste projeto, venho cada vez mais consolidando os meus conhecimentos, e a cada projeto realizado esta ficando mais fácil na declaração das div's e classes. ```html

Page Views

87

3%

```

### Desenvolvimento contínuo Estou em contato diariamente com código, e está sendo incrível a evolução que venho obtendo nesses últimos dias, meu objetivo principal é estar cada dia mais preparado tecnicamente para realização de novos projetos.

## Agradecimentos Quero agradecer o Andre Cruz da comunidade CODE, por ter disponibilizado o seu tempo para me ajudar no conceito inicial da linguagem Javascript.

Voltar ao topo