- Видео 33
- Просмотров 133 952
Dica do Nerd | Marcelo Pereira
Бразилия
Добавлен 4 июл 2020
Criei o canal Dica do Nerd com o objetivo de compartilhar dicas e boas práticas sobre o desenvolvimento frontend. O canal aborda temas como: HTML e sua semântica, CSS, animações CSS, JavaScript, performance, usabilidade, acessibilidade na web, entre outros assuntos relevantes ao mundo do desenvolvimento web.
Curso de Html5 e Css3 - 31 - Formulários - Checkbox
Curso de Html5 e Css3 - 31 - Formulários - Checkbox
Nesta aula vamos conhecer mais um tipo de elemento input, o "checkbox", que vai permitir o usuário selecionar uma ou mais opções em uma lista. Bora codar juntos! 🙌🚀
Github do curso:
github.com/marcelopoars/curso-de-html5-e-css3
Grupo no Telegram :
t.me/dicadonerd
________________________
Marcelo Pereira
Frontend Developer
Site: marcelopereira.dev
Linkedin: www.linkedin.com/in/marcelopoars
Instagram: marcelopoars
Nesta aula vamos conhecer mais um tipo de elemento input, o "checkbox", que vai permitir o usuário selecionar uma ou mais opções em uma lista. Bora codar juntos! 🙌🚀
Github do curso:
github.com/marcelopoars/curso-de-html5-e-css3
Grupo no Telegram :
t.me/dicadonerd
________________________
Marcelo Pereira
Frontend Developer
Site: marcelopereira.dev
Linkedin: www.linkedin.com/in/marcelopoars
Instagram: marcelopoars
Просмотров: 545
Видео
Curso de Html5 e Css3 - 30 - Formulários - Datalist
Просмотров 246Год назад
Curso de Html5 e Css3 - 30 - Formulários - Datalist Nesta aula vamos conhecer o "datalist" que é um elementos de contúdo suspenso. Uma forma de permitir que o usuário busque uma opção em uma lista de valores. Bora codar juntos! 🚀🙌 Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Grupo no Telegram : t.me/dicadonerd Marcelo Pereira Frontend Developer Site: marcelopereira.dev Linkedi...
Curso de Html5 e Css3 - 29 - Formulários - Select
Просмотров 267Год назад
Curso de Html5 e Css3 - 29 - Formulários - Select Nesta aula vamos começar a trabalhar com elementos de contúdo suspenso. Vamos conhecer a tag "select" que vai permitir o usuário escolher uma ou mais entre muitas opções. Bora codar juntos! 🚀🙌 Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Grupo no Telegram : t.me/dicadonerd Marcelo Pereira Front-end Developer Site: marcelopereir...
Curso de Html5 e Css3 - 28 - Form widgets nativos
Просмотров 265Год назад
Curso de Html5 e Css3 - 28 - Form widgets nativos Nesta aula veremos a funcionalidade de diferentes form widgets em detalhe, observando quais opções estão disponíveis para coletar diferentes tipos de dados. Bora codar juntos! 🚀🙌 Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Grupo no Telegram : t.me/dicadonerd Marcelo Pereira Front-end Developer Site: marcelopereira.dev Linkedin...
Curso de Html5 e Css3 - 27 - Estilizando formulários Html com Css
Просмотров 404Год назад
Curso de Html5 e Css3 - 27 - Estilizando formulários Html com Css Nesta aula vamos estilizar o formulário criado na aula passada. Então pegue sua água, seu café... e bora codar juntos! 🚀🙌 Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Grupo no Telegram : t.me/dicadonerd Marcelo Pereira Front-end Developer Site: marcelopereira.dev Linkedin: www.linkedin.com/in/marcelopoars Instag...
Curso de Html5 e Css3 - 26 - Formulários HTML
Просмотров 4132 года назад
Curso de Html5 e Css3 - 26 - Formulários HTML Nesta aula vamos estudar sobre formulários HTML. Iremos criar um formulários simples de contato e simular o evio de dados. Vamos aprender muita coisa bacana nesta aula. Então, bora codar juntos! 🚀🙌 Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Grupo no Telegram : t.me/dicadonerd Marcelo Pereira Front-end Developer Site: marceloperei...
Curso de Html5 e Css3 - 25 - Pseudo-elementos CSS
Просмотров 2772 года назад
Curso de Html5 e Css3 - 25 - Pseudo-elementos CSS Nesta aula vamos estudar sobre os pseudo-elementos no CSS e como eles podem nos ajudar a criar interfaces mais rebuscadas e ainda deixar nosso código mais profissional. Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Grupo no Telegram : t.me/dicadonerd Marcelo Pereira Front-end Developer Site: marcelopereira.dev Linkedin: www.link...
Curso de Html5 e Css3 - 24 - Pseudo-classes CSS
Просмотров 5052 года назад
Curso de Html5 e Css3 - 24 - Pseudo-classes CSS Nesta aula vamos estudar sobre as pseudo-classes no CSS e como elas podem facilitar muito o nosso trabalho como frontend. Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Grupo no Telegram : t.me/dicadonerd Marcelo Pereira Front-end Developer Site: marcelopereira.dev Linkedin: www.linkedin.com/in/marcelopoars Instagram: instagram.com...
Curso de Html5 e Css3 - 23 - Projeto prático - Fixed Header
Просмотров 6282 года назад
Curso de Html5 e Css3 - 23 - Projeto prático - Fixed Header Nesta aula vamos deixar o header do nosso site fixo, o que vai melhorar muito a experiência de navegação do usuário. Para isso vamos utilizar a propriedade "position" do CSS com o valor "fixed", e assim fixar no header do nosso site no topo da página. Bora codar juntos? 🚀 Link com imagens e textos do projeto (Google Drive): drive.googl...
Curso de Html5 e Css3 - 22 - Como funciona a propriedade css position
Просмотров 7832 года назад
Curso de Html5 e Css3 - 22 - Como funciona a propriedade css position Nesta aula vamos estudar a propriedade CSS Position e entender como ela pode nos ajudar a criar layouts incríveis utilizando os valores: relative, absolute, fixed e sticky. Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Marcelo Pereira Front-end Developer Site: marcelopereira.dev Linkedin: www.linkedin.com/in/...
Dicas e atalhos para Visual Studio Code
Просмотров 1,7 тыс.2 года назад
Dicas e atalhos para Visual Studio Code Neste vídeo vamos ver algumas dicas e atalhos para VS Code que vão ajudar aumentar a sua produtividade e facilitar o seu dia a dia como desenvolvedor. Lista com atalhos utilizados no vídeo: gist.github.com/marcelopoars/11b78ede44d7c1a5b34c490dae93e3eb Playlist do Curso de Html5 e Css3: ruclips.net/video/BVcAuv6AHfY/видео.html Marcelo Pereira Frontend Deve...
Curso de Html5 e Css3 - 21 - Projeto prático - Publicando na Netlify
Просмотров 1 тыс.2 года назад
Curso de Html5 e Css3 - 21 - Projeto prático - Publicando na Netlify Nesta aula vamos publicar nosso projeto na Netlify, que é um serviço de hospedagem de sites estáticos. 🚀 Desta forma teremos um link e vamos poder compartilhar o nosso projeto com nossos amigos, em redes sociais, Linkedin, etc. Site Netlify: www.netlify.com Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Marcelo...
Curso de Html5 e Css3 - 20 - Projeto prático - Melhorando a acessibilidade do site
Просмотров 1,3 тыс.2 года назад
Curso de Html5 e Css3 - 20 - Projeto prático - Melhorando a acessibilidade do site Nesta aula vamos melhorar a acessibilidade e usabilidade do nosso site buscando oferecer uma melhor experiência para nossos usuário. ❤ Link para download das imagens utilizadas nesta aula. (Google Drive): drive.google.com/drive/folders/1eF-6yWSouIERefCLp7cchWdVKqE3OU9D?usp=sharing Github do curso: github.com/marc...
Curso de Html5 e Css3 - 19 - Projeto prático - Code Refactoring
Просмотров 1,1 тыс.2 года назад
Curso de Html5 e Css3 - 19 - Projeto prático - Code Refactoring Nesta aula vamos praticar code refactoring, buscando formas de melhorar e otimizar o nosso código. Bora codar juntos? Link com imagens e textos do projeto (Google Drive): drive.google.com/drive/folders/1Lol7t_X1oSRYWebTZOQZwXuyR9xzN2TI Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Marcelo Pereira Front-end Develope...
Curso de Html5 e Css3 - 18 - Projeto prático - Footer
Просмотров 1,2 тыс.2 года назад
Curso de Html5 e Css3 - 18 - Projeto prático - Footer Nesta aula vamos criar o 'History' do nosso site e também fazer alguns ajustes no código do Header e Hero. Bora codar juntos? Link com imagens e textos do projeto (Google Drive): drive.google.com/drive/folders/1Lol7t_X1oSRYWebTZOQZwXuyR9xzN2TI Github do curso: github.com/marcelopoars/curso-de-html5-e-css3 Marcelo Pereira Front-end Developer ...
Curso de Html5 e Css3 - 17 - Projeto prático - History
Просмотров 1,6 тыс.2 года назад
Curso de Html5 e Css3 - 17 - Projeto prático - History
Curso de Html5 e Css3 - 16 - Projeto prático - Gallery
Просмотров 2,5 тыс.2 года назад
Curso de Html5 e Css3 - 16 - Projeto prático - Gallery
Curso de Html5 e Css3 - 15 - Projeto prático - Hero
Просмотров 3,3 тыс.3 года назад
Curso de Html5 e Css3 - 15 - Projeto prático - Hero
Curso de Html5 e Css3 - 14 - Projeto prático - Header
Просмотров 5 тыс.3 года назад
Curso de Html5 e Css3 - 14 - Projeto prático - Header
Curso de Html5 e Css3 - 13 - Primeiro projeto - Site responsivo
Просмотров 10 тыс.3 года назад
Curso de Html5 e Css3 - 13 - Primeiro projeto - Site responsivo
Curso de Html5 e Css3 - 12- Recado do Nerd
Просмотров 1,7 тыс.3 года назад
Curso de Html5 e Css3 - 12- Recado do Nerd
Curso de Html5 e Css3 - 11 - Introdução ao CSS
Просмотров 2,9 тыс.4 года назад
Curso de Html5 e Css3 - 11 - Introdução ao CSS
Curso Html5 e Css3 - 10 - Semântica, Tags Header, Footer, Nav, Section, Main, Div
Просмотров 15 тыс.4 года назад
Curso Html5 e Css3 - 10 - Semântica, Tags Header, Footer, Nav, Section, Main, Div
Como criar um card com Html5, Css3, Flexbox, Transform e Transitions
Просмотров 1,7 тыс.4 года назад
Como criar um card com Html5, Css3, Flexbox, Transform e Transitions
Curso de Html5 e Css3 - 09 - Âncoras e Links
Просмотров 3 тыс.4 года назад
Curso de Html5 e Css3 - 09 - Âncoras e Links
Curso de Html5 e Css3 - 08 - Imagens com a tag img
Просмотров 2,7 тыс.4 года назад
Curso de Html5 e Css3 - 08 - Imagens com a tag img
Curso de Html5 e Css3 - 07 - Listas
Просмотров 2,6 тыс.4 года назад
Curso de Html5 e Css3 - 07 - Listas
Curso de Html5 e Css3 - 06 - Tags Br e Hr
Просмотров 2,9 тыс.4 года назад
Curso de Html5 e Css3 - 06 - Tags Br e Hr
Curso de Html5 e Css3 - 04 - Tags e atributos
Просмотров 4,4 тыс.4 года назад
Curso de Html5 e Css3 - 04 - Tags e atributos
Curso de Html5 e Css3 - 05 - Criando a primeira página Html5
Просмотров 4,5 тыс.4 года назад
Curso de Html5 e Css3 - 05 - Criando a primeira página Html5
Muito bem explicado, Parabens
Sucesso sempre...
Obrigado por essa obra prima de aula...
Sucesso sempre...
Show de bola...
Eu fiz assim no meu, .hero h1 { color: #ebebeb; font-size: 36px; font-weight: bold; text-shadow: 2px 2px 0px black, -2px -2px 0px black, 2px -2px 0px black, -2px 2px 0px black; }
Irmão, estou apaixonado pelas suas aulas e estou focado assistindo a elas. Acredito que estou realmente aprendendo e, em breve, estarei tentando diversos projetos sozinho na prática. Desde já, obrigado por todas as suas aulas e peço que continue com elas, pois aqueles que realmente querem aprender merecem ter um futuro melhor. Espero poder estar lhe ajudando, pelo menos atualmente, com os 'gostei' em seus vídeos e, futuramente, de alguma outra forma também, quem sabe... Bom, vamos lá continuar aprendendo cada vez mais!
Obrigado pelas aulas! Pretende trazer conteúdos novos para o canal?
Quero agrdecer por sua iniciativa disponibilidade de ensinar, obrigado! que Deus te abençoe muito, parabéns!
Estou aprendendo bastante, directamente de Angola. 🇦🇴
Posso tirar uma dúvida com vc Marcelo?
Perfeitoo
Conteúdo simples e humilde e direto! Eu gosto
Muito bom!!!
Perfeito!!!
Show demais. 🚀
Sensacional! 🚀👨🏾💻
Olá Marcelo, gostei muito das dicas. Tentei aplicar a extensão Auto Rename Tag, mas não consegui ver aplicação
Deus te abençoe mano, finalmente entendi o conceito de flex grow,shrink e basis :D
Marcelo suas aulas foram de mais! cara eu arrastei a pasta do projeto, porem tambem abre com erro "page not found" ... bora la tenta arruma esse bug pls!!!
Que aula hein . Parabéns .
Que aula hein 👏👏👏 didática excelente . Parabéns Professor !
Olá! Seria melhor, com flex box, colocar um header dentro de uma div ou dentro de uma section?
Olá @meows9628. Você deve sempre começar marcando seu HTML escolhendo as tags que mais fazem sentido com o conteúdo da página ou componente. Caso esteja criando um HEADER para a página, você pode usar a tag "header" envolvendo todas as demais tags. E dentro vc utiliza as tags que fazem sentido com cada conteúdo. Você pode usar "DIVs" para auxiliar na estilização e organização do conteúdo com CSS.
Muito completo! Parabéns!
26:00
Será que tem para o sublime?
Quero expressar meu muito obrigado pelo enriquecedor conteúdo. Espero que em outras aulas o amigo ponha PSD, acredito que irá ser de grande ajuda para os iniciante que desejam ingressarem no mercado. Contudo parabéns pelo excelente trabalho.
tava precisando desse vídeo
Mano, suas aulas são tops, preciso tirar uma dúvida, na hora de colocar o atributo Id não estou achando ele, como posso resolver?
Nem iniciei e já estou gostando. Muito obrigado por ajudar pessoas que como eu não tem condições de pagar cursos caros! Parabéns pelo excelente trabalho!
Parabéns você sabe explicar🎉
Muito bom, excelente!
Cheguei até aqui por a caso, O uso do border-bottom algumas vezes é um problema quando você quer definir um width, então a linha vai se adaptar ao tamanho da caixa ao invés do comprimento do texto, (apesar de a não ser display: inline-block, o que pode ser alterado). text-underline-offset: 0.3em; /* controla a distância do sublinhado, (possível substituto para boder-bottom com padding )*/ text-decoration-color: currentColor; /* o currentColor mantem a cor da propriedade color, border-color também aceita currentColor */ text-decoration-thickness: 1px; /* altera a grossura da linha */ text-decoration-skip-ink: none; /* mantém a linha initerrupta */
obrigado, estava querendo lembrar o da estensão live server
muito bom!!!!
muito bom, continue!😁
muito bom professor!!
curso muito bom professor, obrigado pelos ensinamentos!
Perfeito
QUE AULA MARAVILHOSA
Conheci seu canal hoje e já estou maratonando! A didática é excelente e as dicas vão além do básico. Obrigada pela aula!
Eu me sinto muito feliz por finalmente estar aprender a programar, é a primeira vez que sinto que fiz a escolha certa dessa profissão, muito obrigada por disponibilizar este curso grátis e dispor do seu tempo compartilhando e ensinando a todos nós.
Só tinha que mostrar como abre essa pasta dentro do vscode.
Esse processo de refactoring eh interessante sempre fazer nos projetos?
Sim, pois ao realizar a refatoração, é possível simplificar o código, melhorar sua legibilidade e torná-lo mais fácil de manter e modificar. Além disso, a refatoração também pode melhorar o desempenho do software, reduzir a quantidade de bugs e melhorar a qualidade geral do código. Embora a refatoração possa exigir tempo e recursos adicionais, a longo prazo, pode economizar tempo e dinheiro, pois torna o software mais fácil de manter e modificar. Portanto, é uma prática recomendada em desenvolvimento de software.
Sim João. É algo natural e que vai fazer parte do processo.
Jajá chego nessa parte
Melhor curso que eu já vi relacionado à páginas web aqui no yt. Thank you 💯
Obrigada por compartilhar seu conhecimento! Sou da contabilidade e estou estudando programação agora, começando bem do básico mesmo, seu canal tem ajudado demais! Valeu
Obrigado pelo feedback Joice. Parabens pela dedicação. Continue estudando, vai valer muito a pena. Conta comigo. Abraço.
Gostei muito da última extensão, realmente ajudou bastante. Muito obrigado pela ajuda. Merece meu like e inscrição. S2
muito boa obrigado demais
Sucesso...