Folha de Dicas de Desenvolvimento Web

Baixar PDF

Aprenda Desenvolvimento Web com Laboratórios Práticos

Aprenda desenvolvimento web através de laboratórios práticos e cenários do mundo real. O LabEx oferece cursos abrangentes de desenvolvimento web cobrindo HTML, CSS, JavaScript, manipulação de DOM e design responsivo essenciais. Domine a construção de sites interativos e responsivos para fluxos de trabalho modernos de desenvolvimento web.

Fundamentos de HTML e Estrutura de Documentos

Estrutura Básica de HTML: <!DOCTYPE html>

Crie a base de toda página web.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="script.js"></script>
  </body>
</html>

Use elementos semânticos HTML5 significativos para melhor estrutura.

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h1>Welcome</h1>
    <p>Main content here</p>
  </section>
</main>
<footer>
  <p>© 2024 My Website</p>
</footer>
Quiz

Faça login para responder este quiz e acompanhar seu progresso de aprendizagem

Qual é o principal benefício de usar elementos HTML semânticos como header, main e footer?
Eles fazem a página carregar mais rápido
Eles melhoram a acessibilidade e o SEO ao fornecer significado à estrutura
Eles estilam a página automaticamente
Eles são necessários para o JavaScript funcionar

Elementos de Texto: <h1> a <h6> / <p>

Estruture o conteúdo com hierarquia de títulos e parágrafos adequados.

<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<p>
  This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.
</p>
<p>Another paragraph with a <a href="https://example.com">link</a>.</p>

Listas: <ul> / <ol> / <li>

Crie listas organizadas de informações.

<!-- Unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

Imagens e Mídia: <img> / <video> / <audio>

Incorpore conteúdo multimídia com atributos apropriados.

<!-- Image with alt text -->
<img src="image.jpg" alt="Description of image" width="300" />

<!-- Video element -->
<video controls width="400">
  <source src="video.mp4" type="video/mp4" />
  Your browser doesn't support video.
</video>

<!-- Audio element -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
</audio>

Tabelas: <table> / <tr> / <td>

Exiba dados tabulares com a estrutura correta.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>

Formulários e Entrada do Usuário

Estrutura do Formulário: <form>

Crie o contêiner para entradas e controles do usuário.

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <button type="submit">Submit</button>
</form>

Tipos de Entrada: type="text" / type="email"

Use tipos de entrada apropriados para diferentes dados.

<input type="text" placeholder="Enter your name" />
<input type="email" placeholder="email@example.com" />
<input type="password" placeholder="Password" />
<input type="number" min="1" max="100" />
<input type="date" />
<input type="checkbox" id="agree" />
<input type="radio" name="gender" value="male" />
<input type="file" accept=".jpg,.png" />

Controles de Formulário: <select> / <textarea>

Forneça várias maneiras para os usuários inserirem informações.

<select name="country" id="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

<textarea
  name="message"
  rows="4"
  cols="50"
  placeholder="Enter your message"
></textarea>

Fundamentos de CSS e Estilização

Seletores CSS: element / .class / #id

Mire em elementos HTML para estilização com diferentes tipos de seletores.

/* Element selector */
h1 {
  color: blue;
  font-size: 2rem;
}

/* Class selector */
.highlight {
  background-color: yellow;
  padding: 10px;
}

/* ID selector */
#header {
  background-color: navy;
  color: white;
}

/* Descendant selector */
.container p {
  line-height: 1.6;
}

Box Model: margin / padding / border

Controle o espaçamento e o layout com o box model CSS.

.box {
  width: 300px;
  height: 200px;
  margin: 20px; /* Outside spacing */
  padding: 15px; /* Inside spacing */
  border: 2px solid black; /* Border properties */
}

/* Shorthand properties */
.element {
  margin: 10px 20px; /* top/bottom left/right */
  padding: 10px 15px 20px 25px; /* top right bottom left */
  border-radius: 5px; /* Rounded corners */
}
Quiz

Faça login para responder este quiz e acompanhar seu progresso de aprendizagem

Qual é a diferença entre margin e padding em CSS?
Não há diferença
Margin é o espaço fora do elemento, padding é o espaço dentro do elemento
Margin é para espaçamento horizontal, padding é para espaçamento vertical
Margin é para bordas, padding é para conteúdo

Flexbox: display: flex

Crie layouts flexíveis e responsivos facilmente.

.container {
  display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
  gap: 20px; /* Space between items */
}

.flex-item {
  flex: 1; /* Equal width items */
}

/* Flexbox direction */
.column-layout {
  display: flex;
  flex-direction: column;
}
Quiz

Faça login para responder este quiz e acompanhar seu progresso de aprendizagem

O que justify-content: center faz no Flexbox?
Centraliza os itens flex ao longo do eixo principal (horizontalmente por padrão)
Centraliza os itens verticalmente
Espaça os itens uniformemente
Estica os itens para preencher o espaço

Grid Layout: display: grid

Crie layouts bidimensionais complexos.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-gap: 20px;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}

Noções Básicas de JavaScript e Fundamentos de Programação

Variáveis: let / const / var

Armazene e manipule dados com diferentes declarações de variáveis.

// Modern variable declarations
let name = 'John' // Can be reassigned
const age = 25 // Cannot be reassigned
const colors = ['red', 'blue'] // Array (contents can change)

// Variable types
let message = 'Hello World' // String
let count = 42 // Number
let isActive = true // Boolean
let data = null // Null
let user = {
  // Object
  name: 'Alice',
  email: 'alice@example.com',
}

Funções: function / Arrow Functions

Crie blocos de código reutilizáveis com diferentes sintaxes de função.

// Function declaration
function greet(name) {
  return `Hello, ${name}!`
}

// Arrow function
const add = (a, b) => a + b

// Arrow function with block
const calculateArea = (width, height) => {
  const area = width * height
  return area
}

// Function with default parameters
function createUser(name, age = 18) {
  return { name, age }
}

Lógica Condicional: if / else / switch

Controle o fluxo do programa com instruções condicionais.

// If/else statement
if (age >= 18) {
  console.log('Adult')
} else if (age >= 13) {
  console.log('Teenager')
} else {
  console.log('Child')
}

// Ternary operator
const status = age >= 18 ? 'adult' : 'minor'

// Switch statement
switch (day) {
  case 'Monday':
    console.log('Start of work week')
    break
  case 'Friday':
    console.log('TGIF!')
    break
  default:
    console.log('Regular day')
}

Loops: for / while / Array Methods

Itere sobre dados e repita operações.

// For loop
for (let i = 0; i < 5; i++) {
  console.log(i)
}

// For...of loop
for (const item of items) {
  console.log(item)
}

// Array methods
const numbers = [1, 2, 3, 4, 5]
numbers.forEach((num) => console.log(num))
const doubled = numbers.map((num) => num * 2)
const evens = numbers.filter((num) => num % 2 === 0)
const sum = numbers.reduce((total, num) => total + num, 0)

Manipulação do DOM e Eventos

Seleção de Elementos: querySelector / getElementById

Encontre e acesse elementos HTML em JavaScript.

// Select single elements
const title = document.getElementById('title')
const button = document.querySelector('.btn')
const firstParagraph = document.querySelector('p')

// Select multiple elements
const allButtons = document.querySelectorAll('.btn')
const allParagraphs = document.getElementsByTagName('p')

// Check if element exists
if (button) {
  button.style.color = 'blue'
}

Modificação de Conteúdo: innerHTML / textContent

Altere o conteúdo e os atributos dos elementos HTML.

// Change text content
title.textContent = 'New Title'
title.innerHTML = '<strong>Bold Title</strong>'

// Modify attributes
button.setAttribute('disabled', 'true')
const src = image.getAttribute('src')

// Add/remove classes
button.classList.add('active')
button.classList.remove('hidden')
button.classList.toggle('highlighted')

Manipulação de Eventos: addEventListener

Responda às interações do usuário e aos eventos do navegador.

// Click event
button.addEventListener('click', function () {
  alert('Button clicked!')
})

// Form submit event
form.addEventListener('submit', function (e) {
  e.preventDefault() // Prevent form submission
  const formData = new FormData(form)
  console.log(formData.get('username'))
})

// Keyboard events
document.addEventListener('keydown', function (e) {
  if (e.key === 'Enter') {
    console.log('Enter key pressed')
  }
})

Criação de Elementos: createElement / appendChild

Crie e adicione dinamicamente novos elementos HTML.

// Create new element
const newDiv = document.createElement('div')
newDiv.textContent = 'New content'
newDiv.className = 'highlight'
// Add to page
document.body.appendChild(newDiv)

// Create list item
const li = document.createElement('li')
li.innerHTML = "<a href='#'>New Link</a>"
document.querySelector('ul').appendChild(li)

// Remove element
const oldElement = document.querySelector('.remove-me')
oldElement.remove()

Design Responsivo e Media Queries CSS

Meta Tag Viewport: viewport

Configure o viewport apropriado para design responsivo.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

/* CSS for responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

Media Queries: @media

Aplique estilos diferentes com base no tamanho da tela e nas capacidades do dispositivo.

/* Mobile first approach */
.grid {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 20px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
  }
}

Unidades Flexíveis: rem / em / % / vw / vh

Use unidades relativas para designs escaláveis e responsivos.

/* Relative to root font-size */
h1 {
  font-size: 2rem;
} /* 32px if root is 16px */

/* Relative to parent font-size */
p {
  font-size: 1.2em;
} /* 1.2 times parent size */

/* Percentage based */
.sidebar {
  width: 30%;
} /* 30% of parent width */

/* Viewport units */
.hero {
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
}

Tipografia Responsiva: clamp()

Crie tipografia fluida que escala com o tamanho da tela.

/* Fluid typography */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Min: 1.5rem, Preferred: 4vw, Max: 3rem */
}

/* Responsive spacing */
.section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 3rem);
}

/* Container queries (newer browsers) */
@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Depuração e Ferramentas do Desenvolvedor do Navegador

Métodos do Console: console.log() / console.error()

Depure e monitore seu código com saída de console.

// Basic logging
console.log('Hello, world!')
console.log('User data:', userData)

// Different log levels
console.info('Information message')
console.warn('Warning message')
console.error('Error message')

// Grouping logs
console.group('User Details')
console.log('Name:', user.name)
console.log('Email:', user.email)
console.groupEnd()

Técnicas de Depuração: debugger / Breakpoints

Pause a execução do código para inspecionar variáveis e o estado do programa.

function calculateTotal(items) {
  let total = 0
  debugger // Code will pause here when dev tools open

  for (let item of items) {
    total += item.price
    console.log('Current total:', total)
  }
  return total
}

// Error handling
try {
  const result = riskyFunction()
} catch (error) {
  console.error('Error occurred:', error.message)
}

DevTools do Navegador: Elements / Console / Network

Use ferramentas do navegador para inspecionar HTML, depurar JavaScript e monitorar solicitações de rede.

// Inspect elements in console
$0 // Currently selected element in Elements tab
$1 // Previously selected element

// Query elements from console
$('selector') // Same as document.querySelector
$$('selector') // Same as document.querySelectorAll

// Monitor functions
monitor(functionName) // Log when function is called

// Performance timing
console.time('operation')
// ... some code ...
console.timeEnd('operation')

// Common errors and solutions
// ReferenceError: Variable not defined
// console.log(undefinedVariable); //

Tipos de Erro: TypeError / ReferenceError

Entenda erros comuns de JavaScript e como corrigi-los.

Página anteriorMatplotlibPróxima páginaHTML