Última oportunidad para asegurar tu aprendizaje por 1 año a precio especial

Antes: $249

Currency
$189/año

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

0D
13H
57M
33S

¡Es tu turno: crea un tutorial!

19/24

Lectura

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

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 68

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

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

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.

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/

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

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/

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/> ![](https://static.platzi.com/media/user_upload/6B-a4dca3ed-c7b8-4075-bbd0-15e275f13f7a.jpg) 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 :)

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/

Nunca me senti tan animado a combartir un tutorial!!

Mi aporte de la clase anterior

(https://platzi.com/tutoriales/2467-frontend-developer/23917-pasos-para-implementar-el-responsive-desing-en-html/)
<https://platzi.com/tutoriales/2467-frontend-developer/29055-cardmichin/>
Les comparto mi tutorial de cómo hacer una barra de navegación básica, con ayuda de la propiedad display:flex <https://platzi.com/tutoriales/2467-frontend-developer/27900-como-hacer-una-barra-de-navegacion-con-displayflex/>
<https://platzi.com/tutoriales/2467-frontend-developer/27113-comentarios-en-html/>
<https://platzi.com/tutoriales/2467-frontend-developer/27110-como-exportar-un-tipo-de-letra-a-tu-documento-css-y-crear-una-variable-para-que-la-utilices-facilmente/> aquí esta
<https://platzi.com/tutoriales/2467-frontend-developer/27011-como-implementar-un-diseno-responsivo-en-html-y-css-2/>

No sé si será de mucha utilidad, pero es mi primer tutorial y espero que la gente pueda aprender algo. No he querido extenderlo hasta finalizar la tarjeta porque varía dependiendo de lo que busques hacer, pero doy un par de ideas.
https://rebbun.github.io/tutorial-meh/

Acá les dejo mi tutorial sobre la clase ce crear un tutorial de Responsive design, para el que le interese. <https://platzi.com/tutoriales/2467-frontend-developer/26752-como-implementar-un-diseno-responsivo-en-html-ycss/>
<https://platzi.com/clases/frontend-developer/add_contribution/>
<https://platzi.com/tutoriales/2467-frontend-developer/26258-disno-css-tipos-de-display-mas-usados/>

Te enseño a realizar la siguiente pagina web:

PD: Use mucho Bing Chat para poder realizar algunos ajustes, 100% recomendado.

Excelente idea, de hecho enseñar es una buena forma de aprender o mejor dicho, fortalecer los conocimientos!!!
📚👨🏻‍💻

Uff, vamos a ver de lo que soy capaz:

Hola, aquí mi aporte: https://platzi.com/tutoriales/2467-frontend-developer/25415-como-elaborar-un-tablero-de-ajedrez-en-html-y-css-flexbox-y-css-grid/

Es el tablero de un ajedrez implementa el css-grid y flexbox de forma básica.

Buenas he subido mi aporte del tutorial, espero que este todo en orden 😃 comparto el link: https://platzi.com/tutoriales/2467-frontend-developer/25372-tutorial-del-curso-fronted-developer-mario-castillo/

Nota: faltan las imagenes

Algo sencillo pero muy útil para el que no sabe como crear listas ordenadas: https://platzi.com/tutoriales/2467-frontend-developer/25320-como-crear-listas-en-html/

Les dejo mi aporte, un tutorial hecho en notion sobre lo que aprendimos hasta ahora que se ira actualizando.

Aquí dejo mi aporte con mucho cariño, no es mucho pero es trabajo honesto 🤠💚
Como crear una tarjeta de presentación con HTML y CSS fácil 💫🃏😎

¡Cómo hacer un meme con una mona china oriunda de México con HTML!

Programar no siempre tiene que ser una tarea formal, también podemos divertirnos. En este tutorial explicaré brevemente cómo hacer esta cosa en HTML

Primero colocamos la estructura traidiconal de HTML. Si no te la sabes solo escribe “!” en tu editor de código y pulsa Enter.

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
Justo en el meta pondremos todas nuestras características gráficas de CSS.

<style>
    section{
      width: 100%;
      display: flex;
      justify-content: center;

    }
    .card{
        width: 300px;
        height: 300px;
        background-color: rgb(249, 122, 122);
        border-radius: 20px;
        overflow: hidden;
    }
    .card img{
    width: 100%;
    }
    .card h4{
        text-align: center;
        font-size: medium;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    }

    
</style>

</head>
En el body escribiremos el texto y colocaremos la imagen. El source puede ser perfectamente desde internet.

<body>
<section>
<div class=“card”>
<img src=“https://th.bing.com/th/id/OIP.ow3tzT_nxR3mD9H8sNQnjwHaEq?pid=ImgDet&rs=1” alt="">
<h4>Jess después del jale y unos cursos, <br>
con unas chelas bien merecidas</h4>
</div>
</section>
</body>
</html>```
¡Y listo! Ya tienes tu mona china oriunda de México tomándose unas chelitas después de un largo día.

Bueno, este es mi primer tutorial y creo que tan mal no está! espero que a alguien le sirva!

Les presento el mio, es por practica uno siempre necesita presentarse. Aqui el tutorial: [(https://platzi.com/tutoriales/2467-frontend-developer/25041-tutorial-para-crear-una-tarjeta-de-presentacion-con-css-y-html/)]

Más que un tutorial, es material complementario con una explicación más detallada de las posiciones, static, relative y absolute, para entender mejor la teoría y ver ejemplos de como afectan a los elementos.
https://platzi.com/tutoriales/2467-frontend-developer/24815-explicacion-detallada-de-las-posiciones-con-css/

Fue muy interesante esta actividad, me ayudo a entender mejor todo el tema de felxbox y grid, me parece una gran actividad, este es el enlace de mi trabajo:
Abrelo, el enlace del final es un bonus sorpresa.😁👍

Este es mi pequeño-mini curso sobre responsividad, espero comentarios, gracias por leer: https://platzi.com/tutoriales/2467-frontend-developer/24325-como-crear-un-diseno-resposivo-para-tu-pagina-web/

https://platzi.com/tutoriales/2467-frontend-developer/24173-dandole-estilo-a-un-boton/
Hice un tutorial dandole estilo a un botón. Expliqué brevemente cada parte de lo que hice de modo que (como dice el texto) otra persona pueda darle su toque y mejorarlo.

Espero les guste este pequeño tutorial y les sirva de algo.

Como hacer tu página web responsiva

.