Creación de Tutoriales para Compartir Conocimientos

Clase 19 de 24 • Curso de Frontend Developer

👉 ¡Nada demuestra mejor que sabes algo cuando logras explicárselo a otra persona! Así que es hora de ponerte a prueba 💯

Estás listo y lista para compartir con la comunidad lo que sabes y validar lo aprendido en este curso ¡Y la mejor forma de hacerlo es creando tu tutorial! Antes de contarte cómo hacerlo, quiero explicarte qué es un tutorial:

¿Qué es? ✍️

¡Cuenta cómo lo hiciste, no qué hiciste!

Un tutorial es el paso a paso para alcanzar un objetivo sin que el resultado tenga que ser el mismo: ¡La magia está en el proceso, no en el resultado! Cuando explicas cómo hiciste algo, ayudas a otros a tener nuevas habilidades o lograrlo de una mejor manera.

Eso sí, no intentes explicar más de una cosa en un mismo tutorial. Ten en cuenta que un tutorial no es un resumen, manual o documento de preguntas frecuentes.

¿Para qué hacerlo? 👏

Inspira a otros Es real la satisfacción que sientes al impactar a los demás. Comparte ese proceso que fue ganador y retador para ti, y que ahora le sirve a otra persona para ser más productiva, a ahorrar tiempo o simplemente a ver algo desde otra perspectiva.

Confía en tus capacidades ¡Mídete contándoselo a alguien más! Si logras acotarlo, ejemplificarlo, asociarlo a otras posibles situaciones y en este caso dar una guía desde tu propia experiencia, estás un paso más adelante.

Aprende más de lo que compartes Recuerda que no hay una única forma para hacer las cosas y tú también te llevas algo de la comunidad: aportes, preguntas y otras formas de probarlo. Si ya sabes hacerlo, ¿cómo consigues que otro lo intente? Ahí está la clave de tu creatividad, explota tu curiosidad y reta a los demás.

¡Ahora es tu turno!

Seguro ya has puesto en práctica algunos de los aprendizajes del curso. Y quiero que nos cuentes qué pasos seguiste para que otros también lo prueben.

Estos son algunos temas propuestos para crear tu tutorial. No te limites, ¡propón el tuyo!

Cómo implementar un diseño responsivo
Cómo usar etiquetas de HTML en maquetación de una página web.

Crea el tutorial aquí y comparte el enlace en los comentarios de esta clase. Ten en cuenta:

Título del tutorial y una breve introducción para enganchar. Con esto quien lo lee sabrá si es o no de su interés. Te recomiendo iniciar el título con la palabra cómo. También puedes agregar qué requisitos se necesitan para hacerlo ej, un programa especial.
Título y descripción del paso a paso. Sé directo y conciso. Puedes acompañarlo con imágenes, enlaces o ejemplos. Ve en orden y ponte en los zapatos del otro; piensa cómo irá avanzando en la medida en que te lee.

Te comparto ejemplos base que pueden darte algunas ideas: Cómo mostrar resultado de un evento de JavaScript en el documento HTML Cómo puedes dar formato a tus textos dentro de la plataforma

¡Queremos aprende de ti! 💚

juan luis nieto santamaria

student•

Hola! Como están?

subo este pequeño formulario, como una pantalla de inicio para algunos sitios web con usuario y contraseña, cualquier sugerencia o aporte será bien recibida, espero les guste!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        .container img{
            height: 660px;
            width: 1335px;
            background-position: cover;
            position: relative;
            border-radius: 10px;
            
        }
        form{
            color: black;
            font-size: 10px;
            text-align: center;
            margin-top: 0px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container" ><img src="img/pexels-simon73-1323550.jpg" alt="mountains">
    </div>
    <form action="" class="form">
        <h2>Formulario</h2>
        <input type="text" placeholder="Nombre">
        <input type="text" placeholder="Primer Apellido">
        <input type="text" placeholder="Segundo Apellido">
        <input type="text" placeholder="Correo">
        <input type="text" placeholder="Contraseña">
        <input type="text" placeholder="Repetir contraseña">
        <input type="submit" value="Enviar"> 
</body>
</html>
```\<!DOCTYPE html>\<html lang="en">\<head>    \<meta charset="UTF-8">    \<meta name="viewport" content="width=device-width, initial-scale=1.0">    \<title>Document\</title>    \<style>                .container img{            height: 660px;            width: 1335px;            background-position: cover;            position: relative;            border-radius: 10px;                    }        form{            color: black;            font-size: 10px;            text-align: center;            margin-top: 0px;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);        }    \</style>\</head>\<body>    \<div class="container" >\<img src="img/pexels-simon73-1323550.jpg" alt="mountains">    \</div>    \<form action="" class="form">        \<h2>Formulario\</h2>        \<input type="text" placeholder="Nombre">        \<input type="text" placeholder="Primer Apellido">        \<input type="text" placeholder="Segundo Apellido">        \<input type="text" placeholder="Correo">        \<input type="text" placeholder="Contraseña">        \<input type="text" placeholder="Repetir contraseña">        \<input type="submit" value="Enviar"> \</body>\</html>

Sebastian Ariza

Daniel Reymundo

Nilson .

Elias Rodas

Camilo Andrés Pedroza Mesa

Nahuel Campos Salazar

Mauricio Robledo

Cristian Perdiz

Marcos Monteverde

Andrea Stephania Garcia Castillo

Nisser Olivo

Camila León Home

Fredy Gutiérrez Vazquez

Miguel Angel Barron Vallejo

JUAN DAVID RINCON

Marcos Nabukodonosor

Abraham Alanya

Nahuel Seoane

Miguel Jonathan Madrigal González

Manuela Sanchez Gómez

ANDRO CARDENAS VARGAS

Carlos Guzman

Creación de Tutoriales para Compartir Conocimientos

Introducción al desarrollo frontend

Fundamentos de HTML y CSS para Desarrolladores Frontend

¿Qué es HTML?

Motores de Renderizado en Navegadores: Funcionamiento y Etapas

Maquetación con HTML

Anatomía y Estructura de Documentos HTML

HTML Semántico: Mejora la Accesibilidad y SEO de tu Web

Etiquetas HTML esenciales para estructurar una página web

Maquetación con CSS

Anatomía de una Declaración CSS: Selectores y Sintaxis Básica

Selectores CSS: básicos y combinadores

Selectores CSS: Pseudo Clases y Pseudo Elementos

Cascada y Especificidad en CSS: Domina el Orden y Prioridad de Estilos

Tipos de Display en CSS: Inline, Bloque e Inline-Block

Flexbox y CSS Grid: Fundamentos y Aplicaciones Prácticas

Modelo de Caja en CSS: Propiedades y Uso Práctico

Colapso de márgenes en CSS: Bloques, Flexbox y Grid

Tipos de posicionamiento en CSS: Relative, Absolute, Fixed y Sticky

Z-Index y Contexto de Apilamiento en HTML/CSS

Propiedades CSS más utilizadas en diseño web

Diseño responsivo

Unidades de Medida en CSS: Absolutas y Relativas

Creación de Tutoriales para Compartir Conocimientos

Media Queries y Diseño Responsivo en CSS

Arquitecturas en CSS

Arquitecturas CSS: Mejora de Legibilidad y Mantenibilidad del Código

Metodologías de CSS: OOCSS, VEM, SMACS y Atomic Design

Próximos pasos

CSS para Entrevistas y Mundo Laboral

HTML y CSS: Fundamentos Esenciales para Frontend Developer