HTML 5 e CSS 3

Site relativo ao curso de HTML5 e CSS3
relalizado no Curso em Vídeo do prof. Gustavo Guanabara.

Símbolo do html 5 e css 3 que são as tecnologias estudadas e praticadas nesse site.

MÓDULOS DO CURSO

Introdução aos módulos

O Curso de HTML5 e CSS3, composto por 5 módulos, ensina a criar sites usando a linguagem de marcação de hipertexto (HTML) e folhas de estilo em cascata (CSS) em suas versões mais recentes.

Esse curso é ministrado gratuitamente pelo Professor Gustavo Guanabara no site do Curso em Vídeo e disponibilizado também na plataforma do Youtube.

O curso é composto por:

  1. Vídeo-aulas
  2. Material de apoio
  3. Exercícios
  4. Desafios propostos

As vídeo-aulas estão disponíveis no site do Curso em Vídeo e no Youtube. O material de apoio é composto por ebooks com 30 capítulos ao todo.

Eu estudo o curso na plataforma do Curso em Vídeo e reviso aleatoriamente na Playlist oficial do YouTube com o professor Gustavo Guanabara.

Para obter certificado, acompanhe o curso pela plataforma de ensino do Curso em Vídeo.

Divisão por módulos

Módulo 1

Primeiros passos em HTML e CSS.

  • Conceitos básicos
  • Preparação do ambiente
  • Semântica da HTML5
  • Textos
  • Títulos
  • Ligações
  • Multimídia
  • Estilos

Módulo 2

Deixando as coisas mais bonitas

  • Fundamentos de design
  • Psicologia das cores
  • Tipografia
  • Elemento CSS
  • Modelo de caixas
  • Wireframe
  • Responsividade

Módulo 3

Colocando um protótipo no ar

  • Versionamento de software
  • hospedagem de sites estáticos
  • Tabelas

Módulo 4

Aprofundando os conhecimentos

  • Quadros em linha
  • Formulários
  • Media queries
  • Mobile first

Módulo 5

Novas tecnologias

  • Flexbox
  • Grid layout
  • Projeto final

E-books das aulas

▬ Os Ebooks estão listados abaixo conforme andamento do curso.

▬ Acesse a todos os ebooks originais no Github do professor Guanabara.

Vídeo-aulas Youtube

Aulas do 1º Módulo:

TODAS AS AULAS DO 1º MÓDULO.

Todas as vídeo-aulas do 1º módulo da playlist disponível no Youtube.

  1. Começa aqui o curso de HTML5 e CSS3
  2. O que vamos aprender no módulo 01?

    3. Capítulo 01 - Introdução

  3. Precisamos fazer um acordo
  4. Será que este curso é para mim?
  5. Melhores livros para aprender
  6. Como a Internet chega na minha casa?

    7. Capítulo 02 - Internet

  7. Como a Internet funciona?
  8. O que é domínio e hospedagem?

    9. Capítulo 03 - Diferenças

  9. Diferença: HTML, CSS e JavaScript
  10. Front-end, Back-end e Full stack

    11. Capítulo 04 - Instalar app

  11. Instalando todas as ferramentas
  12. Seu primeiro código HTML

    13. Capítulo 05 - Texto símbolos

  13. Parágrafos e Quebras
  14. Símbolos e Emoji no seu site

    15. Capítulo 06 - Imagem

  15. Direito de imagem no seu site?
  16. Formatos para imagens na Web?
  17. Tamanho das imagens para um site?
  18. A tag img em HTML5
  19. Como mudar o favicon de um site

    20. Capítulo 07 - Título h1-h6

  20. Hierarquia de Títulos
  21. Semântica na HTML5 é importante

    22. Capítulo 08 - Formatar texto

  22. Negrito e Itálico do jeito certo
  23. Formatações adicionais em HTML
  24. Citações e Códigos

    25. Capítulo 09 - Listas

  25. Listas OL e UL
  26. Listas mistas e de definição

    27. Capítulo 10 - Links

  27. Links e Âncoras em HTML5
  28. Links internos
  29. Links para download
  30. Desafios propostos

    31. Capítulo 11 - Img vídeo

  31. Imagens Dinâmicas
  32. Imagens que se adaptam sozinhas
  33. Colocando áudio no seu site
  34. Formatos de vídeo para seu site
  35. Vídeos em hospedagem própria
  36. Incorporação de vídeos externos
  37. Desafio: um site com vídeos

    38. Capítulo 12 - Estilos

  38. Estilos CSS inline
  39. Estilos CSS internos
  40. Estilos CSS externos
  41. Fim do Módulo 1

Aulas do 2º Módulo:

TODAS AS AULAS DO 2º MÓDULO.

Todas as vídeo-aulas do 2º módulo da playlist disponível no Youtube.

  1. O que vamos aprender no módulo 02?

    2. Capítulo 13 - cores

  2. Psicologia das Cores
  3. Representando Cores com CSS3
  4. Harmonia de cores
  5. Paleta de cores
  6. Como capturar cores da tela?
  7. Como criar degradê com CSS ?
  8. Criando um exemplo real

    9. Capítulo 14 - Fontes

  9. Primeiros passos em Tipografia
  10. Anatomia do tipo
  11. Famílias de fonte com CSS
  12. Tamanho de fonte e suas medidas
  13. Peso, estilo e shorthand font
  14. Usando Google Fonts
  15. Usando fontes externas baixadas
  16. Capturando as fontes usadas em um site
  17. Detectando fontes dentro de imagens
  18. Alinhamento de textos com CSS

    19. Capítulo 15 - CSS

  19. Usando o id com CSS
  20. As diferenças entre id e class
  21. Pseudo-classes em CSS
  22. Pseudo-elementos em CSS

    23. Capítulo 16 - Box-model

  23. Modelo de Caixas: primeiros passos
  24. Modelo de Caixas (parte 1)
  25. Modelo de Caixas (parte 2)
  26. Grouping Tags em HTML5
  27. Sombra nas Caixas
  28. Caixas com vértices arredondados
  29. Bordas decoradas
  30. DESAFIO do Módulo 2

    31. Capítulo 17 - Site Android

  31. Criando um projeto a partir do zero
  32. Navegando pelo projeto pronto
  33. Planejando a estrutura do seu site
  34. Transformando o layout em código
  35. Organizando o conteúdo do site
  36. Variáveis em CSS
  37. Responsividade para sites
  38. Responsividade na prática
  39. Configurando o header e o menu do site
  40. Melhorando o formato do conteúdo
  41. Rodapé, conteúdo periférico e links
  42. Tornando um vídeo responsivo
  43. Fim do Módulo 2

Aulas do 3º Módulo:

TODAS AS AULAS DO 3º MÓDULO.

Todas as vídeo-aulas do 3º módulo da playlist disponível no Youtube.


    Capítulo 18 - Xx

  1. x
  2. x
  3. x
  4. x
  5. x
  6. x
  7. x
  8. x
  9. x
  10. x
  11. x
  12. x
  13. x
  14. x
  15. x
  16. x
  17. x
  18. x
  19. x
  20. x
  21. x
  22. x
  23. x
  24. x
  25. x
  26. x
  27. x
  28. x
  29. x
  30. x
  31. x
  32. x
  33. x
  34. x
  35. x
  36. x
  37. x
  38. x
  39. x
  40. x
  41. x

Aulas do 4º Módulo:

TODAS AS AULAS DO 4º MÓDULO.

Todas as vídeo-aulas do 4º módulo da playlist disponível no Youtube.


    Capítulo 18 - Xx

  1. x
  2. x
  3. x
  4. x
  5. x
  6. x
  7. x
  8. x
  9. x
  10. x
  11. x
  12. x
  13. x
  14. x
  15. x
  16. x
  17. x
  18. x
  19. x
  20. x
  21. x
  22. x
  23. x
  24. x
  25. x
  26. x
  27. x
  28. x
  29. x
  30. x
  31. x
  32. x
  33. x
  34. x
  35. x
  36. x
  37. x
  38. x
  39. x
  40. x
  41. x

Aulas do 5º Módulo:

TODAS AS AULAS DO 5º MÓDULO.

Todas as vídeo-aulas do 5º módulo da playlist disponível no Youtube.


    Capítulo 18 - Xx

  1. x
  2. x
  3. x
  4. x
  5. x
  6. x
  7. x
  8. x
  9. x
  10. x
  11. x
  12. x
  13. x
  14. x
  15. x
  16. x
  17. x
  18. x
  19. x
  20. x
  21. x
  22. x
  23. x
  24. x
  25. x
  26. x
  27. x
  28. x
  29. x
  30. x
  31. x
  32. x
  33. x
  34. x
  35. x
  36. x
  37. x
  38. x
  39. x
  40. x
  41. x

Amostras das linguagens HTML e CSS.

  
                    <!DOCTYPE html>         AMOSTRA DA HTML 5
                    <html lang="pt-BR">
                    <head>
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="IE=edge">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>HTML 5</title>
                    </head>
                    <body>
                        <h1>Aprendendo HTML5</h1>
                        <hr>
                        <p>Essa é a linguagem HTML 5.</p>
                        <p>A pratica traz a perfeição.</p>
                    </body>
                    </html>
                
 
                    /* LAYOUT */              AMOSTRA DA CSS 3
                    @charset "UTF-8";

                    /* Fontes externas */
                    @import url('');

                    :root { /* Variáveis */ }

                    * { /* configuração geral */ }

                    body { /* corpo do site */ }

                    p { /* Parágrafo  com variáveis */
                    font: normal 400 var(--size18) var(--font-geral); 
                    color: var(--cor-preto);
                    text-align: justify;
                    text-indent: var(--size30);
                    line-height: var(--size24);
                    }

                    /* adaptação a diferentes telas */
                    @media screen and (max-width: 800px) { }
                    @media screen and (max-width: 800px) { }

HTML5 e CSS3

Esse é um site de amostra para expor todo o conteúdo praticado no curso.