Criando landing page completa do ZERO - part 01 (HTML, CSS, SASS)

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

[@fheonix5]

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.

[@davidpansardis2801]

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 💯

[@DennisSilva007]

se uma aula gratuita é assim imagine o curso, deve ser de outro nivel

[@Sujeitoprogramador]

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 🔥

[@WilMaster]

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)

[@brumakun1110]

ai sim, ja conseguiu alguma oportunidade no mercado mano?@@WilMaster

[@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

[@joaovictorsantos9046]

@@WilMaster e ai arrumou?

[@dbarbosadesigner]

manooo que didatica maravilhosaaaaa meu to aprendendo demais mesmo depois de 1 ano publicado incrivel demais muito obrigado mais um inscrito!!!!!

[@lilmoon8726]

gostei muito, é difícil encontrar alguém que ensine bem e com uma boa dicção também.

[@anselmopolcaro9863]

Projeto topzeria tô fazendo aqui também hoje! 🤗

[@felipedib6521]

Parabéns, estou muito feliz de ter assistido essa aula, excelente aula!

[@jhomedits1219]

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.

[@deciomk968]

Parábens ! Você tem uma ótima didática. Melhor vídeo que assisti sobre criação de Landing Page. Ganhou + um inscrito.👍

[@geoandersen]

Véi, na moral, que aula!!

[@ivanvidigaljr6968]

Parabens pela didática irmao, assisti muitos videosde landing page, mais o seu aprendi td. Continue assim, ganhoumais um seguidor, bora codar !!

[@felipegoncalves1195]

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

[@diovanimatos1438]

simplismente íncrivel mano, a tua didática é excelente e os conhecimentos que tu passa nesse projeto são demais, parabéns

[@Kayn171]

to começando agora e essa é a primeira página que estou criando. gostei demais da sua didática, obrigado por esse video

[@edvaldojunior1745]

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!

[@FabioSantos-gu3rk]

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.

[@FabioSantos-gu3rk]

Já quero a parte 2

[@fabriciooliveira6048]

Didática excelente sempre professor!! 🔥🚀 Essa questão de separar o CSS em partes com Sass é muito organizado e produtivo! Maravilha!

[@ogaitnasals]

Foi a melhor explicação que eu já vi, parabéns pela didática e sucesso para você !

[@pedropaulo2c982]

Impressionante, ótimo trabalho. Vídeo bem fácil de entender e bem explicado.

[@victorgabrielreis8586]

Cara muito bom, excelente didática. Projeto interessantíssimo para demonstrar a importância do SASS.

[@dropcas8275]

uma baita aula. estou gostando demais. eu nao sabia nada sobre SCSS . bora pra segunda aula

[@danilofidelis4582]

Didática excelente sem duvida, uma verdadeira aula sobre técnicas importantes para o dia dia de um dev.

[@andrealezyoliveira8910]

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

[@GuilhermeDeveloper]

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!

[@fernandobltdev]

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!

[@Sujeitoprogramador]

Boaa, tamo juntoo demais 🔥🤘

[@luy3526]

sou ja formado em analise e terminando ciencias da computacao e parabens aprendendo mais com vc do que na faculdade

[@davi_barbosa911]

Estou gostando muito do projeto.

[@levymeireles1587]

Conteúdo muito bom, simples porém completo!! Ótimo para quem está apredendo os conceitos... Muito top! 👏👏👏

[@Sujeitoprogramador]

Boaaa, amanha temos a parte 02 finalizando todo esse projeto 🔥

[@DarcilioKreitlow]

Qualidade de video. Parabens

[@wellingtonrocha8839]

Sensacional!! recomendo seu Curso!! demais.😉

[@jhonmanuelgil9747]

Cara adorei muito! Para bem.

[@paulovital7087]

Top. Mesma qualidade do curso. Realmente 2 aulas tops. Bora evoluir

[@FabrícioCâmara-r3z]

massa de mais tou aprendendo bastante esse Sass é muito massa!

[@YamatoKino]

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

[@rafaellimarocha968]

Já tô no aguardo desse projeto pq sei que vai vir coisa boa por aí!!!

[@mayconrocha8723]

Sensacional demais. 🚀👨🏾‍💻

[@youtubevancediu5319]

dica para próximo projeto, lading Page usando react, dá para explorar muitas bibliotecas do react... fazer galeria de fotos, etc etc

[@Bastardovl]

Estou desenvolvendo uma landing page para uma estética, esse projeto vai me ajudar muito

[@Sujeitoprogramador]

Daleee boa 🔥

[@MatheusRodrigues-eb9ps]

Muito bom seus vídeos, sempre aprendo muito com eles!!!

[@fredericocassani6916]

top demais, ta bonito o projeto

[@Vithor_Silva]

Vídeo incrível!

[@halanfernande5711]

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

[@guilherm265]

Esse projeto vai ser top!

[@layones100]

estou fazendo seu curso full stack ...amanhã vou dar uma estuda no que vc esta fazendo aqui ....vc e bom

[@gunthersantos]

Parabéns pela didática e conteúdo atualizado!!👏👏👏

[@Drozdev]

cara, que aula bem feita.

[@juliano_roger]

Matheus vc é o cara

[@diegocardoso4076]

Sinto que aprendi d+ com esse projeto. Muito obrigado por esses vídeos!

[@evertonsston]

Muito bacana a utilização do SCSS

[@alessandrosilva1015]

Muito bom, bem explicado e gravado.

[@alissonclaro688]

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.

[@antoni0neto]

muito legal, parabéns pelo conteúdo!

[@fabioschomaker92]

Slk você é um monstro cara , estou cursando a faculdade de ADS e estou pensando em comprar seu curso.

[@ronivaldomorais258]

Me ajudou muito esse video tava com umas dúvida 👏👏👏

[@AriVenuth]

Show !!! 👏👏👏 Depois vou pesquisar como criar esse SVG com várias imagens, gostei disso...

[@antoniomate5213]

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

[@LyraCassio]

Essa aula foi boa Matheus

[@Fabianobibi1980]

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....

[@PedroHenriquedosSantos]

Muito obrigado.

[@capivara496]

Aula sensacional, queria saber qual o tema que você usa no VS CODE

[@murillomatos]

Top

[@frankguitarr]

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

[@Sujeitoprogramador]

Faça nosso minicurso do zero: sujeitoprogramador.com/minicurso/

[@frankguitarr]

Blz mano já estou fazendo @@Sujeitoprogramador

[@Japazz1]

Quando eu termino de escrever o os códigos nada se altera nenhuma cor

[@dr7146]

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

[@leonelchg7875]

opa na minha nem o "0" zero, funcionou..🙁

[@felipekc28]

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.''

[@denioclecio6061]

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

[@znkdev]

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?

[@brennocardoso8002]

Estranho que a a img backgtound da bg-home não aparece no chrome mas aparece no edge...

[@pedropaulo2c982]

No meu tbm

[@Brunoandrade-bz1ly]

Você conseguiu resolver ?? Estou nesse problema agora.

[@brennocardoso8002]

@@Brunoandrade-bz1ly não consegui

[@Brunoandrade-bz1ly]

@@brennocardoso8002 Eu consegui mano, se vc ainda estiver precisando. Consegui assim, tem que corrigir algumas coisas mas já esta meio caminho andado.

[@dbarbosadesigner]

@@Brunoandrade-bz1ly como que vocÊ conseguiu estou travado nessa parte

[@andreicampos7616]

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

[@cuspidboi6512]

o meu tb

[@cuspidboi6512]

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.

[@Brunoandrade-bz1ly]

​@@cuspidboi6512 Tu pode me ajudar mano? Estou nesse problema agora correndo contra o tempo. kk

[@wlisses-silva]

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.

[@cioccari2315]

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!

[@macedo_jose]

Contéudo bom é tipo isso!! Video de 1h, mas que passou muitoo rápido!!

[@Sujeitoprogramador]

Tamo juntoo demais, amanhã temos nossa parte 2 finalizando esse projeto e ja colocando no ar 🔥

[@dbarbosadesigner]

Garela pra quem ta com problema no bg... A unica solução que eu encontrei foi adicionar diretamente no style.scss

[@LuizHenriquebgs]

Pessoal quando eu faço o @import o código buga e o sass para de transferir o código sabem porque?

[@fagnermartins4299]

faz uma de um de comprar um produto online onde tem conexão com o mercadoPago via API

[@j.v.4430]

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").

[@jvzz0139]

Salvou mano tmj ❤

[@vmdimoveiseinvestimentos7395]

coloca os cod...

[@vmdimoveiseinvestimentos7395]

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.

[@gringokkkkk]

ajudou dmsss❤️

[@felliperibeiroteixeira]

O meu não está exibindo nada, a imagem está em .jpeg

[@papelariabrito-k2r]

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?

[@dhenri9726]

O meu também esta assim,corrigiu ai?

[@junioalves5054]

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

[@OLeaoRuge2023]

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 .

[@Sujeitoprogramador]

Opa sim sempre mantemos atualizado e colocando projetos completos, aqui o link sujeitoprogramador.com/fabricadeaplicativos/

[@rr5ful]

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?

[@TigerRoboCop_Oficial]

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

[@joaovictormaia4122]

O media screen do header não tá deixando responsivo no meu, alguém saberia dizer qual pode ser o problema?

[@pedroleopoldo77]

queria saber se você tem um curso, que entra fabrica de aplicativo e fullstackpro em um só?

[@wesleysaraivaa]

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

[@regi7524]

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.

[@vagneroliveira4566]

Alguém pode me tirar uma dúvida, na parte do layout o background não aparece, pq será :(

[@Brunoandrade-bz1ly]

Você conseguiu resolver ?? Estou nesse problema agora.

[@imjoaovictor]

[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

[@oawebsolucoestecnologicas661]

Muitoooo bom mesmo

[@suzanaaraujo5448]

Onde está o link do font-awesome?

[@ClipeiAsmei]

qual o tema do vs code que vc esta usando? a propósito mt bom o video

[@leandrin4002]

o underline antes do nome de algum arquivo em "partials" é obrigatório? Tipo, semântico?

[@gabrielnazareth8435]

Sim, sem isso o programa não entende que você está chamando uma extensão

[@Brunoandrade-bz1ly]

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!!!

[@mauriciolavra7007]

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?

[@brunodasilvapereiradejesus5791]

Vai ficar disponível só hj?

[@Javagamer361]

Preciso de ajuda não consigo usar a imagem bg.svg

[@pedropaulo2c982]

tbm nn

[@Brunoandrade-bz1ly]

Você conseguiu resolver ?? Estou nesse problema agora.

[@HereGabriel]

Meus icones de cabeçalho nao se alonham de jeito nenhum, alguem sabe o que pode ser ?

[@frankguitarr]

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...

[@jheniffersantana4006]

Mesmo problema por aqui. .

[@wesleydomingues5567]

Qual programa que ele está usando para criar a laind page?

[@gabrielnazareth8435]

VsCode

[@rogermorais2756]

não consegui baixar o fonte-awesome. onde oncontro?

[@HailtonAssisdaSilva-jx3fn]

Eu até hj não sei o que é esse figma, nem para que serve e nem como usar. Ainda não sou inscrito no canal. Vou olhar o conteúdo depois.

[@grupopxdpredaxsuportecomer4318]

NÃO SOMOS DE COMENTAR : PORÉM SIM AQUI VOCÊS DÃO PRIORI, NO CONTEÚDO E NAO FAZEM CARETA NA TELA DE APRESENTAÇÃO. PROFIBA!