![Larissa Kich](/img/default-banner.jpg)
- 26
- 696 346
Larissa Kich
Brazil
เข้าร่วมเมื่อ 10 มิ.ย. 2020
Olá, eu sou a Lari, tenho 19 anos e nesse canal vou tentar mostrar um pouco do que eu estou aprendendo sobre programação e desenvolvimento Web.
Como fazer uma Barra de Pesquisa (Search Bar) com HTML, CSS e JavaScript
Olá, pessoal!
Neste vídeo, vou mostrar como criar uma barra de pesquisa de filmes utilizando HTML, CSS e JavaScript. Essa barra de pesquisa pode ser adaptada para qualquer tipo de pesquisa que você precise, tornando-a uma ferramenta versátil para seus projetos.
Links usados no vídeo:
Ícones: fontawesome.com/
Repositório GitHub:
github.com/Larissakich/search-bar
Redes sociais:
LinkedIn: www.linkedin.com/in/larissakich/
Instagram: @dev_em_dev
Tema do VSCode:
Omni Owl
Capítulos:
00:00 - Introdução
01:18 - Criação do projeto
03:45 - HTML
11:50 - CSS
22:43 - JavaScript
Espero que vocês gostem e que este tutorial seja útil para seus projetos. Não se esqueçam de curtir o vídeo, se inscrever no canal e deixar seus comentários e dúvidas abaixo. Até a próxima!
Neste vídeo, vou mostrar como criar uma barra de pesquisa de filmes utilizando HTML, CSS e JavaScript. Essa barra de pesquisa pode ser adaptada para qualquer tipo de pesquisa que você precise, tornando-a uma ferramenta versátil para seus projetos.
Links usados no vídeo:
Ícones: fontawesome.com/
Repositório GitHub:
github.com/Larissakich/search-bar
Redes sociais:
LinkedIn: www.linkedin.com/in/larissakich/
Instagram: @dev_em_dev
Tema do VSCode:
Omni Owl
Capítulos:
00:00 - Introdução
01:18 - Criação do projeto
03:45 - HTML
11:50 - CSS
22:43 - JavaScript
Espero que vocês gostem e que este tutorial seja útil para seus projetos. Não se esqueçam de curtir o vídeo, se inscrever no canal e deixar seus comentários e dúvidas abaixo. Até a próxima!
มุมมอง: 811
วีดีโอ
FLEXBOX: Guia Completo para Iniciantes em CSS
มุมมอง 12K4 หลายเดือนก่อน
Olá, pessoal! O Flexbox é uma poderosa ferramenta que permite criar designs flexíveis e adaptáveis para suas páginas da web com facilidade. Neste vídeo, vamos explorar todos os aspectos do Flexbox, desde os conceitos básicos até técnicas avançadas. Aprenda a usar propriedades como: "display: flex", "flex-direction", "justify-content", "align-items". Documentação do FLEXBOX para aprender mais: d...
Como fazer um GERADOR DE SENHA aleatória | HTML, CSS e JavaScript
มุมมอง 2.8K4 หลายเดือนก่อน
Olá, pessoal! Neste vídeo, vou te mostrar como criar um gerador de senha com HTML, CSS e JavaScript. Ele gera senhas seguras e aleatórias com base nos parâmetros fornecidos pelo usuário, como comprimento da senha e caracteres especiais. Vou te mostrar desde a estrutura básica do HTML até a funcionalidade dinâmica do JavaScript para gerar senhas com diferentes combinações de letras maiúsculas, m...
Como fazer uma LANDING PAGE responsiva e animada | HTML, CSS e JavaScript (JQUERY)
มุมมอง 40K4 หลายเดือนก่อน
Olá, pessoal! Neste vídeo, vou te mostrar como criar uma landing page responsiva e com animações usando HTML, CSS e JavaScript, com foco em JQuery. Vamos explorar o uso da biblioteca Scroll Reveal para adicionar animações de rolagem à nossa página, tornando-a mais dinâmica e atrativa para os usuários. Além disso, vou ensinar como implementar um menu com troca de abas que se ajusta conforme você...
Como fazer um MENU LATERAL responsivo (SIDEBAR) | HTML, CSS e JavaScript
มุมมอง 12K5 หลายเดือนก่อน
Olá, pessoal! Nesse vídeo, vou mostrar para você como fazer um menu lateral responsivo utilizando HTML, CSS e JavaScript. Vou te mostrar diversas funcionalidades do CSS, como FLEXBOX e GRID, além de demonstrar técnicas para posicionar elementos usando "position". Repositório com o código: github.com/Larissakich/sidebar Redes sociais: LinkedIn: www.linkedin.com/in/larissakich/ Instagram: @dev_em...
Como fazer um Accordion interativo | HTML, CSS e JavaScript
มุมมอง 2.7K5 หลายเดือนก่อน
Olá, pessoal! Nesse vídeo, vou mostrar para você a criação de um componente de accordion utilizando HTML, CSS e JavaScript. Durante o vídeo, vamos conhecer diversos conceitos fundamentais de JavaScript, tais como funções de clique, forEach, e muito mais. Além disso, no CSS, conheceremos vários conceitos de flexbox. Repositório com o código: github.com/Larissakich/accordion Redes sociais: Linked...
Como fazer abas interativas (TABS) | HTML, CSS e JavaScript
มุมมอง 5K5 หลายเดือนก่อน
Olá, pessoal! Nesse vídeo, vou mostrar para você a criação de um componente de abas (TABS) utilizando HTML, CSS e JavaScript. Durante o vídeo, vamos conhecer diversos conceitos fundamentais de JavaScript, tais como funções de clique, forEach, e muito mais. Além disso, no CSS, conheceremos vários conceitos de flexbox para dar vida e estilo ao nosso projeto. Repositório com o código: github.com/L...
Desenvolvendo uma aplicação de CLIMA com HTML, CSS e JavaScript | Integração com a API OpenWeather
มุมมอง 6K5 หลายเดือนก่อน
Olá, pessoal! Neste vídeo, vou te mostrar como utilizar uma API de clima (OpenWeather) usando JavaScript. Além disso, iremos conhecer alguns conceitos de CSS, como flexbox e grid. Api usada no vídeo: openweathermap.org/current Repositório com o código: github.com/Larissakich/weather-forecast Redes sociais: LinkedIn: www.linkedin.com/in/larissakich/ Instagram: @lariikich E-mail: larissakich04@gm...
Como fazer uma lista de tarefas (TO-DO LIST) com PHP | CRUD completo com PDO
มุมมอง 4.8K7 หลายเดือนก่อน
Olá, pessoal! Neste vídeo, você vai aprender a criar uma lista de tarefas completa, do front-end ao back-end e um CRUD completo com PHP. No front-end, vamos usar HTML, CSS e jQuery para criar uma interface simples e intuitiva. No back-end, vamos usar PHP para conectar a um banco de dados PostgreSQL SQL. Caso deseje focar apenas na parte do back-end, que inicia no minuto 0:24:00, o código do fro...
Como fazer uma calculadora de Regra de Três Simples com HTML, CSS e JavaScript
มุมมอง 2.9K10 หลายเดือนก่อน
Olá, pessoal! Neste vídeo, você vai aprender passo a passo como criar uma calculadora de regra de três simples utilizando HTML, CSS e JavaScript. Repositório GitHub: github.com/Larissakich/regra-de-tres-simples Visualize o projeto: larissakich.github.io/regra-de-tres-simples/ Redes Sociais: LinkedIn: www.linkedin.com/in/larissakich/ Instagram: @lariikich E-mail: larissakich04@gmail.com Tema do ...
Efeito Flip Card: Como criar cards giratórios com HTML e CSS
มุมมอง 6K10 หลายเดือนก่อน
Olá, pessoal! Neste tutorial, você vai aprender passo a passo como criar o incrível efeito de carta giratória (flip card) usando apenas HTML e CSS. Deixe suas páginas web mais interativas e atraentes. Repositório no GitHub: github.com/Larissakich/Flip_card Imagens: Frente: br.pinterest.com/pin/42995371439087158/ Verso: br.pinterest.com/pin/48413764738258736/ Redes sociais: LinkedIn: www.linkedi...
Como fazer uma animação com HOVER usando apenas HTML e CSS
มุมมอง 9K11 หลายเดือนก่อน
Olá, pessoal! Nesse vídeo vou te mostrar como criar uma incrível animação com hover para seus cards, usando apenas CSS! A animação de hover é uma forma de adicionar interatividade e dar vida ao design do seu website. Com apenas algumas linhas de CSS, você será capaz de criar uma transição suave e elegante que vai impressionar os visitantes do seu site. Durante o tutorial, vamos guiar você passo...
Como fazer um cronômetro com HTML, CSS e Javascript
มุมมอง 6K11 หลายเดือนก่อน
Olá, pessoal! Neste vídeo, vou te mostrar como criar um cronômetro simples com HTML, CSS e Javascript. GitHub: github.com/Larissakich/stopwatch Redes sociais: Instagram: @lariikich LinkedIn: www.linkedin.com/in/larissakich/
Como fazer um CONTADOR com HTML, CSS e JavaScript
มุมมอง 10Kปีที่แล้ว
Olá pessoal! Nesse vídeo vou te ensinar a fazer um contador, no qual ao clicar nos botões ele acrescenta ou diminui números. Você vai aprender a utilizar os eventos "mousedown" e "mouseup" no javascript, e também flexbox no CSS, além de aprender um pouco sobre HTML. Redes sociais: Instagram: @lariikich LinkedIn: www.linkedin.com/in/larissakich GitHub: github.com/Larissakich
Como fazer uma calculadora de IMC RESPONSIVA com HTML, CSS e JavaScript
มุมมอง 33Kปีที่แล้ว
Olá pessoal! Nesse vídeo vou te mostrar como fazer uma calculadora de IMC responsiva utilizando HTML, CSS (com FLEXBOX) e JavaScript! Redes sociais: LinkedIn: www.linkedin.com/in/larissakich/ Instagram: @lariikich GitHub: github.com/Larissakich Tema do VSCode: Tokyo Night
Como fazer um footer RESPONSIVO usando HTML e CSS (com FLEXBOX e GRID)
มุมมอง 44Kปีที่แล้ว
Como fazer um footer RESPONSIVO usando HTML e CSS (com FLEXBOX e GRID)
Como fazer o Login do GitHub | HTML, CSS (FLEXBOX)
มุมมอง 2.8Kปีที่แล้ว
Como fazer o Login do GitHub | HTML, CSS (FLEXBOX)
Calculadora de Juros Compostos | HTML, CSS e JAVASCRIPT
มุมมอง 10Kปีที่แล้ว
Calculadora de Juros Compostos | HTML, CSS e JAVASCRIPT
Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #2
มุมมอง 14Kปีที่แล้ว
Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #2
Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #1
มุมมอง 46Kปีที่แล้ว
Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #1
Gerador de números aleatórios entre dois números (Number Generator) | HTML , CSS e JAVASCRIPT
มุมมอง 7Kปีที่แล้ว
Gerador de números aleatórios entre dois números (Number Generator) | HTML , CSS e JAVASCRIPT
CARD COM BOTÃO DE LER MAIS E MENOS | HTML, CSS e JAVASCRIPT
มุมมอง 15Kปีที่แล้ว
CARD COM BOTÃO DE LER MAIS E MENOS | HTML, CSS e JAVASCRIPT
Formulário de Cadastro RESPONSIVO (Responsive Registration Form) | HTML e CSS
มุมมอง 148K2 ปีที่แล้ว
Formulário de Cadastro RESPONSIVO (Responsive Registration Form) | HTML e CSS
Menu Responsivo | HTML, CSS e JAVASCRIPT
มุมมอง 93K2 ปีที่แล้ว
Menu Responsivo | HTML, CSS e JAVASCRIPT
Relógio Digital DINÂMICO | HTML, CSS e JS.
มุมมอง 133K2 ปีที่แล้ว
Relógio Digital DINÂMICO | HTML, CSS e JS.
Página de Login da Netflix | HTML e CSS
มุมมอง 32K2 ปีที่แล้ว
Página de Login da Netflix | HTML e CSS
Eu sou como você desenvolvendo. A diferença é a emoção que eu tenho. Pq não sei o que tô fazendo, e cada vez que eu atualizo o css chega a escorrer lágrima dos olhos. A página parece que passou um trator por cima 😂 Quanto tempo de estudo você chegou nesse nível? Parabéns !
Vídeo top demais!
Muito obrigada 😊
Lari, faz um vídeo ensinando uma pág de login com a mesma interface do formulário de cadastro que você já ensinou
Muito obrigada pela sujestão ☺️
Coisa linda, Larissa! Consegui fazer um accordion lindo do zero graças à sua ajuda!!! Nota 1000! Super didática.
Bem quando eu tenho que fazer um projeto você envia essa pedrada um dia antes kkk
Espero conseguir te ajudar ☺️
CTRL C + V th-cam.com/video/bFvfqUMjvsA/w-d-xo.html
Uma coisa que eu percebi desenvolvendo o meu aqui: No container, se você definir o display como grid, e não como flex e column. Automaticamente os filhos tem o comportamento diferente, de se adaptar a larguras diferentes, sendo assim, mesmo aumentando o tamanho do span, ele acaba não dando um overflow, nem precisando fazer os tratamentos. Mas eu não sei explicar muito bem o porque isso acontece, sendo que está aplicando no container, não acaba refletindo essas alterações no span por exemplo ou diretamente no accordion-header. Se tiver alguém pra complementar esse adendo :D
Hoje assisti o video sobre o sidebar, e agora vejo um vídeo novo logo agora, obrigado pelo seu conteúdo e não pare!!
Eu quem agradeço 😊
Top de verdade
Muito obrigada ☺️
Guria, continua fazendo sempre esses vídeos. To em transição de carreira e começando nesse mundo mais pro front e tu tá ajudando demais. =] Ótimo vídeo, muito obrigado!
Oii, fico muito feliz em saber disso!! Te desejo muito sucesso, espero conseguir te ajudar ☺️
estava pensando em vc , e venho a notificação do seu video , que maravilha!
Espero que goste 😊
@@larissakich muito bom, adorei, faz mais videos!
Era oque eu estava procurando kkk que ferramenta é essa de teste pra aparelhos móveis? Curti
Oii, é uma extensão do Google -> "Simulador móvel - ferramenta de teste responsiva"
incrivel ver uma mulher em uma área predominantemente masculina!, parabens pelo conteúdo fantástico, apresentou bem o conceito de flexbox e as propiedades justify content e align-items q era uma das minhas dificuldades mt bom mesmo
Cara adorei a sua didática e jeito de falar muito obrigado consegui entender melhor do que meu conhecimento anterior, por favor faz mais aulas de css porque muitas pessoas como eu demora pelo css ser vasto, incluindo código limpo e responsividade atrelado ao html semântico
Seria interessante tentar usar object literal para diminuir a quantidade de ifs. Ademais muito bom o video!
@@pedrodavi_05 oii, muito obrigada pela dica ☺️
achei difícil, vou estudar mais e depois voltar aqui
Boa noite! Gostaria de fazer um orçamento com você pra fazer um app para mim. Como entro em contato?
Vendo esse vídeo n precisa nem fazer curso de html e css kkk, muito bom.
top
e como faz sub menu ?Tipo, clicando em uma opção aparece outra em baixo
Seu jeito de ensinar é muito bom, sua voz suave deixa tudo suave, eu gostei!
Esta parecendo narradora de jogo os torcedor so entende goooolll!! va mais de vaga, ensine com mais calma, ensinar e uma arte!! essa arte voce tem; todavia esta muito acelerada.
Minha flor de lotus voce ensina muito bem, ficou ótimo seu trabalho, porem fala muito rápido, e ensina muito rápido!! lembre-se existe pessoas que tem dificuldade para pega as coisa. God bless you
Oii pode dizer onde fica a class dark? Pq coloquei no meu código e não mudou nada 😅
Muito facil, tambem faz tempo que eu desenvolvo
simples e muito bom, parabéns
Oii Lari, tudo bom? Não vi a dica aqui sobre o menu mobile, então... Deixa um unico menu e o mobile menu btn, e ai vai trabalhar com as media query, onde, se for pelo mobile first, as Li vao estar com o display flex, flex direction column, e o btn vai estar aparecendo, e o navbar vai estar oculto fixo e tal do jeito que fez, e a partir de uma tela de 980px por exemplo, vai denifir outros estados para o navbar, menu e li, onde a navbar ja vai estar visible, o btn menu vai estar disabled, hidden e invisible, e as li, vao estar com o flex direction row. Recomendo muito ir pelo principio do mobile first e usar a nomeclatura BEM, vai dar um upgrade top nos teus projetos. Parabens pelos videos, ta ajudando muita gente 🥰
Oii, muito muito obrigada pela sujestão, vai me ajudar muito
esse foi o meu primeiro projeto, acabei de finalizar e ainda fiz umas mudanças por conta própria. Muito obrigado, sua didática é muito boa, só senti falta de você mostrar na tela o código html na hora de estilizar cada etapa no css. mas mesmo assim consegui acompanhar tranquliamente..
oiii,vc poderia me manda seu slime ou PDF?pra eu ter uma base, tô começando fazer o trabalho
Top de mais, parabéns 👏🏽👏🏽👏🏽
coloquem na min-heigth 1070 o seguinte bloco de codigo no css para colocar a imagem como background e transparente: #home::before{ content: ""; position: absolute; inset: 0; background: url(/src/images/hero.png) center no-repeat; background-size: contain; background-position: center; z-index: -1; opacity: 0.4; }
Muito bom, didática muito cara, parabéns !!!
Maravilhosa demaiiss, é isso, vídeo muito bom, direto ao ponto, comunicação clara. Ótimo vídeo!!!
Salvou demais da conta, 4 horas de aula no curso não entendendo nada, em 19:13 min você me deixou sabendo de tudo. Obrigado😄
Show de mais, gostei da didática. Cai nesse vídeo por um acaso kkk e acaba de ganhar mais um inscrito, parabéns pelos conteúdos!
Muito obrigada. Estava na dúvida aonde inserir o else e o if. Muito obrigada. Parabéns
Rapaz, tava esquecendo de colocar o . na altura e não tava dando certo achei que era problema no meu código fiquei uns 20m me batendo kkkkkkk
Excelente aula!! Parabéns e brigadão 🎉
show de bola, obrigado
Aula muito boa, aprendi bastante.
Ótimo conteúdo. Parabéns.
Ola, Larissa! Antes de qualquer coisa, gostaria de agradecer-lhe pelo video muito bem detalhado. Sou iniciante e gostaria de lhe fazer uma pergunta. Quando vc diz que o formulário está responsivo ,quer dizer que vc ja consegue entrar com os dados, como e-mail,senha e etc.?
Oi Larissa gostei do tutorial, eu estou tentando fazer um accordion usando a tag button que quando for clicado ele ative uma classe active em uma tag P, usando forEach mais ele fica fazendo loop quando o button é clicado varias vezes, passando por todas as tag P, como eu poderia cancelar esse problema, para quando o button for ativo ele nao avance para a proxima tag P, voce poderia me dar uma luz para resolver esse problema. Obrigado e parabens pelos tutors.
explica como você faz esse link para visualizar o projeto dentro do github
Me Ajudou muito esse layout, ficou perfeito para um projeto que estou fazendo aqui... Obrigado por compartilhar
muito boa sua aula parabens
Qual seria a nota de desempenho desse site no page speed do google?
Se eu quiser adicionar outra tabs dentro dessa, onde deveria inserir o comando do código?
Pra vc fazer a página adaptável aos dispositivos móveis, use o bootstrap ! Poupa muito código seu !
MUITO BOM
gnt, alguem me ajuda!! Na hora que ela coloca no style.css para sumir e deixar apenas pro mobile, o meu não esta sumindo!! Tem algo que eu possa fazer?
O meu também. Não está sumindo o mobile_menu.