Carlos Hernández
Me gusta la programación: comparto en mi canal de Youtube llamado YouDevs lo poco que sé sobre el tema.
Construye tu primera Web con ChatGPT y un mentor profesional
Mini Curso
¿Qué es el desarrollo web?
El desarrollo web implica la creación de sitios web para internet o una intranet.
Puede incluir desarrollo ed una simple página de texto estático, hasta aplicaciones web complejas, redes sociales, y aplicaciones de negocios
¿Qué es el desarrollo web?
Se divide en dos partes principales: el desarrollo de front-end (la parte del sitio web con la que interactúan los usuarios)
¿Qué es el desarrollo web?
El desarrollo de back-end (la parte "tras bambalinas" que maneja la lógica y la base de datos de un sitio web).
Opciones sin Codificación
Constructores de sitios web
Gestores de Contenido (CMS)
(wordpress)
(wix)
(weebly)
(squarespace)
Opciones con Codificación (guía básica)
CSS (Hojas de Estilo en Cascada) se utiliza para diseñar y presentar tu sitio web, incluyendo colores, diseños y fuentes.
HTML (Lenguaje de Marcado de Hipertexto) es el esqueleto de tu sitio web, utilizado para estructurar el contenido.
Aprender HTML y CSS
¿Cómo crear tu Sitio Web?
- HTML: Crea un archivo .html y estructura tu página con etiquetas HTML
- CSS: Crea un archivo .css para estilizar tu página, definiendo estilos para tu HTML, como colores de fondo, tipos de letra y más.
- Publicar tu Sitio Web: GitHub Pages es una opción gratuita para sitios estáticos
Hosting:
Servicio donde alojamos sitios web para publicarlos en internet
Sitio Web Estático
Página web en la que el contenido no cambia a menos que se haga manualmente.
Introducción a HTML
HTML es el lenguaje para documentos diseñados para ser mostrados en un navegador web.
Permite mezclar texto con elementos multimedia (como imágenes, videos) y definir la estructura de las páginas web.
Tu primer Documento HTML
- Vamos a crear un documento HTML básico.
- Abre un editor de texto (como Notepad en Windows, TextEdit en Mac, o cualquier otro editor de código) y escribe el siguiente código
<!DOCTYPE html> <html> <head> <title>Mi Galería de Arte</title> </head> <body> <h1>Bienvenidos a mi Galería de Arte</h1> <p>Estas son algunas de mis obras:</p> <!-- Aquí irán las imágenes de las pinturas --> </body> </html>
Fundamentos del CSS
CSS se utiliza para diseñar y mejorar la apariencia de los documentos HTML. Controla los elementos HTML, colores, tipografía, y mucho más.
Añadiendo estilos con CSS
Vamos a agregar CSS directamente en tu documento HTML para cambiar el color del texto y el fondo. Modifica tu archivo index.html para incluir una sección <style> dentro del <head> así:
<head> <style> body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; } </style> </head>
Añadiendo Imágenes y Enlaces
Para mostrar tus obras de arte, necesitarás usar la etiqueta <img> para cada imagen. También, si deseas que las personas puedan contactarte, puedes añadir un enlace usando la etiqueta <a>.
Añade esto al cuerpo (<body>) de tu documento HTML:
<img src="ruta-a-tu-imagen.jpg" alt="Descripción de la imagen"> <p>Para contactarme, por favor <a href="mailto:tu-email@example.com">envíame un email</a>.</p>
Publicando tu Sitio web
- Crea una cuenta en GitHub
- Crea un respositorio
- Dale un nombre al repo.
- Agrega una breve descripción
- Selecciona "public"
- Haz clic en "Create repository"
Sube tu Sitio Web
- Dentro de tu nuevo repositorio, haz clic en "uploading an existing file"
- Arrastra y suelta tus archivos de sitio web en la zona indicada o usa el enlace para seleccionar los archivos.
- Una vez que hayas agregado todos tus archivos, baja hasta el final de la página
- En el campo "Commit changes"
- Haz clic en "Commit changes"
Habilita GitHub Pages
- Ve a la pestaña "Settings" de tu repositorio
- Desplázate hacia abajo hasta la sección "GitHub Pages"
- En "Source", selecciona la rama a la que subiste tu sitio (usualmente
main) desde el menú desplegable. Si solo estás subiendo archivos estáticos como HTML, CSS e imágenes, déjalo en la carpeta root. - Haz clic en "Save" (Guardar).
Actualizar Tu Sitio Web
Simplemente sube los archivos modificados a tu repositorio en GitHub siguiendo los mismos pasos que usaste para subirlos inicialmente. GitHub Pages automáticamente desplegará los cambios una vez que los archivos sean subidos y confirmados
Implementar Cambios
Definamos una paleta de colores
- Fondo:
#F9F9F9(gris muy claro) - Texto Principal:
#333333(gris oscuro) - Elemento Destacado/Acento:
#E9A6A6(rosa)
Implementar Cambios
body { background-color: #F9F9F9; font-family: Arial, sans-serif; color: #333333; } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; padding: 20px; } .img-box { background-color: #fff; padding: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .img-box img { width: 100%; height: auto; display: block; } a, a:visited { color: #E9A6A6; text-decoration: none; } a:hover { text-decoration: underline; }
Para organizar imágenes en filas y columnas de tres, podemos usar CSS Flexbox o Grid.
Aquí te muestro cómo hacerlo con Grid, que es muy eficaz para este propósito:
Implementar Cambios
<div class="container"> <div class="img-box"> <img src="ruta-a-tu-imagen1.jpg" alt="Descripción de la imagen 1"> </div> <div class="img-box"> <img src="ruta-a-tu-imagen2.jpg" alt="Descripción de la imagen 2"> </div> <div class="img-box"> <img src="ruta-a-tu-imagen3.jpg" alt="Descripción de la imagen 3"> </div> <!-- Repite los divs para más imágenes, asegurándote de que cada una esté dentro de un div con clase "img-box" --> </div>
Y tu HTML debería tener una estructura similar a esta para tus imágenes:
Este código creará un contenedor con un sistema de cuadrícula donde tus imágenes se alinearán automáticamente en filas y columnas, con tres imágenes por fila.
@youdevs
¿Qué es el desarrollo web?
By Carlos Hernández
