JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático

JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático
Publicado em 16/01/2021 16h35
Visualizações: 562

HTML e CSS do projeto para o estudo do JS

Nos próximos posts serão abordados os métodos e propriedades do DOM utilizados para manipulação de elementos, incluindo eventos do JS.

Para realizar o estudo, disponibilizei um pacote com um mini projeto contento o HTML e CSS já estruturado (por enquanto o conteúdo abordado continuará focado em JavaScript). Sinta-se a vontade para modificar de acordo com seus desejos, contudo, mantenha os elementos existentes pois estes serão utilizados para a demonstração de um pouco das possibilidades disponibilizados por esta linguagem.

Para visualizar o projeto em andamento clique aqui.

O projeto consiste de uma página simples em HTML, dividida em:

  • Menu de navegação, com âncoras para as seções internas desta página;
  • Seção "Skills", contendo uma lista de habilidades com barra de rolagem e um texto descritivo, que depois será utilizada como um botão, onde cada imagem da lista apresentará sua respectiva descrição;
  • Seção "FAQ", onde será implementado o efeito "accordion";
  • Seção Contato. e
  • Footer.
JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático

A disposição de elementos foi organizado utilizando grid-layout. O CSS está bem organizado e será fácil de entender. Por enquanto foi utilizado media query para 700px.

Todo o conteúdo abordado nesta categoria (JavaScript) tem como referência meus estudos e experiências. Qualquer semelhança com algum curso visto não é coincidência! Os modelos utilizados são oriundos de excelentes cursos que eu continuo fazendo, tal como UpInside Treinamentos e Origamid. Recomendo com muito empenho estas duas escolas, além da constante leitura e consulta da documentação do JavaSript sempre que possível.

Para baixar o código do projeto inicial, clique aqui.

De agora em diante mergulharemos de forma prática no universo JavaScript.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.