Desenvolvedor frontend: sites em HTML/CSS/JavaScript - curso 18.000 rublos. da Coddy School of Programming for Children, treinando 3 módulos (meses)
Miscelânea / / December 03, 2023
Idade: 11-14 anos
Nível: para iniciantes.
Duração: a partir de 3 módulos (meses), a partir de 24 horas*.
Formato: aulas individuais e em grupo, offline e online (tempo real).
Número de filhos: de 1 a 8.
Preço:
a partir de 750 rublos/hora em um grupo online,
a partir de 850 rublos/hora em um grupo offline,
a partir de 1.050 rublos/hora individualmente online,
a partir de 1980 rublos/hora individualmente offline.
No mundo moderno, qualquer empresa séria se esforça para adquirir um site próprio, pois é uma espécie de “cartão de visita” na Internet, sem o qual fazer negócios já parece ultrapassado, frívolo e sem esperança.
Nos últimos anos, a profissão de webmaster subiu ao topo do ranking das profissões mais atraentes e procuradas na área de TI. Neste sentido, existem actualmente cada vez mais pessoas dispostas a receber formação na criação de websites com arranhe e domine esta especialidade de prestígio para ter uma vida estável e decente ganhos. Nossa escola de programação CODDY sugere não demorar e matricular seu filho no curso “Desenvolvedor Frontend: Sites em HTML/CSS/JavaScript” agora mesmo! O objetivo deste curso é ensinar as crianças a criar sites modernos e apresentá-las aos fundamentos da profissão de desenvolvedor de interfaces.
O que é webmastering e como se tornar um webmaster?
Webmastering é um conjunto de atividades de desenvolvimento, criação, otimização e promoção de websites. Tudo o que está de uma forma ou de outra relacionado com a produção e manutenção de sites. Esta é toda uma ciência que requer certas habilidades e conhecimentos em diversas áreas, como programação web, design, copywriting, SEO e outras.
Na Internet moderna, qualquer pessoa pode criar seu próprio site. Mas via de regra, a qualidade dos projetos web deixa muito a desejar. Para que um site seja competitivo, é preciso abordar o assunto com competência e envolver profissionais no trabalho. Usando uma linguagem de programação, o programador cria páginas do site e as combina em um único objeto, após o qual ele as organiza para exibição correta nos navegadores. Deve ser dada especial atenção à interface do futuro site, garantindo o seu correto funcionamento e segurança. Portanto, um webmaster profissional faz tudo isso sozinho! Este é um programador, web designer, designer de layout, administrador e moderador e, às vezes, um redator de SEO reunidos em um só.
Quais conhecimentos e tecnologias você precisa dominar para se tornar um webmaster?
Antes de se tornar um webmaster, você precisa se familiarizar e estudar diversas tecnologias, programas e sistemas. Aqui estão as principais etapas que estabelecerão as bases para sua futura profissão:
1. Aprendendo HTML - Linguagem de marcação de hipertexto.
Depois de começar a aprender HTML, você entenderá a estrutura de um documento da web e aprenderá como criar sites simples.
2. Aprendendo CSS – linguagem de estilo de exibição de página da web. Graças à introdução de estilos CSS no documento, o site adquire um sabor próprio e uma aparência única. Você pode definir a cor, tamanho, plano de fundo e muito mais para a página da web.
3. Introdução ao CMS – sistema de gerenciamento de conteúdo ou “motor” do site.
4. Dominando o Adobe Photoshop – um editor gráfico com um número incrível de possibilidades. Muitos especialistas o utilizam para desenhar designs e criar seus próprios layouts originais e de alta qualidade.
5. Familiaridade básica com linguagens de programação. A grande maioria dos sites usa PHP e JavaScript. A velocidade do site, sua segurança, possível escalabilidade e suporte de desenvolvedores terceirizados dependem da qualidade dos scripts escritos. Em outras palavras, você precisa ser capaz de escrever código de qualidade.
6. Trabalhando com bancos de dados.
E o mais importante, o webmaster deve criar sites originais. Com o advento de soluções prontas para todos os CMSs populares, um site com um design original e sem modelo é mais procurado do que nunca. Um webmaster profissional pode não apenas trabalhar com um conjunto de programas prontos, mas também escrever esses programas prontos. Para chegar a esse nível você terá que trabalhar muito. E nosso curso “Desenvolvedor Frontend: Sites em HTML/CSS/JavaScript” ajudará seu filho a dar os primeiros passos com confiança nesta difícil tarefa. Sob a orientação de professores experientes, ele aprenderá a criar sites informativos com design gráfico original.
Durante o processo educacional serão estudados os seguintes temas:
1. Noções básicas de linguagem de marcação de hipertexto (HTML) e folhas de estilo em cascata (CSS)
2. layout de sites modernos
3. estudo aprofundado dos recursos de estilo de páginas da web
4. noções básicas de como trabalhar com Adobe Photoshop e trabalhar com layouts de design de sites
Numa fase inicial conheceremos os fundamentos da profissão de desenvolvedor de interface web e estudaremos as regras construindo a estrutura e lógica de sites, adquirindo habilidades práticas de programação interfaces web. Cada aluno aprenderá o básico para escrever código HTML e CSS.
Após a conclusão deste tópico, seu filho criará seu próprio site moderno.
O segundo módulo inclui um estudo aprofundado de ferramentas de programação de interface web. Neste módulo continuaremos nossa introdução ao HTML e CSS. Os alunos se familiarizarão com o algoritmo e a estrutura de criação de sites modernos na prática, criarão de forma independente uma galeria de imagens interativa e publicarão seu projeto na Internet.
Durante o terceiro módulo, continuaremos a conhecer a profissão de desenvolvedor web, adquiriremos habilidades práticas no trabalho com Adobe Photoshop e estudaremos ferramentas modernas de web design. Na fase de criação do design de um site, o aluno adquirirá habilidades básicas para trabalhar em um editor gráfico. Analisaremos várias opções de design de sites, discutiremos as vantagens e desvantagens de cada uma e descobriremos como o design pode ser melhorado.
Ao final do curso, meus alunos e eu criaremos um site usando um layout de design pronto usando as mais recentes ferramentas de programação web e publicaremos o resultado do nosso trabalho na Internet.
11
cursosProfessor do curso:
“Minecraft: Introdução à Inteligência Artificial”, “Unity 3D”, “Desenvolvedor Frontend: Sites HTML/CSS/JavaScript”, “Desenho em Estilo Anime”, “Programação para os mais pequenos”, “Programação Minecraft”, “Design thinking”, “Bots em Python”, “Design gráfico Photoshop”, "Videoblog"
Educação:
Numerosos cursos para melhorar competências informáticas em empresas internacionais (Chatbot Hackathons, Prototipagem na área da inteligência artificial, arquitetura informática, etc.). Universidade de Heilbronn, Heilbronn, Alemanha (Mestrado em Administração de Empresas). Universidade Estatal Económica da Bielorrússia, Minsk, Bielorrússia (Mestrado em Administração de Empresas).
Experiência:
Atua na consultoria de clientes em sistemas jurídicos, sistemas para soluções de auditoria e automação de processos, atua na área inovadora de TI e start-up na Alemanha em empresa internacional.
Interesses:
Desenvolvimento pessoal, paixão por compartilhar conhecimento, networker, abridor de mundo, life designer, ativista esportivo.
“Hoje o mundo inteiro está interligado: pessoas, países, economias, tecnologias, etc. A programação é uma competência chave do futuro. Ajuda você a compreender melhor o mundo do futuro, moldá-lo ativamente e ser um membro inovador de uma sociedade emocionante sem fronteiras. A capacidade de codificar abre portas infinitas para o futuro aos nossos filhos neste mundo e torna-os embaixadores de novas tecnologias.”
9
cursosProfessor do curso:
“Minecraft: Introdução à Inteligência Artificial”, “Unity 3D”, “Desenvolvedor Frontend: Sites HTML/CSS/JavaScript”, “Desenho em Estilo Anime”, “Programação para os mais pequenos”, “Programação Minecraft”, “Design thinking”, “Bots em Python”, “Design gráfico Photoshop”, "Videoblog"
Educação:
Inúmeros cursos para aprimorar habilidades de TI em empresas internacionais (SAP, automação de processos, e-commerce). Universidade FOM de Stuttgart, Stuttgart, Alemanha (Mestrado em Administração de Empresas) Karaganda State Technical University, Karaganda, Cazaquistão.
Experiência:
Fundador de uma loja online de produtos elétricos de sucesso na Alemanha, que presta consultoria a clientes em área de automação de processos de vendas, atua na área de vendas de TI na Alemanha no mercado internacional empresas.
Interesses:
Viajar, pescar, praticar esportes, xadrez.
I. Goethe disse: “Você só pode aprender o que ama”
1º módulo
O primeiro dia
Noções básicas de layout de página da Web
- Estrutura do documento HTML
- Primeira página da web usando linguagem de marcação HTML
- Apresentando o Editor Sublime Text 3
Resultado da lição: criou a primeira página da web, aprendeu formas básicas de marcar texto usando tags.
Tarefa prática: crie uma página da web usando a linguagem de marcação HTML.
Segundo dia
Elemento Div e atributos de tag
- Trabalhando com o inspetor da web
- Criando um site de várias páginas
- Aprendendo novos elementos e atributos de tags
Resultado da lição: aprendi como adicionar links e imagens ao site, adicionei atributos às tags
Tarefa prática: crie seu primeiro site de várias páginas.
Dia três
Folhas de estilo em cascata
- Introdução às folhas de estilo em cascata
- Estilizando Elementos HTML
- Usando seletores
- Instalando e trabalhando com o plugin Emmet e adicionando texto Lorem
Resultado da lição: aprendi como alterar a cor de fundo e a cor do texto dos elementos HTML, usar dois tipos de seletores, criar texto Lorem usando o plugin Emmet
Tarefa prática: altere a aparência da página usando propriedades CSS.
Dia quatro
Criação de site Jaguar
- Criação de um site Jaguar multipáginas
- Criando uma estrutura de arquivo de projeto
- Trabalhando com preenchimento e preenchimento de elementos
Resultado da lição: aprendi a trabalhar com um arquivo CSS externo, familiarizei-me com o preenchimento externo e interno dos elementos.
Tarefa prática: crie um site Jaguar de várias páginas.
2º módulo
O primeiro dia
Modelo de caixa em CSS
- Modelo de caixa em CSS
- Criando blocos de formato incomum
- Trabalhando com a propriedade box-sizing para alterar como a largura e a altura de um elemento são calculadas
Resultado da lição: aprendi como criar blocos de formas incomuns, usar a propriedade box-sizing com o valor border-box para calcular corretamente a largura de um elemento e definir os tamanhos dos elementos em diferentes unidades de medida
Tarefa prática: crie cartões com texto usando diferentes valores de propriedade de tamanho de caixa.
Segundo dia
Manipulação avançada de texto em CSS
- Diferentes tipos de fontes
- Escolhendo fontes para sites
- Criação de novos estilos que permitem personalizar a exibição de texto em um nível avançado
Resultado da lição: criou uma página usando diferentes tipos de fontes, melhorou a aparência e a legibilidade do texto usando as propriedades passadas.
Tarefa prática: crie uma página usando tipos de fonte básicos.
Dia três
Posicionando elementos em CSS
- Trabalhando com a propriedade float
- Tipos de posicionamento de elementos na página
- propriedade de posição
Resultado da lição: aprendi a trabalhar com as propriedades float e position, criar quebra automática de texto em torno de imagens
Tarefa prática: crie uma página da web e coloque elementos nela usando propriedades float e position
Dia quatro
Criando uma página de blog
- Criando uma página de blog
- Propriedades de posicionamento de elementos para colocar menus e postagens na página
- Tags semânticas
Resultado da lição: aprendi a trabalhar com tags semânticas usando propriedades de posicionamento, coloquei os principais componentes do blog na página
Tarefa prática: crie uma página de blog usando tags semânticas
3º módulo
O primeiro dia
Pseudoclasses e trabalho com imagens em CSS
- Usando imagens de fundo em uma página da web
- Pseudoclasses pairam, ativas e visitadas
- Alterar o estilo de um elemento ao ativar uma pseudoclasse em outro elemento
- Criando padrões de fundo
Resultado da lição: aprendeu a trabalhar com imagens de fundo, estudou propriedades para trabalhar com imagens
Tarefa prática: adicione alterações externas aos elementos ao passar o cursor do mouse sobre eles.
Segundo dia
FlexBox em CSS
- Trabalhando com layout de caixa flexível CSS
- Propriedades para alinhar elementos em um contêiner Flex
- Jogo educativo Flex-frog
Resultado da lição: aprendi a trabalhar com a tecnologia Flex para criar layouts flexíveis, concluí o jogo flex-frog para consolidar o material abordado
Tarefa prática: complete o jogo flex-frog para consolidar o material abordado
Dia três
Desenvolvimento do site da loja de tênis. Parte 1
- Criando uma estrutura de site com modelos
- Conectando-se a um site de fontes
- Propriedades do cabeçalho do site e seus elementos filhos
- Funções para criar um fundo de página gradiente
Resultado da lição: criei uma estrutura de site com modelos, conectei a fonte ao site.
Tarefa prática: selecione e baixe fotos com modelos, adicione uma sombra ao cabeçalho do site
Dia quatro
Desenvolvimento do site da loja de tênis. Parte 2
- Concluindo o trabalho no site
- Criando um bloco com cartões
- Alterar o comportamento dos elementos ao passar o mouse sobre eles
- Tecnologia FlexBox para posicionamento de cartões
Resultado da lição: criei um site com cartões modelo
Tarefa prática: adicione uma galeria usando a tecnologia FlexBo
4º módulo
O primeiro dia
Layout de grade em CSS
- Introdução ao sistema Grid
- Criando uma página usando grade
- Propriedades para trabalho avançado com células Grid
Resultado da lição: estudou o sistema de layout bidimensional (CSS Grid Layout), aprendeu como posicionar células Grid na página.
Tarefa prática: complete o jogo do jardim em grade para consolidar o material abordado.
Segundo dia
Pseudo-elementos depois e antes
- Pseudo-elementos antes e depois
- Combinando uma imagem com texto dentro
- Elementos com pseudoelementos de primeira letra e primeira linha
Resultado da lição: aprendi a trabalhar com pseudoelementos antes, depois, primeira letra e primeira linha, combinar pseudoelementos com propriedades diferentes para criar lindos blocos
Tarefa prática: crie um elemento usando os pseudoelementos after e before.
Dia três
Animações e transformações em CSS
- Transformações CSS
- Aplicando transformações a elementos HTML
- Criando blocos animados em CSS
- Aplicando funções de tempo a quadros-chave
Resultado da lição: aprendi a trabalhar com transformações em CSS, criar infinitas animações em CSS.
Tarefa prática: crie um botão e adicione transformações a ele quando passar o mouse.
Dia quatro
Pratique a criação de animações em CSS
- Aplicação de animação e transformação na prática
- Criando um sistema orbital animado de planetas em nosso sistema solar
Resultado da lição: criou uma página demonstrando o movimento dos planetas no sistema solar e um fundo animado.
Tarefa prática: crie um sistema orbital animado de planetas em nosso sistema solar.
5º módulo
O primeiro dia
Criação de uma loja online
- O que é uma loja online?
- Criando uma estrutura de projeto
- Configuração do projeto
Resultado da lição: começou a criar uma loja online.
Tarefa prática: selecione os ícones a serem usados no site.
Segundo dia
Criando um cabeçalho de loja online
- Variáveis em CSS e como usá-las
- Conectando fontes a uma folha de estilo externa usando a função url
- Cabeçalho da loja online, seu estilo
- Adicionando funcionalidade de menu adicional usando a linguagem de programação JavaScript
Resultado da lição: configurou variáveis globais no projeto, criou um cabeçalho multifuncional com um menu, conectou um arquivo Javascript para adicionar funcionalidade adicional ao menu.
Tarefa prática: adicione a alteração do plano de fundo do cabeçalho do site ao rolar a página
Dia três
Criando a primeira tela com o produto principal
- Estrutura HTML do bloco de apresentação
- Sistema de grade para exibição correta dos elementos
- Valores de propriedades CSS usando variáveis
- Elementos de estilo
Resultado da lição: criei a parte de apresentação da loja online
Tarefa prática: crie uma parte de apresentação de uma loja online
Dia quatro
Criando um bloco com produtos populares
- Marcação HTML para um bloco com produtos
- Estilo para cartões de produtos
- Grade de grade para posicionamento do cartão
- Estilização de um bloco com a história da empresa
Resultado da lição: criou um bloco com produtos populares e história da empresa
Tarefa prática: adicionar preenchimento externo e interno aos elementos do bloco com o histórico da empresa
6º módulo
O primeiro dia
Criando um controle deslizante com comentários de clientes.
- Bloco de revisão
- Maneiras de criar contêineres roláveis em CSS
- propriedades de comportamento de rolagem e tipo de snap de rolagem
- Pontos de ancoragem do controle deslizante
Resultado da lição: criei um controle deslizante com avaliações de clientes usando HTML e CSS.
Tarefa prática: adicione pontos de ancoragem às seções principais do site e crie uma rolagem automática para esses blocos ao clicar no botão.
Segundo dia
Trabalhando com formulários e conteúdo de vídeo.
- Tags HTML5 para inserir conteúdo de vídeo em um site
- Estilizando uma seção com um videoclipe em tela inteira
- Tag do campo de entrada - e seus atributos
- Tag para criação de formulários em HTML
- Estilizando um elemento de entrada de texto
Resultado da lição: criei uma seção com um vídeo e um bloco com um formulário de feedback
Tarefa prática: crie um formulário de feedback, estilize os elementos
Dia três
Criando uma página de galeria separada
- Grade de grade personalizada para uma página de galeria
- Adicionando blocos com imagens à grade
- Pseudoelementos e diversas animações de blocos com imagens
- Filtros CSS para melhorar o design visual da galeria
Resultado da lição: criei uma página separada com uma galeria de fotos
Tarefa prática: usando diferentes tipos de posicionamento para criar um fundo translúcido incomum.
Dia quatro
Adaptação de conteúdo para todos os tipos de dispositivos.
- Maneiras de adaptar conteúdo para dispositivos móveis
- Consultas de mídia para aplicar propriedades diferentes ao mesmo elemento em dispositivos com larguras diferentes
- Regras CSS para três tipos de dispositivos
Resultado da lição: Adaptamos o site para tablets e celulares.
Tarefa prática: usando consultas de mídia, altere os valores das propriedades dos elementos HTML para adaptar o conteúdo a todos os tipos de dispositivos
7º módulo
O primeiro dia
Introdução à estrutura Tailwind SS.
- O que são frameworks e como eles aceleram o processo de desenvolvimento de projetos?
- Instalando a estrutura e plug-ins CSS do Tailwind
- Conceitos da estrutura CSS do Tailwind
- Trabalhando com tipografia e cores no Tailwind CSS
Resultado da lição: criei a primeira página da web usando a estrutura Tailwind CSS.
Tarefa prática: crie um bloco com texto e elementos de estilo usando classes tailwind.
Segundo dia
Aulas Tailwind para criar um site responsivo
- Trabalhando com classes Tailwind para criar um site responsivo
- Aulas para adicionar efeitos de foco e foco
- Classes para adicionar sombras a elementos
- Classes para trabalhar com tamanhos de elementos
- Aulas para trabalhar com preenchimento externo e interno de elementos
Resultado da lição: Criamos uma página adaptável para todos os tipos de dispositivos.
Tarefa prática: crie botões, adicione efeitos ao clicar neles usando classes Tailwind
Dia três
Layout flexível do Tailwind.
- Trabalhando com Tailwind Flex Layout
- Classes para alinhar elementos filhos em um contêiner Flex
- Criando um cartão com o preço de um produto
- Criação de indicadores de progresso
- Trabalhando com pseudoelementos em Tailwind CSS
Resultado da lição: criou um contêiner Flex com cartões de produto
Tarefa prática: crie um cartão com a descrição do produto.
Dia quatro
Sistema de grade em Tailwind CSS.
- Propriedades de extensão de linha e extensão de coluna
- Propriedades para preencher automaticamente espaços vazios em uma Grid com elementos
- Página da equipe do projeto
Resultado da lição: criou uma página adaptativa da equipe do projeto usando o sistema Tailwind Grid.
Tarefa prática: adicione efeitos aos elementos da grade ao passar o mouse sobre eles
8º módulo
O primeiro dia
Configuração do projeto
- Configurando o projeto de site do aplicativo “Gerenciar”
- Criando um cabeçalho de site responsivo
- Criando um menu de hambúrguer usando JavaScript
- Criando uma seção de apresentação com um produto
Resultado da lição: criou a primeira tela do site do aplicativo “Gerenciar”
Tarefa prática: adicione uma imagem de fundo à primeira tela.
Segundo dia
Criando uma seção com uma descrição do aplicativo
- Seção com descrição do aplicativo e suas vantagens
- Adapte o bloco criado para todos os tipos de dispositivos
- Seção com operação do aplicativo
- Aplicar filtros Tailwind a uma imagem
Resultado da lição: criei duas seções do site “Gerenciar”
Tarefa prática: crie uma seção adicional com o histórico de criação do aplicativo
Dia três
Criando uma seção sobre a equipe do projeto
- Seção sobre a equipe
- Controle deslizante usando Tailwind CSS e Javascript
- Cartões de funcionários
Resultado da lição: criou uma seção sobre a equipe do projeto
Tarefa prática: crie uma seção com um botão CTA
Dia quatro
Criando uma seção com preços
- Crie uma seção com preços
- Crie um rodapé de site responsivo
- Concluir o projeto
Resultado da lição: concluiu os trabalhos do projeto, criou o site da aplicação “Gerenciar”
Tarefa prática: finalizar o projeto, colocar o site na internet
9º módulo
O primeiro dia
Comece a trabalhar em seu próprio projeto.
- Selecione um tópico do projeto
- Comece a desenvolver seu próprio site
Resultado da lição: um tema foi escolhido e o trabalho no projeto começou
Tarefa prática: Projeto de trabalho
Segundo dia
Continuando o trabalho no projeto
- Continuar trabalhando no projeto
- Corrigir erros no projeto
Resultado da lição: criação de páginas do site
Tarefa prática: Projeto de trabalho
Dia três
Preparando uma apresentação de projeto.
- Descreva seu projeto
- Crie um modelo de apresentação para defender seu projeto
- Concluir o projeto
- Coloque o site na Internet
Resultado da lição: preparou uma apresentação e ensaiou o discurso.
Tarefa prática: preparar uma apresentação do projeto, colocar o site na Internet.
Dia quatro
Proteção de projetos.
- Finalizar a apresentação do projeto
- Defenda seu projeto diante de um público
Resultado da lição: Concluímos o trabalho no projeto do curso e o apresentamos aos pais.
Tarefa prática: finalizar o projeto, preparar e realizar uma apresentação.