Creación de Tutoriales para Compartir Conocimientos

Clase 19 de 24 • Curso de Frontend Developer

Contenido del curso

Introducción al desarrollo frontend

Maquetación con HTML

Maquetación con CSS

Diseño responsivo

Arquitecturas en CSS

Próximos pasos

Tomar examen

👉 ¡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! 💚

Comentarios

Sebastian Ariza

student•

Trate de hacer un mini tutorial con html y css sobre el posicionamiento en css

Daniel Reymundo

student•

Muy buen aporte

Nilson .

student•

Buena..

Elias Rodas

student•

Bueno me dure más de una hora escribiendo un tutorial pero por alguna extraña razón le doy a el botón de publicar y no se publica, dejo la imagen y el titulo al menos 🥴

Maquetación web con CSS GRID

Camilo Andrés Pedroza Mesa

student•

Hago mi pequeño aporte, hasta hora soy un principiante sin embargo me enorgullece mis resultados. Tutorial de como crear una tarjeta similar a esta.

Daniel Reymundo

student•

Genial aporte

Nahuel Campos Salazar

student•

Muy buen aporte, me gusto mucho

Mauricio Robledo

student•

Hola compañeros, le dejo mi tutorial para construir la apariencia gráfica de un piano.

https://platzi.com/tutoriales/2467-frontend-developer/27048-crea-un-piano-con-botones-usando-html-y-css/

Aunque es algo sencillo me siento orgulloso de haberlo logrado, pues para ello tuve que además aprender un par de cosas por mi cuenta :)

Cristian Perdiz

student•

Espero les guste!

Me parece una buena idea diagramar los espacios con sus nombres y colores distintos en estructuras muy utilizadas. Creo que éste es un buen punto de apertura para comenzar a esquematizar nuestras presentaciones.

https://platzi.com/tutoriales/2467-frontend-developer/24549-diseno-responsive-con-flex-y-grid-inspirado-en-tutoriales-externos/

Marcos Monteverde

student•

Es mi primer tutorial, no esta muy elaborado. Aqui se los dejo: Tutorial: Como crear una tarjeta personal con HTML y CSS

Andrea Stephania Garcia Castillo

student•

Hola! Dejo el enlace de mi tutorial. https://platzi.com/tutoriales/2467-frontend-developer/33883-aprendiendo-frontend-y-hiragana/

Mi tutorial consiste en la creación de una tabla de hiragana, el cuál es un silabario japonés. Quise realizar este proyecto con la finalidad de unir dos materias las cuales estudio, el japonés y frontend.

Espero que les guste.

Nisser Olivo

student•

saludos amigos! por aca dejo un pequeño tutorial pero bastante explicito del manejo responsivo con css. espero les sirva, porfa denle like!

https://platzi.com/tutoriales/2467-frontend-developer/23876-como-crear-una-pagina-web-con-diseno-responsivo/

Daniel Reymundo

student•

Muchas gracias.

Camila León Home

student•

yo hice esto con ayuda del curso gratis de programación básica...obvio me apoyé mucho siguiendo solo instrucciones pero luego quise innovar, y con mi poco conocimiento y ayuda de chat gpt para aprender logré esto (no está terminado, por esto estoy tomando este curso)

los animo! No soy profesional y pude hacer eso sin apoyarme completamente en un curso o en la IA!!

No se desanimen solo intenten y si no entienden algo busquen y practiquen.

No paren de aprender nunca <3

Fredy Gutiérrez Vazquez

student•

Este es el tutorial que yo realice, no muy bien elaborado, pero hice lo que pude.

Miguel Angel Barron Vallejo

student•

https://platzi.com/tutoriales/2467-frontend-developer/23653-tutorial-de-diseno-responsivo-2/

JUAN DAVID RINCON

student•

Hola, aquí esta mi tutorial le puse mucho amor para que todos puedan entender y talvez a alguien le ayude https://platzi.com/tutoriales/2467-frontend-developer/38164-tutorial-crear-una-tarjeta-de-bingo-con-html-y-css/

Aquí esta el resultado final, mi toque adicional fue ponerle la marca, no tuve mas ideas, pensé en lo mas común xd

Marcos Nabukodonosor

student•

Mi tutorial no se colocar el link corto aqui https://platzi.com/tutoriales/2467-frontend-developer/38296-ejemplo-practico-de-como-crear-una-card-con-estilo-neomorfismo/

Abraham Alanya

student•

Tutorial

https://platzi.com/tutoriales/2467-frontend-developer/24895-como-crear-un-tarjeta-de-presentacion-con-html-y-css/

Resultado Final:

Nahuel Seoane

student•

Bueno dejo el intento de mi tutorial. Justo venía de hacer la tarjeta así que hice un resumen muy básico de ella. Saludos https://platzi.com/tutoriales/2467-frontend-developer/25725-card-presentation-2/

Miguel Jonathan Madrigal González

student•

Les comparto mi tutorial, es sobre como crear una flipcard con html y css.

https://platzi.com/tutoriales/2467-frontend-developer/41621-como-crear-una-flipcard-con-html-y-css/

Miguel Jonathan Madrigal González

student•

Miguel Jonathan Madrigal González

student•

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>

Manuela Sanchez Gómez

student•

Hola, este es mi tutorial de como hacer la portada de una landing page, pequeño pero con mucho amor. 💚

https://platzi.com/tutoriales/2467-frontend-developer/41331-como-crear-la-portada-de-una-landing-page/

ANDRO CARDENAS VARGAS

student•

aquí la muestra del resultado final, de lo que hice, es una galería de imágenes RESPONSIVE usando html, css y flex-box... así.👇

aqui el link para que le den un vistazo... <u>https://platzi.com/tutoriales/2467-frontend-developer/41134-como-crear-una-galeria-de-imagenes-responsive-con-html-y-css-sencillo-usando-flex-box/</u>

Carlos Guzman

student•

Hize Mi Pequeño Aporte Haciendo Un Tutorial:

https://platzi.com/tutoriales/2467-frontend-developer/39353-como-crear-unas-tarjetas-con-tablas-explicando-las-etiquetas-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>
```\<!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>

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