Imagem do Curso gratuito Site dinâmico com Jquery

Curso online gratuitoSite dinâmico com Jquery

Duração do curso online: 1 horas e 17 minutos

4.86

EstrelaEstrelaEstrelaEstrelaEstrela

(35)

Crie um site dinâmico com jQuery e CSS, com menu interativo, slides e formulário. Curso online gratuito para praticar Front-End e publicar seu projeto.

Neste curso gratuito, aprenda sobre

  • Estruturar um site dinâmico de pizzaria com HTML, CSS e jQuery
  • Organizar pastas do projeto (ex.: pasta para arquivos JavaScript dentro de /site)
  • Criar menu com áreas de conteúdo e entender sua finalidade na navegação
  • Inserir e trocar conteúdos por seções usando divs e componentes do layout
  • Implementar rodapé e área de slides para enriquecer a interface do site
  • Aplicar acordeon no menu para expandir/ocultar opções e melhorar usabilidade
  • Construir formulário de pedido com campos essenciais (ex.: e-mail) e validação básica
  • Ligar corretamente arquivos .js e .css na página e entender ordem de carregamento
  • Estilizar layout com CSS: margens, alinhamento, centralização e espaçamentos
  • Personalizar menu com hover (cor de fundo ao passar o mouse) e estados de links
  • Inserir imagem de fundo no CSS e corrigir erros comuns de caminho/sintaxe
  • Aplicar sombras com CSS (box-shadow/text-shadow) e ajustar tonalidades de fundo
  • Configurar foco em inputs (remover outline) e melhorar aparência de campos
  • Resolver problemas de alinhamento em formulários com técnicas de formatação CSS

Descrição do curso

Aprenda a tirar suas páginas do “estático” e dar vida a um projeto real de Front-End criando um site dinâmico com jQuery. Neste curso online gratuito, você vai construir a estrutura completa de um site temático, evoluindo passo a passo da organização dos arquivos à interação do usuário, com foco em prática e resultado final. A ideia é que você entenda como cada parte do layout conversa com o JavaScript e o CSS para entregar uma navegação fluida e agradável.

Ao longo das aulas, você trabalha a base do site em HTML, define áreas de conteúdo que podem mudar conforme a navegação e implementa um menu mais inteligente, com recursos de interação como acordeon, melhorando a experiência de quem acessa. O projeto também inclui elementos visuais importantes para qualquer página moderna, como área de destaque, rodapé, efeitos de sombra e personalizações que elevam o acabamento do layout.

Além do visual, você vai montar um formulário funcional de pedido, entendendo a função de cada campo, cuidados com organização, foco e usabilidade. Em paralelo, aprende a conectar corretamente arquivos CSS e JavaScript, evitando erros comuns de caminho e estrutura, e aplicando boas práticas para manter o projeto limpo e fácil de manter.

O curso também reforça conceitos essenciais de CSS para estilização profissional: ajustes de espaçamento, alinhamento, centralização, personalização de estados de hover, aplicação de imagens de fundo e detalhes que fazem diferença no design final. Para fixar o aprendizado, você encontra exercícios e perguntas ao longo do percurso, que ajudam a revisar o que foi feito e a identificar pontos de atenção no desenvolvimento.

Indicado para quem já tem uma noção de HTML/CSS e quer avançar na criação de interfaces com interação, este conteúdo é uma ótima ponte entre teoria e prática. Ao final, você terá um site dinâmico desenvolvido com jQuery, mais segurança para estruturar seus arquivos e mais repertório para criar páginas interativas para portfólio, estudos ou projetos profissionais.

Conteúdo do curso

  • Aula em vídeo: Site com Jquery - Aula 01 - Criando um Site de Pizzaria Dinâmico 04m
  • Exercício: Quais são os principais recursos abordados no curso desenvolvido com J Carry?
  • Aula em vídeo: Site com Jquery - Aula 02 - Criando a estrutura do site 05m
  • Exercício: _Qual é a pasta que deve ser criada dentro da pasta "site" para armazenar os arquivos de javascript?
  • Aula em vídeo: Site com Jquery - Aula 03 - Criando o menu e áreas de conteúdo 05m
  • Exercício: _Qual é a finalidade da área de conteúdo dentro da estrutura do menu criada pelo autor?
  • Aula em vídeo: Site com Jquery - Aula 04 - Inserindo conteúdo nas áreas 05m
  • Exercício: _Qual é o objetivo do autor ao criar uma div para a área de pizzaria?
  • Aula em vídeo: Site com Jquery - Aula 05 - Criando áreas de rodapé e slides 05m
  • Exercício: _Qual é a função do acordeon no menu do site dinâmico com Jquery?
  • Aula em vídeo: Site com Jquery - Aula 06 - Criando o formulário de Pedido 05m
  • Exercício: _Qual é a função do campo "txt e mail" no formulário criado pelo assistente?
  • Aula em vídeo: Site com Jquery - Aula 07 - Ligando arquivos js e css 05m
  • Exercício: _O que é necessário fazer antes de começar a mexer com o CSE?
  • Aula em vídeo: Site com Jquery - Aula 08 - Estilizando com css 05m
  • Exercício: _Qual foi o erro que ocorreu durante a formatação do documento no trecho do vídeo apresentado?
  • Aula em vídeo: Site com Jquery - Aula 09 - Personalizando o menu 04m
  • Exercício: _Qual é o objetivo de utilizar o parâmetro "margin" na lista ordenada do menu?
  • Aula em vídeo: Site com Jquery - Aula 10 - Personalizando o menu 04m
  • Exercício: _Qual é o comando utilizado para definir a cor de fundo quando o mouse passa sobre um link no site dinâmico com Jquery com Hugo Vasconcelos?
  • Aula em vídeo: Site com Jquery - Aula 11 - Inserindo imagem de fundo 05m
  • Exercício: Qual foi o erro ao tentar inserir a imagem no CSS inicialmente?
  • Aula em vídeo: Site com Jquery - Aula 12 - Efeitos de sombras 05m
  • Exercício: _Qual propriedade foi utilizada para adicionar sombra no vídeo?
  • Aula em vídeo: Site com Jquery - Aula 13 - Efeitos de sombras 04m
  • Exercício: _Qual é a tonalidade de fundo da área de formulário descrita no vídeo?
  • Aula em vídeo: Site com Jquery - Aula 14 - Configurando o formulário 05m
  • Exercício: Qual propriedade CSS é utilizada para ocultar a linha de contorno de um campo de entrada ao receber foco?
  • Aula em vídeo: Site com Jquery - Aula 15 - Finalizando a estilização 05m
  • Exercício: Qual técnica de formatação resolve problemas de alinhamento e centralização em formulários HTML?

Este curso gratuito inclui:

1 horas e 17 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso