Este curso divide os fundamentos do CSS em partes para serem mais fáceis de se entender. Nos próximos módulos, você aprenderá como os principais aspectos do CSS funcionam e como usá-los efetivamente em seus projetos.

Você aprenderá os fundamentos do CSS, como o _box model_, _cascata_ e _especificidade_, _flexbox_, _grid_ e _z-index_. E, juntamente com esses fundamentos, você aprenderá sobre _funções_, _tipos de cores_, _gradientes_, _propriedades lógicas_ e _herança_ para torná-lo um desenvolvedor **front-end** completo, pronto para assumir qualquer interface de usuário.

Cada módulo está repleto de demonstrações interativas. Além de aprender por meio de leitura e demonstrações.

Este curso foi criado para desenvolvedores CSS iniciantes e avançados. Você pode navegar pela série de aulas do início ao fim para obter uma compreensão geral do CSS de cima para baixo ou pode usá-la como referência para assuntos de estilo específicos. Para quem é novo no desenvolvimento da Web em geral.

Um curso de CSS de bolso, interativo, para aumentar o seu nível de experiência na criação e estilização de páginas web.

Tudo exibido pelo CSS é uma caixa. Entender como o CSS Box Model funciona é, portanto, uma base fundamental do CSS.

Box Model

Para aplicar CSS a um elemento, você precisa selecioná-lo. O CSS fornece várias maneiras diferentes de fazer isso e você pode explorá-las neste módulo.

Seletores

Às vezes, duas ou mais regras CSS concorrentes podem ser aplicadas a um elemento. Neste módulo, descubra como o navegador escolhe qual usar e como controlar essa seleção.

A Cascata

Este módulo analisa mais profundamente a especificidade, uma parte fundamental da cascata.

Especificidade

Algumas propriedades CSS são herdadas se você não especificar um valor para elas. Descubra como isso funciona e como usá-lo a seu favor neste módulo.

Herança

Existem várias maneiras diferentes de especificar cores em CSS. Neste módulo, vamos dar uma olhada nos valores de cores mais comumente usados.

Neste módulo, descubra como dimensionar elementos usando CSS, trabalhando com o meio flexível da web.

Unidades de Medida

Uma visão geral dos vários métodos de layout que você deve escolher ao criar um componente ou layout de página.

Layout

Flexbox é um mecanismo de layout projetado para dispor grupos de itens em uma dimensão. Aprenda como usá-lo neste módulo.

Flexbox

CSS Grid Layout fornece um sistema de layout bidimensional, controlando o layout em linhas e colunas. Neste módulo descubra tudo o que a grade tem a oferecer.

Grid

As propriedades e os valores lógicos relativos ao fluxo estão vinculados ao fluxo do texto, em vez da forma física da tela. Saiba como tirar proveito dessa abordagem mais recente do CSS.

Propriedades Lógicas

Descubra como selecionar o melhor método de espaçamento de elementos, levando em consideração o método de layout que você está usando e o componente que você precisa construir.

Espaçamento

Um Pseudo-elemento é como adicionar ou direcionar um elemento extra sem precisar adicionar mais HTML. Eles têm uma variedade de papéis e você pode aprender sobre eles neste módulo.

Pseudo-Elementos

As Pseudo-classes permitem que você aplique CSS com base nas mudanças de estado. Isso significa que seu design pode reagir à entrada do usuário, como um endereço de e-mail inválido.

Pseudo-Classes

Uma borda fornece um quadro para suas caixas. Neste módulo, descubra como alterar o tamanho, estilo e cor das bordas usando CSS.

Bordas

Existem várias maneiras de adicionar sombras ao texto e elementos em CSS. Neste módulo, você aprenderá como usar cada opção e as tarefas para as quais foram projetadas.

Sombras

Aprenda a gerenciar o foco em seus aplicativos web para garantir acessibilidade tanto para usuários de mouse quanto de teclado.

Focus

Neste módulo, descubra como controlar a ordem em que as coisas se sobrepõem, usando z-index e o contexto de empilhamento.

Z-index e contextos de empilhamento

CSS tem uma gama de funções embutidas. Neste módulo, você conhecerá algumas das principais funções e como usá-las.

Funções

Aprenda a usar gradientes em CSS neste módulo. Crie efeitos úteis sem precisar de um aplicativo gráfico.

Gradientes

Anime seus designs com CSS! Neste módulo, aprenda a adicionar e controlar efeitos de animação.

Animações

Os filtros em CSS permitem aplicar efeitos gráficos surpreendentes. Descubra as opções disponíveis neste módulo.

Filtros

Aprenda a criar efeitos de composição usando modos de mesclagem com múltiplas camadas e isolar imagens com fundo branco neste módulo.

Blend Modes

Uma lista é composta por um contêiner e seus itens. Neste módulo, você aprenderá a estilizar uma lista por completo.

Listas

Neste módulo, aprenda como definir transições entre estados de um elemento. Use transições para melhorar a experiência do usuário, fornecendo feedback visual para a interação do usuário.

Transições

Overflow é como você lida com o conteúdo que não se encaixa em um tamanho pai definido. Neste módulo, você pensará fora da caixa e aprenderá como estilizar o conteúdo transbordante.

Overflow

Neste módulo, aprenda como você pode estilizar planos de fundo de caixas usando CSS.

Backgrounds

Neste módulo, aprenda como estilizar texto na web.

Texto e Tipografia

Mais recursos para ajudá-lo a dar os próximos passos.

Conclusão e próximos passos

Aprenda CSS: Seu livro de bolso

O curso Frontend Base é um curso introdutório de desenvolvimento frontend que ensina os fundamentos de HTML, CSS e JavaScript. Ele é perfeito para pessoas sem nenhum conhecimento prévio em programação e tem como objetivo fornecer uma base sólida para que os alunos possam começar a criar sites e aplicativos web de forma eficiente.

Ao longo do curso, os alunos aprenderão a estruturar o conteúdo de um site com HTML, a dar estilo a ele com CSS e a adicionar funcionalidades dinâmicas com JavaScript. Eles também aprenderão sobre as últimas tendências e boas práticas na indústria de desenvolvimento frontend.

O curso é composto por aulas teóricas e práticas, com muitos exercícios e exemplos para ajudar os alunos a colocar em prática o que estão aprendendo. Ao final do curso, os alunos terão desenvolvido suas próprias páginas web e estarão prontos para seguir em frente em seus estudos de desenvolvimento web.

Aprenda o necessário de HTML, CSS e Javascript para começar a desenvolver suas aplicações web sem dificuldades.

Olá e bem-vindo ao curso de frontend! Este curso é destinado a iniciantes e tem como objetivo ensinar os fundamentos de HTML, CSS e JavaScript.

Introdução do curso

Nesta aula a ideia é fazer você escrever seus códigos sem precisar baixar nada ou escrever um monte de linhas em um Terminal para realmente fazer algo legal!

Cursos

Aprenda CSS: Seu livro de bolso

Frontend Base

Aprenda com o Mestre você também

Mestre é o um espaço para todas as nossas ideias. Eventualmente, ele terá centenas de vídeos premium e uma comunidade próspera, mas agora é o começo!

Cursos

Aprenda CSS: Seu livro de bolso

Frontend Base

Aprenda com o Mestre você também

Mestre é o um espaço para todas as nossas ideias. Eventualmente, ele terá centenas de vídeos premium e uma comunidade próspera, mas agora é o começo!

Acesso total a todos os vídeos do Mestre

Comunidade Discord

Resumos de vídeo com trechos de código

Código fonte