Projeto do zero ao deploy com HTML, CSS, TailwindCSS, JavaScript - AULA 02
HTML-код
- Опубликовано: 1 окт 2024
- 🚀 Aprenda a construir um projeto completo do zero utilizando HTML, CSS, TailwindCSS e JavaScript. Neste projeto passo a passo, você dominará as técnicas essenciais de desenvolvimento web, criando uma aplicação dinâmica e responsiva até criar projeto completo.
👉 Link para acessar todos materiais do projeto:
sujeitoprogram...
🏆 (Inscrições abertas) Se você quer levar a sua carreira ao próximo nível, criar sistemas web, sites do zero a projetos profissionais e sair pronto para o mercado:
bit.ly/Fullsta...
👉 Curso completo UI e UX - Figma:
sujeitoprogram...
★ SEJA MEMBRO e tenha acesso a videos exclusivos e antecipados no canal:
/ @sujeitoprogramador
Faz uma aula 3….. aplicando produtos com banco de dados, menu onde direciona para a categoria ao clicar, colocar observação adicional nos produtos, ao clicar na imagem abrir um modal com informações adicionais e etc. Eu assistir e tudo está perfeito!! Só acho q cabe uma aula 3 e 4 😂😂😂😂
Isso seria TOP!!!
Estou de a cordo kkkkk. Conteúdo único no RUclips
up upu uppp
UP
a ideia é boa mas so com essas duas aulas ai ja da para vc mesmo, eu e a galera fazer os updates, por isso aula desnecessária pois seguiria mesma trajetória dessas 2 aula porem ai que desenvolve pensamento logico tentando errando, eu estou criando tudo usando REACT , TYPESCRIPT e TAILWINDCSS, ta dando um trabalhino mas nada que a documentação não resolva.
Se conseguir criar um painel administrativo, onde você configura esses produtos, e vão para o site, seria muito massa!
Acho que daria para usar o firebase. Voce iria criar lá. Funciona em algo pequeno
@@murilodllx Da pra rodar porem tem muita limitação o plano free, se não me engano somente 100 acessos!
Bate de longe muitos cursos pagos. Didática simplesmente extraordinária, Parabéns e muito obrigado!
Ele tem um curso pago tbm rsrs. Essas 2 aulas desse projeto são gratuitas (um aperitivo), pra vc sentir vontade de comprar o curso.
Digo isso não para dizer que não vale a pena. Pelo contrário. O professor tem uma excelente didática, e provavelmente irei comprar o curso dele.
Mano a didática desse cara é surreal, o maluco é brabo de mais.
Show de bola Matheus! Obrigado por compartilhar esse conteúdo de muita qualidade pra gente, parabéns pelo projeto!👏👏👏
De longe umas das melhores aulas que já fiz 👏🏻👏🏻👏🏻 didática boa demais
Oie! Eu que queria saber só de uma coisa nesse projeto, podemos adicionar mais itens na pagina e colocarmos no nosso carrinho, mas percebi que se adicionasse mais itens ao carrinho (diferentes), nosso modal iria crescer e acertar os cantos da tela, dificultando a visualização do mesmo. Poderia mostrar como faz pra colocar um Scrollbar nos itens, para que adicionado itens novos e diferentes o nosso Modal não expandir, mas que criassem a barra de rolagem. Por favor!
testei essa solução aqui e funcionou: coloca as classes max-h-64 e overflow-y-auto na div dos itens, fica assim:
Showw
Salve galera espero que esteja tudo bem por ali. estou a ter dificuldades para adicionar elementos no modal. tipo quando dou o comando cartItems.innerHTML = ""; está a me dar erro dizendo que o comando innerHTML não pode ser adionado a elementos nulos. Alguém ali para me ajudar a ultrapassar esta dificuldade ??
Uma pergunta, como coloca o carrinho como responsivo? Porque quando coloca todos os itens no carrinho, ele fica grande e não consigo ver os botões e nem consigo colocar o endereço.
Sim pode colocar uma max altura para o cart-items e colocar overflow para ter scroll, exemplo
@@Sujeitoprogramador muito obrigado, me ajudou muito. Eu e minha esposa compramos o seu curso, e com certeza agora vamos evoluir....
@@Sujeitoprogramador A ultima vez que vou te pedir algo, eu compartilhei para um funcionário de uma empresa de TI o meu projeto, e ele disse que no carrinho tinha que aparecer a quantidade certa dos produtos e não quantidade de cart que estão dentro do carrinho. Tentei fazer isto mas não consegui pegar a quantidade e colocar no contador do carrinho.
Mano uma excelente aula muito top, eu gostaria de colocar total geral quando fecha pedido não estar mostrando no WhatsApp, mostra itens, valor, endereço de entrega menos total geral do pedido como faço para acrescentar. Você pode me ajudar.
Maravilha!!
Consegui fazer meu primeiro site de produtos personalizados =) 🙏🏻
Se alguém souber como formatar o "Total" na mensagem do whatsapp, ficarei muito grato.
Boaa tamo junto demais e formatar como o total?
@@Sujeitoprogramador Enviar o valor total dos produtos pelo WhatsApp.
@@SujeitoprogramadorFormatar para que ele seja enviado junto na mensagem que irá para o whats.
Olá, você conseguiu enviar junto com os itens o valor Total via Whatsapp?
@@mrcarlos366 Não. Ele não me respondeu
Caí por engano e descobri de longe a melhor didática que eu já tive, parabéns! Se puder fazer uma aula 3 colocando campo de observações, escolhas se quer cartão, ou dinheiro, troco, agradeceria muito!! Sucesso.
Existe a possibilidade de enviar a mensagem incluindo o valor total dos itens ?
que baita aula, baita video !!!
eu to aprendendo com esse video que tenho q prestar atenção nas palavras com letras maiúsculas e minúsculas , com - nos lugares corretos.
sou estudante e iniciante e esse video me abriu mto a mente
Valeu!
Tem como fazer isso para pizzaria tbm? Tipo já vi em alguns apps de pizzaria que a pessoa consegue escolher o tamanho da pizza, quantas fatias quer, os sabores e adicionais. Agora com HTML, CSS e JavaScript nunca vi, talvez vc pudesse fazer um projeto desse pra gente, sei que é algo mais complexo, mais é algo novo e que não se acha na internet.
E como fica a questão do CMS da página.
Gostaria muito de aprender e vendo como seria.
Cara, parabéns pelo conteúdo, obrigado pela iniciativa.
Sou iniciante, se eu tiver 10 clientes, tenho que fazer 1 deploy para cada?
Excelente aulas! Da pra aprender muito conceito de js. Uma dúvida. Para de fato clientes usavem esse projeto ele tem que estar rodando o npm, para que os clientes consigam comprar por pelo site ?
Alguém sabe dizer se é possível alguém que não sabe absolutamente nada de programação, nem mesmo o básico do básico de html/css fazer o curso do Matheus e conseguir acompanhar e aprender?
Opa beleza? Sim o Fullstack pro vai desde o zero ao mais avançado desde html, css, Javascript, Reactjs, typescript, nextjs até projetos fullstack com banco de dados, e sempre passo a passo na pratica e com nosso suporte, aqui o link abaixo 👇
sujeitoprogramador.com/fullstackpro/
@@Sujeitoprogramador obrigado Matheus, você recomenda iniciar por fullstack pro ou fábrica de aplicativos, estou em dúvida se o conteúdo é o mesmo…?
@@adaooliveira6350 o Fullstack tem o foco em desenvolver sites, sistemas web e fullstack com backend, ja o Fabrica tem o foco mais em JavaScript para o mobile com React native, aprende Reactjs e web mas não é o foco do curso
Show de bola👏, acompanhei as aulas mais implementei em ReactJs + Vite + typescript e tailwind, ainda hj tou impressionado na produtividade com esse framework CSS
Excelente aula!!!! Aprendi muito e to comprando ocurso. Queria saber se poderia mostrar um pouco sobre o expo-print. Para elaborar pdf a partir de "html". Uma espécie de relatório em pdf. A livraria do expo é muito escassa.
alguem me ajuda ai, quando clico no "veja meu carrinho" ele só aparece os produtos, mas nao aparece o total, nem o botao de fechar, nem finalizar pedido, nem o local para colocar o endereço e meu javascript ta identico ao dele ao meu ver
Faz uma atualização no horário de funcionamento da loja, colocando dia da semana que está fechado. Exemplo... Minha loja fecha na segunda e na terça feira. Nesses dias apareceria "Loja fechada, retornaremos dia... ". O mesmo pode ser feito com feriados!
cara, se precisasse criar por exemplo mais de 10 opcoes por exemplo, o que sera interessante usar para fazer essa crianca nao acho que seja muito pratico criar varios e variso itens no html. consegue me ajudar nessa??? react talvez? nunca mexi com react
Onde encontro a colinha dos codigos, para comparar com o meu. Não sei onde to errando, no meu as imagens não estao ficando dentro do conteiners e nem alinhados rsrsrsrsrs Help-meee
Não sei o motivo, mas no inspecionar não aparece literalmente nada na parte do console, e os comandos js não estão fazendo funcionar os botões, já revisei o código yodo e está tudo de acordo com o seu
estou seguindo a sua aula porem teve uma coisa aqui eu não estou conseguindo entender quando abro o carinho esta duplicando os item pore exemplo adiciono um item ele duplica se fechar o carinho e abrir novamente aparece 3 vezes o mesmo e assim sucessivamente algum passou por isso
na hora de subir no git hub, a imagem atras do restaurante nao carrega na hospedagem do git e ja nao sei mais oq fazer
Eu não entendi por que na linha 74 temos q criar uma div, e em baixo a gnt cria de novo uma div no template
O que esta ajudando aprender é a sua didatica porque ajuda muito e facilita na verdade! valeu amigo, você é um bom amigo!
como colocar os adicionais amigo
isso muito importante para uma loja de lanche
Da pra usar o projeto pra criar um Sistema de Reserva de Hotel ??
Finalizei o projeto! Sua didática é maravilhosa! Parabéns!
Didática fantástica!! Você transmite a informação de forma clara, muito legal mesmo.
Que projeto top, aprendi pra caramba com essa didática. A unica coisa que não rolou no meu projeto, foi a imagem que não apareceu ao compartilhar o link.
A imagem de fundo né? O meu tb a imagem n aparece, e Tb quando depois de pronto e já online quando vai em finalizar pedido, onde era para redirecionar para o WhatsApp ele dá erro 404
Isso é o ouro garimpado e refinado. Mds❤
Finalizei o projeto estou muito feliz kkkk
Ta e se eu escolher somente ate sabado,como fica o codigo?
Uma outra coisa que percebi é, que se for colocado muitos itens no carrinho, digo, produtos diferentes, o botão de enviar fica muito pra baixo, impedindo de enviar o pedido para o whatsapp! Como resolve isso?
Sim pode colocar uma max altura para o cart-items e colocar overflow para ter scroll, exemplo 👇👇
@@Sujeitoprogramador Testei e infelizmente não funcionou!
@@BillAcaidoBill tem que aplicar no cart-items com isso vai ter o scroll quando passar do limite dos itens
@@Sujeitoprogramador coloquei dentro do index.html.
Seria isso?
@@Sujeitoprogramador FUNCIONOU! - Muito obrigado. e parabéns pelo conteúdo! Show.
Ótima didática! Arrasa muito!
Uma divida, não funciona em whatsAppweb ou desktop, observei que os produtos escolhidos a lista (array) só vai pra janela de conversa do whatsApp no celular ?
Funciona no web se tu manter ele aberto, se tiver fechado realmente a mensagem não carrega na conversa.
cara você é muito brabo top de verdade🙂🙂
Que Aula! Parabéns 👏🏼👏🏼👏🏼👏🏼
projeto muito bom, e como sempre sua didática excelente
boa mano ., tem como manda o codigo do projeto
Quando adiciono um ao carrinho, os buttons fechar, finalizar carrinho e todo elemento do endereço some, aparecendo somente se não tiver nada adicionado ao carrinho? o que pode ser? segui todo passo a passo conforme o vídeo e o código está batendo
Aconteceu a mesma coisa comigo, verifique a estrutura do HTML no cart-items para ver se a div está fechada na mesma linha, comigo ela estava fechada apenas no final das outras divs por isso os botões sumiam //
Preciso de ajuda!
Depois que coloquei o update dentro do menu, o input do endereço e o total do carrinho, sumiram !
Estou com mesmo problema , conseguiu resolver ??
Aula muito top!
Uma pena que tive problemas na hora do carrinho, o botão remover fica em baixo do pedido e não no lado direito onde era pra ficar.
Porém, com certeza é erro meu. Parabéns, muito massa a aula!!
Parabéns por esse conteúdo !!!
Fala mestre, no minuto 24:34, você utilizou o parseFloat para converter a string em number, eu normalmente uso um + na frente ex: +parentButton.getAttribute("data-price"); ... isso dá problema?
Matheus você é sensacional!! Muito obrigado por compartilhar conosco esse magnífico projeto. Valeu
49:24 Quando coloco "cartTotal.textContent = total;" o meu Modal para de abrir. Clico no botão abrir o carrinho, mas nada acontece!... Alguém pode me ajudar por favor?
Alguem sabe me dizer se os cursos dele pagos tem o mesmo tempo de aula??
Opa beleza? Dentro do curso as aulas são menores, em torno de 15 minutos cada, bem detalhado e separado :)
@@Sujeitoprogramador me dá um descontoooooo, queria comprarrrr mas tô desempregada :(
@@Sujeitoprogramador te mandei msg no insta mas não tive retorno
@@grazielecastilho2881 Respondi lá 🔥
Didática excelente! Parabéns!!! Só uma pergunta, no meu código, quando eu fui fazer a lógica para atualizar a quantidade do "span" do "footer", ele não está atualizando o número só de eu clicar em adicionar. Eu preciso abrir o modal, que aí sim ele altera o "span" e mostra quantos itens tem no carrinho. Alguém pode me ajudar?
Show, essa aula mudou meu conceito sobre JS. Com essa explicação ficou bem mais fácil de entender. Obrigado.
Opaa, agora so falta fazer um pra fluxo jwt haha
Parabéns Matheus, didática Show de bola, esta de parabéns pelo excelente conteúdo.
A melhor aula de Tail e Js do youtube .... rápido e objetivo, parabéns irmão!
1:22:04 Eu queria colocar um alerta de quando o carrinho estiver vazio e o cliente tentar enviar, não funcionar e aparecer uma mensagem "Parece que seu carrinho está vazio" ou algo do tipo. Alguém sabe como fazer isso?
eu tentei colocar mas ele abre o whatsapp na sequencia, e se eu colocar o "return;" dá um erro!
@Sujeitoprogramador velho da pra você fazer mais um video conectando esse projeto com um banco de dados por favor, estou com nuita dificuldade na faculdade para fazer um projeto completo assim
Confere o canal temos o projeto Do back ao front 🔥
51:00 e se eu quiser que o carrinho seja contado pela quantidade dos items? exemplo: selecionei 3 hamburguers iguais e quero que apareça o número 3, em vez de apenas 1.
// Função para atualizar o contador de itens no carrinho
function updateCartCounter() {
const totalQuantity = cart.reduce((sum, item) => sum + item.quantity, 0);
cartCounter.textContent = totalQuantity;
}
Aulas sensacionais! Muito aprendizado. Tailwind ficou mais fácil agora hehe. Muito obrigado.
quando subi meu projeto na Vercel ele foi sem nenhum modelo de CSS, apenas a página crua sem nenhuma estilização, alguém sabe me dizer como posso arrumar ou o que pode ter acontecido?
Perfeito demais. O Homem é bom!
26:44 salvando pra continuar amanha
Passando para agradecer ao professor, projeto massa, consegui acompanhar conceitos de JS que eram um pouco obscuros consegui compreender, ainda tenho muito a aprender, queria ter colocado o valor total na mensagem pro whasapp, mas nao consegui kkk, se alguem souber q puder ajudar seria otimo. Bons estudos a todos.
Não encontrei o curso do git e Github, para subir o projeto, eu já tenho a conta do github se eu apenas utilizar os comandos no cmd já funciona? Muito obrigado aula top demais ❤️
Sensacional matheus, manja muito cara, manipular dom me parecia ser mt dificil algo impossivel pra mim, dps de mecher com react js , e voltar aqui, a diferença e que voce precisa manipular o html separadamente, e no react js e jsx. muito bom tbm a meta tag og .
Boaa 🔥🔥
Esse canal deveria ser gigante, porque o que esse professor ensina e como ensina é algo incrível. Você salvou minha vida
Tamo junto demais já vai ajudar demais curtindo e compartilhando 🔥🤟🤟
Show de projeto!
FAZ UM CURSO ATUALIZADO E AVANÇADO DE HTML E CSS PFV
DEPOIS DESSE VC FAZ UM DE JS AVANÇADO 🥺🙇♂
Já temos nosso fullstack pro é atualizado e com nosso suporte, comunidade exclusiva, mais de 400 aulas do zero ao mais avançado , link tá na descrição 🔥
@@Sujeitoprogramador boa vlw
Muito top! Conclui o projeto tranquilo.
Seria muito bacana se tivesse continuação do projeto. Com mais funcionalidades
Ótima Didática !
Parabéns !
No meu caso a unica coisa que não deu certo, foi na parte de está a mensagem preenchida no whatsapp
56:24 nao entendi isso
Finalizei a parte de Front do Projeto e vou fazer a de interação, mais já me veio a ideia esse projeto consigo fazer um api básica para cadastrar os produtos e carregar esses dados nesse front?
Sem nada muito elabora apenas um form de cadastro básico
Finalizei o projeto. Muito aprendizado nesse projeto. Vamos que vamos.
Depois que hospedei meu site o background some, alguém aí pode me ajudar.
Salve paulo! Conseguiu resolver? estou com o mesmo problema
Tem alguma maneira de "buildar" e subir para um provedor comum, tipo hostgator?
Ótimo projeto, @Sujeitoprogramador ou outra pessoa, puder me ajudar, como podemos colocar o total dos produtos na linha para enviar para o whatsapp?
Boa noite, Muito bom a Didatica e explicações. Gostei muito, aprendi muito.
Uma duvida, nos teste coloquei varios itens no carrinho e ele ficou grande, com isto os botoes ficou escondido passando da tela, teria que colocar tipo de scroll nele, como fazer isto?
Obrigado.
Sim pode colocar uma max altura para o cart-items e colocar overflow para ter scroll, exemplo 👇👇
@@Sujeitoprogramador Ola, obrigado pelo retorno.
Fiz o teste aqui e ficou muito bom. Agora vou tentar colocar uma obs quando colocar o Lanche, e agrupar, Laches e depois Refri..
muito obrigado.
Muito top sua didática, aprendi muito javascript só nesse video!
usa o nativewind do react native, ninguem explica como usa....
didática incrível mano! de cg-ms também, conheci seu canal essa semana
Boaa show demais, tamo junto e bem vindo ao canal 🔥🔥
Top de mais
Matheus tem como fazer um novo projeto criando a aba de pagamento da hamburgueria?
de fato uma didática absurda, aprendi TUDO!
Boaa, tamo junto demais!
@@Sujeitoprogramador vai continuar mais essas aulas ou parou por aí? tem mais vídeos seus nessa pegada so que envolvendo react ou algum framework do front?
o meu js só da erro
Eu reparei e que não apaga o endereço após ser enviado pelo whattsap.
Sim sim, deixamos como foi preenchido até poderia zerar igual zeramos os itens do carrinho mas deixamos preenchido e só vai apagar se sair e entrar do site
Muito bom, explicação excelente de um projeto real.
Fantástico, parabéns
faala, quando eu subir pro github e abrir numa url a foto de capa sumiu, alguem pode me ajudar😅
muito top.!
Que projeto absurdo man. Acompanhei e deu tudo certo aqui no meu também.
Boaa, tamo junto demais 🔥🔥🔥
Cara! Muito boas essas 2 aulas, aprendi muito mesmo. Só estou tendo um probleminha, eu adicionei os 8 hambúrgueres no cardápio, dai adicionei os 8 hambúrgueres e os dois refris no carrinho, a lista no modal ficou enorme e os botões de fechar e finalizar desceram la pra baixo e quando tento rolar a página ela desce apenas a principal que fica atras e o modal fica parado, ou seja não consigo nem fechar pelo botão fechar e nem finalizar....
coe mano!!
@@matheusaraujo4578 Problema já foi resolvido mano. Adicionei um tamanho para o modal (max-h-[300px]) e adicionei uma barra de rolagem (overflow-y-auto)... o código ficou assim:
@@italoramonss cara então te chamei pra ver se tu consegue me ajudar kkkk pq foi o comentário mais próximo, estou tendo uns problemas, tem disc ou GitHub?
Fala mano
Aula top demais, conheci esse canal a poucos dias e já gostei, a didatica é sensacional!!!!
Tamo junto demais, fico feliz que está aprendendo 🔥
Boa noite! Estou fazendo tudo da maneira que você fez, porém, quando chega na hora de aparecer os itens no carrinho, no meu não aparece. Já voltei o vídeo várias vezes e não consigo achar onde errei, poderia me enviar o código fonte? Obrigado!
Opa beleza? Provavelmente algum erro na função updateModalCart ou na addCarr algum detalhe passou
E sobre o código como você é membro só ir ali no canal na aba “comunidade” e lá eu compartilhei o post para os membros com o repositório com o código completo pra conferir 🔥🤘
@@SujeitoprogramadorObrigado. Não sei o que eu fiz. Mas realmente não consegui achar o erro. Obrigado pela atenção! Irei fazer seu curso em breve, comecei a fazer Engenharia de Software mês passado. Já vi que sua didática é excelente!
dá uma olhada no teu código html, na parte do modal, nos fechamentos das divs e tals.