Criando landing page completa do ZERO - part 01 (HTML, CSS, SASS)
Вставка
- Опубліковано 4 жов 2024
- Se você curte nosso conteúdo já deixa seu like e se inscreve no canal pra não perder os próximos vídeos toda semana 🔥
👉 Acessa todos links da aula:
sujeitoprogram...
👉 Aula part 02: • Criando landing page c...
🏆 Aprenda desenvolver sites, sistemas web do zero até sair pronto para o mercado:
⭐ sujeitoprogram...
_______________________________
👉 Nosso grupo exclusivo: t.me/sujeitopr...
👉 Instagram: / sujeitoprogramador
👉 SEJA MEMBRO:
/ @sujeitoprogramador
#frontend #programação #javascript #html #css
véi o matheus é brabo, o bixo tem mt tempo que faz isso, e eu tenho sensação que o Hobby dele é programar, se nos tentar pegar esse hábito teremos nossa colocação tbm.
Que conteúdo maravilhoso❤
Kra eu procurei muito como criar uma landing pura html css, mas nenhuma aula foi tão TOP como a sua, você ta de parabéns pelo conteúdo 💯
19:10,tem sim um jeito de declarar uma. Variável com css,usando o ":root{}" ex
:root{
---cor01:#fff;
}
E usar em seu projeto.
Projeto topzeria tô fazendo aqui também hoje! 🤗
gostei muito, é difícil encontrar alguém que ensine bem e com uma boa dicção também.
manooo que didatica maravilhosaaaaa meu to aprendendo demais mesmo depois de 1 ano publicado incrivel demais muito obrigado mais um inscrito!!!!!
Véi, na moral, que aula!!
Parabéns, estou muito feliz de ter assistido essa aula, excelente aula!
Parábens ! Você tem uma ótima didática. Melhor vídeo que assisti sobre criação de Landing Page. Ganhou + um inscrito.👍
Parabens pela didática irmao, assisti muitos videosde landing page, mais o seu aprendi td.
Continue assim, ganhoumais um seguidor, bora codar !!
Sou iniciante e essa é a primeira página q estou criando. Sua didática é ótima. Vc mastiga tudo e isso é muito importante pra gente do meu níve - zero no caso kkkkk
to começando agora e essa é a primeira página que estou criando. gostei demais da sua didática, obrigado por esse video
se uma aula gratuita é assim imagine o curso, deve ser de outro nivel
Se você realmente quer aprender de verdade com projetos reais e ter todo nosso suporte pra sair do zero ao mercado então pode vir sem tranquilo que essa é a oportunidade 🔥
o curso é muito bom, comprei o FullStack pro e sempre vai tendo novas aulas atualizadas (esse mês chegou mais de 100 vídeos, e posso provar kkkkk)
ai sim, ja conseguiu alguma oportunidade no mercado mano?@@WilMaster
@@brumakun1110 opa, infelizmente ainda não, acredito que estou aplicando errado para as vagas (currículo mal formalizado talvez), e ultimamente ando muito desmotivado, mas garanto que a falta de êxito minha é cupa exclusiva minha, porque o curso realmente é muito bom
@@WilMaster e ai arrumou?
Didática excelente sem duvida, uma verdadeira aula sobre técnicas importantes para o dia dia de um dev.
Sua didática facilita muito o aprendizado. Gostei bastante! Confesso que me compliquei mais por usar o SASS, mas nada com o tempo e dedicação para firmar o conhecimento. Rumo a próxima aula!
uma baita aula. estou gostando demais. eu nao sabia nada sobre SCSS . bora pra segunda aula
Qualidade de video. Parabens
simplismente íncrivel mano, a tua didática é excelente e os conhecimentos que tu passa nesse projeto são demais, parabéns
muito massa, comecei achando estrando esse SCSS, mas no final das contas é muito melhor, sem contar tua explicação. principalmente a responsividade. top demais conteúdo
Cara muito bom, excelente didática.
Projeto interessantíssimo para demonstrar a importância do SASS.
Foi a melhor explicação que eu já vi, parabéns pela didática e sucesso para você !
Estou gostando muito do projeto.
Didática excelente sempre professor!! 🔥🚀 Essa questão de separar o CSS em partes com Sass é muito organizado e produtivo! Maravilha!
Esse cara é diferente!, otimo conteudo e didatica, estou aprendendo agora sobre SASS, e esse video me deu um norte muito bom, sobre quais beneficios o SASS pode trazer, olhei o canal, e como programador Vue.js sugeria fazer videos sobre esse framework tambem, pois os conteudos br com uma didatica dessa são meio escassos, ganhou mais um inscrito!
Impressionante, ótimo trabalho. Vídeo bem fácil de entender e bem explicado.
a aula esta dahora, eusó não conesgui aplicar o lienar gradient pq ele anulava o background-image ou ficava um ou o outrro não sei pq
PQP, Mestre! Muito bom esse projeto, já tenho um projeto para estudo na semana. Muito bacana, Toma essa curtida ae e vou compartilhar isso que útil de mais.
Já quero a parte 2
Cara adorei muito! Para bem.
projeto perfeito para ter logica de responsividade e organizaçao clean code.
porem so vou deixar uma ocorrencia em questão que aconteceu comigo.
na parte do bg-home no projeto em video foi colocado a url no final com duplas aspas no meu vscode nao funcionou não aparecia a imagem de fundo em svg e olha que olhei o codigo inteiro novamente umas 5x pra ver se eu tinha feito algo errado.
Foi ai que comentando com uma amiga minha ela pediu pra eu tirar as aspas do url e deixar sem e funcionou assim...
Caso alguem ficou com esse mesmo problema.
É so seguir a dica.
massa de mais tou aprendendo bastante esse Sass é muito massa!
Conteúdo muito bom, simples porém completo!! Ótimo para quem está apredendo os conceitos... Muito top! 👏👏👏
Boaaa, amanha temos a parte 02 finalizando todo esse projeto 🔥
dica para próximo projeto, lading Page usando react, dá para explorar muitas bibliotecas do react... fazer galeria de fotos, etc etc
Sensacional demais. 🚀👨🏾💻
sou ja formado em analise e terminando ciencias da computacao e parabens aprendendo mais com vc do que na faculdade
Sensacional!! recomendo seu Curso!! demais.😉
ainda mais incrível que descobri que você é daqui de cg! ótimo conteúdo, iniciei os estudos há algumas semanas e você já me ajudou muito!
Boaa, tamo juntoo demais 🔥🤘
Vídeo incrível!
top demais, ta bonito o projeto
estou fazendo seu curso full stack ...amanhã vou dar uma estuda no que vc esta fazendo aqui ....vc e bom
Matheus vc é o cara
Estou desenvolvendo uma landing page para uma estética, esse projeto vai me ajudar muito
Daleee boa 🔥
Top. Mesma qualidade do curso. Realmente 2 aulas tops. Bora evoluir
Esse projeto vai ser top!
Já tô no aguardo desse projeto pq sei que vai vir coisa boa por aí!!!
Muito bom seus vídeos, sempre aprendo muito com eles!!!
cara, que aula bem feita.
Muito bacana a utilização do SCSS
Rapaz ... esse vídeo foi incrível, primeira pessoa que explica rápido de uma forma que eu consiga entender simples. Eu queria vc de professor na minha aula de desenvolvimento web na facul anos atrás
Me ajudou muito esse video tava com umas dúvida 👏👏👏
Show !!! 👏👏👏
Depois vou pesquisar como criar esse SVG com várias imagens, gostei disso...
Parabéns pela didática e conteúdo atualizado!!👏👏👏
De Mo;ambique queria agradecer pelo video aí mano explicas muito bem só tive uma dificuldade para exportar as cores tentei de várias maneiras ainda não consegui, mas esse é o meu problema. Quanto ao video tá braboooooo
Aula sensacional, queria saber qual o tema que você usa no VS CODE
curtido! top demais ... tira uma duvida... seria uma boa prática separar as medias queries em arquivos separados de scss? obrigado pelo conteúdo muito top....
Slk você é um monstro cara , estou cursando a faculdade de ADS e estou pensando em comprar seu curso.
Sinto que aprendi d+ com esse projeto. Muito obrigado por esses vídeos!
muito legal, parabéns pelo conteúdo!
Muito bom, bem explicado e gravado.
Essa aula foi boa Matheus
Muito obrigado.
Muitoooo bom mesmo
Quando eu termino de escrever o os códigos nada se altera nenhuma cor
faz uma de um de comprar um produto online onde tem conexão com o mercadoPago via API
Top
Mano rs como estou ainda na pegada de HTML e css com Js rs esta landing page é bem avançada kkkkkk top de mais rsrs
Faça nosso minicurso do zero:
sujeitoprogramador.com/minicurso/
Blz mano já estou fazendo @@Sujeitoprogramador
Boa noite, sujeito programador. Sou iniciante e estudante. Nao entendi direito a real vantagem de usar SASS, ou SCSS ao inves do puro style.css, se puder da uma luz ai. Muito bom conteudo, abraco!
Vou deixar aqui para caso alguem fique com duvida na parte do fundo (é minha anotação pessoal), ta mal escrito e etc.
''pensa assim, vc definiu o position relative, agora o bg::before (pseudo elemento, como first letter e etc), precisa cobrir o fundo da HEADER apenas (pelo menos no começo do video estava assim), então vc precisa definir que este elemento ESTEJA DENTRO DO POSITION RELATIVE,ai que o absolute entrou, pq ele saiu do fluxo do documento pra ficar alinhado com o elemento pai, o content esta vazio, então se vc remover o position absolute ele vai para o fluxo normal do documento deixando de aparecer (SERA MESMO?) pensa, define um conteudo ali no content e vc vai entender melhor.''
42:03 que esquisito ,na hora que eu aplico o z-index -1 a imagem praticamente nem aparece fica só um pedaçinho quase invisivel em baixo do header ,tive que colocar 0 ao invés de -1 pra funcionar
opa na minha nem o "0" zero, funcionou..🙁
deu certo ate um ponto o problema e que não deu o espaço, entre os incones, a logo não diminuiu ao passar o mouse em cima dos incones nao funiona,ao clicar fica vermelho e nao acho o erro, tentei do zero antes mesmo de colocar o incone ja vem com o efeito sem tem css sem ter scss e o efeito do vermelho ainda continua,nao entendi
Onde está o link do font-awesome?
video incrivel como sempre!
Mas uma pergunta fora do contexto, qual software tu usa pra gravar a aula com a camera ali ja. Nao eh com o OBS ne?
Pessoal quando eu faço o @import o código buga e o sass para de transferir o código sabem porque?
Garela pra quem ta com problema no bg... A unica solução que eu encontrei foi adicionar diretamente no style.scss
O media screen do header não tá deixando responsivo no meu, alguém saberia dizer qual pode ser o problema?
Boa noite Matheus . Seu treinamento de aplicativos em RN está ativo ainda ???? Houve atualizações ???? Lembro que no ano passado vi um treinamento seu em RN , estou muito interessado nele , porém, vi que já se passou um ano e seu treinamento continua chegando para mim em anúncios .
Opa sim sempre mantemos atualizado e colocando projetos completos, aqui o link
sujeitoprogramador.com/fabricadeaplicativos/
Contéudo bom é tipo isso!! Video de 1h, mas que passou muitoo rápido!!
Tamo juntoo demais, amanhã temos nossa parte 2 finalizando esse projeto e ja colocando no ar 🔥
queria saber se você tem um curso, que entra fabrica de aplicativo e fullstackpro em um só?
Sujeito eu ainda não usado o Sass e como tinha pesquisado ele facilita e nos faz ter mais produtividade. Eu gostei, e pretendo usá-lo em meus próximos projetos, começando por esse projeto, vou tentar entender tudo pra depois tentar replicar. Eu até tenho um parceiro que uma barbearia que gostar de ter um site, eu só pedir outras fotos para ficar mais com a cara da barbearia dele.
Muito TOP cara, obrigado por compartilhar conhecimento com a comunidade Front End. Valeu mesmo!! #TMJ
Ah, no seu curso tem mais projetos como esse?? Tem JavaScripts e outras linguagens?? Tenho interesse em fazer um curso mais completo, pois onde moro tem bastante demanda para esse serviço.
alguém pode me ajudar ? o arquivo "bg.svg" não quer funcionar no meu projeto... já vi e revi as explicações, mas não consigo encontrar o erro.
Estranho que a a img backgtound da bg-home não aparece no chrome mas aparece no edge...
No meu tbm
Você conseguiu resolver ?? Estou nesse problema agora.
@@Brunoandrade-bz1ly não consegui
@@brennocardoso8002 Eu consegui mano, se vc ainda estiver precisando. Consegui assim, tem que corrigir algumas coisas mas já esta meio caminho andado.
@@Brunoandrade-bz1ly como que vocÊ conseguiu estou travado nessa parte
Alguém pode me ajudar? Rodando no Live Sever a imagem de fundo com degradê aparece, mas quando eu acesso pela minha pasta mesmo, a imagem não aparece. Fiz as hospedagem somente de teste e não apareceu também. Se alguém poder me ajudar eu agradeço!!!
No meu o bg-home::before ( 42:00 min ) não está aparecendo a imagem. O que pode ser? Faz dois dias que tô tentando achar algum erro
o meu tb
consegui junto a um amigo encontrar uma possível solução, cheque os caminhos das pastas tanto no layout.scss e no style.css(arquivo transcrito do sass pro css.) o problema do meu estava ai, poderia te dar a resposta de badeja, mas acho interessante você correr atrás, mas caso queira só chamar aqui de novo que vou estar olhando.
@@cuspidboi6512 Tu pode me ajudar mano? Estou nesse problema agora correndo contra o tempo. kk
[ALUNO SUJEITO PROGRAMADOR] Matheus, poderia gravar uma video aula ensinando a configurar toda estrutura pra desenvolver no macOS, por favor? Eu usava windows e daí ttroquei de PC e vim pro macbook... mas não acho video ensinando a instalar o andriod studio, vs code, e fazer as configuraçoes bonitinhas pra conseguir começar a desenvolver
Meus icones de cabeçalho nao se alonham de jeito nenhum, alguem sabe o que pode ser ?
Voce colocou o MAIN dentro do HEADER, tem algum problema em fazer assim ? Se eu tiver pensando besteira, mas pra mim o main era o conteudo principal, tipo um secao especial do site kkkk
Muito bomm, muito bem explicado. Parabéns!
Cara, eu fiz tudo certinho(aula 1 e 2), quando eu abro a página pelo vscode, o site ta perfeito, mas ,quando eu tento abrir o site pelo link gerado pelo git hub page, ele nao está aparecendo a imagem de fundo "bg.svg"
Eu já procurei na net, o pessoal manda tirar os pontos, adicionar eles, deixar sem barra, fiz tudo, mas esse svg em específico não ta indo para o git hub page kkkkk, sabe o pq?
mano eu estava com esse problema e arrumei na hora de fazer o linear-gradiente o rgba estava assim: rgba(6,18,30,0,1), porem o correto é rgba(6,18,30,0.1)
repare que não é 0,1 e sim 0.1 no lugar da virgula é um ponto e eu nem tinha notado esse detalhe
Para quem não encontrar "Watch Sass" é só clicar no botão que fica ao lado de minimizar, após isso aparecerá um menu de customização do layout do VS, depois disso clique em "status bar" e pronto
qual o tema do vs code que vc esta usando? a propósito mt bom o video
Vai ficar disponível só hj?
Eae Matheus tudo bem? mano eu crirei o arquivo partials/colors.scss,
coloquei as cores pre definidas
e no meu css eu coloquei a importação certinho,
quando vou usar não aparece as cores como sugestão,
ai baixei a extensão que vc falou e deixei habilitada, mas mesmo com isso ela não aparece, pulei alguma etapa?
O meu também esta assim,corrigiu ai?
nao consigo usar o live server de jeito maneira, ele nao abre nada em nenhum navegaor. baixei a extensao do edge no vscode e ta funfando, tem problema?
Alguém pode me tirar uma dúvida, na parte do layout o background não aparece, pq será :(
Você conseguiu resolver ?? Estou nesse problema agora.
Qual programa que ele está usando para criar a laind page?
VsCode
não consegui baixar o fonte-awesome. onde oncontro?
Preciso de ajuda não consigo usar a imagem bg.svg
tbm nn
Você conseguiu resolver ?? Estou nesse problema agora.
Quero diminuir um pouco o tamanho do ícone alguém me ajuda
o underline antes do nome de algum arquivo em "partials" é obrigatório? Tipo, semântico?
Sim, sem isso o programa não entende que você está chamando uma extensão
não consegui subir no vercel, deu error 404 not found 😢
Pra quem tiver problema pra carregar a imagem de fundo eu consegui colocando o path no "layout.scss" assim: url("../assets/bg.svg") e no "style.css" tive que editar assim: url("../Barber/assets/bg.svg").
Salvou mano tmj ❤
coloca os cod...
Mano agarrei aqui, quando abri um novo projeto coloquei o nome todo de letra maiúscula, tem haver.?
Essa imagem de fundo não vem nem a pau juvenal.
ajudou dmsss❤️
O meu não está exibindo nada, a imagem está em .jpeg