Como Utilizar Medias Queries no Tailwind CSS - Curso Gratuito de TailwindCSS #7

Lección 6 de 1250%

Ya has superado la mitad. Estás muy cerca de completar el curso.

Sobre esta lección

Nesta aula do curso gratuito de TailwindCSS, vamos aprender que o TailwindCSS segue a metodologia Mobile First, onde os seus "Pontos de Quebra do Layout" (Breakpoints) são pensados de forma à primeiro construir o layout em dispositivos móveis e depois fazer a adaptação através de Medias Queries para o layout se comportar adequadamente em dispositivos maiores como Tablets e Desktops. Atualmente o TailwindCSS possui os seguintes breakpoints: - sm: 640px - md: 768px - lg: 1024px - xl: 1280px - 2xl: 1536px Esses são os breakponts padrões, mas você também pode customizar, adicionando novos breakpoints, de acordo com a sua necessidade. O TailwindCSS utiliza essas classes utilitárias (sm, md, lg, xl, 2xl) que funcionam como Media Queries. Após assistir o video você aprenderá: - O que é Mobile First? - O que são Breakpoints? - Como trabalhar com responsividade no TailwindCSS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 🎨 Figma do Projeto https://www.figma.com/community/file/827585162030328694 💻 GitHub do Projeto https://github.com/thiagonunesbatista/figmaland-tailwind ▶️ Playlist completa do Curso de Tailwind CSS Gratuito https://www.youtube.com/playlist?list=PL_m43UlJFjF5umRjQW1eaLgJmsEpF_Q2E - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - #tailwindcss #frontend #tailwind #css #reactjs #javascript

Sobre este curso

Tailwind CSS é um framework CSS que permite construir qualquer design de forma muito rápida. O seu grande beneficio é trazer padrões e estruturas prontas, de forma que após a sua rápida configuração inicial, você já vai poder se concentrar em construir o código. Ao contrário de outros frameworks, como o SASS, o Tailwind CSS oferece padrões e estruturas prontas desde o início. Isso significa que, após a rápida configuração inicial, sua equipe pode imediatamente começar a construir um código consistente e bem documentado. Como o Tailwind CSS já traz tudo configurado, basta que a equipe de desenvolvimento conheça e utilize os padrões do framework, para que o código seja construido da melhor forma possível. O Tailwind CSS é baseado na utilização de classes CSS utilitárias, que são responsáveis por adicionar os estilos no layout, a sintaxe é semelhante à sintaxe de escrever CSS Inline. A diferença do Tailwind para frameworks como o Bootstrap, é que o Tailwind apenas traz as classes utilitárias, ele não traz componenentes prontos como botões, menus e afins. ▶️ O que você vai aprender neste curso gratuito de Tailwind CSS: 1. 🔧 Instalação e configuração do Tailwind CSS 2. 🌈 Personalização do framework, por exemplo, com cores e fontes customizadas 3. 🖌️ Construção de um layout completo a partir do Figma 4. ♻️ Criação de componentes reutilizáveis com Tailwind CSS 5. 🚀 E muito mais Utilizaremos o ReactJS como framework JavaScript neste curso, mas as habilidades que você adquire aqui podem ser aplicadas em outros frameworks, como Vue.JS e Angular. O Tailwind CSS segue a metodologia Mobile First, onde o desenvolvimento é realizado pensando primeiro em dispositivos móveis como Smartphones e Tablets, para depois adaptar esse layout para dispositivos com resoluções maiores como Notebooks e Computadores. Essa metodologia Mobile First foi criada visto que a maioria dos acessos à páginas web são realizados através de dispositivos móveis, não faria sentido seguir o método tradicional Desktop First para desenvolver as páginas e sim em se preocupar com a maioria dos usuários que acessam a internet por dispositivos móveis. O Tailwind CSS é amplamente utilizado no mercado de tecnologia, dominar essa tecnologia vai te deixar mais preparado para alcançar a tão desejada vaga.

Lección 6 de 12Nivel: principianteDuración total: 2h 14m

Lo que aprenderás en este curso:

  • Estructurar páginas web semánticas con HTML5
  • Aplicar estilos profesionales con CSS3 y diseño responsive
  • Crear layouts modernos con Flexbox y CSS Grid
  • Implementar animaciones y transiciones CSS