• 0
Sign in to follow this  
uninerds

Playlist de como programar em HTML5 e CSS

Question

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

Edited by uninerds

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this