Udemy

Platform

Português

Language

Web Development

Category

CSS Avançado - Sass, CSS Grid Layout e CSS Modules

Técnicas avançadas e contemporâneas de CSS

4.67 (3 reviews)

CSS Avançado - Sass, CSS Grid Layout e CSS Modules

Students

12.5 hours

Content

Jun 2021

Last Update
Regular Price

Topics

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will learn

Técnicas avançadas e contemporâneas de CSS


Description

O CSS sempre esteve aí, e sua base nunca vai mudar. Entretanto, ao longo dos anos e conforme os projetos de frontend foram ficando mais complexos, o CSS também evoluiu junto diante de novas necessidades.

Neste curso você aprenderá as tecnologias e features mais contemporâneas do CSS. Começaremos com uma revisão de Flexbox e em seguida você aprenderá uma funcionalidade relativamente recente do CSS, o CSS Grid Layout. É uma maneira completamente diferente do tradicional Box Modelling na hora de organizar layouts no frontend.

Em seguida você aprenderá a utilizar o Sass, um pré-processador de CSS que nos permite escrever classes CSS de maneira programática. E por fim, entraremos no que há de mais recente, que são os CSS Modules, onde utilizaremos os módulos do Node Js para exportar a importar módulos de CSS.

Projetos

Em cada um dos 3 tópicos (Sass, CSS Grid e CSS Modules) iremos realizar um exercícios enquanto você aprende. O execício de Sass será apenas uma lista simples. Já no exercício de CSS Grid Layout faremos dois projetos. O prineiro é o Modernista, uma interface com design inspirado no trabalho do artista Piet Mondrián. O segundo será uma grid de imagens ao estilo masonry, utilizando a propriedade Dense. Por fim, na parte de CSS modules faremos os Social Cards, onde aplicaremos todos os conceitos de CSS Modules durante o desenvolvimento.

Bora começar?!


Content

Introduction

Introdução

Flexbox

Flexbox - Definindo Caixa Flex

Flexbox - Distribuindo Blocos Filhos

Flexbox - Alinhando Elementos Filhos

Flexbox - Align Self e Order

CSS Grid Layout

CSS Grid - Apresentando o Layout

CSS Grid - Estrutura do HTML

CSS Grid - Grid Template Columns

Grid - Grid Template Rows e Auto Rows

CSS Grid - Melhorando Ferramentas de Trabalho

CSS Grid - Grid-Colum e Grid-Row

CSS Grid - Align e Justify Items

CSS Grid - Ajustando Conteudo na Grid

CSS Grid - Fazendo o Banner

CSS Grid - Organizando Textos e Imagens

CSS Grid - Ajustando Conteúdo Verticalmente

CSS Grid - Grid Template Areas

CSS Grid - Intro Exercicio CSS Grid 02

CSS Grid - Auto Fit, Auto Fill e Span

CSS Grid - MinMax

CSS Grid - Autoflow Dense

CSS Grid - Finalizando Galeria com Dense

CSS Variables

CSS Variables - Introducao

Aplicando CSS Variables

Fazendo o Dark e Light Mode

Sass

Sass - Introducao

Sass - Demonstracao inicial

Sass - Import e Use

Sass - Nesting

Sass - Variables

Sass - Mixins

Sass - Expressions e Operators

Sass - Functions

Sass - Condicionais If e Else

Sass - Each Loop

Sass - For Loop

Sass - Content e Responsividade

Unidades de Medida PX, EM e REM

CSS Modules

Introdução ao CSS Modules

Instalando o Node

Instalando e Configurando Webpack - Parte 1

Instalando e Configurando Webpack - Parte 2

Configurando Babel e CSS Loaders

Criando HTML dentro do Javascript

Habilitando CSS Modules

Nomes Amigaveis para as Classes

Configurando Loading de Imagens com Webpack

Definindo Estrutura dos Componentes

Definindo CardImage e CardBody

Definindo Elementos do Card

Formatando Elementos Card - Parte 1

Formatando Elementos do Card - Parte 2

Ajustando Imports e Separando CSS Global

Definindo e Utilizando Classes Globais

Fazendo Compose de Classes

Ajustando Classes e Arquivos

Finalizando o CardCarousel

Finalizando o CardVideo

Finalizando o CardInfo - Parte 1

Finalizando o CardInfo - Parte 2

CSS Modules no React Js

CSS Modules com Vue JS


4115192

Udemy ID

6/10/2021

Course created date

6/20/2021

Course Indexed date
Bot
Course Submitted by