Loja Virtual Responsiva com Bootstrap 5 :: Aula 01 :: Preparação do Projeto e a Barra de Navegação
ฝัง
- เผยแพร่เมื่อ 17 ธ.ค. 2024
- Olá! Bem-vindo ao meu canal!
Este vídeo é o inicio de uma série em que criarei um template de loja virtual do zero utilizando o framework Bootstrap 5. Neste primeiro vídeo, prepararemos o projeto, veremos como será o resultado final da página principal e faremos a barra de navegação.
Inscreva-se no canal, curta e compartilhe. Só assim o canal pode progredir.
Bons estudos e boa programação!
Meu amigo que projeto robusto hein, didática perfeita e estruturação bem precisa, bastante profissionalismo, parabéns!
Muito obrigado pelo comentário positivo! Isso me motiva a continuar com esse trabalho. Existe uma versão mais atual e completa desse vídeo. Quando puder dar uma olhada, segue o link: th-cam.com/video/SGqe6RixDcg/w-d-xo.html . Um grande abraço e bons estudos!
Começando trabalhar codificando hoje depois de ter acompanhando todo o canal do Professor Ricardo e assistido quase todos os vídeos.
Conteúdo de altíssima qualidade, vale o like com toda certeza e até compartilhar com os amigos nas redes sociais. Parabéns Professor Ricardo. Gratidão sempre!!!
Eu é que lhe agradeço pela confiança, Francisco. Um abraço pra ti!
Irado demais! Parabéns! Vou aprender bootstrap só pra fazer esse projeto
Valeu, Renan! Bons estudos! Se possível, dê uma olhada no vídeo mais recente da loja virtual com Bootstrap. Ele tem mais de 2 horas de duração. Bons estudos e um abraço!
@@maroquio Pode deixar Professor
Parabéns professor! Aula excelente. Forte abraço.
Muito obrigado, Dicelmo! Espero continuar atendendo às suas expectativas. Um grande abraço!
Excelente aula, muito obrigado!!
Me ajudou muito.
Valeu, Álvaro! Fico feliz em ter ajudado. Não deixe de assistir ao vídeo com o projeto completo, pois está mais atualizado. Ele é o último dessa playlist. Um grande abraço!
Que aula excelente professor parabéns.. está ajudando demaaais
Muito obrigado, Robson! Ficaria lisonjeado se pudesse contar com sua inscrição no canal e se pudesse compartilhar esse conteúdo. Um grande abraço!
Muito bom!
Muito obrigado pela confiança, Moisés. Um grande abraço!
Ricardo, deixa eu te fazer uma pergunta sincera e que eu ainda não tenho experiência suficiente pra chegar a uma conclusão. Eu estou estudando javascript e nada mais normal que ir para o react e para o NODE (ao invés de pular para o PHP, JAVA e etc, que por sinal tbem já dei uma estudada). Nesse meio do caminho fui aprendendo outras coisas e recentemente entreguei um projeto freelancer todo usando só o Bootstrap (digo em relação a bibliotecas e frameworks). Aí vem minha dúvida, até onde é realmente fundamental e muito superior usar um React, Vue ou Angular no front end ao invés do Bootstrap? Eu não consigo entender isso direito. Tipo, o que o React me daria de vantagem no desenvolvimento que valha a pena investir tempo nele. Muito Obrigado. Excelente seu canal.
Olá! Sua pergunta é muito boa. Na verdade, React, Vue e Angular são frameworks para criação de aplicações web de página única (SPA), que melhora muito a interação com o usuário, uma vez que evita a contínua atualização de página. O Bootstrap, por sua vez, lhe ajuda no design das páginas, trazendo classes e componentes prontos para uso. Portanto, o Bootstrap acelera bastante o processo de design das páginas. Inclusive, React+Bootstrap formam uma dupla interessante de se trabalhar. Apesar das biblitecas/frameworks SPA permitem a criação de interfaces mais interativas, semelhantes a uma aplicação desktop, elas pecam na hora do SEO, ou seja, as ferramentas de busca tem dificuldade de indexar sites do tipo SPA. Uma solução, neste caso, seria usar o Next.js, que é baseado em React e pode ser combinado com Bootstrap para facilitar o design das páginas. Bem, espero que eu tenha conseguido esclarecer sua dúvida. Qualquer outra questão, é só comentar aqui. Um abraço e muito sucesso em seu aprendizado!
Kra, muito boa a didática, estou vendo o curso de bootstrap e é melhor do que conteúdo pago! vc já tem vídeo mostrando a aplicação web desse projeto?
Valeu, Rodrigo. Fico feliz em saber que gostou. Bons estudos!
MUITO BOM , PERFEITO , MARAVILHOSO ME AJUDOU MUITO!!!!!!!!!!!!!!!!!!!!!!!!!
Obrigado, Erick! Espero continuar atendendo às suas expectativas. 🤙
ameei
Muito obrigado pelo comentário positivo, Paola. Bons estudos!
Muito bom o conteúdo. Uma ótima didática, ainda mais para mim, que estou começando agora. 👏👏👏
Só uma pergunta: é possível utilizar o bootstrap fazendo referência linkada, sem necessidade de baixar?
Com certeza! Veja o curso completo de Bootstrap no canal. Na primeira aula eu já ensino a fazer isso.
Ricardo, pode me ajudar? O meu menu não está expandindo, já revisei e está correto.
Ei, Wesley! Provavelmente é por conta da versão do Bootstrap. Veja o vídeo mais novo de criação da loja virtual. É o mais assistido do canal! Bons estudos!
Quando fui testar o botão de retrair os menus ele não listou os menus
O meu código tá assim:
Loja
Loja
Principal
Política de Privacidade
Cadastrar-se
Entrar
o meu apresenta o mesmo na resolução da versão mobile
Meu caro, tente remover a "/" no início da referência para o arquivo Javascript e me diga se funcionou. Um abraço!
Para quem não conseguir instalar o bootstrap é só colocar o comando sem o @next
Obrigado pela contribuição! Um abraço!
Tem aulas ensinando a parte de conexão com o banco de dados?
Olá, Isabelle. Por enquanto não fiz essa aula ainda, mas farei muito em breve. Vou fazer o design do backend e em seguida a aula da programação da aplicação web completa. Fique atenta aos vídeos. Um abraço!
sabe dizer pq os comandos de instalações não fnciona no meu visualcode?
npm : O termo 'npm' não é reconhecido como nome de cmdlet, função, arquivo de script ou
programa operável. Verifique a grafia do nome ou, se um caminho tiver sido incluído, veja se o
caminho está correto e tente novamente.
No linha:1 caractere:1
+ npm install bootstrap@next
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Amigo. Tenta instalar com a nova versão do bootstrap. npm install bootstrap@5.3.3
Baixe o NodeJs e instale em seu computador para que npm seja reconhecido. Um abraço!
Tem alguma diferença em usar online e usar o local? tentando baixar a biblioteca do icons ele está dando erro :(
Tem, sim. Dê uma olhada no curso novo de Bootstrap 5 aqui no canal. Nas primeiras aulas eu já explico bem essa diferença. No curso novo, as aulas são bem curtas, portanto, é bem suave de assistir. Um abraço!
No meu não está aparecendo o carrinho. Meu código é esse:
Oorun Moda Praia
Oorun Moda Praia
Quem Somos
Nosso Time
Nossos Produtos
Quero me cadastrar
Entrar
Olá! Isso pode ser problema com a versão do Bootstrap. Tente assistir ao vídeo mais novo em th-cam.com/video/SGqe6RixDcg/w-d-xo.html . Espero que dê certo. Um abraço e bons estudos!
a listagem dos menus quando ele fica responsivo no meu não funciona, já fiz de tudo e não vai
Olá, Breno. Dá uma olhada nessa videoaula: th-cam.com/video/SGqe6RixDcg/w-d-xo.html . Ela é mais atual e certamente considera as modificações que o Bootstrap sofreu. Espero que dê certo. Um abraço!
Olá! Já saiu o vídeo colocando esse projeto online?
Olá, Marcos! Ainda não saiu. Estou concluindo o curso de desenvolvimento web e o projeto final será programar essa loja virtual. Espero conseguir publicar isso ainda no primeiro semestre desse ano. Um abraço!
@@maroquio Obrigado pelo retorno Maroquio! Seus vídeos são excelente!
Tenho a conexão do Bootstrap no vs code, mas na parte do terminal "npm install bootstrap@next" e "Bootstrap icons" estou com problemas. O vs code não reconhece e daí o ícone do carrinho de compras não aparece.
Olá, Leandro. Veja o vídeo mais atual sobre a criação do design da loja virtual. Ele está disponível no canal e tem quase 3h de duração. Espero que dê certo! Um abraço!
Olá, tudo bem?
tive um problema aqui, quando clico na navbar quando estou na janela pra testar responsividade o botão não funciona! Já tentei rever seu código várias vezes pra ver se era erro no código, mas não é. Você tem ideia do que possa ser?
obs: uso o Firefox
Olá, camarada! Provavelmente é porque essa videoaula foi gravada com a versão beta do Bootstrap 5 a versão final acabou saindo com algumas alterações. Dá uma olhada na versão completa atualizada dessa aula no link a seguir: th-cam.com/video/SGqe6RixDcg/w-d-xo.html . Um grande abraço!
Assisti ao vídeo indicado abaixo, e por sugestão sugiro que vejam ele, mas para resolver este problema em específico é na linha do botão:
trocar: data-toggle por data-bs-tpggle
trocar: data-target por data-bs-target
Já estou fazendo o uso no BS5.3.0-alpha
Olá, boa tarde!
Eu estou com 2 problemas o primeiro é quando eu tento um arquivo com / . Ele so funciona quando removo a barra, por exemplo: no video esta assim "/node_models/bootstrap..." mas no meu funciona "node_models/bootstrap..."
E o outro problema é que o botao da navbar nao expande o conteúdo.
Olá, Luiggi. Realmente o arquivo Javascript pode não ser localizado se usar / . Nesse caso, use sem a barra mesmo. Se o arquivo Javascript do Bootstrap não carregar, os componente que têm interação não funcionam. É o caso do botão da navbar. Bons estudos e um grande abraço!
não achei parte da transformação deo front end para uma aplicação WEB.
isso foi feita?
Olá, Eduardo. Realmente ainda não tem essa parte. Pretendo fazê-la na primeira oportunidade que surgir, okay? Fique ligado no canal. Um abraço!
Boa tarde Jovem, tudo bem? Estou seguindo seu tutorial, porem ao abrir o terminal e seguir as suas intruções, as pastas nao baixam, porem no terminal, aparece a mensagem de 660 pacotes instalados , 34 procurando e 0 vulnerabilidades. Segui com o tutorial porem nao esta ficando como no video. Pode me ajudar. Att: Evaristo Batista
Olá! Pode ser problema de versão do Bootstrap. Tente assistir ao vídeo atualizado desta aula em th-cam.com/video/SGqe6RixDcg/w-d-xo.html . Espero que ajude a resolver o problema. Um abraço e bons estudos!
Ola, pode me ajudar? quando eu rodo pelo servidor do Visual ele funciona certinho, mas como faco para rodar ele diretamente no navegador? pois ai ele perde as referencias do css e bootstrap
Olá, Fabio. Me desculpe pela demora na resposta. Realmente rodar direto pelo navegador perderá as referências, a não ser que passe o caminho físico completo do arquivo CSS e JS. Porém, essa não é uma boa prática. O ideal é rodar usando um servidor local mesmo, como o da extensão Live Server do VSCode. Um abraço!
Olá, eu consigo modificar algumas coisas no css?? Como faz?
Olá, Samara! Consegue, sim. Você tem que criar um arquivo CSS e referenciá-lo após a referência ao Bootstrap no HEAD da página. Feito isso, basta você criar os seletores para os elementos que queira personalizar e eles irão sobrepor as configurações do Bootstrap. Bons estudos e um grande abraço!
é permitido colocar este projeto no portifólio?
Olá, Vithor! Desde que você coloque que o projeto foi desenvolvido a partir das aulas do meu canal, não tem problema nenhum. Referenciando a fonte da forma correta, vai demonstrar transparência de sua parte para qualquer um que visite seu portfolio. O que não pode é você afirmar que você criou o projeto, entendeu? Um grande abraço!
Boa noite , estou tentando replicar esse código mas o meu navbar collapso não esta funcionando . Ele cria essa barra mas ao clicar não abre nem fecha :(
Olá, Maria. Quando gravei essa videoaula, a versão 5 do Bootstrap ainda estava em fase Beta. Algumas poucas coisas mudaram na versão final. Portanto, sugiro que você veja o vídeo th-cam.com/video/SGqe6RixDcg/w-d-xo.html , pois nele eu faço design completo da loja virtual e já uso a versão final do Bootstrap. Bons estudos!
Erro na instalação do bootstrap
PS C:\xampp\htdocs\quitanda> npm install bootstrap@next
npm : O termo 'npm' não é reconhecido como nome de cmdlet, função, arquivo de script ou programa operável. Verifique a grafia do nome ou, se
um caminho tiver sido incluído, veja se o caminho está correto e tente novamente.
No linha:1 caractere:1
+ npm install bootstrap@next
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
PS C:\xampp\htdocs\quitanda>
Olá, Francisco! É necessário instalar o Node.js. Entre em www.nodejs.org e baixe o instalador para sua plataforma. Depois de instalar, execute o comando "npm install bootstrap", sem o @next. A versão do Bootstrap que uso já saiu da fase beta e se tornou estável, portanto, o @next é dispensável. Qualquer outra dúvida, comente novamente. Um abraço!
@@maroquio Consegui, querido. Muito agradecido.
hoje em dia ainda é saudavel o bootstrap@next ?
Hello! If you are talking about the "npm install" command, it is better using just "npm install bootstrap", because version 5 is the default now. Hope it helps. []s!
@@maroquio muito obrigado, mas por que tá falando em inglês? Obrigado assim eu volto a praticar, obrigado em dobro. Por me ajudar com a dúvida e por me fazer lembrar que tenho que voltar a estudar inglês. Thanks
Rsrs... pelo seu nome eu achei que você fosse gringo e que o TH-cam tinha traduzido teu comentário para português. Me desculpe... Um abraço!
@@maroquio don't apologize, friend! I am very grateful that you exist and share knowledge and encourage me to study not only programming but also English.
Kkk... Fantastic, bro. I'm glad to help you. Keep moving forward! Cheers!
Olá as classes do nav todas elas não estão a funcionar
Olá! Certifique-se de que adicionou corretamente a referência para o CSS do Bootstrap à página, pois o código está correto. Veja se o caminho do CSS que adicionou realmente existe e se a versão do Bootstrap que está usando é realmente a versão 5. Um abraço!
@@maroquio Realmente tem algo de estranho... Quando o navbar esta em forma de botão ele não expande, não mostra os links, isso já havia ocorrido comigo mas não me recordo o que fiz para resolver...
Refiz toda a instalação, verifiquei a versão (5.0.0-beta2) mas realmente parece que está faltando alguma coisa...
@@AriVenuth se não me engano, algumas classes mudaram de nome na versão 5 mais atual. Creio que usei a. versão alpha nesse vídeo é já estamos na beta 2. Algumas classes realmente mudaram de nome. Deve-se acrescentar um “-bs-“ nos nomes das classes. Vou verificar e posto aqui.
@@maroquio realmente era isso... adicionei "-bs-" (data-bs-toggle="collapse" data-bs-target=".navbar-collapse")
Muito obrigado pela resposta...
Também agradeço pelo material dos vídeos, esta sendo uma grande ajuda...
Abraço !!!
@@AriVenuth Excelente! Eu é que te agradeço por postar a solução aqui. Certamente vai ajudar a outras pessoas. Um grande abraço!
Não estou conseguindo colocar a imagem do carinho :(
Olá, Ancelmo! Você poderia me informar em que tempo da aula está o trecho que não funciona contigo? No aguardo. Um abraço!
Eu também não consegui, não aparece nada (17:43).
@@matealves isso mesmo
Olá, Dessa forma como ele colocou o ícone do carrinho acredito que não esteja mais disponível, da forma que eu consegui foi indo na pasta bootstrap-icons/icons eu fui até o iconi cart3.svg e copie o código svg dela e coloquei no lugar do
@@DanielFelipe-xj5iw Obrigada Daniel! Tava sofrendo aqui rsrs
Olá amigo , gostei muito do video , eu tambem estou fazendo tutoriais la no meu canal sobre html , css ; depois vc da uma olhada la!
Olá! Obrigado pelo comentário. Vou dar uma conferida no seu canal. Um abraço!
meu nao funcionou
Olá, Daniel. Dê uma conferida no vídeo novo de criação da loja virtual com Bootstrap 5 que tem no canal. Ele já faz uso da versão estável do Bootstrap 5, e não mais da versão Beta. Provavelmente o problema que você teve está relacionado a isso. Um abraço!