Featured

COMO FAZER UM DASHBOARD HTML CSS JAVASCRIPT - PASSO A PASSO (CSS Grid) | Covid Brasil 10 / 16



Published
☑️ Faça parte do meu clube de membros e tenha acesso a e-books, códigos fontes, layouts, vídeos e projetos exclusivos: https://bit.ly/ClubeInkasa

---------------------------------------------------------------------------------------------

Nesse projeto eu vou te ensinar como fazer um dashboard html css javascript responsivo usando os dados da covid no brasil.

Dashboard é um painel visual com o objetivo de mostrar um conjunto de informações em forma de gráficos para que seja feita uma análise de dados de uma forma mais fácil e rápida. Existem diversos tipos de painéis e gráficos que podem ser utilizados, no entanto a diferença de um dashboard para um gráfico comum é que o dashboard funciona como um painel, ou seja, é possível interagir com ele para que sejam mostradas diferentes informações.

Nesse projeto eu vou te ensinar como fazer um dashboard simples utilizando uma biblioteca chamada Apexcharts, que será utilizada para criar os gráficos da nossa dashboard. ApexCharts é uma biblioteca de gráficos Javascript que nos permite criar visualizações de dados interativos flexíveis e totalmente responsivos, tudo isso com uma API simples e recursos robustos. Nesse projeto você aprenderá os seguintes tipo de gráfico:

- gráfico de linha;
- gráfico de coluna;
- gráfico de donut, e;
- gráfico misto;

Você aprenderá a fazer um bom dashboard responsivo utilizando html, css e javascript utilizando a biblioteca Apexcharts.

Nesse projeto nós iremos utilizar os dados da pandemia de COVID-19 no Brasil. O coronavírus foi identificado pela primeira vez por autoridades da cidade de Wuhan, capital da província de Hubei na China, entre pacientes que tinham desenvolvido pneumonia sem causa identificável. O surto inicial deu origem a uma pandemia global que à data de 25 de setembro de 2021 tinha resultado em 231.105.748 casos confirmados e 4.736.892 mortes em todo o mundo.

Pensa-se que o coronavírus tenha origem zoonótica. A primeira transmissão para seres humanos ocorreu em Wuhan, na China, em novembro ou dezembro de 2019. No início de janeiro de 2020, a principal fonte de infecção era já a transmissão entre seres humanos.

Em 26 de fevereiro de 2020 se confirmou o primeiro caso do covid19 no Brasil. Um brasileiro retornando da Itália, onde a pandemia já tinha alcançado patamares bem preocupantes. Quase 2 anos depois, estamos vivendo um momento histórico, e está literalmente nas nossas mãos o que vai acontecer daqui pra frente.

Nesse projeto você aprenderá como criar um dashboard responsivo usando esse dados, permitindo que se faça uma análise de dados completos sobre o número de casos confirmados, de mortos e de vacinados no Brasil. Ao aprender como montar dashboard com javascript utilizando esses dados, você poderá depois alterar esse projeto para criar até mesmo outros tipos de painel administrativo (admin dashboard).

Nesse projeto também iremos trabalhar com uma metodologia chamada mobile first, que é um conceito aplicado em projetos web onde o foco inicial da arquitetura e desenvolvimento é direcionado aos dispositivos móveis e em seguida para os desktops.

O mobile first é focado na arquitetura e desenvolvimento de sites para a web, ele cumpre com maestria o que propõe em sua tradução literal: móvel primeiro. Criando um site html primeiramente para mobile, somos forçados a sermos sucintos e fazer uso da melhor maneira dos poucos espaços disponíveis nas telas dos dispositivos móveis e auxiliar os usuários a realizarem suas desejadas tarefas. Nessa série de aulas eu vou te ensinar como criar um site html, criando um site do zero.

---------------------------------------------------------------------------------------------

Onde você pode me achar:
Instagram: https://www.instagram.com/inkasadev/
Github: https://github.com/inkasadev
Telegram: https://t.me/inkasadev
Twitter: https://twitter.com/inkasadev
Google Play: http://bit.ly/InkasaGooglePlay

---------------------------------------------------------------------------------------------

☑️ Resultado final desse vídeo: https://bit.ly/CovidBrasil_10_16
☑️ Projeto finalizado: https://bit.ly/CovidBrasilFinal
☑️ Starter Files: https://bit.ly/CovidBrasilStarterFiles
(Por favor deixe a sua star lá no github!
Category
Web design
Be the first to comment