Criando o site do filme Super Mario Bros com HTML e CSS
Вставка
- Опубліковано 24 кві 2023
- Neste tutorial passo a passo, você aprenderá a como criar o site do filme Super Mario Bros usando HTML e CSS.
Visualizar projeto: filme-mario.leonardovargas.dev/
Link do template: github.com/leovargasdev/youtu...
Biblioteca de animação: michalsnik.github.io/aos/
🎥 𝗢𝗨𝗧𝗥𝗢𝗦 𝗩𝗜𝗗𝗘𝗢𝗦
• Aprendendo a usar templates no Github
• Aprenda a usar Reposit...
• Aprendendo CSS com a tela do Airbnb
• Aprendendo CSS com a t...
• Como personalizar o VSCODE
• Aprenda a personalizar...
• Como personalizar o terminal do LINUX
• COMO PERSONALIZAR O TE...
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
🏘 𝗖𝗢𝗠𝗨𝗡𝗜𝗗𝗔𝗗𝗘 𝗡𝗢 𝗗𝗜𝗦𝗖𝗢𝗥𝗗
/ discord
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
📱𝗥𝗘𝗗𝗘𝗦 𝗦𝗢𝗖𝗜𝗔𝗜𝗦
Twitch: / leovargasdev
Instagram: / leuvargas
Twitter: / leovargasdev
Github: www.github.com/leovargasdev
Linkedin: / leonardo-luis-de-vargas
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
💻 𝗦𝗘𝗧𝗨𝗣
Notebook Dell (amzn.to/48080ra)
Tela 1: Monitor AOC(amzn.to/3NAJq8L)
Suporte Ergonômico ELG (amzn.to/3t0i1G5)
Hub USB C p/ usar na 2ª tela (amzn.to/3uI2jjs)
Webcam Logitech BRIO (amzn.to/3RDm4BP)
Microfone Blue Yeticaster (amzn.to/3sW32wW)
Teclado Redragon Varuna (amzn.to/3T8Dkji)
Mouse Logitech G300s (amzn.to/3Rtnfn4)
Mouse Pad (amzn.to/3Rtnfn4)
Estante (amzn.to/46KgVfr)
Cadeira (amzn.to/3Rtwa71)
Fone de ouvido (amzn.to/3R5yZe9)
▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
#tutorialhtml #sitedomario #criandositedozero #ladingpagedomario - Наука та технологія
Link do respositório template
github.com/leovargasdev/youtube-site-mario
Já deixei preparado com os arquivos iniciais e um template de README!
Valeu!.. ganhou mais um inscrito! rsrs
Que conteúdo maneiro cara. Parabéns, o projeto ficou muito legal!
Que bom que gostou, muito obrigado pelo feedback!
Melhor didática que já vi. Parabéns e obrigado. 👏🏼
Eu que agradeço, obrigado pelo feedback!! 🤙🏼
Você coda muito rápido, é prazeroso de ver, é visível o quanto que você treinou!
Obrigado!
Parabéns pelo projeto, achei top!!
Muito obrigado 😁
Muito bom cara, parabéns!!!
Muito obrigado!
Sensacional, meu primeiro projeto deu tudo certo!
Que ótimo! 🚀
cara de verdade muito obrigada por esse vídeo, eu fui seguindo seus passos mas fiz com um filme de anime que eu gosto muito, e mudei as cores etc, foi perfeito pra eu treinar alternativas quando eu não tinha como seguir totalmente o tutorial e no final eu gostei muito doque eu fiz, não paro de olhar a página 😂❤️
Fico feliz em saber!!! É muito bom dar alguns passos sozinho, saindo do roteiro do video e treinar a criatividade.
Parabéns muito bom, me animou para continuar a estudar.
Sensacional! Consegui acompanhar perfeitamente!
Vc tem muito talento, consegue unir conteúdo de qualidade com ótima didática, já comprei vários cursos na Udemy e poucos "profissionais" possuem tais habilidades.
Acho que a proposta do vídeo era ensinar iniciantes ou intermediários (talvez até alguns avançados), acho que poderia gastar alguns segundos justificando o "por que" ira usar X propriedade, alguns momentos vc escreve o bloco todo e mágica simplesmente acontece, algumas tags podem não ser tão comuns para todos, essa breve introdução da aplicação seria bem vinda. Não mais, só elogios. Me dê licença, irei maratonar seus demais conteúdos.
Muito obrigado pelo feedback!
Os vídeos não tem um público específico, mas é necessário ter um conhecimento básico de HTML e CSS. Se eu for explicar cada tag ou propriedade o vídeo ficará muito longo e no youtube já tem bastante conteúdo de ótima qualidade sobre o básico, com o canal Origamid ou Guanabara.
Prometo justificar um pouco mais a minha linha de raciocínio ao escolher uma tag ou propriedade do css, e tbm tentar falar menos rápido.
Top!! Projeto bacana!
Muito obrigado Ruan
Muito bom, bem explicado.
Obrigado Alessandro!
Video animal, me mostrou qual proximo nivel de css que preciso estudar!
Tmj!! 👊
Cara ficou muito bacana, realmente muito melhor que a original, parabéns e obrigado!!
Obrigado pelo elogio!
Que aula top!🎉
Obrigado! ✌️
Mano você salvou a minha vida MUITO OBRIGADO kkkkkk
De nada jovem!!
muito bom mano
Fascinante
Valeu Léo, suas aulas são sensacionais, to sempre aprendendo bastante ❤
Que bom Beatriz, espero continuar te ajudando!!
KARAKAS MANO! TOP setado e sem enrolação, muito top! parabéns! deixa te perguntar vc tem um curso sobre html5,css3 e javascript nessa sua levada pq é muito top?
Que bom que gostou!! Ainda não, estou pensando em montar um curso, mas primeiro quero aperfeiçoar a minha didática 🙂
Muito foda 🔥
Tmj! ✌
Muito Massa
Muito bom!
Obrigado Renan!!!
Ótima explicação
Obrigado ☺️
Parabéns mano 🎉
Muito obrigado!
muito bom!
Obrigado
parabens irmao pelo video
Muito obrigado, qualquer dúvida só chamar! ✌
Like e inscrito
Obrigado! 🚀
Mano voce tem o dom de ensinar
Vlw d+! ✌️
Vídeo muito bacana.
Projetinho muito maneiro!
varias propriedades muito interessantes.
Se me permite fazer uma crítica construtiva: Desacelerar um pouco nas explicações pode deixar a sua didática ainda melhor.
Sim, algumas pessoas já me alertaram sobre isso, estou tentando falar mais lentamente ahhahaha eu só não queria deixar o vídeo muito longo :/
Muito obrigado pelo feedback!! 😀
que cara bom! Acompanhei e fiz o projeto aqui mas demorou umas 3hr KKKKKK agora pós termino falta ajustar a responsividade do menu com o javascript
O tempo você vai diminuindo conforme a prática, que bom que conseguiu finalizar! E obrigado pelo feedback!
Sem palavras !
Espero que isso seja positivo hahhaha conseguiu fazer o projeto?
@@leovargas Sim Positivo Sempre... o que eu quis Dizer que foi Simplesmente Sensacional encontrar esse Conteúdo... eu só fiquei admirando mesmo kkk' não fiz... aprendi algumas coisas e pronto... Sou muito "iniciantezão"... estou agora querendo aprender um pouco mais como encaixar o JS no meu site...se tiver alguma aula na pratica como aplicar uns JS's no seu Site seria uma ótima sugestão... digo... a pessoa tem um site básico e tals... agora que aprimorar... nesses termos
Que bom que gostou!!
Já sobre o JavaScript, tem um projeto que eu uso bastante. Esse aqui:
ua-cam.com/video/3pAnc4Miv00/v-deo.html&ab_channel=LeoVargas
que cara bom
Obrigado jovem!
Obrigado pelo vídeo, estou aprendendo e gosto de fazer essas coisas legais, mesmo que seja copiando você.
Um feedback que eu poderia dar é para, se puder fazer um pouco mais devagar os códigos, me perdi várias vezes por causa da sua velocidade e atalhos kkkk, mas muito obrigado, vou usar essa base que aprendi com o vídeo para fazer de outros temas.
Que bom! Vou tentar usar menos os atalhos, boa parte das pessoas não conhecem e ficam confusas. Muito obrigado pelo feedback!
Se ficou alguma dúvida, me chame lá no nosso servidor do discord discord.gg/JPS2bY6GVy, posso lhe ajudar
Poderia explicar para que serve a propriedade "inset: 0;" no css?
Claro, essa propriedade vai colocar o valor 0 em todos os eixos(top, right, bottom, left)
Ficou top, faz agora uma versao para mobile, so pra conferir o meu dever de casa de responsividade.
Olá Alessandro, a versão mobile está nesse link filme-mario.leonardovargas.dev/
cara fantástico fiz seguindo seus tutorial ficou muito bom, só um detalhe gostaria que você explicasse o que cada função que você digita serve eu que sou iniciante fico meio perdido. muito obrigado
Olá Alex, que bom que gostou! Qual função você ficou com dúvidas? as funções da lib de animação?
olá aos 4:20 você usa o Wirth inherit largura ok mas esse inherit seria para fazer qual função ?
agradeço mesmo a atenção @@leovargas
@@alexsandrodias9959 é uma função de herança, nesse caso o elemento :after vai herdar a largura e altura do seu pai, a div com o id #background
Mais detalhes sobre o inherit:
developer.mozilla.org/pt-BR/docs/Web/CSS/Inheritance
muito obrigado já estou seguindo seus outro vídeo e aprendendo muito valeu!!@@leovargas
fala leo tentei replicar e nao sei que esta acontecendo com o codigo a minha pagina ta totalmente diferente da sua , hoje tenho apresentacao do meu segundo projeto e como o meu primeiro foi o jogo do mario , encontrei seu canal e achei super interessante e tentei repiclar e nao foi como esperado...... deve ser algum erro de escrita no meu codigo ...
Olá Natan, talvez seja algum erro de propriedade do css ou nomenclatura de classe. Se você quiser posso te ajudar, seu código está no git?
Boa Tarde Léo, Primeiramente parabens pelo projeto, top dms. Minha unica duvida é na hr de adicionar o "flex: 1;" no main.css, ele não esta pegando.
Pq sera ?
Olá Pedro, que bom que gostou 🙂. Você lembrou de adicionar a propridade display: flex no elemento #app?
ua-cam.com/video/6Ok-kUrBGp8/v-deo.htmlsi=owL4DwFQIm_CG5nE&t=440
@@leovargas sim, adicionei
@@pedrovictorpossani5673 seu código está no github?
Oi coloquei tudo de acordo com o video mais quando coloquei no background.css o background: blue para sobre escrever o video nada acontece.
Oque pode ser?
Olá amigo, isso seria no elemento #background:after?
O seu projeto está no github?
salve mano, tenho uma pergunta. Usar essas imagens e vídeos dá problema com direitos autorais? eu fiz um projeto sozinho também sobre um anime para testar meu conhecimentos e queria colocar ele no portfólio pelo github
acha que eu não deveria colocar? e trocar as imagens?
n da problema n mano
Olá, como é um projeto de estudos e sem fins lucrativos não tem problema não
Brother eu fazendo esse tutorial com voce, eu posso colocar esse projeto mario world no meu github?
Claro que pode!!
Professor, uma duvida ? Após criar o site como fazemos para que outras pessoas tenham acesso ao link do site criado ?
Olá amigo, você pode usar uma plataforma de hospedagem gratuita, a mais popular e fácil é a Netlify.
Nesse vídeo eu ensino a publicar o site: ua-cam.com/video/v8vFNu76IVA/v-deo.htmlsi=ahOtJJ3dW-t421-H&t=23
eu to tendo problema na hora de editar os css, o global nao ta puxando o #app, mas ai o background.css que está puxando tudo
Olá Gabriel, você lembrou de importar o global.css no index.html? ou de adicionar a tag id="app" na div?
eu vim buscar cobre e encontrei ouro, cara comecei a aprender esses dias to bem leigo ainda n entendi mt sobre mais vou guardar aqui pq quero fazer um dps n igual ao seu mais melhor kkkkk é nois manin.
Boa jovem!!! Depois mostra o resultado final, bons estudos!
eu depois de fazer metade de uma aula de CSS vindo assistir esse video e minha cabeça assim 🤯
Qualquer coisa assiste todo o vídeo primeiro e depois coda junto hahah
Alguem soluciona, Se eu desenvolver um site de series e colocar uma lista de episodios, vou ter que colocar o link do video em cada um dos episodios da lista ?, sendo assim vou ter que criar a pagina onde vai estar cada video? uma por uma ?
Olá, teria duas abordagens:
1 - Criar uma página onde vai receber o id do video, sem precisar criar uma página para cada episodio. Ex: Como é feito aqui no youtube, existe uma única tela para o video, oq muda é o id na url (ua-cam.com/video/ID_DO_VIDEO/v-deo.html)
2 - Abrir o vídeo em um modal, sem precisar mandar o usuário para outra página.
Oi leo quria saaber como usar esse projeto como base pra criar um ste de outro filme por exemplo
Opa Douglas, esse projeto pode se adaptar para qualquer filme. Alguns passos:
1 - Alterar o vídeo de fundo, adicionar o trailer/teaser do filme que vc deseja.
2 - Alterar a cor destaque, que nesse caso nós usamos o vermelho. Ex: se fosse sobre o filme da Furiosa você poderia usar um amarelo/laranja
3 - Alterar as imagens
4 - Alterar o texto da descrição
liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiinda
Opa blz gostei muito do seu video e estou com uma duvida de como colocar o link na parte dos logo do svg
Opa Willian, você precisa adicionar um elemento em volta do svg
@@leovargas Eu consegui aqui tava quebrando a cabeça mais e assim msm kk , pfv continue fazendo video mexendo com isso me ajuda mt sempre vai ter meu like
Minha parte da animação de entrada nao esta funcionando,como faço para resolver??
Olá, talvez você tenha escrito errado o nome de alguma propriedade. Nesse link tem o arquivo completo:
github.com/leovargasdev/youtube-site-mario/blob/codigo-completo/index.html
Verifique se está igual ao meu código.
video braboo, ate agr n conseguir colocar meu link das mnhs redes kkkkkkkkk
Obrigado! Você precisa adicionar o link no atributo href do elemento
Exemplo: link
Você pode ensinar a criar um layout novo estilo a netflix com carrocel animado e etc ?
Posso sim, na verdade eu já tinha mapeado esse conteúdo, mas pensei em fazer com reactJS
@@leovargas faz em html css e javascript utilizando essa API do TMDB. Outra coisa, você possui um contato onde eu consiga fazer um orçamento com você de um template em html css e javascript?
Posso fazer somente com HTML e JS. Sobre o orçamento, me chame no discord.
Como que eu faço pra continuar o site abaixo dele (que ele ocupe apenas como "Banner")
te respondi no outro comentário.
Qual o tema que está utilizando no vscode ?
Opa, estou usando esse o: Palenight Theme
marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme
como faço para adicionar os links da redes sociais no svg??
Olá, você pode envolver os svgs em um elemento de âncora
Boa tarde Léo, Como que eu faço pra continuar o site abaixo dele (que ele ocupe apenas como "Banner")
Olá Pedro, depende, você quer deixar o vídeo de fundo no site inteiro ou só na região do "banner"?
Se for o vídeo só na região do banner, você vai precisar alterar o position o .bg-video para absolute e adicionar as novas tags HTML depois da div com id #app.
PS: Desculpe a demora para responder...
@@leovargas Deu certo, muito obrigado!
a fonte do story, wallpapers não funcionou no meu, por que?
Você lembrou de importar a sua class .background?
salve eu fiz tudo soq nao ficou igual teria como tu dar uma ajuda?
claro! entra no nosso servidor do discord discord.gg/JPS2bY6GVy, manda a dúvida no canal #duvidas e eu te respondo lá
qual graduação para programar sites assim?
Olá Roberto, não é necessário fazer uma graduação para desenvolver sites. O core do desenvolvimento(html, css, javascript), você consegue aprender de graça na internet ou com cursos pagos(udemy, alura, etc).
como faço pra salvar o meu projeto e compartilhar?
Olá Raissa, vc pode enviar o seu código para o Github
Não achei o código do background.css no repositório e não vi o código do vídeo linear gradiante sua web cam tampou o final
Olá, o código foi disponibilizado no arquivo: github.com/leovargasdev/youtube-site-mario/blob/master/info.txt
Eu faço um comentário no minuto 04:58
minha header fica abaixo do meu background, onde eu estou errando?
Olá, você lembrou de colocar o valor position: fixed no elemento #background?
Nesse tempo aqui: ua-cam.com/video/6Ok-kUrBGp8/v-deo.htmlsi=l91oylI4kuj3Ndfc&t=149
Cara qual dica vc me da para começar o dever de casa e deixar o site responsivo sem perder esse toque de profisionalismo
Opa Teodoro, você pode criar duas páginas e só mudar o conteudo central, reaproveitando o cabeçalho e o fundo. Sendo elas:
1 - Página Wallpapers: listando as imagens do filme.
2 - Página Trailer: Carregar o do trailer do filme.
Sobre a responsividade, o importante é não deixar os elementos muito próximos e não quebrar o layout. Recentemente eu fiz um vídeo fazendo a responsividade de um site, se você quiser dar uma olhada, talvez de uma luz.
Video: ua-cam.com/video/E5vWiWLoRkM/v-deo.htmlsi=uvNnqffOp9sXvADU
PSE: Desculpe a demora para responder :/
tem como me passar o código todo? pq eu não estou conseguindo fazer, não fica igual o seu...
Olá Vitoria, você pode ver o código completo nesse link: github.com/leovargasdev/youtube-site-mario/tree/codigo-completo
OBS: Sugiro você copiar somente em últimos casos, o interessante é você aprender sozinha os conceitos abordados.
Se vc vender curso, eu compro, irmão. Te juro.
Vou pensar hahhaha muito obrigado!
poxa na parte que ele copiar o background me quebra nao mostra de onde ele copia e nem mostra tudo
Olá, se for sobre a sombra no vídeo de background, eu comento no minuto 04:58
O valor copiado está nesse arquivo github.com/leovargasdev/youtube-site-mario/blob/master/info.txt
Mano quais extensoes eu tenho que baixar no code para rodar
estou quebrando muito a cabeça
ps: estou programando a 1 semana
Olá Miqueias, estou usando a extensão Live Server. Nesse video eu ensino a instalar e usar, link: ua-cam.com/video/W2KPdh4F4t8/v-deo.htmlsi=7EL3oFRWndU8lYh4
Avançar até o tempo 10:20
Uau cara, isso é javaScript?
Olá Andryell, nesse vídeo só foi usado um código externo em Javacript para fazer as animações. E no resto do vídeo só foi usado HTML e CSS.
Rapaz não consegui rsrs deu erro aqui mais pra frente tento de novo rsrs
Opa, ocorreu qual erro?
Cuidado com o processo
👀👀👀
Invejo.
bora aprender css
Boraaa 🚀🚀
Cara eu to conseguindo fazer, mas voce nao explica bem, pelo menos nao nesse video, voce n explica, voce so fala o nome das coisas e faz tudo muito rapido
Opa, em qual parte você ficou com mais dúvida? posso lhe ajudar!
Fiz exatamente o que vc disse porém meu código não muda em nada. Nem o chapéu nem as redes sociais sobem . Poderia ajudar? Não tenho git
Olá Victor, me chama no discord e manda um print do seu código.
DISCORD: leovargas
@@leovargas vou chamar sim muito obrigado