Aprende Creación de un Sitio Web Completo con HTML

Ya hemos cubierto los conceptos fundamentales de HTML y estamos listos para construir un sitio web de portafolio de una sola página desde cero.

Puedes intentar crearlo por tu cuenta o seguir esta guía paso a paso con el código para cada parte.

Guía paso a paso

1. Planificación de la estructura del sitio web

Nuestra página de portafolio incluirá:

Encabezado: título del sitio y enlaces de navegación;
Acerca de: una breve introducción sobre el propietario;
Portafolio: proyectos con imágenes, títulos y breves descripciones;
Contacto: un formulario para que los visitantes puedan comunicarse;
Pie de página: derechos de autor y enlaces de contacto/redes sociales.

2. Estructurar el contenido con HTML semántico

Crea un nuevo archivo index.html y agrega la estructura básica de HTML con <!DOCTYPE html>, <html>, <head> y <body>.

index.html

3. Sección de encabezado

Agrega un <header> con el nombre del propietario y un <nav> que contenga enlaces que lleven a las secciones Acerca de, Portafolio y Contacto.

index.html

4. Sección Acerca de

Crear una <section id="about"> con un encabezado y un breve párrafo que describa al propietario.

index.html

5. Sección de Portafolio

Agregar una <section id="portfolio"> que liste proyectos con imágenes, títulos y descripciones breves.

index.html

6. Sección de Contacto

Crear una <section id="contact"> con un formulario de contacto sencillo que recopile nombre, correo electrónico y mensaje.

index.html

7. Sección de pie de página

Finalizar la página con un <footer> que incluya texto de derechos de autor y enlaces a redes sociales, teléfono y correo electrónico.

index.html

Extra

Para hacer que la página sea más atractiva visualmente, podemos conectar un archivo CSS y estilizar nuestro HTML. CSS controla los colores, el espaciado, las fuentes y el diseño, ayudando a que la misma estructura luzca mucho más pulida.

Por ahora, simplemente compara cómo se ve la página con HTML puro y cómo cambia una vez que se aplican estilos CSS básicos.

index.html

index.css

Aquí tienes el enlace al sitio web completo que se construyó en este capítulo: Sitio web de Julia

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 5. Capítulo 4

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me the full HTML code for the portfolio website?

What are some tips for customizing the sections for my own portfolio?

How can I add more projects or sections to the website?

Desliza para mostrar el menú

Ya hemos cubierto los conceptos fundamentales de HTML y estamos listos para construir un sitio web de portafolio de una sola página desde cero.

Puedes intentar crearlo por tu cuenta o seguir esta guía paso a paso con el código para cada parte.

Guía paso a paso

1. Planificación de la estructura del sitio web

Nuestra página de portafolio incluirá:

Encabezado: título del sitio y enlaces de navegación;
Acerca de: una breve introducción sobre el propietario;
Portafolio: proyectos con imágenes, títulos y breves descripciones;
Contacto: un formulario para que los visitantes puedan comunicarse;
Pie de página: derechos de autor y enlaces de contacto/redes sociales.

2. Estructurar el contenido con HTML semántico

Crea un nuevo archivo index.html y agrega la estructura básica de HTML con <!DOCTYPE html>, <html>, <head> y <body>.

index.html

3. Sección de encabezado

Agrega un <header> con el nombre del propietario y un <nav> que contenga enlaces que lleven a las secciones Acerca de, Portafolio y Contacto.

index.html

4. Sección Acerca de

Crear una <section id="about"> con un encabezado y un breve párrafo que describa al propietario.

index.html

5. Sección de Portafolio

Agregar una <section id="portfolio"> que liste proyectos con imágenes, títulos y descripciones breves.

index.html

6. Sección de Contacto

Crear una <section id="contact"> con un formulario de contacto sencillo que recopile nombre, correo electrónico y mensaje.

index.html

7. Sección de pie de página

Finalizar la página con un <footer> que incluya texto de derechos de autor y enlaces a redes sociales, teléfono y correo electrónico.

index.html

Extra

Por ahora, simplemente compara cómo se ve la página con HTML puro y cómo cambia una vez que se aplican estilos CSS básicos.

index.html

index.css

Aquí tienes el enlace al sitio web completo que se construyó en este capítulo: Sitio web de Julia

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 5. Capítulo 4