filmov
tv
Criando o Card da Seção Hero - Projeto Front-end (HTML, CSS e Javascript) [Aula 2/7]
Показать описание
Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma:
PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS:
-----------------------------------------------------------------------
► Arquivos Utilizados no Vídeo:
► Site da MasterClass de Full Stack que foi Utilizada na Aula:
-----------------------------------------------------------------------
Caso prefira o vídeo em formato de texto:
-----------------------------------------------------------------------
PARA CONTRATAR A HASHTAG PARA SUA EMPRESA:
-----------------------------------------------------------------------
Fala Impressionadores! Hoje vamos para a segunda aula do Curso de HTML e CSS que tem como objetivo te ensinar a criar uma Landing Page do ZERO!
Nessa aula nós vamos criar o card da seção hero da nossa landing page, ou seja, vamos aprender muitas coisas nessa aula.
Vou te mostrar como fazer a formatação do container, como fazer alteração de fonte no CSS, como alterar o tamanho da fonte no CSS, como utilizar o display flex e muito mais!
A ideia dessa aula é deixar o nosso card praticamente pronto, então vamos fazer todos os ajustes de espaçamento, fonte, tamanho de fonte, alinhamento de imagens e texto.
E ainda vamos fazer a formatação do botão e da parte da data, que se assemelha a um botão, então vamos ter uma borda para delimitar o conteúdo e ajuste do texto.
Além disso, vamos fazer os ajustes no botão, incluindo o hover no CSS, que é aquele visual de quando passa o mouse em cima do botão ele altera o cursor e você, de fato, nota que se trata de um botão!
Agora vamos pra aula que tem muito conteúdo irado hoje!
-----------------------------------------------------------------------
Vídeos Recomendados
► Curso Básico de HTML e CSS
► Como Baixar e Configurar o VSCode para HTML e CSS
-----------------------------------------------------------------------
Hashtag Programação
► Ative as notificações (clica no sininho)!
► Curta o nosso vídeo!
-----------------------------------------------------------------------
Redes Sociais
Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos!
-----------------------------------------------------------------------
Conteúdo da Aula
00:00 Introdução
01:31 O que vamos fazer?
02:35 Formatações do container + ajustes
17:14 Flex Container e Flexbox + flexbox editor
20:30 Alteração de fonte no CSS
23:10 Tamanho da fonte no CSS + formatação
34:33 Ajuste de espaçamento do texto
35:18 Itens de lista + espaçamento
37:16 Display flex (alinhamento texto e imagem)
42:14 Display flex (alinhamento + bordas)
44:47 Botão + cursor pointer + ajuste de texto
48:50 Hover no CSS
50:05 Conclusão
#htmlecss #htmlcss #html #css #hashtagprogramacao
PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS:
-----------------------------------------------------------------------
► Arquivos Utilizados no Vídeo:
► Site da MasterClass de Full Stack que foi Utilizada na Aula:
-----------------------------------------------------------------------
Caso prefira o vídeo em formato de texto:
-----------------------------------------------------------------------
PARA CONTRATAR A HASHTAG PARA SUA EMPRESA:
-----------------------------------------------------------------------
Fala Impressionadores! Hoje vamos para a segunda aula do Curso de HTML e CSS que tem como objetivo te ensinar a criar uma Landing Page do ZERO!
Nessa aula nós vamos criar o card da seção hero da nossa landing page, ou seja, vamos aprender muitas coisas nessa aula.
Vou te mostrar como fazer a formatação do container, como fazer alteração de fonte no CSS, como alterar o tamanho da fonte no CSS, como utilizar o display flex e muito mais!
A ideia dessa aula é deixar o nosso card praticamente pronto, então vamos fazer todos os ajustes de espaçamento, fonte, tamanho de fonte, alinhamento de imagens e texto.
E ainda vamos fazer a formatação do botão e da parte da data, que se assemelha a um botão, então vamos ter uma borda para delimitar o conteúdo e ajuste do texto.
Além disso, vamos fazer os ajustes no botão, incluindo o hover no CSS, que é aquele visual de quando passa o mouse em cima do botão ele altera o cursor e você, de fato, nota que se trata de um botão!
Agora vamos pra aula que tem muito conteúdo irado hoje!
-----------------------------------------------------------------------
Vídeos Recomendados
► Curso Básico de HTML e CSS
► Como Baixar e Configurar o VSCode para HTML e CSS
-----------------------------------------------------------------------
Hashtag Programação
► Ative as notificações (clica no sininho)!
► Curta o nosso vídeo!
-----------------------------------------------------------------------
Redes Sociais
Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos!
-----------------------------------------------------------------------
Conteúdo da Aula
00:00 Introdução
01:31 O que vamos fazer?
02:35 Formatações do container + ajustes
17:14 Flex Container e Flexbox + flexbox editor
20:30 Alteração de fonte no CSS
23:10 Tamanho da fonte no CSS + formatação
34:33 Ajuste de espaçamento do texto
35:18 Itens de lista + espaçamento
37:16 Display flex (alinhamento texto e imagem)
42:14 Display flex (alinhamento + bordas)
44:47 Botão + cursor pointer + ajuste de texto
48:50 Hover no CSS
50:05 Conclusão
#htmlecss #htmlcss #html #css #hashtagprogramacao
0:51:10
Criando o Card da Seção Hero - Projeto Front-end (HTML, CSS e Javascript) [Aula 2/7]
0:30:08
Figma para DEVs: #03 - Criando seção e cards
0:12:20
Criando uma página web TOP do zero - #7 - Criando os cards da sessão de serviços
0:08:14
Card para web com HTML e CSS Puro
0:29:01
#4 Criando Seção com Cards do Bootstrap
0:00:14
Credit Card Form HTML, CSS and Javascript
0:00:24
Eu Copiando DINHEIRO para não precisa TRABALHAR nunca Mais #shorts
0:07:44
Create Our Team Section Card (CSS Mastery # 005) | Coder Champ
0:16:41
Cards Animados com Elementor - Sem Plugins e Sem Códigos
0:00:07
How to Make 3d Flip Card Using HTML and CSS | Flip Card CSS & HTML
0:00:15
TREINO FÍSICO PARA JOGADOR 🙅🏽♂️⚽️ #cr7 #futebol #foco #treinoemcasa #tutorial #brasileirão...
0:00:39
Card Game com CSS - Code Kong
0:09:21
Como Criar um CARROSSEL DE CARDS no Elementor Pro [Para o Mobile/Celular]
0:01:29
How To Activate Swirl Card (How To Register Swirl Card)
0:00:26
Nunca vi isso 😅🎮 #Ps2 #matrix #opl
0:00:22
Don't buy a Dell Optiplex without watching this video! 💸 #optiplex #dellcomputer #pc #gaming
0:07:34
Amazing Expanding Cards Using HTML CSS and JavaScript | Expanding Card Using JavaScript
0:00:39
Card Hover Effects HTML & CSS | CSS Tutorial for Beginners
0:00:16
Desenhei o Athos Reverso Minecraft em 16 segundos! #shorts #minecraft #athos #vamosdesenhar
0:01:11
How to CREATE your GOOGLE People Card | ADD me to Search #getassist
0:00:36
Criando um UI Cartão de Crédito com Card.js
0:01:50
How to create or fund your dollar card on Cardify Africa
0:03:07
How to make 3D 70th Birthday layered card on a Cricut Maker with free SVG cut files & Blog tutor...
0:00:29
When can I apply for US citizenship? | When did I become a lawful permanent resident?
Комментарии