Crie um site responsivo em várias páginas: HTML, CSS, JavaScript (2024)
Giorgi Lomidze, UI / UX Designer
Assista a este curso e milhares de outros
Assista a este curso e milhares de outros
Aulas neste curso
-
-
1.
Introdução
3:43
-
2.
Configuração
1:52
-
3.
Primeiros passos
5:11
-
4.
Como criar uma marcação HTML para o cabeçalho de site
4:00
-
5.
Cabeçalho de site de estilo
14:53
-
6.
Como criar uma marcação HTML para navegação
4:57
-
7.
Ícone de menu de estilo
6:35
-
8.
Itens de navegação de estilo
15:55
-
9.
Fazendo a navegação funcionar
14:39
-
10.
Como criar uma marcação HTML para a seção Sobre nós
4:40
-
11.
Seção de estilo sobre nós
16:39
-
12.
Como criar uma seção de marcação HTML para livros
6:53
-
13.
Seção de livros de estilo
14:08
-
14.
Seção de criação de marcação HTML para depoimentos
7:08
-
15.
Seção de Depoimentos de estilo
21:43
-
16.
Como criar uma marcação HTML para o rodapé
8:34
-
17.
Rodapé de estilo
17:53
-
18.
Barra de rolagem personalizada e rolagem suave
4:45
-
19.
Como criar uma marcação HTML para a página Sobre nós
16:45
-
20.
Página de estilo sobre nós
28:54
-
21.
Como criar uma página de marcação HTML para livros
7:00
-
22.
Página de livros de estilo
4:17
-
23.
Como criar uma página de marcação HTML para depoimentos
9:12
-
24.
Página de depoimentos de estilo
28:44
-
25.
Fazendo o slider funcionar
16:47
-
26.
Tornando o projeto responsivo - parte 1
7:15
-
27.
Tornando o projeto responsivo - parte 2
21:50
-
28.
Como tornar o projeto responsivo - parte 3
17:01
-
29.
Como tornar o projeto responsivo - Parte 4
26:08
-
30.
Como criar um carregador de site
17:18
-
31.
Como implantar um site
3:20
-
-
- --
- Nível iniciante
- Nível intermediário
- Nível avançado
- Todos os níveis
Gerado pela comunidade
O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.
143
Estudantes
4
Projetos
Sobre este curso
Bem-vindo ao nosso course "Crie um site responsivo em várias páginas: HTML, CSS, JavaScript", onde mergulhamos diretamente no domínio prático do desenvolvimento web. Se você está dando seus primeiros passos no desenvolvimento da web ou buscando aprimorar seu conjunto de habilidades existente, este curso foi adaptado para atender às suas necessidades.
Nosso foco principal é guiá-lo na criação de um site totalmente responsivo e profissional, sem ficar atolado nos fundamentos de HTML, CSS e JavaScript.
Vamos entrar em ação, começando com a criação de seu site. O HTML atua como a estrutura, o CSS como o designer visual e o JavaScript como a funcionalidade interativa — semelhante a assemelhar as camadas de um bolo. Você vai aprender a estruturar suas páginas da web com HTML, garantindo que elas sejam bem organizadas e acessíveis, estabelecendo uma base sólida para seu site.
Em seguida, vamos nos aprofundar no CSS, onde vamos transformar a aparência do seu site. Vamos explorar designs, layouts e funcionalidades responsivas para tornar seu site visualmente atraente em vários dispositivos, de desktops a telas móveis.
Nossa jornada continua com o JavaScript, que adiciona interatividade e funcionalidade ao seu site. Você vai dominar características como formulários, menus de navegação e conteúdo dinâmico, elevando seu site de páginas estáticas para uma plataforma interativa e envolvente que atende às necessidades dos usuários.
No final do curso, você vai possuir a experiência para garantir que seu site funcione perfeitamente em diferentes dispositivos, de desktops a smartphones. Com uma abordagem de aprendizagem prática, você vai ganhar experiência prática e a confiança para dar vida aos seus projetos na web.
Em resumo, este curso enfatiza a aplicação prática, orientando você desde o zero para um site totalmente responsivo e fácil de usar. É uma jornada emocionante que permite que você transforme suas aspirações de desenvolvimento web em realidade. Se você é um iniciante ou quer expandir suas habilidades, junte-se a nós e vamos tornar seus sonhos de desenvolvimento web realidade. Este é o seu caminho direto para a criação de um site profissional e estamos entusiasmados em acompanhá-lo em todas as etapas do caminho.
Conheça seu professor
Hi,
I'm George, an UI / UX Designer, Web Developer, Founder at 'Code And Create' , and an author of several best-selling online classes.
I'm excited that I have a chance to help people to learn one of the most interesting and hottest fields in the world.
I decided to share my knowledge and experience with you and that's the main reason for being here at Skillshare.
Looking forward to seeing you inside my classes and help you to become a professional UI / UX Designer
Visualizar o perfil completoProjeto prático de curso
Projeto de curso: desenvolvimento de site de blog
Visão geral:
Neste projeto de curso, você vai criar um site de blog dinâmico usando HTML, CSS e JavaScript. O objetivo é projetar e desenvolver uma plataforma onde você pode compartilhar seus pensamentos, ideias e experiências com o mundo.
Etapas do projeto:
Configuração de projeto:
- Crie uma nova pasta de projeto no seu computador.
- Configure a estrutura básica de arquivos: index.html, style.css, script.js.
- Reúna todos os ativos necessários, como imagens ou ícones para suas postagens de blog.
Estrutura HTML:
Crie a estrutura do seu blog com as seguintes seções-chave:
- Cabeçalho (inclua um title/logotipo e links de navegação)
- Área de conteúdo principal (exibir postagens de blog)
- Barra lateral (opcional, para informações adicionais ou navegação)
- Rodapé (inclua informações de direitos autorais e links de mídia social)
Crie arquivos HTML individuais para cada postagem de blog, se desejar, ou gere dinamicamente conteúdo de uma fonte de dados usando JavaScript.
Estilo de CSS:
- Implementar um design visualmente atraente usando CSS.
- Concentre-se na criação de um layout que seja fácil de ler e navegar.
- Utilize a grade de CSS ou a flexbox para organizar o conteúdo principal e a barra lateral.
- Aplique estilos para melhorar a legibilidade das postagens de blog, incluindo tipografia, cores e espaçamento.
- Certifique-se de que seu site seja responsivo e tenha uma boa aparência em vários tamanhos de tela.
Interatividade com JavaScript:
- Implemente a interatividade e as características dinâmicas usando JavaScript.
- Crie funcionalidade para:
- Carregando postagens de blog dinamicamente.
- Como adicionar comentários a posts de blog.
- Implementando uma funcionalidade de pesquisa para que os usuários encontrem publicações específicas.
- Como adicionar botões de compartilhamento de mídia social.
- Implementando um sistema de paginação para navegar por várias postagens de blog.
Conteúdo de portfólio:
- Preencha seu blog com conteúdo envolvente e relevante:
- Escreva e publique posts de blog sobre vários tópicos de interesse.
- Inclua imagens, vídeos ou outros elementos multimídia para aprimorar suas postagens.
- Use categorias ou tags para organizar suas postagens de blog para facilitar a navegação.
- Adicione uma seção "Sobre mim" para se apresentar ao seu público.
- Considere incluir uma seção de "Posts em destaque" para destacar seu melhor conteúdo.
Implantação:
- Escolha uma plataforma de hospedagem (por exemplo, GitHub Pages, Netlify, etc.).
- Implante seu site de blog para que o mundo veja.
- Compartilhe seu projeto na seção de projeto de curso e convide o feedback de seus pares.
Boa sorte! Divirta-se criando seu site de blog!
Nota do curso
Por que fazer parte da Skillshare?
Faça cursos premiados Skillshare Original
Cada curso possui aulas curtas e projetos práticos
Sua assinatura apoia os professores da Skillshare
Aprenda em qualquer lugar
Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.
Cursos relacionados
