01. Abertura: [Commit: Abertura](https://github.com/rocketseat-education/explorer-e-tasks/tree/61a4713c4e4e77c48e640de2b04e6ea86e18a7f5) Nesta aula, vamos aprender como tornar uma aplicação responsiva. Vamos utilizar um projeto como base, desenvolvido com React e Styled Components. A estratégia que vamos utilizar pode ser aplicada em suas próprias aplicações. Vou te mostrar passo a passo como fazer uma aplicação se ajustar em telas menores, garantindo uma experiência consistente em diferentes dispositivos. Então, vamos começar!02. O projeto: [Commit: O projeto](https://github.com/rocketseat-education/explorer-e-tasks/tree/61a4713c4e4e77c48e640de2b04e6ea86e18a7f5) Nesta aula, vou mostrar como obter o projeto base para implementar a responsividade. Você pode acessar o repositório no GitHub da Rocket e criar uma cópia do projeto ou fazer o download do arquivo zip. O projeto já está estruturado com componentes simples, como botões, inputs e filtros. O layout atual não é responsivo, então nosso objetivo é torná-lo responsivo usando o styled component. Vou explicar o código do projeto, incluindo o arquivo main, os estilos globais e os tokens de cores. Também vou mostrar como as tarefas são renderizadas e como o grid layout é usado para organizar os elementos. Vamos trabalhar juntos para tornar esse projeto responsivo!03. Definindo os breakpoints: [Commit: Definindo os breakpoints](https://github.com/rocketseat-education/explorer-e-tasks/tree/569bcb618d6932dc6b7ced35097954b9f31cd654) Nesta aula, vamos aprender sobre breakpoints, que são as quebras de tela utilizadas para tornar um projeto responsivo. Os breakpoints definem os momentos em que o layout do site vai mudar de acordo com o tamanho da tela. Vamos utilizar como referência os breakpoints pré-definidos pelos dispositivos, como smartphones e tablets, mas também podemos definir nossos próprios breakpoints. É importante focar na largura da tela ao trabalhar com responsividade, pois a altura geralmente não é um problema devido à possibilidade de rolagem. Vamos criar um arquivo chamado "device breakpoints.js" para armazenar nossos breakpoints e utilizá-los ao longo do projeto.04. Adicionando Rem e media: [Commit: Adicionando Rem e media](https://github.com/rocketseat-education/explorer-e-tasks/tree/b4348e6c830730f1e5ae8879f96a3c77903c0b1e) Nesta aula, aprendemos sobre a estilização global de uma aplicação. Utilizamos o arquivo global.js para definir as regras de estilo que serão aplicadas em todo o projeto. Aprendemos sobre a unidade de medida "rem", que é uma unidade relativa e nos permite criar estilos responsivos. Utilizamos a propriedade de mídia "@media" para aplicar estilos específicos com base em breakpoints definidos. Também vimos a importância de utilizar um arquivo de breakpoints para centralizar e padronizar as definições. Por fim, aprendemos a utilizar o elemento root para definir um tamanho de fonte padrão para toda a aplicação.05. Aplicando media queries na Home: [Commit: Aplicando media queries na Home](https://github.com/rocketseat-education/explorer-e-tasks/tree/9e78a4481e607f3e85b63404e74741c9298ce582) Nesta aula, vamos trabalhar na responsividade da página inicial do nosso projeto. Vamos ajustar o fator de zoom para 100% e usar um tamanho menor como referência. Em seguida, vamos modificar o grid para que, em telas menores, a parte que queremos que desapareça seja ocultada e as coisas do lado preencham toda a tela. Vamos adicionar uma regra de mídia dentro do container para definir a largura máxima em que queremos aplicar as mudanças. Também vamos aplicar a responsividade no componente header e explicar a diferença entre aplicar responsividade em componentes e no estilo global. Vamos continuar trabalhando na responsividade na próxima aula.06. Deixando os componentes Button e Input responsivos: [Commit: Deixando os componentes Button e Input responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/b0c628b1f3525f8fdb64c275673058785ec4159b) Nesta aula, aprendemos a utilizar o range para ajustar o border-radius do botão e do input. Também vimos como calcular o valor em rem para o padding do input, levando em consideração a tela em que estamos trabalhando. Além disso, utilizamos o range para definir a altura do botão, permitindo que ela se ajuste de acordo com o tamanho da tela. Também ajustamos o font-size e o tamanho do ícone do botão utilizando o range. Ao final da aula, vimos como essas alterações afetam o visual do botão e do input em diferentes tamanhos de tela.07. Deixando os componentes Priorities e ShortTask responsivos: [Commit: Deixando os componentes Priorities e ShortTask responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/bfa01544857e3db2b3b6fd93ba147bc493eec8b2) Nesta aula, aprendemos a fazer ajustes de responsividade em um projeto. Focamos em alterar o tamanho de elementos como fontes, espaçamentos e bordas para que se adaptem a diferentes tamanhos de tela. Utilizamos unidades de medida como rem e ram para garantir que os elementos se ajustem proporcionalmente. Também aprendemos a centralizar o conteúdo em telas menores utilizando media queries e propriedades como justify-content e align-items. Além disso, exploramos a personalização de componentes, como o tamanho do texto e o arredondamento das bordas.08. Deixando os componentes Filter e Task responsivos: [Commit: Deixando os componentes Filter e Task responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/d1e404db072155b16ffd837388eac68359f98559) Nesta aula, vamos trabalhar nos componentes de tarefa e filtros. Vamos ajustar o tamanho dos cartões de tarefa, definindo o font-size usando rem e ajustando o padding para obter um tamanho mais interessante. Também vamos ajustar o espaçamento entre os filtros, diminuindo o gap. Em seguida, vamos analisar o componente de filtro e ajustar o font-size para rem. No componente de tarefa, vamos ajustar o font-size dos elementos small e span para rem. Por fim, vamos manipular o ícone usando um SVG dentro do container.09. Criando botão para abrir o menu: [Commit: Criando botão para abrir o menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/10a008f3772526cb678ffda4c7f465f286864487) Nesta aula, ajustamos o layout do nosso projeto para que tudo se encaixe na tela de forma organizada. Diminuímos o tamanho do texto do título para que ele não fique muito grande. Em seguida, adicionamos um botão de menu no header, utilizando um ícone de lista. Estilizamos o botão para que ele fique transparente, sem borda e com um tamanho adequado. Também adicionamos uma regra de mídia para que o botão só apareça em telas pequenas. Agora, podemos trabalhar na interatividade desse botão.10. Criando botão para fechar o menu no componente: [Commit: Criando botão para fechar o menu no componente](https://github.com/rocketseat-education/explorer-e-tasks/tree/6fb352d6f15460936a8a9346d9195ede3a5a2115) Nesta aula, aprendemos a ajustar o tamanho do ícone do botão e a adicionar um botão de fechar ao menu. O instrutor mostrou como importar o ícone de fechar e adicioná-lo ao header do side menu. Ele também explicou como ajustar a posição do menu usando o posicionamento absoluto e o z-index. Além disso, ele mencionou a possibilidade de alterar o tamanho do ícone do botão. No final, ele sugeriu uma fórmula para calcular o tamanho do ícone com base em um valor fixo.11. Abrindo e fechando o menu: [Commit: Abrindo e fechando o menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/ee56cf8e7606ff931e0319aebaf37404800d3206) Nesta aula, continuamos a trabalhar na parte interativa do menu. O instrutor menciona um problema que ocorreu na aula anterior, onde uma barra de rolagem aparecia no menu. Ele resolveu o problema fechando e abrindo novamente a ferramenta de inspeção. Ele acredita que foi um bug do navegador. Em seguida, o instrutor explica que precisamos controlar a visibilidade do menu. Ele mostra como usar o atributo "data" para manipular o elemento no CSS. Ele adiciona o atributo "data-menu-is-open" ao container do menu e usa esse atributo para controlar a visibilidade do menu no CSS. O instrutor também mostra como fechar o menu ao clicar no botão de fechar. Ele adiciona a propriedade "onCloseMenu" ao botão de fechar e a repassa para o componente do menu. Ele usa essa propriedade para definir o estado "menuIsOpen" como falso, fechando o menu. No entanto, o instrutor percebe que o footer do menu está sendo exibido no local errado. Ele decide abordar esse problema na próxima aula, juntamente com a animação de abertura e fechamento do menu. Por fim, o instrutor mostra como ocultar o botão de fechar quando o menu já está aberto. Ele usa a propriedade "menuIsOpen" para controlar a exibição do botão de fechar no CSS. O instrutor menciona que na próxima aula, finalizaremos a implementação da animação de abertura e fechamento do menu.12. Aplicando animação no menu: [Commit: Aplicando animação no menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/7cee87b1ad07e1e2987726e672bdbfd03e7d769c) Nesta aula, aprendemos a aplicar animações em um menu responsivo. Utilizamos a propriedade `transform` com `translateX` para mover o menu para fora da tela quando estiver fechado e trazê-lo de volta para a posição normal quando estiver aberto. Também aplicamos uma transição suave usando a propriedade `transition`. Além disso, discutimos a importância de ajustar o layout para diferentes tamanhos de tela, utilizando media queries para definir estilos específicos para cada breakpoint. Ajustamos o tamanho do texto, o espaçamento e a posição dos elementos para garantir uma experiência responsiva em dispositivos móveis e tablets.13. Encerramento: Neste vídeo, o instrutor parabeniza os espectadores por terem concluído mais uma etapa e espera que tenham gostado do conteúdo sobre como tornar aplicações web responsivas. Ele encerra desejando um forte abraço e prometendo mais conteúdos no futuro.01. Abertura: [Commit: Abertura](https://github.com/rocketseat-education/explorer-e-tasks/tree/61a4713c4e4e77c48e640de2b04e6ea86e18a7f5) Nesta aula, vamos aprender como tornar uma aplicação responsiva. Vamos utilizar um projeto como base, desenvolvido com React e Styled Components. A estratégia que vamos utilizar pode ser aplicada em suas próprias aplicações. Vou te mostrar passo a passo como fazer uma aplicação se ajustar em telas menores, garantindo uma experiência consistente em diferentes dispositivos. Então, vamos começar!02. O projeto: [Commit: O projeto](https://github.com/rocketseat-education/explorer-e-tasks/tree/61a4713c4e4e77c48e640de2b04e6ea86e18a7f5) Nesta aula, vou mostrar como obter o projeto base para implementar a responsividade. Você pode acessar o repositório no GitHub da Rocket e criar uma cópia do projeto ou fazer o download do arquivo zip. O projeto já está estruturado com componentes simples, como botões, inputs e filtros. O layout atual não é responsivo, então nosso objetivo é torná-lo responsivo usando o styled component. Vou explicar o código do projeto, incluindo o arquivo main, os estilos globais e os tokens de cores. Também vou mostrar como as tarefas são renderizadas e como o grid layout é usado para organizar os elementos. Vamos trabalhar juntos para tornar esse projeto responsivo!03. Definindo os breakpoints: [Commit: Definindo os breakpoints](https://github.com/rocketseat-education/explorer-e-tasks/tree/569bcb618d6932dc6b7ced35097954b9f31cd654) Nesta aula, vamos aprender sobre breakpoints, que são as quebras de tela utilizadas para tornar um projeto responsivo. Os breakpoints definem os momentos em que o layout do site vai mudar de acordo com o tamanho da tela. Vamos utilizar como referência os breakpoints pré-definidos pelos dispositivos, como smartphones e tablets, mas também podemos definir nossos próprios breakpoints. É importante focar na largura da tela ao trabalhar com responsividade, pois a altura geralmente não é um problema devido à possibilidade de rolagem. Vamos criar um arquivo chamado "device breakpoints.js" para armazenar nossos breakpoints e utilizá-los ao longo do projeto.04. Adicionando Rem e media: [Commit: Adicionando Rem e media](https://github.com/rocketseat-education/explorer-e-tasks/tree/b4348e6c830730f1e5ae8879f96a3c77903c0b1e) Nesta aula, aprendemos sobre a estilização global de uma aplicação. Utilizamos o arquivo global.js para definir as regras de estilo que serão aplicadas em todo o projeto. Aprendemos sobre a unidade de medida "rem", que é uma unidade relativa e nos permite criar estilos responsivos. Utilizamos a propriedade de mídia "@media" para aplicar estilos específicos com base em breakpoints definidos. Também vimos a importância de utilizar um arquivo de breakpoints para centralizar e padronizar as definições. Por fim, aprendemos a utilizar o elemento root para definir um tamanho de fonte padrão para toda a aplicação.05. Aplicando media queries na Home: [Commit: Aplicando media queries na Home](https://github.com/rocketseat-education/explorer-e-tasks/tree/9e78a4481e607f3e85b63404e74741c9298ce582) Nesta aula, vamos trabalhar na responsividade da página inicial do nosso projeto. Vamos ajustar o fator de zoom para 100% e usar um tamanho menor como referência. Em seguida, vamos modificar o grid para que, em telas menores, a parte que queremos que desapareça seja ocultada e as coisas do lado preencham toda a tela. Vamos adicionar uma regra de mídia dentro do container para definir a largura máxima em que queremos aplicar as mudanças. Também vamos aplicar a responsividade no componente header e explicar a diferença entre aplicar responsividade em componentes e no estilo global. Vamos continuar trabalhando na responsividade na próxima aula.06. Deixando os componentes Button e Input responsivos: [Commit: Deixando os componentes Button e Input responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/b0c628b1f3525f8fdb64c275673058785ec4159b) Nesta aula, aprendemos a utilizar o range para ajustar o border-radius do botão e do input. Também vimos como calcular o valor em rem para o padding do input, levando em consideração a tela em que estamos trabalhando. Além disso, utilizamos o range para definir a altura do botão, permitindo que ela se ajuste de acordo com o tamanho da tela. Também ajustamos o font-size e o tamanho do ícone do botão utilizando o range. Ao final da aula, vimos como essas alterações afetam o visual do botão e do input em diferentes tamanhos de tela.07. Deixando os componentes Priorities e ShortTask responsivos: [Commit: Deixando os componentes Priorities e ShortTask responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/bfa01544857e3db2b3b6fd93ba147bc493eec8b2) Nesta aula, aprendemos a fazer ajustes de responsividade em um projeto. Focamos em alterar o tamanho de elementos como fontes, espaçamentos e bordas para que se adaptem a diferentes tamanhos de tela. Utilizamos unidades de medida como rem e ram para garantir que os elementos se ajustem proporcionalmente. Também aprendemos a centralizar o conteúdo em telas menores utilizando media queries e propriedades como justify-content e align-items. Além disso, exploramos a personalização de componentes, como o tamanho do texto e o arredondamento das bordas.08. Deixando os componentes Filter e Task responsivos: [Commit: Deixando os componentes Filter e Task responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/d1e404db072155b16ffd837388eac68359f98559) Nesta aula, vamos trabalhar nos componentes de tarefa e filtros. Vamos ajustar o tamanho dos cartões de tarefa, definindo o font-size usando rem e ajustando o padding para obter um tamanho mais interessante. Também vamos ajustar o espaçamento entre os filtros, diminuindo o gap. Em seguida, vamos analisar o componente de filtro e ajustar o font-size para rem. No componente de tarefa, vamos ajustar o font-size dos elementos small e span para rem. Por fim, vamos manipular o ícone usando um SVG dentro do container.09. Criando botão para abrir o menu: [Commit: Criando botão para abrir o menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/10a008f3772526cb678ffda4c7f465f286864487) Nesta aula, ajustamos o layout do nosso projeto para que tudo se encaixe na tela de forma organizada. Diminuímos o tamanho do texto do título para que ele não fique muito grande. Em seguida, adicionamos um botão de menu no header, utilizando um ícone de lista. Estilizamos o botão para que ele fique transparente, sem borda e com um tamanho adequado. Também adicionamos uma regra de mídia para que o botão só apareça em telas pequenas. Agora, podemos trabalhar na interatividade desse botão.10. Criando botão para fechar o menu no componente: [Commit: Criando botão para fechar o menu no componente](https://github.com/rocketseat-education/explorer-e-tasks/tree/6fb352d6f15460936a8a9346d9195ede3a5a2115) Nesta aula, aprendemos a ajustar o tamanho do ícone do botão e a adicionar um botão de fechar ao menu. O instrutor mostrou como importar o ícone de fechar e adicioná-lo ao header do side menu. Ele também explicou como ajustar a posição do menu usando o posicionamento absoluto e o z-index. Além disso, ele mencionou a possibilidade de alterar o tamanho do ícone do botão. No final, ele sugeriu uma fórmula para calcular o tamanho do ícone com base em um valor fixo.11. Abrindo e fechando o menu: [Commit: Abrindo e fechando o menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/ee56cf8e7606ff931e0319aebaf37404800d3206) Nesta aula, continuamos a trabalhar na parte interativa do menu. O instrutor menciona um problema que ocorreu na aula anterior, onde uma barra de rolagem aparecia no menu. Ele resolveu o problema fechando e abrindo novamente a ferramenta de inspeção. Ele acredita que foi um bug do navegador. Em seguida, o instrutor explica que precisamos controlar a visibilidade do menu. Ele mostra como usar o atributo "data" para manipular o elemento no CSS. Ele adiciona o atributo "data-menu-is-open" ao container do menu e usa esse atributo para controlar a visibilidade do menu no CSS. O instrutor também mostra como fechar o menu ao clicar no botão de fechar. Ele adiciona a propriedade "onCloseMenu" ao botão de fechar e a repassa para o componente do menu. Ele usa essa propriedade para definir o estado "menuIsOpen" como falso, fechando o menu. No entanto, o instrutor percebe que o footer do menu está sendo exibido no local errado. Ele decide abordar esse problema na próxima aula, juntamente com a animação de abertura e fechamento do menu. Por fim, o instrutor mostra como ocultar o botão de fechar quando o menu já está aberto. Ele usa a propriedade "menuIsOpen" para controlar a exibição do botão de fechar no CSS. O instrutor menciona que na próxima aula, finalizaremos a implementação da animação de abertura e fechamento do menu.12. Aplicando animação no menu: [Commit: Aplicando animação no menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/7cee87b1ad07e1e2987726e672bdbfd03e7d769c) Nesta aula, aprendemos a aplicar animações em um menu responsivo. Utilizamos a propriedade `transform` com `translateX` para mover o menu para fora da tela quando estiver fechado e trazê-lo de volta para a posição normal quando estiver aberto. Também aplicamos uma transição suave usando a propriedade `transition`. Além disso, discutimos a importância de ajustar o layout para diferentes tamanhos de tela, utilizando media queries para definir estilos específicos para cada breakpoint. Ajustamos o tamanho do texto, o espaçamento e a posição dos elementos para garantir uma experiência responsiva em dispositivos móveis e tablets.13. Encerramento: Neste vídeo, o instrutor parabeniza os espectadores por terem concluído mais uma etapa e espera que tenham gostado do conteúdo sobre como tornar aplicações web responsivas. Ele encerra desejando um forte abraço e prometendo mais conteúdos no futuro.01. Abertura: [Commit: Abertura](https://github.com/rocketseat-education/explorer-e-tasks/tree/61a4713c4e4e77c48e640de2b04e6ea86e18a7f5) Nesta aula, vamos aprender como tornar uma aplicação responsiva. Vamos utilizar um projeto como base, desenvolvido com React e Styled Components. A estratégia que vamos utilizar pode ser aplicada em suas próprias aplicações. Vou te mostrar passo a passo como fazer uma aplicação se ajustar em telas menores, garantindo uma experiência consistente em diferentes dispositivos. Então, vamos começar!02. O projeto: [Commit: O projeto](https://github.com/rocketseat-education/explorer-e-tasks/tree/61a4713c4e4e77c48e640de2b04e6ea86e18a7f5) Nesta aula, vou mostrar como obter o projeto base para implementar a responsividade. Você pode acessar o repositório no GitHub da Rocket e criar uma cópia do projeto ou fazer o download do arquivo zip. O projeto já está estruturado com componentes simples, como botões, inputs e filtros. O layout atual não é responsivo, então nosso objetivo é torná-lo responsivo usando o styled component. Vou explicar o código do projeto, incluindo o arquivo main, os estilos globais e os tokens de cores. Também vou mostrar como as tarefas são renderizadas e como o grid layout é usado para organizar os elementos. Vamos trabalhar juntos para tornar esse projeto responsivo!03. Definindo os breakpoints: [Commit: Definindo os breakpoints](https://github.com/rocketseat-education/explorer-e-tasks/tree/569bcb618d6932dc6b7ced35097954b9f31cd654) Nesta aula, vamos aprender sobre breakpoints, que são as quebras de tela utilizadas para tornar um projeto responsivo. Os breakpoints definem os momentos em que o layout do site vai mudar de acordo com o tamanho da tela. Vamos utilizar como referência os breakpoints pré-definidos pelos dispositivos, como smartphones e tablets, mas também podemos definir nossos próprios breakpoints. É importante focar na largura da tela ao trabalhar com responsividade, pois a altura geralmente não é um problema devido à possibilidade de rolagem. Vamos criar um arquivo chamado "device breakpoints.js" para armazenar nossos breakpoints e utilizá-los ao longo do projeto.04. Adicionando Rem e media: [Commit: Adicionando Rem e media](https://github.com/rocketseat-education/explorer-e-tasks/tree/b4348e6c830730f1e5ae8879f96a3c77903c0b1e) Nesta aula, aprendemos sobre a estilização global de uma aplicação. Utilizamos o arquivo global.js para definir as regras de estilo que serão aplicadas em todo o projeto. Aprendemos sobre a unidade de medida "rem", que é uma unidade relativa e nos permite criar estilos responsivos. Utilizamos a propriedade de mídia "@media" para aplicar estilos específicos com base em breakpoints definidos. Também vimos a importância de utilizar um arquivo de breakpoints para centralizar e padronizar as definições. Por fim, aprendemos a utilizar o elemento root para definir um tamanho de fonte padrão para toda a aplicação.05. Aplicando media queries na Home: [Commit: Aplicando media queries na Home](https://github.com/rocketseat-education/explorer-e-tasks/tree/9e78a4481e607f3e85b63404e74741c9298ce582) Nesta aula, vamos trabalhar na responsividade da página inicial do nosso projeto. Vamos ajustar o fator de zoom para 100% e usar um tamanho menor como referência. Em seguida, vamos modificar o grid para que, em telas menores, a parte que queremos que desapareça seja ocultada e as coisas do lado preencham toda a tela. Vamos adicionar uma regra de mídia dentro do container para definir a largura máxima em que queremos aplicar as mudanças. Também vamos aplicar a responsividade no componente header e explicar a diferença entre aplicar responsividade em componentes e no estilo global. Vamos continuar trabalhando na responsividade na próxima aula.06. Deixando os componentes Button e Input responsivos: [Commit: Deixando os componentes Button e Input responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/b0c628b1f3525f8fdb64c275673058785ec4159b) Nesta aula, aprendemos a utilizar o range para ajustar o border-radius do botão e do input. Também vimos como calcular o valor em rem para o padding do input, levando em consideração a tela em que estamos trabalhando. Além disso, utilizamos o range para definir a altura do botão, permitindo que ela se ajuste de acordo com o tamanho da tela. Também ajustamos o font-size e o tamanho do ícone do botão utilizando o range. Ao final da aula, vimos como essas alterações afetam o visual do botão e do input em diferentes tamanhos de tela.07. Deixando os componentes Priorities e ShortTask responsivos: [Commit: Deixando os componentes Priorities e ShortTask responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/bfa01544857e3db2b3b6fd93ba147bc493eec8b2) Nesta aula, aprendemos a fazer ajustes de responsividade em um projeto. Focamos em alterar o tamanho de elementos como fontes, espaçamentos e bordas para que se adaptem a diferentes tamanhos de tela. Utilizamos unidades de medida como rem e ram para garantir que os elementos se ajustem proporcionalmente. Também aprendemos a centralizar o conteúdo em telas menores utilizando media queries e propriedades como justify-content e align-items. Além disso, exploramos a personalização de componentes, como o tamanho do texto e o arredondamento das bordas.08. Deixando os componentes Filter e Task responsivos: [Commit: Deixando os componentes Filter e Task responsivos](https://github.com/rocketseat-education/explorer-e-tasks/tree/d1e404db072155b16ffd837388eac68359f98559) Nesta aula, vamos trabalhar nos componentes de tarefa e filtros. Vamos ajustar o tamanho dos cartões de tarefa, definindo o font-size usando rem e ajustando o padding para obter um tamanho mais interessante. Também vamos ajustar o espaçamento entre os filtros, diminuindo o gap. Em seguida, vamos analisar o componente de filtro e ajustar o font-size para rem. No componente de tarefa, vamos ajustar o font-size dos elementos small e span para rem. Por fim, vamos manipular o ícone usando um SVG dentro do container.09. Criando botão para abrir o menu: [Commit: Criando botão para abrir o menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/10a008f3772526cb678ffda4c7f465f286864487) Nesta aula, ajustamos o layout do nosso projeto para que tudo se encaixe na tela de forma organizada. Diminuímos o tamanho do texto do título para que ele não fique muito grande. Em seguida, adicionamos um botão de menu no header, utilizando um ícone de lista. Estilizamos o botão para que ele fique transparente, sem borda e com um tamanho adequado. Também adicionamos uma regra de mídia para que o botão só apareça em telas pequenas. Agora, podemos trabalhar na interatividade desse botão.10. Criando botão para fechar o menu no componente: [Commit: Criando botão para fechar o menu no componente](https://github.com/rocketseat-education/explorer-e-tasks/tree/6fb352d6f15460936a8a9346d9195ede3a5a2115) Nesta aula, aprendemos a ajustar o tamanho do ícone do botão e a adicionar um botão de fechar ao menu. O instrutor mostrou como importar o ícone de fechar e adicioná-lo ao header do side menu. Ele também explicou como ajustar a posição do menu usando o posicionamento absoluto e o z-index. Além disso, ele mencionou a possibilidade de alterar o tamanho do ícone do botão. No final, ele sugeriu uma fórmula para calcular o tamanho do ícone com base em um valor fixo.11. Abrindo e fechando o menu: [Commit: Abrindo e fechando o menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/ee56cf8e7606ff931e0319aebaf37404800d3206) Nesta aula, continuamos a trabalhar na parte interativa do menu. O instrutor menciona um problema que ocorreu na aula anterior, onde uma barra de rolagem aparecia no menu. Ele resolveu o problema fechando e abrindo novamente a ferramenta de inspeção. Ele acredita que foi um bug do navegador. Em seguida, o instrutor explica que precisamos controlar a visibilidade do menu. Ele mostra como usar o atributo "data" para manipular o elemento no CSS. Ele adiciona o atributo "data-menu-is-open" ao container do menu e usa esse atributo para controlar a visibilidade do menu no CSS. O instrutor também mostra como fechar o menu ao clicar no botão de fechar. Ele adiciona a propriedade "onCloseMenu" ao botão de fechar e a repassa para o componente do menu. Ele usa essa propriedade para definir o estado "menuIsOpen" como falso, fechando o menu. No entanto, o instrutor percebe que o footer do menu está sendo exibido no local errado. Ele decide abordar esse problema na próxima aula, juntamente com a animação de abertura e fechamento do menu. Por fim, o instrutor mostra como ocultar o botão de fechar quando o menu já está aberto. Ele usa a propriedade "menuIsOpen" para controlar a exibição do botão de fechar no CSS. O instrutor menciona que na próxima aula, finalizaremos a implementação da animação de abertura e fechamento do menu.12. Aplicando animação no menu: [Commit: Aplicando animação no menu](https://github.com/rocketseat-education/explorer-e-tasks/tree/7cee87b1ad07e1e2987726e672bdbfd03e7d769c) Nesta aula, aprendemos a aplicar animações em um menu responsivo. Utilizamos a propriedade `transform` com `translateX` para mover o menu para fora da tela quando estiver fechado e trazê-lo de volta para a posição normal quando estiver aberto. Também aplicamos uma transição suave usando a propriedade `transition`. Além disso, discutimos a importância de ajustar o layout para diferentes tamanhos de tela, utilizando media queries para definir estilos específicos para cada breakpoint. Ajustamos o tamanho do texto, o espaçamento e a posição dos elementos para garantir uma experiência responsiva em dispositivos móveis e tablets.13. Encerramento: Neste vídeo, o instrutor parabeniza os espectadores por terem concluído mais uma etapa e espera que tenham gostado do conteúdo sobre como tornar aplicações web responsivas. Ele encerra desejando um forte abraço e prometendo mais conteúdos no futuro.