Ir para conteúdo
Fórum Script Brasil
  • 0

Playlist de como programar em HTML5 e CSS


uninerds

Pergunta

Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar

Segue o link da playlist com 22 vídeos de HTML5

https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd

 

1 - O que é HTML, CSS e JavaScript?

É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web

 

2 - Programas Necessários

É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)

 

3 - Primeiro HTML5

Começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código

 

4 - Hierarquia de títulos e linha horizontal

Como fazer hierarquia de títulos e colocar linha horizontal

Tags: h1 até h6 e hr

 

5 - Parágrafo, quebra de linha e texto pré-formatado

Como fazer parágrafo, quebra de linha e texto pré-formatado

Tags: p, br e pre

 

6 - Formatação de texto

Como fazer formatação de texto

Tags: b, strong, i, em, mark, small, sub, sup, ins e del

Atributos: cite e datetime das tags ins e del

 

7 - Citações

Como fazer citações

Tags: q, blockquote, cite, address, abbr e bdo

Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote

 

8 - Comentários e comentários condicionais

Como fazer comentário e para que serve

 

9 - Arquivo Externo

Como fazer referência de arquivo externo no HTML

 

10 - Links | Parte 1

Como fazer links para abrir outros HTML, enviar e-mail, executar JavaScript e direcionar para um local específico

Tag: a

Atributos: href, hreflang e type

 

11 - Links | Parte 2

Como criar links para download, diferentes formas de abrir no navegador e vulnerabilidade do target="_blank"

Tag: a

Atributos: download e target

Valores para o target: _self, _blank, _top e _parent

 

12 - Links | Parte 3

Como resolver vulnerabilidade do target="_blank" e o atributo rel

Tag: a

Atributo: rel

Valores para o rel: alternate, author, bookmark, prev, next, external, help, license, search, tag, nofollow, noreferrer, noopener

 

13 - Bloco e Linha

O conceito de tag de bloco e de linha

Tags: div e span

 

14 - Imagem | Parte 1

Como colocar imagem no HTML

Tag: img

Atributos: src, alt, width, height, crossorigin, ismap e longdesc

Valores para o crossorigin: anonymous e use-credentials

 

15 - Imagem | Parte 2

Como fazer mapeamento de imagem para colocar link dentro dela

Tags: img, map e area

Atributo da img: usemap

Atributo da map: name

Atributos da area: shape, coords e alt

Valores para o shape: circle, rect e poly

 

16 - Imagem | Parte 3

Como definir imagens diferentes para dispositivos com características de tela diferentes

Tags: img, picture e source

Atributos da img: srcset e sizes

Atributos da source: srcset, sizes, media e type

 

17 - Tabela | Parte 1

Como criar tabela em HTML

Tags: table, caption, tr, th e td

Atributos da th: abbr, sorted e scope

Atributos da th e da td: colspan, rowspan e headers

Valores para o scope: col, colgroup, row e rowgroup

 

18 - Tabela | Parte 2

Como altarar estilo de uma coluna inteira e definir cabeçalho, corpo e rodapé da tabela

Tags: colgroup, col, thead, tbody e tfoot

Atributo da colgroup e col: span

 

19 - Lista

Como criar lista não-ordenada, ordenada e de descrição

Tags: ul, li, ol, dl, dt e dd

Atributos da ol: type, reversed e start

Atributos da li quando estiver na ol: value

Valores para o type: 1, a, A, i e I

 

20 - Iframe

Como colocar uma página dentro de outra em HTML

Tag: iframe

Atributos: src, srcdoc, width, height, name e sandbox

Valores para o sandbox: allow-pointer-lock, allow-scripts, allow-forms, allow-top-navigation, allow-same-origin e allow-popups

 

21 - Atributo Class

Qual a importância do atributo class e como utilizar ele em CSS e JavaScript

 

22 - Atributo Id

Qual a importância do atributo id e como utilizar ele em CSS e JavaScript

 

Segue o link da playlist com 17 vídeos de CSS

https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj

 

1 - O que é HTML, CSS e JavaScript?

É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web

 

2 - Programas Necessários

É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)

 

3 - Primeiro CSS

Como fazer a integração entre HTML e CSS

 

4 - Cores

Como definir cor por nome, hexadecimal, RGB, HSL, RGBA e HSLA

 

5 - Initial e Inherit

Como utilizar os valores initial e inherit para propriedades em CSS

 

6 - Consulta de mídia

Como definir estilos diferentes para tipos de dispositivos diferentes e mesmo tipo de dispositivo com características diferentes

 

7 - Borda | Parte 1

Como fazer bordas em CSS

Propriedades: border, border-color, border-radius, border-style e border-width

Valor para border-color: transparent

Valores para border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset

Valores para border-width: medium, thin e thick

 

8 - Borda | Parte 2

Como alterar as propriedades da borda em cada lado

Propriedades: border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-left, border-left-color, border-left-style, border-left-width, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-right, border-right-color, border-right-style, border-right-width, border-top, border-top-color, border-top-style e border-top-width

 

9 - Largura e Altura

Como definir largura e altura em CSS e também valor mínimo e máximo para cada uma

Propriedades: width, height, min-width, max-width, min-height e max-height

 

10 - Margem

Como colocar margem em CSS, centralizar conteúdo e um cuidado que deve ter ao utilizar margem

Propriedades: margin, margin-top, margin-right, margin-bottom e margin-left

 

11 - Preenchimento

Como colocar preenchimento em CSS

Propriedades: padding, padding-top, padding-right, padding-bottom e padding-left

 

12 - Excesso

O que fazer quando o conteúdo de uma tag é maior que a largura e/ou altura

Propriedades: overflow, overflow-x e overflow-y

Valores para as propriedades: visible, hidden, scroll e auto

 

13 - Modelo de Caixa

Qual é o conceito de modelo de caixa e porque é importante conhecer ele para montar o layout de uma página

 

14 - Fundo

Como alterar a cor de fundo, colocar imagem como fundo e definir a posição da mesma

Propriedades: background, background-color, background-image, background-repeat, background-attachment e background-position

Valores para background-repeat: repeat, repeat-x, repeat-y, no-repeat, space e round

Valores para background-attachment: scroll, fixed e local

Valores para background-position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom

 

15 - Contorno

Como colocar contorno no conteúdo utilizando CSS

Propriedades: outline, outline-color, outline-style, outline-width e outline-offset

Valor para outline-color: invert

Valores para outline-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset

Valores para outline-width: medium, thin e thick

 

16 - Formatação de Texto | Parte 1

Como fazer formatação de texto utilizando CSS

Propriedades: color, direction, unicode-bidi, letter-spacing, line-height, text-align, text-indent, text-transform, word-spacing e text-shadow

Valores para direction: ltr e rtl

Valores para unicode-bidi: normal, embed, bidi-override, isolate, isolate-override e plaintext

Valor para line-height: normal

Valores para text-align: left, right, center e justify

Valores para text-transform: none, capitalize, uppercase e lowercase

Valor para word-spacing: normal

 

17 - Formatação de Texto | Parte 2

Como fazer formatação de texto utilizando CSS

Propriedades: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration, white-space, vertical-align e text-overflow

Valores para text-decoration-line: none, underline, overline e line-through

Valores para text-decoration-style: solid, double, dotted, dashed e wavy

Valores para white-space: normal, nowrap, pre, pre-line e pre-wrap

Valores para vertical-align: baseline, sub, super, top, text-top, middle, bottom e text-bottom

Valores para text-overflow: clip e ellipsis

 

PS:

- Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda

- Sempre que tiver vídeo novo atualizaremos este tópico

Editado por uninerds
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...