Artigos de Amauri Blanco Corrêa \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 16 Horas 50 Min 25 Seg Tempo restante da oferta: 16 50 25 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Amauri Blanco Corrêa ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) # Artigos de Amauri Blanco Corrêa Buscar 20 artigos - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/CSS-SHORTHAND-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Entendendo o shorthand no CSS ](https://www.treinaweb.com.br/blog/entendendo-o-shorthand-no-css) Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Como_criar_uma_modal_com_a_tag_dialog-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Como criar uma modal com a tag dialog ](https://www.treinaweb.com.br/blog/como-criar-uma-modal-com-a-tag-dialog) Domine modais em HTML com a tag 'dialog'. Crie, personalize e interaja em seu site. Torne-o envolvente e moderno! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Criando_mascara_monetaria_com_expressoes_regulares-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares) Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/Como-alterar-o-font-family-do-site-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Como alterar o font family do site ](https://www.treinaweb.com.br/blog/como-alterar-o-font-family-do-site) Nesse artigo veremos como você pode alterar o font family de seu site. Aprenderemos também as diferentes possibilidades de fazê-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-HTML-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Dica de Código: Conheça a propriedade CSS text-decoration ](https://www.treinaweb.com.br/blog/dica-de-codigo-conheca-a-propriedade-css-text-decoration) Descubra o poder da propriedade CSS text-decoration: estilos únicos para seus textos front-end! Explore posições, estilos e personalizações! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/PRE-PROCESSADORES-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Os Pré-Processadores CSS ](https://www.treinaweb.com.br/blog/os-pre-processadores-css) Nesse artigo veremos o que são, pra que servem e quais os pré-processadores CSS mais utilizados. Aprenda a dar super poderes ao CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/GUIA-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html) Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/Metodologia-bem-organizando-seu-css-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Metodologia BEM: organizando seu CSS ](https://www.treinaweb.com.br/blog/metodologia-bem-organizando-seu-css) Melhore a qualidade do código CSS em seu projeto web com a Metodologia BEM. Aprenda como aplicá-la e aproveite seus benefícios. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/Conhecendo_o_box_model-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Conhecendo o box model ](https://www.treinaweb.com.br/blog/conhecendo-o-box-model) Domine os fundamentos do CSS com o box model. Aprenda a controlar o layout e o espaçamento dos elementos para uma página da Web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/A-importancia-das-metatag-no-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ A importância das metatags no HTML ](https://www.treinaweb.com.br/blog/a-importancia-das-metatags-no-html) Nesse artigo aprenderemos sobre as metatag no HTML. Vamos aprender como utilizar e o porquê devemos dar bastante atenção para essas tags. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/acessibilidade_no_HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Acessibilidade no HTML ](https://www.treinaweb.com.br/blog/acessibilidade-no-html) Nesse artigo, veremos algumas formas, de desenvolver nosso site pensando em todos, tornando assim, uma página com HTML acessível. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/pixel_fisico_pixel_css-400x280.jpg) [ Sem categoria ](https://www.treinaweb.com.br/blog/categoria/sem-categoria) 4 anos atrás ## [ Pixel físico e pixel CSS ](https://www.treinaweb.com.br/blog/pixel-fisico-e-pixel-css) Nesse artigo você irá entender ao certo, a diferença entre esses dois tipos de pixels, e o que isso impacta no desenvolvimento Front end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletores_avancados_do_css-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Seletores avançados do CSS ](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/unidades_de_medidas_no_css-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Unidades de medidas no CSS ](https://www.treinaweb.com.br/blog/unidades-de-medidas-no-css) Nesse artigo você irá entender de fato a diferença entre as várias opções de unidades medidas do CSS, como Rem, Em, %, Px, entre outras. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/Formas_de_se_trabalhar_com_o_Bootstrap_5-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Formas de se trabalhar com Bootstrap 5 ](https://www.treinaweb.com.br/blog/formas-de-se-trabalhar-com-bootstrap-5) Existem algumas maneiras diferentes de se trabalhar com Bootstrap em nossos projetos, vamos descobrir todas as formas do uso do framework. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/11/diferenca_entre_os_atributos_async_e_defer-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Diferença entre os atributos async e defer ](https://www.treinaweb.com.br/blog/diferenca-entre-os-atributos-async-e-defer) Nesse artigo vamos ver em detalhes como os atributos async e defer se comportam ao declarar seus arquivos JavaScript no HTML. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/Como_instalar_e_utilizar_o_Bootstrap_via_npm-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Como instalar e utilizar o Bootstrap via npm ](https://www.treinaweb.com.br/blog/como-instalar-e-utilizar-o-bootstrap-via-npm) Instalar Bootstrap via npm e alterar suas variáveis, é mais simples do que imagina. Hoje iremos juntos fazer o download do Bootstrap 5. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox.png-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 5 anos atrás ## [ Criando a estrutura de um Layout com CSS Grid e Flexbox ](https://www.treinaweb.com.br/blog/criando-a-estrutura-de-um-layout-com-css-grid-e-flexbox) Nesse artigo vamos aprender sobre as funcionalidades CSS Grid e FlexBox do CSS na pratica durante o desenvolvimento de layout. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **16h 50min 25s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58