Desenvolvendo Dashboard com HTML – CSS – JS

Nesta série de vídeo aulas, meu amigo Erick Vieira mostra todos os passos para a criação de um dashboard a partir do zero. Ele explica detalhadamente a criação dos códigos HTML, CSS e Javascript bem como a aplicação de frameworks padrão de mercado.

Nessa aula ele explica de forma brilhante como desenvolver todo o projeto com estrutura elegante e padrão da indústria de software. Como se não bastasse ele ainda vai explicando ponto por ponto porque utilizou determinadas soluções.

Particularmente essa aula apresenta uma gratificação dupla porque além de ver um profissional extremamente competente com didática primorosa, também se trata de uma pessoa por quem tenho grande carinho pessoal e que literalmente vi nascendo, filho dos grandes amigos Renato Vieira e Mary Serra. Momento de profunda felicidade ver o profissional e pessoa que ele se tornou!

As aulas estão divididas em oito módulos e estão todos listados abaixo:

Módulo 1: Estrutura Básica
– Introdução
– Utilização do VS Code
– Início do HTML
– Extensão Live Server do VS Code
– Início do CSS
– Atalhos do VS Code
– Aplicação do Bootstrap
– Aplicação do Font Awesome
– Aplicação do Google Fonts
– Ajuste minucioso do layout
– Layout responsivo
– Simulação do layout em vários dispositivos

Módulo 2: Cadastro de Novo Usuário
– Views
– Ferramenta CSS Matic

Módulo 3: Estrutura Visual do Site
– Estrutura sidebar, header e content
– Extensão HTML Format do VS Code
– Layout de menu com ícones Font Awesome
– Overflow bar

Módulo 4: Páginas de Conteúdo
– Programação de evento em Javascript
– Programação AJAX com Javascript
– Botões CRUD

Módulo 5: Dados do Perfil do Usuário
– Botão para upload de arquivos
– Imagem com tamanho fixo
– Mais técnicas de ajuste de layout

Módulo 6: Resultado de Cálculos
– Mais técnicas de ajustes de layout

Módulo 7: Dashboard Inicial
– Mais técnicas de ajustes de layout

Módulo 8: Layout Responsivo
– Uso avançado de CSS
– Javascript aplicado ao redimensionamento de tela

Ferramentas Utilizadas

IDE (Integrated Development Environment):
Visual Studio Code
Extensões:
– Live Server
– HTML Format

Framework:
Bootstrap

Ícones e Fontes:
Font Awesome
Google Fonts

Conclusão

Ao final da aula você estará preparado para criar ricos websites com layout responsivo através da manipulação de tags HTML com utilização avançada de CSS e Javascript focada da manipulação do front end.

Erick Vieira é uma pessoa que, além de morar no meu coração, é desenvolvedor front-end apaixonado por tecnologia com foco em se tornar um desenvolvedor completo, podendo atuar tanto no desenvolvimento front-end quanto no backend e mobile.