Layout e desenvolvimento web de sites. Desenvolvimento Web de nível avançado - curso 1990 rub. de Stepik, treinando 131 aulas, Data: 1º de dezembro de 2023.
Miscelânea / / December 04, 2023
Olá!
Meu nome é Dima. E eu convido você a mergulhar nas profundezas da criação e layout de sites!
Este curso é para quem já conhece o básico, mas quer passar de um bom nível de criação de sites para um excelente.
O curso é para quem conhece o básico de HTML e CSS, mas sabe que ainda existem muitas técnicas, técnicas de desenvolvimento e tecnologias que são utilizadas por verdadeiros pró-desenvolvedores.
Se isso lhe parece familiar, então este curso é para você)
Dê vida aos seus sites com animações modernas via CSS
Começaremos por introduzir dinâmicas nos nossos sites, ou seja, faremos animação. Aprenderemos como animar botões, textos e cabeçalhos usando CSS puro, aprenderemos como criar animações de cartões, criar um menu de navegação dinâmico, e tudo isso sem uma única linha de código JS, apenas CSS puro.
Este curso contém as melhores práticas em design responsivo.
Você aprenderá novas maneiras e truques para projetar seus sites de maneira responsiva, usará novas técnicas para definir e escrever consultas de mídia e aprenderá como adapte todos os elementos da página alterando apenas uma propriedade CSS para que seu site fique melhor do que nunca em qualquer dispositivo móvel dispositivo
Aprenda todas as complexidades e vantagens dos pré-processadores modernos
Você aprenderá como acelerar a criação do seu site várias vezes usando todos os recursos do pré-processador SASS, como mixins, variáveis e funções.
Noções básicas essenciais para usar o NPM
Além disso, os pacotes NPM com os plug-ins necessários para todo desenvolvedor profissional nos darão a oportunidade de criar e otimizar sites com mais rapidez e eficiência do que nunca.
O sistema de controle de versão Git irá ajudá-lo em seu desenvolvimento
Além disso, você aprenderá os fundamentos necessários para trabalhar com o sistema de controle de versão git para ter sempre a capacidade de retornar à versão correta do seu site, não importa o quanto você errou da última vez atualizar o site)
Você está criando 2 sites modernos para seu portfólio
Este curso é baseado na prática e está dividido em pequenas videoaulas nas quais criaremos passo a passo 2 grandes projetos modernos baseados no sistema float - para que você possa suportar projetos antigos e claro no sistema GRID CSS, que permite criar layouts de incrível complexidade.
E claro, você não terá vergonha de mostrar esses projetos aos seus potenciais clientes ou futuros empregadores.
Estou sempre em contato!
E fique tranquilo, você não ficará sozinho, pois após cada pequena aula você terá a oportunidade de comparar o seu código com o meu ou simplesmente fazer uma pergunta; as respostas geralmente não demoram muito para chegar.
Garantia de devolução de dinheiro!
E se ainda tiver dúvidas, este curso oferece a oportunidade de devolver o dinheiro gasto caso não goste em até 30 dias.
Junte-se a mim e juntos aprenderemos como criar sites profissionais e modernos.
Vejo você na aula!
9
cursosTenho criado cursos online originais desde 2016. Eu ensino profissionalmente como trabalhar com editores gráficos da Adobe, ensino design e desenvolvimento web.
Olá! Meu nome é Dima! Não quero me gabar, mas preciso. Ensinei mais de 5.000 alunos em todo o mundo em meus cursos online proprietários. Mais de 2.000 avaliações reais com uma classificação média de 4,83 em 5,00! Ensino web design, desenvolvimento web e os softwares necessários (Photoshop Illustrator, Figma). Minha experiência docente consiste em 5 anos de aulas particulares freelance, além de lecionar em escolas e cursos online, em plataformas globais de ensino à distância. Os alunos dos meus cursos notam minhas melhores qualidades na forma como apresento o material sem empinar, de forma divertida e interessante.
Preparação/Repetição/Primeiras animações
1. Olá!) Baixe materiais para o curso
2. Instale e configure o software necessário
3. Novo clip-path de propriedade. Começamos a criar a primeira seção do site
4. Se scout-app não funcionar para você
5. Prática: Crie sua forma usando Clip-path
6. Alinhar elementos verticalmente usando posicionamento absoluto
7. Conheça @KeyFrames. Vamos criar a primeira animação.
8. Visibilidade do Backface e criação de botões através de pseudoclasses
9. Animando um botão usando pseudoelementos
10. Modo de preenchimento de animação. Iniciando uma animação a partir de um ponto específico.
11. 3 princípios de desenvolvimento web
12. Use REM em vez de PX
Git e GitHub
1. Do que se trata esse bloqueio?
2. Comandos básicos no terminal
3. Como editar arquivos via terminal
4. Instale o sistema git em nosso computador
5. Como executar o git em um projeto específico
6. Criando o primeiro commit
7. Enviando um projeto para GitHub
8. Se você tiver um erro ao enviar seu projeto ao GitHub
9. Erro de login ao tentar enviar um projeto para o GitHub
10. Prática: Crie seu próprio repositório
11. Como excluir um repositório GitHub
12. Como baixar repositórios do GitHub
13. Emulamos o trabalho de 2 desenvolvedores em um repositório
14. Como exibir informações sobre commits no terminal. Registro do Git
15. O que são filiais
16. Como criar e navegar em ramificações.
17. Preenchemos a lacuna desde o início do minicurso com as notações -u e -M
18. Erro de commit não salvo durante a finalização da compra
19. Como enviar alterações criadas para um novo branch
20. Como enviar vários commits para um novo branch
21. Qual é a condição da cabeça destacada? CABEÇA Destacada
22. Como restaurar um arquivo específico de um commit anterior
23. Git log avançado e git show
24. Como mesclar ramificações usando Git merge. Método de avanço rápido
25. Como deletar filiais
26. Como remover arquivos de diretório do estado não rastreado
27. Git reset --hard. Como reverter um commit
28. Segunda maneira de encontrar um commit travado usando ORIG_HEAD
29. Git redefinir --soft
30. Git commit --amend alterando o comentário de um commit anterior
31. Git reset --misto
32. Diferença entre git reset e git restore
33. Introdução ao git diff. Imprimindo a diferença de vários commits no console
34. Exemplo prático de uso do git diff
35. Como exibir o diagrama de ramificação no terminal. Git log --gráfico
36. Mesclamos ramificações usando git merge. Método "Verdadeira Fusão"
37. Como reverter após uma mesclagem
38. Como copiar um commit específico usando git cherry-pick
39. Mesclando ramificações com git rebase
40. Qual é melhor git rebase ou git merge
41. Como usar o arquivo .gitignore
42. Palavra final
Layout avançado - CSS/SASS
1. Do que se trata esse bloqueio?
2. Como funcionam as variáveis SASS
3. Como funcionam os mixins
4. Como adicionar argumentos aos mixins
5. O que são modelos SASS
6. Como funcionam as funções SASS
7. Organizando arquivos SASS para um projeto grande
8. 3 maneiras de posicionar elementos
9. Como funciona o flutuador?
10. Criando nosso próprio sistema de grade
11. Aplicando um gradiente ao texto. Clipe de fundo
12. Como criar símbolos usando HTML
13. Animando e finalizando a segunda seção
14. Como criar suas próprias fontes de ícones
15. Usamos a propriedade perspective para refletir a perspectiva dos elementos
16. Como funciona o modo de mesclagem em CSS
17. Finalizando a seção com cartões
18. Como arredondar texto usando a propriedade shape-outside
19. Como funcionam os filtros CSS
20. Como adicionar um vídeo a uma página
21. Conhecendo a tag do formulário e seu conteúdo
22. Animando o formulário
23. Fazendo seu próprio botão de opção usando CSS
24. Criando um rodapé de site
25. Criando um menu de navegação usando CSS puro parte 1
26. Configurando transições de velocidade de animação usando bezier cúbico
27. Animando um hambúrguer
Design adaptativo
1. Do que se trata esse bloqueio?
2. Como criar sites responsivos
3. Criando um mixin com regras de mídia
4. Adaptação do projeto parte 1
5. Adaptação do projeto parte 2
6. Adaptação do projeto parte 3
7. O que são imagens responsivas
8. Como adaptar imagens em HTML
9. Vamos adaptar imagens HTML em nosso projeto
10. Adaptação de imagens CSS
11. Algumas edições finais do site
Gerenciador de pacotes de nós
1. Do que se trata esse bloqueio?
2. O que é node.js e npm
3. Preparando o primeiro pacote npm para uso
4. Lançando o primeiro pacote npm
5. Usando gole em nosso projeto
6. Como abrir um site no celular
Introdução ao CSS GRID
1. Do que se trata esse bloqueio?
2. Preparação
3. Como criar um modelo de grade. Modelo de grade
4. Como funcionam as unidades fr
5. Como mover um elemento para outra célula
6. Colocando vários itens em uma célula
7. Prática: Crie um layout de site
8. Exemplo de professor. Crie um layout
9. Como renomear todas as linhas de uma grade
10. Como criar um modelo de grade usando um esquema de nomenclatura
11. O que são grades explícitas e implícitas?
12. Como alinhar elementos dentro de células
13. Como alinhar uma grade dentro de um contêiner
14. Conteúdo mínimo-máx.
15. Preenchimento automático e ajuste automático. Tamanhos de células com base no conteúdo
16. Conclusão. Jardim em grade
Projeto GRID CSS
1. Do que se trata esse bloqueio?
2. Preparação
3. Crie um modelo de grade, parte 1
4. Crie um modelo de grade, parte 2
5. Como funcionam os sprites SVG
6. Estamos finalizando a segunda seção do site
7. Criando a seção "Banner", parte 1
8. Criando a seção "Banner", parte 2
9. Criando uma seção com cartões
10. Criando uma galeria
11. Criando um rodapé
12. Fazendo "hambúrguer"
13. Criando cabeçalho parte 1
14. Criando cabeçalho parte 2
15. Adaptamos o site
Ver você de novo!
1. Adeus!
Obtenha seu certificado
1. Teste para obtenção de certificado de conclusão do curso