Larissa Kich
Larissa Kich
  • 26
  • 696 346
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!
มุมมอง: 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

ความคิดเห็น

  • @robinsoncarrazzoni662
    @robinsoncarrazzoni662 18 ชั่วโมงที่ผ่านมา

    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 !

  • @AlexRocha-es1mx
    @AlexRocha-es1mx วันที่ผ่านมา

    Vídeo top demais!

    • @larissakich
      @larissakich วันที่ผ่านมา

      Muito obrigada 😊

  • @chuh4997
    @chuh4997 2 วันที่ผ่านมา

    Lari, faz um vídeo ensinando uma pág de login com a mesma interface do formulário de cadastro que você já ensinou

    • @larissakich
      @larissakich วันที่ผ่านมา

      Muito obrigada pela sujestão ☺️

  • @renanvcb
    @renanvcb 2 วันที่ผ่านมา

    Coisa linda, Larissa! Consegui fazer um accordion lindo do zero graças à sua ajuda!!! Nota 1000! Super didática.

  • @fabricioaguiar3428
    @fabricioaguiar3428 3 วันที่ผ่านมา

    Bem quando eu tenho que fazer um projeto você envia essa pedrada um dia antes kkk

    • @larissakich
      @larissakich 2 วันที่ผ่านมา

      Espero conseguir te ajudar ☺️

  • @masternilo1358
    @masternilo1358 3 วันที่ผ่านมา

    CTRL C + V th-cam.com/video/bFvfqUMjvsA/w-d-xo.html

  • @ryanpantaneiro
    @ryanpantaneiro 3 วันที่ผ่านมา

    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

  • @jacksonreis4143
    @jacksonreis4143 3 วันที่ผ่านมา

    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!!

    • @larissakich
      @larissakich 3 วันที่ผ่านมา

      Eu quem agradeço 😊

  • @edemircarvalho3219
    @edemircarvalho3219 3 วันที่ผ่านมา

    Top de verdade

    • @larissakich
      @larissakich 3 วันที่ผ่านมา

      Muito obrigada ☺️

  • @Skumhall
    @Skumhall 3 วันที่ผ่านมา

    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!

    • @larissakich
      @larissakich 3 วันที่ผ่านมา

      Oii, fico muito feliz em saber disso!! Te desejo muito sucesso, espero conseguir te ajudar ☺️

  • @heliosoares4847
    @heliosoares4847 3 วันที่ผ่านมา

    estava pensando em vc , e venho a notificação do seu video , que maravilha!

    • @larissakich
      @larissakich 3 วันที่ผ่านมา

      Espero que goste 😊

    • @heliosoares4847
      @heliosoares4847 3 วันที่ผ่านมา

      @@larissakich muito bom, adorei, faz mais videos!

  • @claudiomasters4765
    @claudiomasters4765 4 วันที่ผ่านมา

    Era oque eu estava procurando kkk que ferramenta é essa de teste pra aparelhos móveis? Curti

    • @larissakich
      @larissakich 3 วันที่ผ่านมา

      Oii, é uma extensão do Google -> "Simulador móvel - ferramenta de teste responsiva"

  • @nibiru_9820
    @nibiru_9820 4 วันที่ผ่านมา

    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

  • @maxvinicius7386
    @maxvinicius7386 5 วันที่ผ่านมา

    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

  • @pedrodavi_05
    @pedrodavi_05 8 วันที่ผ่านมา

    Seria interessante tentar usar object literal para diminuir a quantidade de ifs. Ademais muito bom o video!

    • @larissakich
      @larissakich 8 วันที่ผ่านมา

      @@pedrodavi_05 oii, muito obrigada pela dica ☺️

  • @Thiago_Santos3101
    @Thiago_Santos3101 9 วันที่ผ่านมา

    achei difícil, vou estudar mais e depois voltar aqui

  • @emilayrios395
    @emilayrios395 9 วันที่ผ่านมา

    Boa noite! Gostaria de fazer um orçamento com você pra fazer um app para mim. Como entro em contato?

  • @lucassouza3178
    @lucassouza3178 13 วันที่ผ่านมา

    Vendo esse vídeo n precisa nem fazer curso de html e css kkk, muito bom.

  • @alissonxzff
    @alissonxzff 13 วันที่ผ่านมา

    top

  • @LuanRBarros
    @LuanRBarros 13 วันที่ผ่านมา

    e como faz sub menu ?Tipo, clicando em uma opção aparece outra em baixo

  • @jacksonjunior4251
    @jacksonjunior4251 14 วันที่ผ่านมา

    Seu jeito de ensinar é muito bom, sua voz suave deixa tudo suave, eu gostei!

  • @jccarlos2025
    @jccarlos2025 14 วันที่ผ่านมา

    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.

  • @jccarlos2025
    @jccarlos2025 14 วันที่ผ่านมา

    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

  • @OI-dq1mn
    @OI-dq1mn 15 วันที่ผ่านมา

    Oii pode dizer onde fica a class dark? Pq coloquei no meu código e não mudou nada 😅

  • @topfilmesply
    @topfilmesply 17 วันที่ผ่านมา

    Muito facil, tambem faz tempo que eu desenvolvo

  • @AndreL.Hungria
    @AndreL.Hungria 17 วันที่ผ่านมา

    simples e muito bom, parabéns

  • @brenocastro8750
    @brenocastro8750 19 วันที่ผ่านมา

    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 🥰

    • @larissakich
      @larissakich 19 วันที่ผ่านมา

      Oii, muito muito obrigada pela sujestão, vai me ajudar muito

  • @coxavelox5854
    @coxavelox5854 20 วันที่ผ่านมา

    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..

    • @thavilly
      @thavilly 16 วันที่ผ่านมา

      oiii,vc poderia me manda seu slime ou PDF?pra eu ter uma base, tô começando fazer o trabalho

  • @ailtonjunior5795
    @ailtonjunior5795 23 วันที่ผ่านมา

    Top de mais, parabéns 👏🏽👏🏽👏🏽

  • @AndrezzaNS
    @AndrezzaNS 24 วันที่ผ่านมา

    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; }

  • @joseruimaiasampaio6138
    @joseruimaiasampaio6138 24 วันที่ผ่านมา

    Muito bom, didática muito cara, parabéns !!!

  • @danielkubijan8087
    @danielkubijan8087 24 วันที่ผ่านมา

    Maravilhosa demaiiss, é isso, vídeo muito bom, direto ao ponto, comunicação clara. Ótimo vídeo!!!

  • @user-rz8bw5os3e
    @user-rz8bw5os3e 24 วันที่ผ่านมา

    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😄

  • @claudiomasters4765
    @claudiomasters4765 25 วันที่ผ่านมา

    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!

  • @teotoniaeduardo4180
    @teotoniaeduardo4180 25 วันที่ผ่านมา

    Muito obrigada. Estava na dúvida aonde inserir o else e o if. Muito obrigada. Parabéns

  • @FelipeSilva-gc9xt
    @FelipeSilva-gc9xt 27 วันที่ผ่านมา

    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

  • @TheHeymanola
    @TheHeymanola 27 วันที่ผ่านมา

    Excelente aula!! Parabéns e brigadão 🎉

  • @renanmarchiqueiros4523
    @renanmarchiqueiros4523 27 วันที่ผ่านมา

    show de bola, obrigado

  • @samuelpinheironogueira2738
    @samuelpinheironogueira2738 27 วันที่ผ่านมา

    Aula muito boa, aprendi bastante.

  • @thiagodacosta1055
    @thiagodacosta1055 29 วันที่ผ่านมา

    Ótimo conteúdo. Parabéns.

  • @jadirlopesdasilva2996
    @jadirlopesdasilva2996 29 วันที่ผ่านมา

    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.?

  • @FernandoSilvaRodrigues-fi6yc
    @FernandoSilvaRodrigues-fi6yc 29 วันที่ผ่านมา

    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.

  • @victorpego9329
    @victorpego9329 หลายเดือนก่อน

    explica como você faz esse link para visualizar o projeto dentro do github

  • @rogermattes5397
    @rogermattes5397 หลายเดือนก่อน

    Me Ajudou muito esse layout, ficou perfeito para um projeto que estou fazendo aqui... Obrigado por compartilhar

  • @antonioalexandre9563
    @antonioalexandre9563 หลายเดือนก่อน

    muito boa sua aula parabens

  • @diegobezerra8804
    @diegobezerra8804 หลายเดือนก่อน

    Qual seria a nota de desempenho desse site no page speed do google?

  • @thiagorodrigues5958
    @thiagorodrigues5958 หลายเดือนก่อน

    Se eu quiser adicionar outra tabs dentro dessa, onde deveria inserir o comando do código?

  • @edugrubel
    @edugrubel หลายเดือนก่อน

    Pra vc fazer a página adaptável aos dispositivos móveis, use o bootstrap ! Poupa muito código seu !

  • @user-ht2ch6gg9q
    @user-ht2ch6gg9q หลายเดือนก่อน

    MUITO BOM

  • @maiaffx5717
    @maiaffx5717 หลายเดือนก่อน

    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?