Criando landing page completa do ZERO - part 01 (HTML, CSS, SASS)
ฝัง
- เผยแพร่เมื่อ 9 ก.ค. 2023
- 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:
sujeitoprogramador.com/landin...
👉 Aula part 02: • Criando landing page c...
🏆 Aprenda desenvolver sites, sistemas web do zero até sair pronto para o mercado:
⭐ sujeitoprogramador.com/fullst...
_______________________________
👉 Nosso grupo exclusivo: t.me/sujeitoprogramador
👉 Instagram: / sujeitoprogramador
👉 SEJA MEMBRO:
/ @sujeitoprogramador
#frontend #programação #javascript #html #css
![Ep.2 เบสไวน์ รวมคลิปฮา SS4 - [ พากย์นรก ]](http://i.ytimg.com/vi/Ihk-LzEbox0/mqdefault.jpg)
Parabéns, estou muito feliz de ter assistido essa aula, excelente aula!
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.
manooo que didatica maravilhosaaaaa meu to aprendendo demais mesmo depois de 1 ano publicado incrivel demais muito obrigado mais um inscrito!!!!!
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 💯
Já tô no aguardo desse projeto pq sei que vai vir coisa boa por aí!!!
gostei muito, é difícil encontrar alguém que ensine bem e com uma boa dicção também.
Projeto topzeria tô fazendo aqui também hoje! 🤗
simplismente íncrivel mano, a tua didática é excelente e os conhecimentos que tu passa nesse projeto são demais, parabéns
Sinto que aprendi d+ com esse projeto. Muito obrigado por esses vídeos!
uma baita aula. estou gostando demais. eu nao sabia nada sobre SCSS . bora pra segunda aula
Didática excelente sem duvida, uma verdadeira aula sobre técnicas importantes para o dia dia de um dev.
to começando agora e essa é a primeira página que estou criando. gostei demais da sua didática, obrigado por esse video
Muito bom, bem explicado e gravado.
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 !!
top demais, ta bonito o projeto
Top. Mesma qualidade do curso. Realmente 2 aulas tops. Bora evoluir
Muito bom seus vídeos, sempre aprendo muito com eles!!!
Impressionante, ótimo trabalho. Vídeo bem fácil de entender e bem explicado.
Parabéns pela didática e conteúdo atualizado!!👏👏👏
Cara muito bom, excelente didática.
Projeto interessantíssimo para demonstrar a importância do SASS.
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
sou ja formado em analise e terminando ciencias da computacao e parabens aprendendo mais com vc do que na faculdade
Sensacional demais. 🚀👨🏾💻
Foi a melhor explicação que eu já vi, parabéns pela didática e sucesso para você !
Sensacional!! recomendo seu Curso!! demais.😉
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
Didática excelente sempre professor!! 🔥🚀 Essa questão de separar o CSS em partes com Sass é muito organizado e produtivo! Maravilha!
Estou gostando muito do projeto.
Cara adorei muito! Para bem.
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!
muito legal, parabéns pelo conteúdo!
Vídeo incrível!
Esse projeto vai ser top!
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!
massa de mais tou aprendendo bastante esse Sass é muito massa!
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.
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, que aula bem feita.
Qualidade de video. Parabens
Muito obrigado.
Slk você é um monstro cara , estou cursando a faculdade de ADS e estou pensando em comprar seu curso.
Muito bacana a utilização do SCSS
Show !!! 👏👏👏
Depois vou pesquisar como criar esse SVG com várias imagens, gostei disso...
dica para próximo projeto, lading Page usando react, dá para explorar muitas bibliotecas do react... fazer galeria de fotos, etc etc
Matheus vc é o cara
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 🔥
Me ajudou muito esse video tava com umas dúvida 👏👏👏
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
Top
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
estou fazendo seu curso full stack ...amanhã vou dar uma estuda no que vc esta fazendo aqui ....vc e bom
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 🔥🤘
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
Essa aula foi boa Matheus
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.
Estou desenvolvendo uma landing page para uma estética, esse projeto vai me ajudar muito
Daleee boa 🔥
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
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....
Quando eu termino de escrever o os códigos nada se altera nenhuma cor
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?
Aula sensacional, queria saber qual o tema que você usa no VS CODE
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
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.
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
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?
Garela pra quem ta com problema no bg... A unica solução que eu encontrei foi adicionar diretamente no style.scss
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.''
qual o tema do vs code que vc esta usando? a propósito mt bom o video
faz uma de um de comprar um produto online onde tem conexão com o mercadoPago via API
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!
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
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..🙁
não consegui baixar o fonte-awesome. onde oncontro?
queria saber se você tem um curso, que entra fabrica de aplicativo e fullstackpro em um só?
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.
O media screen do header não tá deixando responsivo no meu, alguém saberia dizer qual pode ser o problema?
Vai ficar disponível só hj?
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!!!
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?
Onde está o link do font-awesome?
Meus icones de cabeçalho nao se alonham de jeito nenhum, alguem sabe o que pode ser ?
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 🔥
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
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/
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
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
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 subir no vercel, deu error 404 not found 😢
Nossa eu assisti o vídeo todo, pareceu 5 minutos
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
Muitoooo bom mesmo
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
No meu aparece isso e não conseguir alterar o css Compilation Error
Error: Expected newline.
╷
1 │ *{ margin: 0;
│ ^
╵
c:\Users\FRANK\Desktop\Tudo de T.Í\Desafio07\style.sass 1:2 root stylesheet
--------------------
Watching...
--------------------
Not Watching...
Mesmo problema por aqui. .
[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
Pode por essa pagina em portfólio?
Pode sim, na segunda aula fazemos o deploy 🔥
Preciso de ajuda não consigo usar a imagem bg.svg
tbm nn
Você conseguiu resolver ?? Estou nesse problema agora.
Alguém sabe o tema que ele usa?
Uso p tema Dracula
onde consigo as imagens???????
Como passei no video links na descrição