Rodrigo Brito

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.

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.