Jump to content
uninerds

Playlist de como programar em HTML5 e CSS

Recommended Posts

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Matheus Jollyl da Silva
      Estou fazendo um cadastro simples usando CRUD, comecei a programar a pouco tempo e está sendo minha primeira experiencia com CRUD.
      fiz um pequeno cadastro e estou alterando para implementar aos poucos. Com uma dessas alterações os botões que eu adicionei perderam suas funcionalidades.
       
      Segue o código: 
       
       
      <?php
      // Verificar se foi enviando dados via POST
      if ($_SERVER['REQUEST_METHOD'] == 'POST') {
          $id = (isset($_POST["id"]) && $_POST["id"] != null) ? $_POST["id"] : "";
          $nome = (isset($_POST["nome"]) && $_POST["nome"] != null) ? $_POST["nome"] : "";
          $email = (isset($_POST["email"]) && $_POST["email"] != null) ? $_POST["email"] : "";
          $celular = (isset($_POST["celular"]) && $_POST["celular"] != null) ? $_POST["celular"] : NULL;
          $cidade = (isset($_POST["cidade"]) && $_POST["cidade"] != null) ? $_POST["cidade"] : NULL;
          $estado = (isset($_POST["estado"]) && $_POST["estado"] != null) ? $_POST["estado"] : NULL;
      } else if (!isset($id)) {
          // Se não se não foi setado nenhum valor para variável $id
          $id = (isset($_GET["id"]) && $_GET["id"] != null) ? $_GET["id"] : "";
          $nome = NULL;
          $email = NULL;
          $celular = NULL;
          $cidade = NULL;
          $estado = NULL;
      }
      try {
          $conexao = new PDO("mysql:host=localhost;port=3307;dbname=crudsimples", "root", "usbw");
          $conexao->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $conexao->exec("set names utf8");
      } catch (PDOException $erro) {
          echo "Erro na conexão:" . $erro->getMessage();
      }
      if (isset($_REQUEST["act"]) && $_REQUEST["act"] == "save" && $nome != "") {
          try {
              $stmt = $conexao->prepare("INSERT INTO contatos (nome, email, celular, cidade, estado) VALUES (?, ?, ?, ?, ?)");
              $stmt->bindParam(1, $nome);
              $stmt->bindParam(2, $email);
              $stmt->bindParam(3, $celular);
              $stmt->bindParam(4, $cidade);
              $stmt->bindParam(5, $estado);
               
              if ($stmt->execute()) {
                  if ($stmt->rowCount() > 0) {
                      echo "Dados cadastrados com sucesso!";
                      $id = null;
                      $nome = null;
                      $email = null;
                      $celular = null;
                      $cidade = null;
                      $estado = null;
                  } else {
                      echo "Erro ao tentar efetivar cadastro";
                  }
              } else {
                     throw new PDOException("Erro: Não foi possível executar a declaração sql");
              }
          } catch (PDOException $erro) {
              echo "Erro: " . $erro->getMessage();
          }
      }
      if (isset($_REQUEST["act"]) && $_REQUEST["act"] == "upd" && $id != "") {
          try {
              $stmt = $conexao->prepare("SELECT * FROM contatos WHERE id = ?");
              $stmt->bindParam(1, $id, PDO::PARAM_INT);
              if ($stmt->execute()) {
                  $rs = $stmt->fetch(PDO::FETCH_OBJ);
                  $id = $rs->id;
                  $nome = $rs->nome;
                  $email = $rs->email;
                  $celular = $rs->celular;
                  $cidade = $rs->cidade;
                  $estado = $rs->estado;
              } else {
                  throw new PDOException("Erro: Não foi possível executar a declaração sql");
              }
          } catch (PDOException $erro) {
              echo "Erro: ".$erro->getMessage();
          }
      }
      if ($id != "") {
          $stmt = $conexao->prepare("UPDATE contatos SET nome=?, email=?, celular=? cidade=?, estado=? WHERE id = ?");
          $stmt->bindParam(5, $id);
      } else {
          $stmt = $conexao->prepare("INSERT INTO contatos (nome, email, celular, cidade, estado) VALUES (?, ?, ?, ?, ?)");
      }
      ?>
      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <link rel="stylesheet" type="text/css" href="cadastro.css" />
              <title>Cadastro em reforma.</title>
          </head>
          <body>
          <h1>Cadastro Simples.</h1>
                  
              <form action="?act=save" method="POST" name="form1" >
                  <hr>
                  <input type="hidden" name="id" <?php
                  // Preenche o id no campo id com um valor "value"
                  if (isset($id) && $id != null || $id != "") {
                      echo "value=\"{$id}\"";
                  }
                  ?> />
                  <table>
                      <tr>
                          Nome:
                          <input type="text" name="nome" <?php
                          // Preenche o nome no campo nome com um valor "value"
                          if (isset($nome) && $nome != null || $nome != ""){
                              echo "value=\"{$nome}\"";
                          }
                          ?> />
                      </tr>
                  </table>
                          
                  <table>
                      <tr>
                          E-mail:
                          <input type="text" name="email" <?php
                          // Preenche o email no campo email com um valor "value"
                          if (isset($email) && $email != null || $email != ""){
                              echo "value=\"{$email}\"";
                          }
                          ?> />
                      </tr>
                  </table>
                  
                  <table>
                      <tr>
                          Celular:
                          <input type="text" name="celular" <?php
                          // Preenche o celular no campo celular com um valor "value"
                          if (isset($celular) && $celular != null || $celular != ""){
                              echo "value=\"{$celular}\"";
                          } 
                          ?> />
                      <table>
                          <tr>
                              Cidade:
                              <input type="text" name="cidade" <?php
                              // Preenche a cidade no campo nome com um valor "value"
                              if (isset($cidade) && $cidade != null || $cidade != ""){
                                  echo "value=\"{$cidade}\"";
                              }
                          ?> />
                      
                          Estado:
                          <input type="text" name="estado" <?php
                          // Preenche o estado no campo nome com um valor "value"
                          if (isset($estado) && $estado != null || $estado != ""){
                              echo "value=\"{$estado}\"";
                          }
                          
                  
                  
                  if (isset($_REQUEST["act"]) && $_REQUEST["act"] == "del" && $id != "") {
          try {
              $stmt = $conexao->prepare("DELETE FROM contatos WHERE id = ?");
              $stmt->bindParam(1, $id, PDO::PARAM_INT);
              if ($stmt->execute()) {
                  echo "Registo foi excluído com êxito";
                  $id = null;
              } else {
                  throw new PDOException("Erro: Não foi possível executar a declaração sql");
              }
          } catch (PDOException $erro) {
              echo "Erro: ".$erro->getMessage();
          }
      }
                  ?> />
                <br> <input type="submit" value="Salvar" />
                 <input type="reset" value="Novo" />
                </br>
                 <hr>
              </form>
              <table border="1" width="100%">
                              <tr>
                                  <th>Nome</th>
                                  <th>E-mail</th>
                                  <th>Celular</th>
                                  <th>Cidade</th>
                                  <th>Estado</th>
                                  <th>Ações</th>
                              </tr>
                              <?php
                      try {
                   
                      $stmt = $conexao->prepare("SELECT * FROM contatos");
                   
                          if ($stmt->execute()) {
                              while ($rs = $stmt->fetch(PDO::FETCH_OBJ)) {
                                  echo "<tr>";
                                  echo "<td>".$rs->nome."</td>
                                        <td>".$rs->email."</td>
                                        <td>".$rs->celular."</td>
                                        <td>".$rs->cidade."</td>    
                                        <td>".$rs->estado."</td>
                                        <td>
                                          <center>
                                              <a href=\"?act=upd&id=" . $rs->id . "\">[Alterar]</a>"
                                              ."&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                                              ."<a href=\"?act=del&id=" . $rs->id . "\">[Excluir]</a>
                                          </center>
                                        </td>";
                              echo "</tr>";
                              }
                          } else {
                              echo "Erro: Não foi possível recuperar os dados do banco de dados";
                          }
                  } catch (PDOException $erro) {
                      echo "Erro: ".$erro->getMessage();
                  }
                  ?>
              </table>
              
          </body>
      </html>
       
      Por algum motivo minha tabela no Phpmyadmin também mudou e não consigo mais editar. Exclui a "id" e depois adicionei novamente e começou os problemas. Agradeço a ajuda desde já.
    • By guzulino
      Eu tenho uma dúvida meio tosca, mas as páginas que eu estou colocando no site não estão carregando, quando acesso o site aparece uma página padrão de domínio reservado para um cliente HostGator, mas quando vou no cPanel fazer upload dos arquivos, eles não são carregados no site, tentei colocar na pasta "public_html" com o nome de index, mas mesmo assim ela não é carregada na página principal do site. Gostaria de saber qual a pasta em que devo colocar os arquivo das páginas principais para serem carregados. Eu já trabalhei com hospedagem na Locaweb, mas quis testar outra hospedagem para ver como funciona, mas até agora não deu muito certo, adquiri o domínio na semana passada então ele já deveria funcionar teoricamente.
    • By Anderson Ronilson Xavier
      Olá a todos gostaria da ajuda dos colegas estou em um projeto de site landing page  usando o plugin construtor de sites chamado themify ultra e não estou conseguindo uma galeria de imagens igual ao cliente está me pedindo que responsiva e com um menu que tenha as opções por exemplo "todas maçã banana laranja " se eu clicar em maçã a galeria ocultaria as bananas e Laranja e se eu clicar em todas e voltaria a apresentar todas as frutas ... Desculpa o jeito de explicar ... Mas galeria não estou conseguindo achar nada que me ajude a opção do themify ultra foi do próprio cliente que já tinha e acabei topando por fazer usando ele mesmo mas no site do themify não achei nenhum pluguin interessante a galeria deles é a padrão do WordPress será que teria como eu usar alguma outra os colegas tem alguma sugestão? 
       Vou deixar um site que o cliente deixou de modelo de como ele gostaria de que dele ficasse
       
      www.levelmont.com.br
       
      Grato pelo ajuda dos colegas.
       
       
    • By ccs
      Olá,
      Ao subir um código HTML pra internet, as imagens não aparecem. Como faço para resolver isso?
    • By chuxi
      <div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.