Hoja de Trucos de Desarrollo Web

Descargar PDF

Aprenda Desarrollo Web con Laboratorios Prácticos

Aprenda desarrollo web a través de laboratorios prácticos y escenarios del mundo real. LabEx ofrece cursos completos de desarrollo web que cubren HTML, CSS, JavaScript, manipulación del DOM y diseño responsivo esenciales. Domine la creación de sitios web interactivos y responsivos para flujos de trabajo de desarrollo web modernos.

Fundamentos de HTML y Estructura del Documento

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

Cree la base de cada 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>

Utilice elementos semánticos HTML5 significativos para una mejor estructura.

<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

Inicia sesión para responder este quiz y rastrear tu progreso de aprendizaje

¿Cuál es el principal beneficio de usar elementos HTML semánticos como header, main y footer?
Hacen que la página se cargue más rápido
Mejoran la accesibilidad y el SEO al proporcionar significado a la estructura
Estilizan la página automáticamente
Son necesarios para que JavaScript funcione

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

Estructure el contenido con una jerarquía de encabezados y párrafos adecuados.

<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>

Cree listas organizadas de información.

<!-- 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>

Imágenes y Medios: <img> / <video> / <audio>

Incruste contenido multimedia con los atributos adecuados.

<!-- 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>

Tablas: <table> / <tr> / <td>

Muestre datos tabulares con la estructura correcta.

<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>

Formularios y Entrada de Usuario

Estructura del Formulario: <form>

Cree el contenedor para las entradas y controles del usuario.

<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"

Utilice los tipos de entrada apropiados para diferentes datos.

<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 Formulario: <select> / <textarea>

Proporcione varias formas para que los usuarios ingresen información.

<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 y Estilismo

Selectores CSS: element / .class / #id

Seleccione elementos HTML para estilizar con diferentes tipos de selectores.

/* 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;
}

Modelo de Caja (Box Model): margin / padding / border

Controle el espaciado y el diseño con el modelo de caja 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

Inicia sesión para responder este quiz y rastrear tu progreso de aprendizaje

¿Cuál es la diferencia entre margin y padding en CSS?
No hay diferencia
Margin es el espacio fuera del elemento, padding es el espacio dentro del elemento
Margin es para espaciado horizontal, padding es para espaciado vertical
Margin es para bordes, padding es para contenido

Flexbox: display: flex

Cree diseños flexibles y responsivos fácilmente.

.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

Inicia sesión para responder este quiz y rastrear tu progreso de aprendizaje

¿Qué hace justify-content: center en Flexbox?
Centra los elementos flex a lo largo del eje principal (horizontal por defecto)
Centra los elementos verticalmente
Distribuye los elementos uniformemente
Estira los elementos para llenar el espacio

Diseño de Cuadrícula (Grid Layout): display: grid

Cree diseños bidimensionales complejos.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  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;
}

Fundamentos de JavaScript y Programación

Variables: let / const / var

Almacene y manipule datos con diferentes declaraciones de variables.

// 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',
}

Funciones: function / Arrow Functions

Cree bloques de código reutilizables con diferente sintaxis de funciones.

// 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 el flujo del programa con sentencias condicionales.

// 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')
}

Bucles (Loops): for / while / Array Methods

Itere a través de datos y repita operaciones.

// 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)

Manipulación del DOM y Eventos

Selección de Elementos: querySelector / getElementById

Encuentre y acceda a elementos HTML en 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'
}

Modificación de Contenido: innerHTML / textContent

Cambie el contenido y los atributos de los 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')

Manejo de Eventos: addEventListener

Responda a las interacciones del usuario y a los eventos del 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')
  }
})

Creación de Elementos: createElement / appendChild

Cree dinámicamente y agregue nuevos 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()

Diseño Responsivo y Consultas de Medios CSS

Etiqueta Meta Viewport: viewport

Configure el viewport adecuado para el diseño 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;
}

Consultas de Medios (Media Queries): @media

Aplique diferentes estilos basados en el tamaño de la pantalla y las capacidades del 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 Flexibles: rem / em / % / vw / vh

Utilice unidades relativas para diseños escalables y 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 */
}

Tipografía Responsiva: clamp()

Cree tipografía fluida que escale con el tamaño de la pantalla.

/* 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;
  }
}

Depuración y Herramientas de Desarrollador del Navegador

Métodos de Consola: console.log() / console.error()

Depure y monitoree su código con la salida de la consola.

// 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 Depuración: debugger / Breakpoints

Pause la ejecución del código para inspeccionar variables y el estado del 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 del Navegador: Elements / Console / Network

Utilice las herramientas del navegador para inspeccionar HTML, depurar JavaScript y monitorear solicitudes de red.

// 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 Error: TypeError / ReferenceError

Comprenda los errores comunes de JavaScript y cómo solucionarlos.

Enlaces Relevantes

Página anteriorMatplotlibPágina siguienteHTML