Curso de Desarrollo Web: aprende HTML, CSS, JavaScript y desarrollo Full Stack

¿Qué es el Desarrollo Web?

El desarrollo web es el proceso de crear sitios, aplicaciones y servicios que funcionan mediante tecnologías web y pueden ser utilizados a través de un navegador.

Componentes principales

¿Qué es HTML?

HTML es el lenguaje utilizado para definir la estructura y significado del contenido de una página web.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Mi sitio web</title>
</head>

<body>

    <header>
        <h1>Mi primera página</h1>
    </header>

    <main>
        <p>Hola mundo.</p>
    </main>

</body>

</html>

Etiquetas importantes

¿Qué es CSS?

CSS permite controlar colores, tamaños, tipografías, espacios, posiciones, columnas, animaciones y adaptación de una página a diferentes pantallas.

.tarjeta {
    padding:20px;
    border:1px solid #ddd;
    border-radius:15px;
}

.tarjeta h2 {
    font-size:24px;
}

@media(max-width:600px) {

    .tarjeta {
        padding:15px;
    }

}

Conceptos fundamentales

¿Qué es JavaScript?

JavaScript es un lenguaje de programación utilizado ampliamente en aplicaciones web. En el navegador puede modificar contenido, responder a eventos, validar formularios y comunicarse con servicios externos.

const boton = document.querySelector('#boton');

boton.addEventListener('click', function () {

    alert('¡Hola desde JavaScript!');

});

Fundamentos que debes dominar

• Variables y constantes.
• Tipos de datos.
• Operadores.
• Condicionales.
• Bucles.
• Funciones.
• Arrays y objetos.
• Eventos.
• DOM.
• Asincronía.

Bootstrap proporciona componentes, clases utilitarias y un sistema de columnas que permiten construir interfaces responsive con mayor rapidez.

¿Y qué ocurre con jQuery?

jQuery fue durante años una de las bibliotecas JavaScript más utilizadas para manipular el DOM, eventos y solicitudes AJAX. Todavía puede aparecer en proyectos existentes, aunque muchas tareas pueden realizarse actualmente con JavaScript nativo.

Formularios

Los formularios permiten recopilar información introducida por el usuario: nombres, correos, búsquedas, registros, pedidos y otros tipos de datos.

Consumir una API

fetch('/api/productos')
    .then(response => response.json())
    .then(data => {

        console.log(data);

    })
    .catch(error => {

        console.error(error);

    });

¿Qué es Node.js?

Node.js permite ejecutar JavaScript fuera del navegador y puede utilizarse para crear servidores, herramientas y aplicaciones backend.

¿Qué es Express?

Express es un framework para Node.js que facilita la creación de servidores y rutas HTTP.

const express = require('express');

const app = express();

app.get('/', (req, res) => {

    res.send('Hola desde el servidor');

});

app.listen(3000);

Flujo de desarrollo

Conceptos que deberías conocer

Checklist antes de publicar