CSS - Estilize seu site!
4.9 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
39 students enrolled

CSS - Estilize seu site!

Série Front-end do começo: Desenvolvimento Web
4.9 (9 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
39 students enrolled
Created by Adriana Cerdeira
Last updated 5/2020
Portuguese
Portuguese [Auto-generated]
Current price: $12.99 Original price: $89.99 Discount: 86% off
4 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10.5 hours on-demand video
  • 2 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • A aplicar estilos à suas páginas Web
  • Codificar em CSS
  • Estilizar Websites
  • Como aplicar o CSS ao nosso HTML
  • O que são e quais são os seletores
  • Como escrever comentários em CSS
  • Como funcionam as cores em CSS
  • Como aplicar cor de fonte e de fundo
  • Como aplicar Sombras
  • Tipos de Medidas em CSS
  • O que é o Box-model
  • Como aplicar largura e altura em CSS
  • Como aplicar bordas em CSS
  • Como aplicar margens e enchimento em CSS
  • O que eu faço quando meu conteúdo é maior do que a minha caixa
  • Qual a diferença entre Outline e Borda
  • Vamos aprender a estilizar texto:
  • Como definir a família da nossa fonte
  • O que são Web Fonts, Web Safe Fonts e como aplicar fontes personalizadas
  • Como definir o tamanho do nosso texto
  • Como aplicar estilos ao nosso texto como negrito, itálico, sublinhas e outros
  • Como colocar um texto todo em caixa alta ou baixa visualmente sem afetar o original
  • Como estilizar fundos
  • Como aplicar imagens de fundo
  • Vamos aplicar nosso conhecimento com exercícios práticos
  • Flex-box e grid
  • Como aplicar breakpoints ao nosso design responsivo
  • Animações e transições em CSS
  • Como criar um menu dropdown de puro CSS
  • E muito mais!
Course content
Expand all 47 lectures 10:42:24
+ Introdução
2 lectures 26:07

Vamos aprender a linguagem de estilização de sites, o CSS! Neste vídeo de apresentação explico o que vamos ver no curso, porque aprender CSS é importante, falo um pouco do que é CSS e de como usar os recursos do curso. A partir dos 12 minutos, tenho uma explicação sobre um projeto extra e sobre a plataforma Udemy que alunos do meu curso de HTML podem pular pois já viram, mas que sugiro que alunos novos fiquem para ver, apesar da extensão do vídeo, pois você vai ver como sua experiência com a plataforma e o curso serão melhor sabendo destes detalhes!

Preview 25:40
Conecte-se para continuar aprendendo!
00:27
+ Começando com o CSS!
3 lectures 01:07:50

Vamos falar sobre o que é o CSS. Explicar a Sintaxe do CSS e como aplicar CSS ao HTML.

Preview 37:54

Vamos aprender os diferentes tipos de seletores e como escrevê-los.

Aula 03 - Seletores
22:26

Como se escrevem comentários em CSS?

Aula 04 - Comentários
07:30
+ Cores e suas propriedades
3 lectures 57:19

Vamos falar de cores, como declará-las e como elas funcionam. Além de recursos para trabalhar com cores!

Aula 05 - Cores
30:51

Vamos começar a aplicar cores no nosso texto e no nosso fundo.

Aula 06 - Cor de fonte e fundo
07:06

Vamos aprender a aplicar sombras a elementos e texto.

Aula 07 - Sombra
19:22
+ Medidas e Box-model
2 lectures 33:26

Vamos aprender como declarar medidas no CSS.


Aula 08 - Tipos de Medidas
26:40

O que é e como funciona o famoso Box-model.

Aula 09 - O que é o Box-model
06:46
+ Elementos do Box-model
5 lectures 46:47

Vamos aprender como declarar uma largura e altura para um determinado elemento.

Aula 10 - Altura e largura
04:36

Vamos aprender como aplicar bordas para elementos e o que é e como funciona o famoso shorthand (abreviação).

Aula 10 - Borda
15:24

Vamos aprender como aplicar margem e preenchimento aos nossos elementos e entender como eles diferem um do outro.

Aula 12 - Margem e Padding
16:09

O que fazer quando o nosso conteúdo é maior do que a nossa caixa.

Aula 13 - Overflow
06:11

Você sabe a diferença entre outline e border?

Aula 14 -Outline
04:27
+ Estilização de texto
4 lectures 59:40

Vamos aprender como definir famílias de fontes, o que são Web Fonts e Fontes de Sistema e como aplicar fontes personalizadas.

Famílias de fontes
27:08

Vamos começar a estilizar o nosso texto com sublinhas, negritos, itálicos.

Aula 16 - Font-weight, font-style e text-decoration
15:56

Vamos aprender como declarar o tamanho do nosso texto.

Aula 17 - Font-size
05:15

Vamos aprender como deixar o nosso texto com um bom espaço de respiro para ter uma boa leitura.

Aula 18 - Espaçar, alinhar e transformar texto
11:21
+ Background extra
1 lecture 27:37

Imagens de fundo podem dar um visual super legal. Vamos aprender tudo que precisamos saber para trabalhar com elas.

Aula 19 - Background
27:37
+ Exercício 1
2 lectures 08:32

Dica de como fazer seus exercícios de agora em diante!

Faça seus exercícios em Codepen!
05:09

Neste vídeo dei uma explicada rápida em dois dos exercícios que fizemos no curso de HTML. Se você não viu meu curso de HTML, assista para saber sobre os projetos, se não, pule para a tarefa.

Apresentação dos projetos do curso de HTML para alunos novos
03:23
Vamos começar a aplicar o que aprendemos até agora estilizando os nossos dois projetos do curso de HTML!
Aula 21 - Começando a estilizar
1 question
+ Posicionamento
3 lectures 30:57

Vamos aprender a mudar o comportamento dos elementos.

Aula 22 - Display
04:19

Vamos aprender a posicionar elementos à direita ou esquerda para que os outros elementos se posicionem do seu lado.

Aula 23 - Float
07:06

Vamos aprender a posicionar elementos em lugares e com propriedades específicas além de decidir a profundidade dos elementos.

Aula 24 - Position e z-index
19:32
+ Seletores e Compatibilidade
5 lectures 51:45

Garantir compatibilidade com navegadores antigos é muito importante.

Aula 25 - Compatibilidade
07:38

Vamos nos aprofundar nos seletores de pseudo-classes e como eles podem nos ajudar a criar interatividade.

Aula 26 - Seletores de pseudo-classe
16:16

Com seletores de pseudo-elementos criamos elementos HTML com o CSS.

Aula 27 - Seletores de Pseudo-elementos
06:42

Seletores de atributos nos ajudam a especificar um elemento a ser estilizado dependendo do seu atributo e valor do atributo.

Aula 28 - Seletores de Atributos
12:14

Combinar seletores é uma maneira muito interessante de selecionar elementos específicos.

Aula 29 - Seletores Combinadores
08:55
Requirements
  • Ter conhecimento de HTML
  • Entender de criação de pastas e documentos no seu sistema operacional
Description

Venha aprender a estilizar seus sites com o CSS, aplicando cores, medidas, fontes, estilização de textos e caixas, posicionamento e muito mais. A  linguagem CSS foi criada para transformar o HTML em algo visualmente agradável e chamativo.

Este é o segundo curso da Série Front-end do começo: Desenvolvimento Web onde vamos aprender a fundo as linguagens base da Web, o HTML, CSS e JS.

Continuando do módulo I e II, neste módulo vamos ver o começar a aplicar CSS de maneira a começar a estilizar os sites, dando cores, fontes, e melhorando sua aparência.

Mas não se preocupe, se você tem conhecimento de HTML, mesmo não tendo feito o módulo anterior, vai poder acompanhar este curso tranquilamente.

Vamos aprender:

  • Como aplicar o CSS ao nosso HTML

  • O que são seletores

  • Como escrever comentários em CSS

  • Como funcionam as cores em CSS

  • Como aplicar cor de fonte e de fundo

  • Como aplicar Sombras

  • Tipos de Medidas em CSS

  • O que é o Box-model

  • Como aplicar largura e altura em CSS

  • Como aplicar bordas em CSS

  • Como aplicar margens e enchimento em CSS

  • O que eu faço quando meu conteúdo é maior do que a minha caixa

  • Qual a diferença entre Outline e Borda


  • Vamos aprender a estilizar texto:

    • Como definir a família da nossa fonte

    • O que são Web Fonts, Web Safe Fonts e como aplicar fontes personalizadas

    • Como definir o tamanho do nosso texto

    • Como aplicar estilos ao nosso texto como negrito, itálico, sublinhas e outros

    • Como colocar um texto todo em caixa alta ou baixa visualmente sem afetar o original

  • Como estilizar fundos:

    • Como aplicar imagens de fundo

    • Como posicionar imagens de fundo

    • Gradientes


  • Criar breakpoints para sites responsivos

  • Aprender os diferentes seletores a fundo

  • Flex-box e Grid, e como podem ajudar a criar um layout responsivo

  • Animações e transições

  • Menu dropdown em puro CSS

  • Vamos aplicar nosso conhecimento com exercícios práticos

E muito mais!

Então não perca tempo! Inscreva-se já!


Who this course is for:
  • Pessoas interessadas em aprender desenvolvimento web