CSS: um passo adiante
5.0 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
30 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS: um passo adiante to your Wishlist.

Add to Wishlist

CSS: um passo adiante

Aprenda técnicas CSS usadas por profissionais do mundo todo. Eleve seu código e arquitetura CSS ao próximo nível.
5.0 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
30 students enrolled
Created by Tárcio Zemel
Last updated 8/2017
Portuguese
Curiosity Sale
Current price: $17 Original price: $70 Discount: 75% off
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 12 Articles
  • 2 Practice Tests
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Trabalhar com técnicas CSS usadas por profissionais do mundo todo
  • Usar uma arquitetura CSS robusta, validada por experts internacionais
  • Escrever e estruturar melhor o CSS, dando ensejo a códigos mais profissionais
  • Conhecer dicas, técnicas e ferramentas CSS para dar um passo adiante na carreira
View Curriculum
Requirements
  • Conhecimentos básicos de HTML, CSS e JavaScript
  • Familiaridade com algum editor de códigos
Description

No curso CSS: um passo adiante, indispensável para quem deseja aprimorar seus conhecimentos e habilidades em CSS, o aluno conhecerá técnicas de CSS usadas por experts do mundo todo, tornando-se capacitado a elevar sua codificação CSS ao próximo nível ao aprender a escrever e estruturar projetos web front-end de maneira mais eficiente, sofisticada e profissional.

Neste curso, você vai aprender sobre:

  • CSS Orientado a Objetos
  • SMACSS
  • BEM
  • Pré-processadores CSS (ênfase em Sass)
  • Namespaces CSS
  • Task Runners (ênfase em Gulp)

E, através destas técnicas e ferramentas, subir de nível ao:

  • Trabalhar com técnicas CSS usadas por profissionais do mundo todo
  • Escrever e estruturar melhor o CSS, dando ensejo a códigos mais profissionais
  • Usar uma arquitetura CSS robusta, validada por experts internacionais
  • Conhecer dicas, técnicas e ferramentas CSS para dar um passo adiante na carreira

Para você que já conhece o básico de HTML e CSS (e um pouquinho de JavaScript) e quer dar um passo adiante nos conhecimentos, aprendendo técnicas mais profissionais no front-end, com uma arquitetura CSS mais robusta, esse é o curso para você!

Who is the target audience?
  • Este curso é destinado a quem já sabe o básico de CSS e quer dar um passo adiante, tornando seus projetos mais robustos, consistentes e profissionais.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
51 Lectures
02:51:49
+
Introdução
2 Lectures 04:43

Esta aula é somente um reforço dos pré-requisitos básicos necessários para o curso "CSS: um passo adiante":

  • Conhecimentos básicos de HTML, CSS e JavaScript
  • Saber o que é um Terminal e inserir comandos básicos
  • Familiaridade com algum editor de códigos

Certamente você já possui estes pré-requisitos, já que são o básico para se trabalhar com desenvolvimento web moderno. Foram só avisos de precaução para informar às pessoas indecisas sobre o Curso que é preciso algum conhecimento prévio mínimo.

Pré-requisitos
02:13
+
Revisão CSS
6 Lectures 18:59
Introdução à revisão de CSS
00:46

Nesta aula, será abordada a Especificidade CSS, conhecimento essencial para não cair em "armadilhas" de CSS que podem ocorrer à medida em que um projeto web cresce e se torna mais robusto, tópico tão imprescindível para se trabalhar com folhas de estilo, mas ao mesmo tempo tão negligenciado por desenvolvedores frontend.

Preview 08:59

Saber como seletores CSS são interpretados é conhecimento básico para qualquer profissional que trabalhe com front-end. Para garantir que estejamos todos com o mesmo conhecimento mínimo, eis uma revisão de como acontece essa interpretação de folhas de estilo.

Como seletores CSS são interpretados
05:09

Evitar seletores CSS superqualificados faz parte do planejamento e estratégia de código do desenvolvedor. Afinal, ninguém quer ter seletores com performance inferior que, a longo prazo, podem impactar negativamente a qualidade dos códigos e performance do frontend.

Evitando seletores superqualificados
02:44

A partir do conhecimento de pontuação em diferentes seletores CSS, indique quem ganha a "Batalha de Especificidade" nos casos a seguir.

Não vale acessar o site da calculadora! Faça "de cabeça".

Especificidade CSS
5 questions

Revisão CSS - Material de referência
00:55

Conclusão da revisão de CSS
00:26
+
CSS Orientado a Objetos (CSSOO)
3 Lectures 07:48

Em linguagens de programação, Orientação a Objetos serve para, grosso modo, evitar a repetição de códigos. A partir da constatação de que isso também é desejável ao se escrever CSS, surgiu CSS Orientado a Objetos (CSSOO), que objetiva resolver alguns problemas clássicos de CSS, tais como:

  • A dificuldade de tocar projetos de médio/grande porte; é preciso ser um expdet para isso
  • O tamanho dos arquivos CSS é cada vez maior conforme o projeto evolui
  • Reúso de código quase inexistente (pessoas não confiam em código alheio)
CSSOO - Introdução
00:28

Nesta aula, conheça mais sobre os 2 princípios de CSS Orientado a Objetos (CSSOO):

  1. Separação entre estrutura e visual (skin)
  2. Independência entre contêiner e conteúdo

Aprende mais a respeito através de exemplos práticos de aplicação de CSSOO.

CSSOO - Princípios
06:54

Baseado no que aprendeu sobre CSSOO, responda à pergunta a seguir.

CSSOO
1 question

CSSOO - Conclusão
00:26
+
SMACSS
9 Lectures 29:57

Nesta aula introdutória, conheça SMACSS (pronuncia-se "smacks"), que significa Scalable and Modular Architecture for CSS (ou Arquitetura Escalável e Modular para CSS).

SMACSS - Introdução
00:57

Nesta aula, conheça as regras Base de SMACSS, que servem para definir como é a aparência padrão de determinados elementos todas as vezes em que estes aparecem nas páginas web.

SMACSS - Base
02:16

Conheça as regras de Layout de SMACSS, para estilização de áreas mais abrangentes dentro de layouts de sites quando se está codificando CSS.

SMACSS - Layout
04:05

Saiba sobre as regras Módulo, que são o cerne dos estilos presentes em uma estrutura SMACSS, tratando-se dos componentes de UI mais específicos dentro de projetos web.

SMACSS - Módulo
07:49

Na aula é apresentado o conceito de estilos Estado dentro de SMACSS, que objetivam estilizar estados e/ou condições em que elementos estejam em determinado momento.

SMACSS - Estado
03:48

Estilos Tema servem para auxiliar na aplicação de temas visuais em web sites -- por exemplo, você quer aplicar um tema de Natal ao seu projeto web. Usando o que SMACSS oferece, fica tudo mais simples. Saiba mais a respeito.

SMACSS - Tema
02:42

Depois de ter conhecido os principais conceitos de SMACSS, veja exemplos práticos para auxiliar em relação a alguma dúvida de aplicação que possa ter surgido e fixar os conhecimentos através do código.

SMACSS na prática
06:50

Baseado no que aprendeu sobre SMACSS, responda às perguntas a seguir.

SMACSS
5 questions

SMACSS - Considerações finais
00:21

SMACSS - Conclusão
01:09
+
BEM
10 Lectures 23:21

BEM é acrônimo para "Block, Element, Modifier" (ou "Bloco, Elemento, Modificador"), tratando-se de uma convenção de escrita para melhorar a qualidade de códigos HTML e CSS. Nesta aula, seja apresentado ao BEM.

BEM - Introdução
00:56

Conheça mais a respeito dos 3 pilares que compõem a metodologia BEM: Bloco, Elemento e Modificador.

BEM - Bloco, Elemento e Modificador
07:21

BEM - A verdade sobre sua sintaxe
00:28

Antes mesmo de começar a codificar, é preciso planejamento (inclusive mental). Nesta aula são apresentadas dicas de como "pensar BEM" a respeito de layouts que recebidos para garantir uma boa aplicação de códigos CSS futuros.

Preview 03:11

"Resposta" à questão da aula anterior
00:17

Fixe os conhecimentos (e tire eventuais dúvidas) sobre a aplicação de BEM através de exemplos práticos de escrita CSS.

BEM - Exemplos de escrita
04:53

Blog citado na aula anterior
00:16

Conheça algumas das boas práticas envolvendo BEM através de 2 dicas simples, mas altamente eficientes:

  1. Não replicar a estrutura HTML nos nomes de classes CSS
  2. Use estilo de "Estado" de SMACSS para modificadores comuns
BEM - Boas práticas
04:34

Baseado no que aprendem sobre BEM, responda às perguntas a seguir.

BEM
5 questions

BEM - Material de referência
00:19

BEM - Conclusão
01:05
+
Pré-processadores CSS
9 Lectures 46:05

Nesta aula, saiba o que são pré-processadores CSS, para o que servem e como seu uso no frontend pode ser altamente vantajoso em projetos web.

Pré-processadores CSS - Introdução
00:48

Sass - Considerações iniciais
00:53

A primeira (e já surpreendente) característica do Sass é aninhamento de regras, que é explicado e exemplificado nesta aula.

Preview 09:04

Já pensou usar variáveis em CSS, tal como é possível fazer em linguagens de programação? Com Sass isso é possível. Confira nesta aula mais informações e exemplos práticos a respeito.

Sass - Variáveis
07:36

Em Sass, Mixins são parecidos com funções em linguagens de programação, permitindo processamento e reuso de código para aumentar a eficiência do que se está codificando, e é justamente sobre isso que esta aula trata.

Sass - Mixins
09:45

Como será visto nesta aula, com Sass é possível compartilhar as propriedades/valores de regras CSS através de todo o código, aprimorando a reutilização de código presente nas folhas de estilo.

Sass - Extensão/Herança
07:36

Veja como Sass dá ensejo à construção de uma arquitetura CSS mais robusta e eficiente através da importação de folhas de estilo.

Sass - Importação
09:19

Baseado no que você aprendeu sobre Pré-processadores CSS, responde às questões a seguir.

Pré-processadores CSS
5 questions

Sass - Material de referência
00:30

Pré-processadores CSS - Conclusão
00:33
+
Namespaces CSS
3 Lectures 14:40

Namespaces CSS são uma convenção de código muito útil que objetiva a padronização de "escopos de atuação" de folhas de estilo através de protocolos simples de nomenclatura. Saiba mais a respeito.

Namespaces CSS - Introdução
00:41

Nesta aula, conheça os namespaces CSS mais usados por desenvolvedores front-end:

  • Utilitário
  • Componente
  • Estado/Condição
  • Tema
  • Escopo
  • JavaScript
Namespaces CSS - Namespaces mais usados
13:38

Namespaces CSS
5 questions

Namespaces CSS - Material de referência
00:21
+
Task Runners
7 Lectures 24:37

Aula introdutória sobre Task Runners ou Automatizadores de Tarefas, como também são conhecidos, com a explicação do quê são, para o que servem e porque usá-los em projetos web.

Task Runners - Introdução
00:55

Gulp - Considerações iniciais
00:54

Nesta primeira parte da aula sobre a sintaxe (API) do Gulp, veja como instalar pacotes com Node.js, o arquivo package.json e como instalar o Gulp, propriamente dito.

Gulp - Sintaxe (API) - parte 1
04:13

Na parte 2 sobre a sintaxe (API) do Gulp, veja informações sobre a pasta node_modules, o arquivo gulpfile.js, o site onde se procuram pacotes Gulp e os métodos task(), src(), pipe() e dest().

Gulp - Sintaxe (API) - parte 2
08:30

Na última parte sobre a sintaxe (API) do Gulp, veja mais um exemplo de tarefa Gulp, dessa vez mostrando como automatizar a compilação de Sass para CSS através da instalação simples de um pacote e uso do método watch().

Gulp - Sintaxe (API) - parte 3
07:47

Baseado no que aprendeu nesta Seção, responda as perguntas que seguem.

Task Runners
5 questions

Gulp - Material de referência
01:25

Task Runners - Conclusão
00:53
+
Conclusão
2 Lectures 01:58
Aula final do curso "CSS: um passo adiante"
01:14

Indicações de recursos e conteúdos
00:44
About the Instructor
Tárcio Zemel
5.0 Average rating
14 Reviews
30 Students
1 Course

Tárcio Zemel trabalha com desenvolvimento web há quase 20 anos e atuar nessa área é uma das atividades que mais gosta. Já produziu artigos, livros e cursos para diversas empresas e sites de ensino do Brasil e do exterior. É sócio-fundador da empresa webfatorial, na qual trabalha desenvolvendo projetos web, ferramentas e recursos online para grandes marcas do mundo todo.

* Please note discounts may be slightly higher than advertised amount due to rounding and currency conversion.