Curso de HTML e CSS para iniciantes - Aula 13

[@Nerisjr]

Que demais, entrei no curso não sabia absolutamente nada, hoje já posso dizer que tenho conhecimento BÁSICO em HTML, o cara é bom para explicar e ensinar, quando concluir esse vou voltar para fazer o PHP novamente. PARABÉNS, que Deus te abençoe pelo seu esforço!

[@lenosjc]

Quero parabenizá-lo pelas aulas, na cidade que eu moro não temos opções e a nossa internet também não ajuda muito, mas através das aulas realizo um pouco do meu sonho de ser um programador. Deus abençoe imensamente sua vida, Obrigado!

[@vncfps]

Ja conseguiu irmão? to começando agora

[@skyfullstars]

Entrei nesse curso quase que analfabeta e saí com MUITOOO conhecimento adquirido. Graças a bela didática que esse canal para explicar conteúdo

[@melloscripter]

Tive que rever o vídeo e a parte explicando sobre grid, linhas e colunas algumas vezes e torrar bastante meu cérebro, mas entendi. Obrigado por esse curso maravilhoso cara! Você está ajudando o Brasil e todo o cénario!

[@tiagoqueiroz9836]

As melhores videos aulas de HTML e CSS que eu encontrei, aguardo a próxima vídeo aula.

[@evertonmds3817]

um dos melhores professores que ja tive... Valeo Ricardo, muito bom saber que existem pessoas habilidosas e que tem boa vontade para repassar o conhecimento, parabens mesmo.

[@LorddaZoeiraOficial]

melhor que muitos professor de cursinho por ae parabéns cara explica tudo direitinho quando eu subir meu site vo dar créditos a vc seu fodão

[@cleversonsantosxavier2058]

Professor você é muito bom. estou aprendendo muito com você. Agora sugiro que você faça um curso de javascritp. Parece que será muito proveitoso. Que Deus o abençoe sempre. Muito obrigado.

[@Dan_XF07]

Todos os vídeos do RBtech são ótimos! Muito bem explicados! Parabéns !

[@junioroliveira4930]

Vamos que vamos... animado para começar o site!

[@cristianpires6906]

Estou muito empolgado pra conseguir fazer um site, e suas vídeo aulas estão sendo perfeitas pra mim, que tenho está matéria na faculdade e não estava entendendo quase nada, Deus te abençoe grandemente Ricardo ♥️🙏

[@gui_miotto]

Demorei um pouco pra entender o grid mais quase no final da aula eu entendi a logica por trás do grid, vlw muito obrigado mesmo, muito bem explicado o conteudo!

[@FernandoAraujo402]

Muito bom, esperando ansioso pela próxima aula. Quem não ver estar perdendo uma ótima explicação.

[@JefersonAlan10]

Cada dia melhorando, graças a você!

[@fabiomunizdev]

Obrigado por compartilhar o conhecimento!

[@Miche4ll]

Vi que tem muita gente com dificuldade para baixar as imagens, segue como baixar: O link de download está abaixo do vídeo no link que encostramos na descrição dev.rbtech.info/?p=6874 (Link laranja com nome "Download das imagens usadas na aula". Clique no ícone de nuvem abaixo do texto que está escrito baixar depois a opção baixar grátis. Caso você use adblock pause ele para que o tempo seja reduzido para 20 segundos e espere esse tempo para baixar. Será baixado automáticamente e depois é só extrair os arquivos.

[@caffmototx]

obrigado

[@edsonsilva6882]

vlew cara

[@LeandroLbs]

Muito bom aprendi uma série de coisas novas parabéns Ricardo! #Show de bola!

[@brunatavares5987]

Melhores aulas, muito muito obrigada!!!!

[@diegomeneses5790]

Muito obrigado!!!!!! Aprendi bastante com suas aulas, são bem didáticas.

[@Followersbattlekorea]

As aulas sao perfeitas, parabens!!!

[@jonathanhenriquealvesdelim6633]

ótima aula parabéns, está ajudando muito no meus estudo...

[@jeffymesquita]

Parabéns, +RBtech aulas esclarecedoras

[@TheMFhalls]

MUITO BOM RICARDO !

[@ocoringa23]

Gente, pra quem deu algum erro de centralização, atenção no fechamento das "div" de cada linha.

[@calebearlan926]

Sinceramente não estou entendendo muito o grid...

[@admlaugusto]

Parabens.. excelente material !

[@fabiolasilva7773]

+admlaugusto Olá augusto! como baixar as imagens do site final do canal RBtech, você sabe? Pode me explicar. Sou iniciante. Obrigada!

[@dayclessy]

Seriooo!! Muito boa as aulas!!

[@netosarmento1643]

estou fazendo o site no modelo que você falou, infelizmente para utilizar a fonte roboto pelo site do google não estou conseguindo! será que alguém poderia me ajudar ?

[@Bpergher]

Parabéns pelo curso. Muito didático. Só fiquei com uma dúvida. É necessário coloca a / no fechamento das tags? No Sublime Text ele já cria as tags com fechamento automático e sem a / (barra). Significa que posso deixar sem então? Obrigado

[@silascastro97]

ótimo curso cara!

[@alessandromotta8917]

vc é top ricardo!!!!!!

[@diasddc]

Bom dia amigo. Uma dúvida. As fonts não seria melhor coloca os links direto no css não através do @import? Como exemplo: @import url('fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap');

[@nvtp3743]

Vamos ver um exemplo? aí o Ricardo abre o site dele kkk

[@viniciuscastro4281]

Propaganda é a alma do negócio kkkkkkk

[@pthiago_s5075]

kkkkkkkkkkkkkkkkkkkkkkkkk foi mt engraçado

[@marceloalexandre7352]

estranhamente com o mesmo código a quir minhas colunas ficaram uma sobre a outra.o que pode ter acontecido,será que mesmo acompanhando o professor eu ainda consegui errar?no mais parabéns pelas aulas,incrível como é fácil aprender quando a explicação é clara...

[@RBtechinfo]

marcelo alexandre deve haver algum erro, verifique com atenção que irá encontrar algo diferente

[@marceloalexandre7352]

pois é,a acentuação eu consegui resolver.agora a estilização também não funciono.

[@alessandroale9923]

estou com o mesmo problema pode me ajudar .

[@kelvinamaral]

estava com o mesmo erro, verifiquei e havia escrito errado o nome do codigo CSS errado:. coluna{ padding: 0 10px; float: left; } sugiro verificar o CSS ;)

[@deiversonsousa7461]

O meu codigo esta igual o dele, mais minhas colunas estão todas do lado esquerdo aiinda

[@JhonDonavanMiguel]

Primeiramente, parabéns pela aula. Queria tirar uma duvida, qual é a diferença de estruturar um site por grid(colunas igual vc ta fazendo neste video) para estruturar o site com as tag header, aside, footer e etc, e dar propriedades de float a eles?

[@JhonDonavanMiguel]

+Jhon Donavan esquece o que comentei. O próximo vídeo responde minha pergunta.

[@fabiolasilva7773]

+Jhon Donavan me ensina passo a passo como baixar as imagens! não sei. Agradeço

[@luanpezaomc]

Ricardo suas aulas são as melhores, só queria saber como faço pra colocar o "hover"(fundo, quando passa o mouse) do menu com a borda arredondada? Grato.

[@fabiolasilva7773]

Como devo fazer para baixar as imagens? Alguém pode me ajudar?

[@rafaelparra9037]

Professor, para projetos pequenos o sublime é top, mas para fazer grandes projetos inclusive um sistema de produção web, não seria melhor o dreamweaver?

[@xvr8823]

Meu celebro quase explodiu nessa aula kkkkkk vou assistir dnv até aprender

[@kletson20]

Parabéns pela aula!

[@ThomascomH]

Aulas INCRÍVEIS

[@TheEdson1993]

Quem não conseguiu alinhar centralizado tenta copiar o endereço completo tipo: D:\Users\Edson\Documents\Curso\HTML\Projetofinal\css\estilo.css

[@renanvidal3553]

eu estava quebrando a cabeça aqui, seu comentario me salvou. vlw!

[@valdenicesilva2795]

Ricardo, primeiramente gostaria de parabenizar o seu trabalho. Você tem uma ótima didática para explicar e ensinar. Eu consegui fazer os grids conforme você nos ensinou, porém eu não entendo o porque já no final do video você fala que eu terei que fazer uma linha com col 4 e col8....eu não consigo ver essa quantidade de colunas....depois na outra linha, você fala que temos 3 colunas na parte dos clientes e mais 9 colunas. Essa é a minha dúvida. Não consigo entender e nem visualizar essas quantidades de colunas. Será que você ou alguém poderia me explicar? Agradeço desde ja,

[@gleisencampos6718]

Olá Valdenice, também estou aprendendo, mas pelo que entendi, a col 4, por exemplo, não é a quantidade de colunas que você vai precisar visualizar , e sim o tamanho que essa coluna terá, logo, essa col 4 receberá o tamanho de 4 colunas = 300px e a col8 de 8 colunas = 620px, totalizando as 12 colunas que o Ricardo falou que cabem nos 960px. Espero que tenha ficado claro e que eu também esteja correta ao te responder... rs

[@DJSerpents]

Obrigado pelo feedback Ricardo, depois de ler, treinar bastante e usar mais o conceito div, me desafiei em rever esse video e inusitamente tudo se tornou claro, o que um dia me fez inconformado, hoje me faz rir do quão besta fui, similar com minha ex, rsrs. Me diz mais uma coisa meu caro, devo aprender o que agora já tendo bastante familiaridade com html, css para continuar pela jornada front-end? Valeu.

[@RBtechinfo]

Veja esse vídeo: kzbin.info/www/bejne/d5KsXqOXotGafqs

[@thiagocruz1640]

Bopa Noite! o meu grid, ficou um abaixo do outro, porem a divisão em pixel mostra o preenchimento.

[@JoaoAlexandreRabelo]

Qual a diferença em salvar como htm ou html ?

[@RBtechinfo]

João Alexandre nenhuma, as duas extensões devem ser interpretadas normalmente por qualquer servidor

[@JoaoAlexandreRabelo]

RBtech Então por que existem essas duas extensões ?

[@henrique46635]

+João Alexandre Porque antigamente, usava-se computadores MS-DOS, e as extensões de arquivos, tinha que ter 3 letras, por isso adaptaram de "HTML" para "HTM"

[@Michellemiquelina]

Eu fiquei com dúvidas sobre o arquivo css. Para cada página sera necessário um .css?

[@rrinformatica11]

Não conseguir baixar as imagens, do link acima. porque será?

[@rafaelcaitano6217]

Minhas colunas não estavam organizadas. Identifiquei o erro. Eu estava usando META TAG ao invés da tag LINK

[@rafaelcaitano6217]

Ou seja, o arquivo CSS não estava sendo lido.

[@namisanws2340]

mano, como tu ta agr no html css, já tas trabalhando na área ?

[@arielsardinha9031]

eu estava tendo o mesmo problema. cheguei até colocar a extenção de o caminho do arquivo,C:\Users\Diego Oliveira\Downloads\Treino html\css\estilo.css, e nada. cobiei e colei o que vc fez e deu certo. acho que tinha digitado algo errado. vlw

[@olapessoas9478]

seria bom ter um diploma no final do curso, tipo um pdf

[@Isaprevitalli]

Começa em 8:00

[@cassiocoutinho639]

Porque tem que salvar as fontes embaixo do normalize e não em cima?

[@ViniciusSouza-ty2sy]

As linhas dos meus parágrafos ficaram todas até o final da página, qual comando que ajeita?

[@ghenissonsousasantos2804]

Aqui ficou todo mundo na mesma coluna!

[@caioarthuso]

Provavelemente você está errando no "Float", lá no estilo.css. Eu também estava cometendo esse erro.

[@GodFaFor]

Ricardo como que muda o fundo do site

[@marcorodrigues3937]

background-color

[@Afonso092]

Ótimo curso, uma dúvida, por que eu não posso simplismente digitar : < div class= "coluna col12">

[@dark7100]

Muito bom parabens!

[@lucascolmanettegranzoto5237]

Olá, tenho feito tudo desde a aula 1, porém quando coloco o comando

[@fabiocoelho3603]

Esse grid do vídeo é padrão na hora que for fazer qualquer site??

[@ViniciusSouza-ty2sy]

No meu só a imagem ficou no lugar errado, onde posso ter errado?

[@nicolischwaab5342]

Eu encontrei o meu problema mas não sei como concertar. Quando eu abro o browser e inspeciono a página, ao invés de aparecer os tamanhos do css, eles aparecem assim: 1350 x36 ao invés de 960px x 10px E aolado do body vem escrito: ==0 , o que significa?

[@antoniokassyus6222]

Só não consegui baixar essas imagens quando termina o tempo de espera não baixa

[@ViiadaSabedoria]

O meu não fica em 960, tem que ser em 600. Mas mesmo assim as colunas não ficaram centralizadas igual a sua, ta foda coisa de doido hahaha cabeça vai explodir aqui.

[@helzadyamv8797]

o link de download das imagens não esta abrindo

[@G4m3rDr0id]

Ricardo não estou conseguindo baixar as imagens

[@felipeserial]

A minha página ficou com todos itens a esquerda. =\. Alguém pra ajudar?

[@othavionakamura2347]

os meus também! se vc conseguiu resolver me ajuda por favor

[@phalves8598]

a resolução na minha pagina está dando 1350px e não 960 como no exemplo

[@joaobraz612]

Mano, não entendi nada desses grid. Se vai ser tudo divs pra que servem o , , , ...

[@RBtechinfo]

Para que navegadores e motores de busca saibam como seu conteúdo é organizado.

[@joaobraz612]

Entendo. No início foi meio difícil de entender o grid mas parando pra pesarn calmamente consegui entender aos poucos.

[@ga_per]

N to conseguindo faZer download das imagens

[@mathstylish]

Meu grid ficou alinhado pra esquerda, já chequei todo o html e o css, alguém me ajuda pf.

[@alexrodrigues8147]

Ele deixou assim.

[@71nao]

os meus grids nao ficam centralizaados igual ao seu nao sei pq,pode me ajudar?

[@rafaelbrito7752]

Vê se la no estilo.css na classe .linha se você colocou o margin: 0 auto; e o overflow: auto; dessa forma .linha{ width: 960px; margin: 0 auto; overflow: auto; padding: 5px 0; }

[@arielsardinha9031]

@@rafaelbrito7752, eu estou com o mesmo problema mas a questão é que o meu link do HTML nao esta achando a pagina estilo.css. ja tentei de tudo.

[@marcelogustavo4799]

@@isabellamiller7065 kkkkkkkkkkkk, a net no Acre demora tanto assim?

[@marcelogustavo4799]

O Rafael enviou a mensagem respondendo o comentário do 71nao e dps de 3 anos ela chegou pq o cara deve morar no Acre. Conhece os memes do Acre não?

[@marcelogustavo4799]

@@isabellamiller7065 eita, kkkk, pesquisa la dps. Recomendo o canal da SAM.

[@scanttoficial]

BUG/ERRO DAS COLUNAS QUE NÃO APARECEM (RESOLVIDO) Ao invés de colocarem apenas a pasta .css exemplo: coloquem: PARA MIN FUNCIONOU ESPERO QUE AJUDE VCS! :)

[@miguel_brf3897]

curso muito bom

[@mateuscardoso2151]

como colocar essa barra lateral??? pf me ajudem

[@hadjam1]

amigo nao consigo ver a aula 14 pulou para 15

[@GoneZzz]

olá, não consigo baixar as imagens, alguem pode dizer o passo a passo pf? alguem me salva ai galera?

[@J1975lima]

Ricardo bom dia Os conceitos de linhas e colunas ( 12 colunas ) é obrigatório? eu nao poderia crir uma ou duas colunas e distribuir pelo tamanho que preciso? agradeço se puder responder obrigado

[@RBtechinfo]

Sim é obrigatório pois você inevitavelmente vai usar algum framework CSS (Bootstrap, Foundation) e todos eles usam esse conceito de grade para montar o layout da página. Então quanto antes você dominar isso melhor será para sua evolução na área.

[@J1975lima]

Obrigado pela resposta grande abraço

[@kassiabalduino1685]

não consegui fazer essa aula, porque google/font não abriu igual ao que você mostrou, não achei lugar de selecionar.

[@sucodeuva3079]

aqui o código html: e o css: font-family: 'Roboto', sans-serif;

[@SamuelMorenoReis]

Existe alguma aula complementar com dicas? ou são apenas as 15 aulas padrão?

[@RBtechinfo]

+Samuel Moreno Reis são "apenas" as 15 aulas

[@davisouzza8980]

Possibilândia kkkk aliás, belo video, parabéns!

[@hybekihyuga4214]

os meus grids não ficaram centralizados igual ao seu. E não sei pq alguém pode me ajudar? Atualizando o meu comentário ... Já consegui arrumar.

[@pedromoya5181]

será possível abrir um site criado desse modo por um dispositivo móvel?

[@marcorodrigues3937]

ele ficará todo bagunçado, porém dá pra abrir

[@teodosiosantos1134]

Pra ficar fácil, pensem como uma matriz, aonde só mudar o col1... até 12

[@andersonpaulo1831]

minhas informações ficaram todas alinhadas para a esquerda :/

[@sucodeuva3079]

ve seu estilo.css, provável que há algo de errado

[@teodosiosantos1134]

o meu também tava assim, só consertei o coluna1 para coluna 1 com espaço. tipo matriz

[@jhoamlex428]

pra quem nao está entendendo o grid qro dar uma força, foi assim que entendi: exemplo col4 col4 col4 uma col1 tem 80px, uma col2 tem 160px ou seja uma col4 tem 320px ou seja col4 col4 col4= 960 px cada espero que vcs compreendam

Excelente curso estou acompanhando, porém uma coisa não gostei, ao usar fontes do google externas, esse site não vai funcionar se a máquina não estive ligada na internet.

Matt Spano sim, mas o Google está na internet.

[@robsongoncalves6776]

Por isso tem a segunda família de fontes, no caso a sans-serif. Para ter ainda mais segurança é possível colocar quantas fontes quiser, como ele ensinou na aula de tipografia kzbin.info/www/bejne/iXbCaXWbibycoNE

[@xvr8823]

Mas pra entrar em um site n precisa ta conectado a internet?

@@xvr8823 Estou falando de uma intranet coorporativa onde a internet é controlada.

[@andersondioniteles8885]

minha pagina ficou tudo uma embaixo da outra nao separou as colunas, onde eu errei? fiz tudo exato e ja assisti o video duas vezes, me ajuda pfv

[@mathstylish]

Provavelmente deve ter colocado "

[@jaquielvieira657]

meu código esta conforme o vídeo mas meus grids não saem do lugar,alguém poderia me dar um help?

[@jaquielvieira657]

conseguir resolver, para quem esta com o mesmo problema ao invés de utilizar primeiro o normalize.css substitui pelo estilo.css e aonde esta o css substitui e coloca o normalize.css reverte!!!!!

[@RBtechinfo]

Se você teve que alterar a ordem é porque algo está errado no seu estilo.css

[@D4visonnff]

mtt bom aprendi mtt

[@wesleiramos2]

Digite html e aperte TAB ai o sublime cria a estrutura básica pra você

[@gustavoduartewarp]

Weslei Ramos não funcionou

[@wesleiramos2]

Eu uso o Sublime Text 3 (não sei se a sua é essa)

[@g.c.p2267]

2019

[@lucianolopezdossantos]

você tem várias pastas salvas, estou tendo bastante dificuldade para entender onde fica salvo, estou usando o visual studio code, a organização não é igual, outra coisa as letras são muito pequenas, faltou zoom nos videos, o resto esta de parabéns

[@nhac6794]

Para mim dá para ver de boas

[@Kill_Binho]

O ruim de fazer essas aulas anos depois, o site do google fonts está totalmente diferente. =(

[@nicolischwaab5342]

Ah sim, eu também acessei pela primeira vez hoje e tava diferente mas consegui me achar sem problemas, quer ajuda?

[@Cacoeditz]

desde a ultima aula n consigo acompanhar nada minhas paginas ficam em preto to entendeo nadaahh

[@vaidaocu9809]

fiz tudo direitinho, mas não deu em nada

[@duardaemilli]

(of) sempre escuto ele falando "aqui é o ricarto" ksks

[@Cacoeditz]

kkkjkjjkk

[@DJSerpents]

isso ficou extremamente confuso, "12 colunas por linha", como assim? 'linha' e 'coluna' foram denominações que tu criou e quer dizer que se eu criasse uma class e denominasse ela como 'col200', seriam 200 colunas? que viagem essa parte, ja repeti 500 vezes e nao entendo isso...

[@RBtechinfo]

Cara, qualquer framework CSS trabalha com linhas e colunas, que aliás é um conceito bem básico nesse meio. Desenha linhas e colunas em um papel que ajuda a compreender.

[@beatriz3110]

todas ficaram 811x18, eu fiz tudo certo não sei o que está acontecendo, no final o resultado fica tudo no lado esquerdo

[@othavionakamura2347]

o meu também!!! eu copiei toda a programação dele e não funciona. se vc já conseguiu resolver o problema me ajude por favor

[@GoneZzz]

Ricardo Socorro :(

[@arthurfrancesch99]

eu nao entendi a estrutura de grid alguem pode me ajudar

[@gabriel59429]

Estou boando só na largura das colunas, pois não encontro uma lógica.. Mas de resto é bem simples. Toda estrutura web, está estruturada em linhas em colunas. Cada linha deve conter por padrão 12 colunas, cada col com uma numeração como col5, significa a junção de 5 colunas dando um valor x de largura, desta forma você visualiza tamanho de cada área do site, e vai montando, seguindo a lógica acima.

[@gabriel59429]

Da mesma forma que você padronizou um layout de 960px, que é comum na web. você vai dividir ele em linhas em colunas, dentro de software de edição. Como 12 é padrão de um layout comum na web. Você vai ter sempre colunas de 80px. Para que as informações não fique grudadas, você adiciona espaçamento entre as colunas, desta forma você vai analisar quantos de largura deu cada estrutura sua. Verificando, coloque um número x de colunas para fazer tamanho exato da sua estrutura. Vai fazendo igual um quebra cabeça, para cada área do site.