¡Crea y Publica Tu Web con HTML en 15 Minutos! Sin Saber Programar

Crear tu propia página web puede parecer una tarea compleja, especialmente si no tienes experiencia previa en programación. Sin embargo, con las herramientas adecuadas y una guía paso a paso, puedes tener tu sitio en línea en menos de 15 minutos. Hoy, utilizando Visual Studio Code y Pico CSS, un marco de trabajo CSS ligero, te mostraré cómo lograrlo.

Paso 1: Preparación del Entorno de Desarrollo

Lo primero y más recomendable es instalar Visual Studio Code. Es un editor de código fuente ligero pero potente que soporta múltiples lenguajes de programación. Una vez instalado, es útil agregar la extensión ‘Live Server’, que permitirá que tu página se actualice automáticamente con cada cambio que realices.

Paso 2: Creando los Archivos Necesarios

El núcleo de una página web se compone de tres tipos de archivos:

HTML: Contiene el contenido de tu sitio.
CSS: Define el estilo de tu página (por defecto usaremos PicoCSS así que solo lo usaremos si queremos modificar algo de este).
JavaScript (JS): Añade interactividad (este lo usaremos muy poco o nada en este tutorial básico).

Crea una carpeta en tu ordenador donde guardarás todos estos archivos. Dentro de esta carpeta, crea un archivo llamado index.html y otro llamado styles.css. Además, crea una subcarpeta para imágenes.

Paso 3: Estructura Básica de una Página HTML

Abre tu archivo index.html con Visual Studio Code y comienza a estructurar tu página. Un documento HTML básico tiene esta estructura:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de tu página</title>
</head>
<body>
    <section>
        <div class="container">
            <article>
                <div class="grid">
                    <div>
                        <h1>FULL STACK DEVELOPER</h1>
                        <h3>MAROWARTH DEV</h3>
                        <p>Llevo 12 años desarrollando software con la misma pasion y curiosidades que el primer día.
                            Ahora he decidido empezar a crear contenido multimedia para diferentes redes con el fin de
                            poder ayudar aunque sea
                            solo un poco a otros. Si con lo que aporto puedo ayudar a una sola persona ya me doy por
                            satisfecho!!!</p>
                    </div>
                    <img src="Assets\Img\marowarthdev.jpg" alt="Marowarth Dev">
                </div>
            </article>
        </div>
    </section>
</body>
</html>

Usa etiquetas como <section>, <div>, <p>, y <img> para organizar el contenido. Recuerda que cada etiqueta tiene un propósito específico que ayuda a los navegadores a interpretar el contenido adecuadamente.

Paso 4: Introducción a Pico CSS

Para dar estilo a tu página, usaremos Pico CSS. Es un framework CSS que permite implementar un diseño atractivo de forma sencilla y rápida. Añade Pico CSS a tu proyecto con un simple enlace en el <head> de tu documento HTML:

<link rel="stylesheet" href="https://unpkg.com/pico.css">

Paso 5: Publicación Gratuita

Una vez que tu página esté lista, es hora de publicarla. Puedes usar plataformas como GitHub Pages o Netlify. Estos servicios ofrecen hospedaje gratuito y son relativamente sencillos de configurar. Simplemente sube tu carpeta al repositorio y sigue las instrucciones para desplegar tu sitio.

Paso 6: Publica tu Sitio Web en GitHub

Publicar tu página web en GitHub es un proceso sencillo y efectivo. A continuación, te explico cómo hacerlo paso a paso:

Crear un Repositorio en GitHub

Registro en GitHub: Si aún no tienes cuenta en GitHub, crea una gratuitamente en github.com.
Crear un Nuevo Repositorio: Una vez en tu cuenta de GitHub, ve a tus repositorios y haz clic en «Nuevo». Asigna un nombre a tu repositorio y decide si quieres que sea público o privado.
Configuración del Repositorio: Después de crear tu repositorio, tendrás la opción de subir tus archivos directamente desde la interfaz web o configurarlo para trabajar desde tu escritorio.

Subir Archivos Usando GitHub Desktop

Instalar GitHub Desktop: Descarga e instala GitHub Desktop desde desktop.github.com. Esta herramienta facilita la sincronización de tus archivos locales con GitHub sin necesidad de comandos complejos.
Configuración Local: Abre GitHub Desktop, selecciona «Add Local Repository» y ubica la carpeta de tu proyecto. Si recién creas el repositorio, puedes clonar el repositorio vacío y copiar tus archivos de proyecto allí.
Subir los Archivos: Asegúrate de que todos los archivos estén en la carpeta correcta, añade un mensaje de «commit» que describa los cambios o la adición que estás realizando, y selecciona «Commit to main». Luego, haz clic en «Publish branch» para subir tus archivos al repositorio de GitHub.

Publicación Usando GitHub Pages

Activar GitHub Pages: En tu repositorio en GitHub, ve a «Settings», busca la sección «Pages», selecciona la rama principal como fuente y guarda los cambios.
Acceder a Tu Sitio: Una vez configurado, GitHub te proporcionará una URL bajo el dominio github.io donde estará disponible tu página. Puedes acceder a esta URL para ver tu sitio web en vivo.

Enlace al proyecto