HTML + CSS NA PRÁTICA 🔥 Faça seu primeiro site

Подписаться 29 тыс.

Просмотров 385 тыс.

50% 1

[Hey] Nesse vídeo eu ensino a fazer um site simples, mas dando várias dicas práticas! Usando apenas HTML e CSS!
Espero que vocês gostem! :)
Bora codar? 🔥
Repositório com o código desse vídeo: github.com/AdrianaSaty/easy-p...
O que mais você quer ver aqui no canal?
Comenta aqui embaixo pra eu saber! ;)
------------------------------------------------------------------------------------------------------------------
[Links]
- Instagram: / adriana.saty
- Twitch: / adrianasaty
- Github: github.com/AdrianaSaty/easy-p...
- Website: www.adrianasaty.com/
------------------------------------------------------------------------------------------------------------------
[índice]
00:00 Intro
00:38 Instalando o VS Code
01:01 Explicação Inicial
01:57 Criando a Navbar
07:14 Criando o Header
10:12 Criando o Main
11:08 Criando o Footer
14:33 Ajustes Finais
15:37 Fim

Наука

Опубликовано:

30 апр 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 1 тыс.

@AdrianaSaty 2 года назад

Gente, os SVGs vocês podem pegar no repositório, na pasta img: github.com/AdrianaSaty/easy-portfolio

@Illudius 2 года назад

Eu justamente estava nessa duvida, pois sou iniciante e estou aprendendo aqui.. rs cheguei ate comentar mas ai acabei de ver sua postagem das img .svg (kkkkk) fui buscar na internet e vi mta coisa estranha hahaha VLWWWWWWW

@newnessgames4797 Год назад

Div está obsoleto?

@mestrow Год назад

já ia perguntar, ainda bem que você já colocou aqui kkk

@breno_0646 Год назад

Como faz pra compartilhar o site? o link não é clicavél e se copiar e colar da erro.

@auramacuacua9132 10 месяцев назад

Até já me inscrevi

@joaopedrobelo2313 2 года назад

Estou estudando html e css é muito boa essa sensação de entender o que está acontecendo na construção do site, além de uma explicação clara, concisa sem enrolação ótimo conteúdo!!!

@AdrianaSaty 2 года назад

Obrigada 🤩

@studioplixx4890 Год назад

@@AdrianaSaty to fazendo pelo celular spck editor

@HardGSs Год назад

ela tem talento pra encinar, ja eu sou ao contrario kkk

@bartirafonseca2227 Год назад

CONCORDO. muito bom, obrigada

@joaopedrobelo2313 Год назад

@kelly caroline KKKKKKKK valeu kelly ai sim hein!!!!

@talitamota6281 Год назад

Não deixe de gravar mais conteúdos como este nos ajuda muitooo

@giovannabalduino7903 Год назад

De todos os que eu estou estudando você é a que explica melhor, tem paciência e ainda é linda, parabéns

@ruanmoutinho4879 Год назад

Meu muito obrigado, Adriana! Estou mega feliz e vou me aprofundando mais ainda nesse novo ramo da tecnologia. Tmj! E continue postando mais e mais conteúdos!

@brunopereira8325 8 месяцев назад

Tô começando agora os estudos, tem muitos elementos usados aí que ainda não vi, mas já compreendi de tão clara que foi sua explicação. Sensacional! Parabéns e traga sempre esses conteúdos enriquecedores! Sucesso!

@otavioduarte9442 Год назад

Comecei a estudar recentemente JS, HTML e CSS! Achei o vídeo incrível, continue com os vídeos! Muito sucesso Adriana :)

@gilvaniojanuario7093 11 месяцев назад

Simples e direto ao ponto, muitos que fazem esse conteúdo simplesmente colocam algo lá e faz como se todos soubessem, você não, vc coloca e explica numa linguagem simples, parabéns, puro stilo de ensinar!

@mrksousa Год назад

Você está ensinando conteúdo muito bom e de grande ajuda Adriana. Tens o dom de ensinar. Parabéns 👏 , muito obrigado.

@matheusyt2515 Год назад

Uma dica para vc que está começando a programar ou vc que precisa de mais agilidade fica minha dica para ficar mais rápido coloca o VSCODE no Save automático e instala a extensão Live Server que atualiza o documento automático eu uso e não preciso estar me preocupando em ter que atualizar ou salvar toda vez.

@ladisLionKnight 10 месяцев назад

Boa DICA VLW...

@shortsviewsbr 10 месяцев назад

Valeu, mano você sabe me dizer qual programa ela usou para criar a pasta?

@d.oficial 7 месяцев назад

valeu cara, eu só sabia do sabe automático, ajudou muito

@Alberto-fj7ed Месяц назад

n é so dar CRTL + S?

@vinixfn9637 27 дней назад

@@Alberto-fj7ed Sim, mas a gente pode esquecer

@mateusdreher8541 2 года назад

Mais um vídeo de altíssima qualidade, nao sou iniciante, mas sou uma negação em html, e aquela dica sobre o rel nos links para SEO e segurança foi top demais. 👏

@AdrianaSaty 2 года назад

Valeu!! ^^

@danielldino9305 4 месяца назад

Ajudou muito , não entendia nada de html e css e vc foi a unica que foi fazendo passo a passo explicando cada detalhe muito obrigado princesa

@gloriagoncalves1416 2 месяца назад

Parabéns, muitos ditos "professores" deveriam ter essa forma simples e direta de ensinar.

@gnDopn 2 года назад

Nossa, conteúdo perfeito pra quem ta começando! Parabéns pelo canal, continue postando que com certeza logo logo vai chover de inscritos.

@AdrianaSaty 2 года назад

Obrigada!! Fico feliz que tenha gostado! :)

@JoaoGabriel-su9xg Год назад

Esse projeto vai agregar nos meus estudos em html e css . Vlw , Adriana! Faça mais projetos!

@joselucas7759 Год назад

Esse primeiro projeto iniciante foi ótimo para mim. Faz mais videos assim Adriana! Parabens pela didática!!

@lucasalexandre954 Год назад

*O que uma explicação rápida, prática e eficiente não faz na vida do jovem* vlw pelo conteúdo centrado

@AdrianaSaty 10 месяцев назад

é noix!!

@ronaldoamorim1833 2 года назад

Meu Deus, que didática incrível. Parabéns!

@AdrianaSaty 2 года назад

Obrigada! :)

@Juliana-Moura 9 месяцев назад

Muito .. muito obrigada Adriana. Era tudo que estava precisando. Vc é muito didática, rápida, sem enrolações. Em alguns minutos fiz várias páginas para o meu tcc. Gratidão.

@aguliademarte3872 4 месяца назад

Muito legal o seu vídeo, querida Adriana! São pessoas como você que melhoram o mundo, através da partilha dos conhecimentos! Você é uma Professora nata! Parabéns, sucesso e felicidades!

@jozimarhenriques6848 2 года назад

Parabéns pela iniciativa de começar do Básico. Quando se tem um nível de compreensão maior da linguagem o trivial parece ser pouco ,mas pra quem está aprendendo é uma ajuda e tanto.

@AdrianaSaty 2 года назад

☺️☺️☺️

@Anormalcarareserva Год назад

Saty vc é perfeita garota, se eu tivesse visto um conteúdo assim no início da minha faculdade tudo teria sido mais fácil pra mim. Sua explicação e didática está a altura de professores universitários fodas. Parabéns pelo conteúdo disponibilizado totalmente de graça! Deixo aqui meu reconhecimento e valorização do seu trabalho nas redes!! 💚

@AdrianaSaty Год назад

Muito obrigadaaaa!! 🤩🤩🤩

@christopherjacobs2763 10 месяцев назад

@@AdrianaSaty adriana, eu queria mandar meu site pra amigos familiares. Como faço isso?

@dundun_dance 9 месяцев назад

@@christopherjacobs2763 copia o link e manda

@geanramone 9 месяцев назад

estou cursando ciências da computação e tenho aprendido mais com o youtube do quê com o conteúdo fornecido pela faculdade hsuahsuahu

@GuilhermeSilva-iq5ro 7 месяцев назад

@@christopherjacobs2763 se vc não hospedou ele, compacta a pasta toda e manda para eles, ai quando eles extrais peça para eles abrir a pasta index.

@dicasdecursos139 10 месяцев назад

Que felicidade, eu estava tão focado estudando, que n tinha parado para ver se estava aprendendo, e olhando vc fazer esse site, percebi que já aprendi muita coisa, poucas coisas do que vc falou aí que eu ainda não usei, más sei o pq vc usou.

@luizarocha6774 Год назад

Poderia fazer mais vídeos assim. Amei, e já me deu um norte pra fazer um site inicial que foi pedido no curso

@dlnnascimento 2 года назад

Eu to entrando nesse universo de programação agora e nossa seus vídeos só tá me fazendo ter a certeza de que estou no lugar certo, valeu!

@AdrianaSaty 2 года назад

Uhuul! Que bom!!! 🥳🥳🥳

@inv5879 4 месяца назад

html e css não é programação. pra programação tem que usar linguagem de programação. algumas linguagens de programação são Javascript, Java,PHP, Python e tem muito mais. cada um pra determinada situação, com seus pros e contras . htm e css são linguagem de marcação e estilização respectivamente

@jounys3057 2 года назад

Nunca vi nada de programação e vc fez parecer tudo muito simples, parabéns de verdade

@AdrianaSaty 2 года назад

Obrigada ^^

@inv5879 4 месяца назад

isso não é programação, levando em conta que html é linguagem de marcação e css e estilização. linguagem de programação seria Javascript

@AwaysNix 3 месяца назад

@@inv5879 Deixa o menino sonhar pô kkk

@henriquecesar7959 Год назад

Ótimo conteúdo! Consegui ver o que aprendi em um curso sendo aplicado. Agora bora praticar!

@PedroAugusto-fy1rp Год назад

Muito boa a explicação, estou aplicando já e vou fazer a segunda parte do exercício conforme proposto! Excelente! Faz mais vídeos!

@klebom3278 2 года назад

Você ensinou muito bem sobre HTML e CSS parabéns Trás um código que retorna data, hora e clima

@iced2916 2 года назад

Clima é so usar uma api

@AdrianaSaty 2 года назад

Anotado!

@IsmaelDev 2 года назад

Muito bom! Também comecei um canal de programação espero um dia poder chegar no seu nível. Parabéns pelo conteúdo ajudou muito

@AdrianaSaty 2 года назад

Que da hora!! Ensinar é a melhor forma de aprender :) Obrigada ^^

@CelsoCamargo19 2 месяца назад

Parabéns Adriana você é muito didática e inteligente!! Eu que não sei nada em programação HTML e CSS já aprendi muito!! Você tem um Dom único para ensinar!! Parabéns!!

@canaldememesengracados124 4 месяца назад

Muito obrigada, eu tive pela primeira vez uma base solida sobre o que é HTML e CSS....Parabéns....Deus te abençoe

@umotaku4507 3 месяца назад

MDS, ela é simplesmente incrível, o jeito q ela ensina é tão gostoso, da vontade de aprender mais, ele prende a atenção de um jeito natural e cativante, por favor faça mais aulas dessa

@AdrianaSaty 2 месяца назад

vou soltar um vídeo com tutorial de react, typescript e material ui em breveee! :D

@STRAIKGAMES475 Месяц назад

Me tire uma duvida, estou querendo entra nesse ramo. Porém não sei nada de inglês, da pra desenrola mesmo assim.. @@AdrianaSaty

@danilogomesalmeida2119 2 года назад

Muito bom o conteudo, parabéns! Estou fazendo um curso e você me ensinou em 16 min mais de css do que o cara do curso em 17 videos pequenos. Ansioso para os proximos videos.

@AdrianaSaty 2 года назад

Que da horaa!! Que bom que você curtiu :D

@felipechagas8003 2 года назад

Sempre tem um comentário desse em todos os vídeos do RU-vid sobre programação, engraçado.

@alucian 2 года назад

@@felipechagas8003 Mas é por que é fato Felipe, muitos fazem o curso muito "cheio" justamente pra dizer que tem mais conteúdo, que aborda tudo, mas no fim, não é necessário.

@ThePraQNome 2 года назад

@@felipechagas8003 Isso acontece bastante porque a maioria dos cursos completos abordam todos os conceitos e muitos raramente são usados. Vídeos assim que vão direto ao ponto são melhores pra aprender, porque a pessoa vê o projeto pronto e tem a sensação que ta aprendendo.

@danilogomesalmeida2119 2 года назад

@@alucian isso mesmo, colocaram vários vídeos curtos pra fingir que tem conteúdo, quando poderiam ter feito um vídeo só explicando justamente o que foi abordado no vídeo. Arrependido de ter comprado

@ANTONIOAMILTONFERREIRA Год назад

Eu gostei da sua dica ,porque estou fazendo curso tecnico de informática estou aprendendo html ,java e css . Deu pra mim entender sua aula . muito obrigado

@Ana-th5sc 2 месяца назад

Muito obrigada pelo vídeo, ele é simples, porém eficiente! Nos cursos os temas são complicados, grandes, parece que vc nunca vai entender, porém contigo ficou tão simples!

@iza.1197 2 года назад

moça por favor, traz mais vídeos nesse estilo💞

@AdrianaSaty 2 года назад

Pode deixar ˆˆ

@paulopires3219 2 года назад

Excelente didática e explicação, porém pra mim que estou dando os primeiros passos nesse universo e tenho 5.3 anos foi difícil acompanhar o seu ritmo, mas foi ótimo gostei e te parabenizo pela iniciativa como li em outro comentário você vai ajudar muita gente que esta começando assim como eu. Valeu

@AdrianaSaty 2 года назад

Esse vídeo eu falei bastante conceito mais intermediário/avançado, então não se preocupe em entender tudo! Se eu tiver falando muito rápido também da para colocar numa velocidade mais devagar aqui pelo yotuube :)

@ALilithDuff 2 месяца назад

Peguei esse vídeo pra relembrar CSS e HTML depois de um ano parada. Incrivelmente simples, muito obrigada por esse conhecimento ❤

@92927002 Год назад

incrível parabens, peguei um trabalho de html e css, criar um site de viagens, o seu video meu ajudou demais.

@EnglishwithGaucho Год назад

Hello, atualmente sou professor de Inglês e fazendo transição de carreira... iniciei meus estudos em HTML, CSS e Javascript. junto a isso também comecei minha graduação de Engenharia do Software, suas dicas são ótimas. muito obrigado.

@marcoshornos8230 Год назад

Olá boa noite! Adorei esse vídeo e fiz quase tudo , mas na parte 11:32 , não sei como importar as imagens. Por favor , poderia me explicar. Obrigado

@LuizGustavo-cc7fd 2 месяца назад

Eu consegui baixando ela em "salvar como"

@Cloryls Год назад

Mal comecei a assistir o vídeo e já amei , explicação ótima! Era exatamente esse vídeo que eu estava procurando! Sério mesmo, muito Obrigada! ❤

@marcelojunior1073 Год назад

Que show, estou começando a dar uma olhada em HTML também, toda a ajuda é bem vinda.

@alfredoneto4381 2 года назад

Parabéns pelo conteúdo! Em 16min de vídeo ensinou muito mais do que muito curso!

@AdrianaSaty 2 года назад

Que bom que vc curtiu! Obrigada ☺️

@alfredoneto4381 2 года назад

@@AdrianaSaty imagina! Eu quem agradeço por você disponibilizar este conteúdo. Parabéns pelo excelente trabalho!

@reabilitrandespachante1878 Месяц назад

Simplesmente perfeita, a muitos anos sem contato com programação, acendeu minha vontade 😊😊 gratidão

@FMS4786 7 месяцев назад

Sem palavras, estava a uma semana tentando entender meus erros. Você me ajudou com todos, obrigado.

@Thiago-oc9nl 2 года назад

Vai falir as escolas kkk, vídeo ficou muito dahora, simplificado e dinâmico, vlwww, tô no aguardo dos próximos!!

@AdrianaSaty 2 года назад

huiaehheaiu valeuu!! Agora to sem criatividade de tema XDD Se tiver sugestões :)

@WadsonPontes 2 года назад

@@AdrianaSaty Ensina a fazer joguinho de vestir para meninas. É uma boa introdução a JavaScript. Não vi nem um vídeo desse no RU-vid.

@fabio6626 2 года назад

Cara, sendo sincero.... Assistir esse vídeo me deu vontade de programar..kkkkkk Parabéns pelo canal, curtindo seus vídeos!

@AdrianaSaty 2 года назад

Bora codar!! 🤘

@area.secreta Год назад

Grava com mais frequência vídeos. A forma que você explica me identifiquei. E sem enrolação direta ao ponto. E top demais.

@uericsonkiffer2922 8 месяцев назад

Parabéns, que vídeo didático e explicativo. Estou no início dos estudos de desenvolvimento Web, ainda no módulo 1 de HTML, mesmo sem ter visto CSS, a impressão que fiquei é de entendimento de como estava funcionando cada etapa da construção desse seu site. Sei que há inúmeros projetos, mas parto do princípio que o simples bem feito, funciona demais! Parabens pelo conteúdo !!!

@eltongomes5138 3 месяца назад

Este vídeo é muito bom para aprender, vc é otima e direta, pfvr volte a postar

@luke2304 Год назад

Boa tarde! Muito bom seus vídeos. Como você fez pra importar as imagens já em svg? Estou iniciando os estudos.

@wanessaribeiro01 8 месяцев назад

Quero saber tbm scrr

@paulorogeriocatarin Год назад

Estou fazendo Análise e Desenvolvimento de Sistemas, mas estou querendo começar a realizar meus projetos e seu conteúdo me ajudou na estruturação para meu primeiro projeto...😃😃😃 Ganhou um inscrito!!!

@luankenshi2477 2 года назад

Estou estudando a um tempo e vim aqui fazer na prática e entendi 90% do que foi passado e aprendi coisas novas. Sou seu fã e no insta fico ansioso pela sexta-feira da maldade no Ti haha.

@CarlosDaniel-on8yl 2 года назад

A maneira que você ensina parece ser muito fácil, mas quando eu começo a fazer eu sempre travo kkkkk, Muito bom, estou animado para os próximos vídeos! 😁

@AdrianaSaty 2 года назад

Poxa, comenta aqui onde você travou que eu te ajudo. E me ajuda a fazer melhor nas próximas! :)

@gabrielaires8261 9 месяцев назад

Fiz alguns módulos hoje de um curso de Html que estou fazendo e ja tive um pouco de prática Esta em portugues ainda mas creio q ja vou deixar em ingles original, pq vou ter que me acostumar. Sua didática é muito boa, facilitou muita coisa ja em explicação

@monys140 Год назад

Pow, muito bom, prático e objetivo! Obrigada por dividir seu conhecimento. ❤

@RafaYevsky Месяц назад

Estou começando ainda e vou precisar assistir mais algumas vezes, mas você foi bastante didática. Muito bom o vídeo. Parabéns. Desnecessário porém ser tão bonita, isto foi apenas um capricho da natureza.

@DB2OK Год назад

Gente, que didática maravilhosa. Seguindo o canal.

@ronaldzion7097 9 месяцев назад

Ótimo vídeo pra quem está aprendendo Adriana. Obrigado por compartilhar colega

@williamnunes8732 4 месяца назад

Muito bom mesmo, não sou chegado em Código mas assistindo didaticamente assim fica bem agradável.

@ronaldzion7097 Год назад

obrigado por compartilhar adriana, pra quem e leigo como eu, sua explicação foi de uma grande valia.

@CarlosCastro-zy9jl 8 месяцев назад

sua didática é a mais simples e perfeita que já vi PARABÉNS

@UnderCar86 9 месяцев назад

Cê tem futuro moça, Deus abençoe sempre sua vida 🙏😊❤

@IoneCoutinho 6 месяцев назад

Parabéns querida. Amei seu jeito de ensinar. Estou fazendo um curso de Programador Web no Senac e sua aula me ajudou muito. Pra complementar. Top demais. Sucesso. ❤

@tiagoatelles Год назад

Parabéns pelo conteúdo... Sua aula me ajudou e muito a aprender e compreender sobre criação de site usando HTML e CSS 👏👏👏

@kaiquecapistrano 3 месяца назад

Muito bom, estou a 2 meses procurando um conteúdo assim e não achava. Muito obrigado de verdade

@moises199x Месяц назад

Tem muito youtuber que explica 100x melhor que prof universitário, vc é uma delas parabéns 👏🏻

@eikegamesoi8976 4 месяца назад

Melhor explicação que já vi como fazer uma página. Parabéns

@ronaldomorais3917 Год назад

Muito bom ver oque está acontecendo na pratica, fiz direitinho. Vfinalizar o desafio do contact e project! abraço arrasou

@mcjonatha Год назад

Me ajudou muito em um trabalho da faculdade 👊💪! Muito obrigado.

@lukascarvalho2300 6 месяцев назад

Mto da hora seu vídeo! Me ajudou de mais! Estou começando do zero aos 42 anos e venho praticando, tem muita coisa para aprender. Mas se meter as caras e estudar da certo, no meu github tenho uns projetos que estou praticando como base para estudos através de eventos que participo e um curso que estou fazendo. Valeu Adriana pelo vídeo! Abraço.🤘😎🎸

@leandrogarcia1826 Год назад

Caraca , sua explicacao e super simples, adorei ter feito minha primeira pagina com CSS

@EYNNGFC Год назад

parabéns pela facilidade que voçe tem em trasmitir o seu coneúdo.

@cibellybernardo2359 Год назад

Eu fiz aulas pelo sololearn, o app nn tem PT BR então além de ter a dificuldade do próprio conteúdo eu tinha a tentar traduzir, esse vídeo de poucos minutos clareou muito minha mente. Obrigada

@leonardosilva1404 Месяц назад

explicação muito boa, fui seguindo o passo a passo do vídeo e bateu certinho. top

@kurishinseinenkai Год назад

Excelente aula, bem prática e rápida.

@JMarcos023 Год назад

Gostei muito do seu vídeo, você explica muito bem, está me ajudando muito a criar meu primeiro site. Parabéns!

@AndreVianaDev Год назад

Bem o objetivo. Mais tarde volto aqui pra assistir denovo, desta vez, criando o meu site.

@M_Goulart 2 месяца назад

Excelente aula! Ensina na prática , fica bem mais fácil de entender! Parabéns !

@professorgregorio 10 месяцев назад

claro, lindo e completo, parabens Adriana, seu video é 10!

@adelourencojr Год назад

Muito bem explicado, obrigado de coração Adriana

@LucasVieira-vi8td Год назад

Ensina muito bem, meus parabéns e espero que continue seus videos.

@ronaldinhodev 6 месяцев назад

Que ótima aula, simples e direta! Obrigado 👏

@CARLOSOLIVEIRA-mt3ek 2 месяца назад

Esses videos rapidos são muito bons! keep doing it help us a lot!

@uelbercardoso9127 14 дней назад

Ola Adriana Saty, conteudo top! Estou iniciando agora e a sua aula me abriu a mente de uma forma inexplicável... Parabéns!!!

@estevaobrandaodias 7 дней назад

Muito bom! Acabei de concluir um cursinho básico de html e estava com dificuldade pra entender essa conexão com o CSS, depois desse vídeo estou bem mais preparado para começar o curso de CSS! Essa proposta de vídeo rápido e sem muitas explicações casou muito bem com minha situação

@Vanjosil10 2 месяца назад

Muito bacana a criação e estilização, e a forma bem didática! Muito bom!

@taysilk 4 дня назад

Muito obrigada Adriana! ❤ Sucesso para ti!

@teceujunior6294 3 месяца назад

Olha , estou querendo entrar nesse mundo de TI , adorei o seu conteúdo e sua explicação. ainda não vi muitas coisas , mas precisava ver algo sendo feito para saber se sou capaz ou não e você me ajudou muito com isso. Muito Obrigado

@luizgoncalves1421 2 года назад

background: red; o console.log do css

@AdrianaSaty 2 года назад

exato HAHAHAHA

@luizhenriquesantosdetoledo8127 Год назад

Ficou muito showw Adriana!! Vou estudar Eng. de Software ano que vem, mas estudo pelo RU-vid e tenho curso para front-End!!

@Evertontk3 10 месяцев назад

Ótimo vídeo, muito bem explicado, aprender na prática e bem melhor, parabéns pelo seu trabalho!!!

@tiagohenrique8326 2 года назад

olha! com essa voz, esse jeitinho, esse olhar lindo, Aprendo até Física Quântica. Parabéns seus vídeos são sensacionais, não pare por nadaaaaaa. Mesmo já em um nível um pouco mais avançado, fiz questão de assistir tudo. SINHINHO ATIVADO, INSCRITO, LIKE e ainda vou monstar um Fãn Clube rsrsrs