Projeto do zero ao deploy com HTML, CSS, TailwindCSS, JavaScript - AULA 02
āļāļąāļ
- āđāļāļĒāđāļāļĢāđāđāļĄāļ·āđāļ 11 āļĄāļĩ.āļ. 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:
sujeitoprogramador.com/aula-f...
ð (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/FullstackPro
ð Curso completo UI e UX - Figma:
sujeitoprogramador.com/design...
â 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 TH-cam
up upu uppp
Mano a didÃĄtica desse cara ÃĐ surreal, o maluco ÃĐ brabo de mais.
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
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.
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
Isso ÃĐ o ouro garimpado e refinado. MdsâĪ
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 ðĨðĪðĪ
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
cara vocÊ ÃĐ muito brabo top de verdadeðð
Que Aula! ParabÃĐns ððžððžððžððž
Ãtimo ter completado esse projeto, didÃĄtica excelente.
Cara, parabÃĐns pelo conteÚdo, obrigado pela iniciativa.
Finalizei o projeto! Sua didÃĄtica ÃĐ maravilhosa! ParabÃĐns!
DidÃĄtica fantÃĄstica!! VocÊ transmite a informaçÃĢo de forma clara, muito legal mesmo.
projeto muito bom, e como sempre sua didÃĄtica excelente
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.
Show de projeto!
Perfeito demais. O Homem ÃĐ bom!
Maneiro demais o projeto. ParabÃĐns pelas aulas.
Ãtima didÃĄtica! Arrasa muito!
ParabÃĐns Matheus, didÃĄtica Show de bola, esta de parabÃĐns pelo excelente conteÚdo.
Show de bolað, acompanhei as aulas mais implementei em ReactJs + Vite + typescript e tailwind, ainda hj tou impressionado na produtividade com esse framework CSS
Finalizei o projeto. Muito aprendizado nesse projeto. Vamos que vamos.
Muito top sua didÃĄtica, aprendi muito javascript sÃģ nesse video!
Top demaisððð
Aulas sensacionais! Muito aprendizado. Tailwind ficou mais fÃĄcil agora hehe. Muito obrigado.
Show, essa aula mudou meu conceito sobre JS. Com essa explicaçÃĢo ficou bem mais fÃĄcil de entender. Obrigado.
Ãtima DidÃĄtica !
ParabÃĐns !
Matheus vocÊ ÃĐ sensacional!! Muito obrigado por compartilhar conosco esse magnÃfico projeto. Valeu
FantÃĄstico, parabÃĐns
Sensacional, simples assim!
Valeu!
Muito bom, explicaçÃĢo excelente de um projeto real.
Muito top! Conclui o projeto tranquilo.
Seria muito bacana se tivesse continuaçÃĢo do projeto. Com mais funcionalidades
Animal meu irmÃĢo! conteÚdo muito foda!
Top de mais
muito bom parabÃĐns mandou bem
aula top dms!!!
Ãģtimo projeto! ð
Aula top demais, conheci esse canal a poucos dias e jÃĄ gostei, a didatica ÃĐ sensacional!!!!
Tamo junto demais, fico feliz que estÃĄ aprendendo ðĨ
Muito top!
ðĨðĨðĨ
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 ðĨðĨ
Projeto Topzera!!!
Dalee boa ðĨðĨ
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?
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.
Que projeto absurdo man. Acompanhei e deu tudo certo aqui no meu tambÃĐm.
Boaa, tamo junto 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
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 ðĨðĨ
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.
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
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!!
Opaa, agora so falta fazer um pra fluxo jwt haha
26:44 salvando pra continuar amanha
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.
Chega logo 11hrs!!
Boaa pra cima ðĨ
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 ?
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!
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 âĪïļ
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?
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 ??
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?
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
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
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
Tem alguma maneira de "buildar" e subir para um provedor comum, tipo hostgator?
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.
Excelente didÃĄtica, esse projeto poderia ta DisponÃvel no GITHUB TBM..
EstÃĄ sim para os membros do canal tem acesso ao github tambÃĐm ðĪ
Como acesso ao seu github
Ãtimo projeto, @Sujeitoprogramador ou outra pessoa, puder me ajudar, como podemos colocar o total dos produtos na linha para enviar para o whatsapp?
âĪâĪâĪâĪâĪâĪâĪâĪ
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
Existe a possibilidade de enviar a mensagem incluindo o valor total dos itens ?
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?
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.
@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 ðĨ
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
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!
Sou iniciante, se eu tiver 10 clientes, tenho que fazer 1 deploy para cada?
Ta e se eu escolher somente ate sabado,como fica o codigo?
Da pra usar o projeto pra criar um Sistema de Reserva de Hotel ??
faala, quando eu subir pro github e abrir numa url a foto de capa sumiu, alguem pode me ajudarð
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?
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.
como colocar os adicionais amigo
isso muito importante para uma loja de lanche
O meu modal nÃĢo atualiza...
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.
Matheus tem como fazer um novo projeto criando a aba de pagamento da hamburgueria?
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.
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
Fala mano
rapaz, dps de tempos usando js so no react, vamo manipular dom novamente. Salve rapaziada Bora boraaaa
Boaa, vai curtir projeto vai fica show
eu vim por esse mesmo motivo.
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 //
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
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 ??
o meu js sÃģ da erro
Tem como hospedar esse projeto assim no Github Pages? ou ele nao "entende" o node?
Dessa forma como criamos ele sim pode usar github pages
@@Sujeitoprogramador NÃĢo precisar buildar o projeto com o node?
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.
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
boa mano ., tem como manda o codigo do projeto
usa o nativewind do react native, ninguem explica como usa....