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
Introducción al desarrollo frontend
Inicia tu camino como frontend developer
¿Qué es HTML y CSS? ¿Para qué sirven?
Motores de render: de archivos a píxeles
Quiz: Introducción al desarrollo frontend
Maquetación con HTML
Anatomía de un documento HTML y sus elementos
¿Qué es HTML semántico?
Etiquetas de HTML más usadas
Maquetación con CSS
Anatomía de una declaración CSS: selectores, propiedades y valores
Tipos de selectores: básicos y combinadores
Tipos de selectores: pseudoclases y pseudoelementos
Cascada y especificidad en CSS
Tipos de display más usados: block, inline e inline-block
Tipos de display más usados: flexbox y CSS grid
Modelo de caja
Colapso de márgenes
Posicionamiento en CSS
Z-index y el contexto de apilamiento
Propiedades y valores de CSS más usados
Diseño responsivo
Unidades de medida
¡Es tu turno: crea un tutorial!
Responsive Design
Quiz: Diseño responsivo
Arquitecturas en CSS
¿Qué son las arquitecturas CSS? ¿Para qué sirven?
OOCSS, BEM, SMACSS, ITCSS y Atomic Design
Quiz: Arquitecturas en CSS
Próximos pasos
CSS para entrevistas y mundo laboral
Continúa con el Curso Práctico de Frontend Developer
👉 ¡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 115
Preguntas 5
Ordenar por:
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.
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 :)
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.
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!
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.
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
![]()
Hola yo decidi hacer el concepto de las piezas de ajedrez y la teoria de su posicion en las casillas de ajedrez use un poquito de javascript y les dejo mi codigo tambien si gustan.
aqui el codigo:
<https://platzi.com/tutoriales/2467-frontend-developer/31012-cards-para-portafolio/>
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/>
Este es el tutorial que yo realice, no muy bien elaborado, pero hice lo que pude.
🚀🚀Los invito a que exploren y vean mi pequeño tutorial sobre lo básico en maquetación de HTML 🖥️🤯:
https://platzi.com/tutoriales/2467-frontend-developer/32590-domina-la-maquetacion-html-desde-cero-crea-sitios-web-asombrosos-con-este-tutorial-fundamental/
Aprende HTML y CSS en una manera sencilla creando una ilusión de YouTube:
Requisitos previos:
Conocimientos previos en HTML y CSS
Tener instalado un editor de código, yo uso VS
1️⃣er paso:
Abra el programa editor de código en especial para mi es VS
Ahora crea un archivo HTML y coloca un nombre por lo general debe ser "index.html"
Para tener la estructura de HTML autocompletada debes escribir html:5 y presionar TAB para que se autocomplete:
Quedando el código de esta manera:
En este apartado deberás agregar los "p", los "div" y "img", en esta oportunidad se desarrollo una ilusión de YouTube.
2️⃣do paso:
Lo más recomendable es que el archivo "style.css" deba estar en una carpeta fuera de la raíz principal pero para este tutorial dejaremos en la misma raíz del index.html
Vamos a aplicar CSS a todo lo desarrollado en el body
3️⃣er paso:
Visualiza en el navegador como está quedando tu archivo .html y listo habrás desarrollado una pequeña parte de YouTube.
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/)
Hasta ahora, he aprendido mucho en el curso. Me he guiado principalmente por la documentación proporcionada. Me ha gustado especialmente el uso de `display: flex`, ya que es muy útil para organizar el diseño. A continuación, presento un mini proyecto que he realizado:
Aquí les dejo esta creación, aúnmuy principiante pero muy animada a aprender más.
<https://platzi.com/tutoriales/2467-frontend-developer/40382-como-hacer-un-piano-sencillo-con-dos-teclas-de-color-rosa-usando-html-y-css/>
Tutorial sobre como crear un formulario en html, <https://platzi.com/tutoriales/2467-frontend-developer/39813-como-crear-un-formulario-en-html/>
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/>
<https://platzi.com/tutoriales/2467-frontend-developer/38956-targeta-de-cumpleanos/>
Tutorial de una tarjeta basica: <https://platzi.com/tutoriales/2467-frontend-developer/38691-como-hacer-una-tarjeta-basica/>
no me deja subir imagenes pero si lo hacen les sale una tarjeta basica
Yo realice el tutoría sobre uno de los ejemplos que pusieron ya que me pareció muy importante [Maquetación Web con Etiquetas HTML (platzi.com)](https://platzi.com/tutoriales/2467-frontend-developer/38559-maquetacion-web-con-etiquetas-html/)
espero su feedback, muchas gracias
Mi tutorial <https://platzi.com/tutoriales/2467-frontend-developer/38296-ejemplo-practico-de-como-crear-una-card-con-estilo-neomorfismo/>
para cambiar la tipografía sin necesidad de descargarla y usar locales \[ las que tiene en el pc/laptop ]
debe agregar en el Head el link de la fuente:
```js
<head>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Playwrite+AR:wght@241&family=Playwrite+PE:[email protected]&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
</head>
```luego dentro de la etiqueta \<style> o en el archivo .css \[ Depende que tan avanzado vaya ], escoges la fuente de la siguiente forma\[ igual en cada fuente te sale la forma especifica de agregarla ]
```js
h1{
/*Asi escogemos la fuente seleecionada*/
font-family: "Playwrite PE", cursive;
/*asi centramos el texto*/
text-align: center;
/*asi modificamos el tamaño del texto*/
font-size: 35px;
}
```recomiendo usar Google Font \[ <https://fonts.google.com> ] 💻, se que para algunos puede ser obvio o sencillo, pero para mi no lo fue 🥂
https://platzi.com/tutoriales/2467-frontend-developer/38097-como-crear-un-banner-rotativo-para-tu-web-con-html-css-y-javascript/![]()
Mi tutorial es acerca de simplificar aun mas, el font-size
Espero sea util a alguien ;)
[¿Multiplicar o simplificar rem? (platzi.com)](https://platzi.com/tutoriales/2467-frontend-developer/37871-multiplicar-o-simplificar-rem/)
Hice mi primer formulario, me costó un poco hacerlo. Lo dejé como tutorial en el siguiente link <https://platzi.com/tutoriales/2467-frontend-developer/37869-como-crear-un-formulario-con-html-y-css/>
Así me quedó: :)
<https://platzi.com/tutoriales/2467-frontend-developer/37470-estilo-html-y-css-creando-una-carta-de-yu-gi-oh-frontend/>
<https://platzi.com/tutoriales/2467-frontend-developer/37470-estilo-html-y-css-creando-una-carta-de-yu-gi-oh-frontend/>
file:///C:/Users/usuario/Desktop/Carta%20de%20Yugioh/CARTA%20DEL%20MAGO%20OSCURO%20(YU%20GI%20OH!).jpeg
```js
```
No deja publicar el post
por aca dejo mi diseño de un login de usuario y contraseña
![]()
Por aquí mi aporte, buenos samaritanos: [Mejora tus habilidades Frontend 🎨 (platzi.com)](https://platzi.com/tutoriales/2467-frontend-developer/37009-la-mejor-actividad-para-mejorar-tus-habilidades-cofrontend/)
**Cómo usar etiquetas de HTML en la maquetación de una página web.**
HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje base para poder crear y estructurar nuestro contenido en la web, nos ayudará a colocar textos, imágenes, botones, etc. Debido a que estamos empezando en el desarrollo Frontend, comprender cómo utilizar las etiquetas HTML es fundamental para maquetar una página web de manera efectiva. En este tutorial, aprenderás paso a paso cómo usar algunas de las etiquetas HTML más comunes para estructurar y darle forma a tu página web.
**Requisitos:**
* Conocimientos básicos de HTML.
* Editor de código.
* Navegador web para visualizar tu trabajo.
**Paso 1: Configuración Inicial**
* **Crear un nuevo archivo HTML:** Abre tu editor de código y crea un archivo con el nombre `index.html`.
* **Estructura básica de HTML:** En Visual Studio Code escribe html:5 y darle a la tecla de Enter, y tendrás la estructura básica de un archivo HTML.
**Paso 2: Añadir encabezado y título**
**Paso 3: Crear la navegación**
Utilizaremos las etiquetas `<nav>` para la sección de navegación y para listas `
- ` y `
- ` para cada elemento de la lista.  **Paso 4: Creación de las secciones de contenido** Utilizarás la etiqueta `<section>` para dividir el contenido en secciones.  Paso 5: Añadir un pie de Página Utilizarás la etiqueta `<footer>` para el pie de página del documento.  Paso 6: Revisar y probar Guardarás los cambios realizados una vez completado los pasos anteriores, y abrirás en tu navegador web para ver como se visualiza la estructura básica de tu página web. Puedes abrir directamente el archivo en la carpeta donde lo guardaste o en Visual Studio Code puedes darle a "Open with Live Server" (Debes tener instalada la extensión Live Server).  ¡Felicidades! Has creado una estructura básica de una página web utilizando etiquetas HTML. Ahora puedes seguir explorando y aprendiendo más sobre otras etiquetas HTML y cómo estilizar tu página web con CSS. La práctica constante te ayudará a mejorar tus habilidades en el desarrollo Frontend. ¡Nunca pares de Aprender!
Aquí está por si gustan checarlo:
[Página con utilización del :hover en HTM y CSS (platzi.com)](https://platzi.com/tutoriales/2467-frontend-developer/30508-pagina-con-utilizacion-del-hover-en-htm-y-css/)
<https://platzi.com/tutoriales/2467-frontend-developer/35360-estilos-css-introduccion-frontend/>
saludos, aca tutorial como implementar la barra de navegacion html 5 <https://carloszapatadev95.github.io/platzi/>
Les dejo mi tutorial sobre ¿Cómo hacer una aplicación de Flash Cards con HTML, CSS y JS?
<https://platzi.com/tutoriales/2467-frontend-developer/35094-como-hacer-una-aplicacion-de-flash-cards-con-html-css-y-js/>
Hola a todos.
Comparto mi tutorial de como centrar un elemento con Flexbox <https://platzi.com/tutoriales/2467-frontend-developer/35063-como-centrar-un-elemento-con-html-y-css-utilizando-flexbox/>
llegue un poco tarde aqui pero finalmente publique mi tutorial, no tiene nada que ver con el curso pero eso lo hace unico y detergente jajaja,
es sobre como hacer que un div tenga un borde animado hecho con css y propiedades custom.
el boton quedaria asi, solo que el borde rota.
<https://platzi.com/tutoriales/2467-frontend-developer/34447-como-hacer-un-boton-con-bordes-animados-que-rotan-o-giran/>
<https://platzi.com/tutoriales/2467-frontend-developer/33882-diseno-responsivo-con-cards/>
Realice este tutorial que me sirve para un proyecto que estoy desarrollando, es una página de servicios tipo acordeón responsivo:
<https://platzi.com/tutoriales/2467-frontend-developer/33578-pagina-de-servicios-tipo-acordeon-2/>
Aquí mi pequeño tutorial amigos, de como crear una pagina web sencilla responsiva y ser visualizada en cualquier dispositivo móvil: <https://platzi.com/tutoriales/2467-frontend-developer/32620-como-crear-una-web-sencilla-responsive/>
Este es mi primer tutorial, espero le sea util, agradeceria mucho si alguien me pudiera decir porque mi tutorial queda con el boton de editar abierto, todos los que vi de los compañeros no quedan asi, agradeceria mucha la ayuda
https://platzi.com/tutoriales/2467-frontend-developer/32091-como-enlazar-un-archivo-css-a-un-archivo-html-2/
```ts
```
[Como lograr entender los conceptos de HTML & CSS y sobrevivir en el intento. (platzi.com)](https://platzi.com/tutoriales/2467-frontend-developer/31831-como-lograr-entender-los-conceptos-de-html-amp-css-y-sobrevivir-en-el-intento/)
Esto es lo que pude hacer, se ve simple pero poco a poco iré mejorando :)
Solo quiero explicar como centré los textos de mis dos Flexbox.
Las dos cajas sí se centraban en el card pero lo que no se centraba eran los textos que estaban dentro de las cajas, siempre se me quedaban arriba.
Después de buscar y ver varios videos, esto me funcionó:
.container{
background:#EDBB99;
display: flex;
align-items: center;
padding: 10px;
justify-content: center;
}
.item{
margin: auto;
}
Colocando esto en la clase container y en la clase item (la estructura es tomada de la clase de Flexbox and grid videos atrás) me quedó así:
Los dos textos en el medio de sus cajas.
Aquí les comparto mi primer tutorial: <https://platzi.com/tutoriales/2467-frontend-developer/31240-como-usar-flexbox/>
**Diseño Responsivo:**
Use medidas de mi gustos en el CSS para aplicar diferentes estilos según el ancho de pantalla. Por ejemplo:
* ```js
/* Estilos para pantallas pequeñas */
@media (max-width: 480px) {
.main {
width: 90%;
}
}
/* Estilos para pantallas grandes */
@media (min-width: 1024px) {
.main {
width: 80%;
}
}
```hice el diseño con rejilla flexible, usando porcentajes o viewport width. Evita tamaños fijos.
Use imágenes flexibles que se adapten al contenedor.
**Etiquetas HTML:**
* Es recomendale etiquetas semánticas como \<header>, \<nav>, \<main>, \<section>, \<article>.
* Para el contenido principal utilize \<main>. Para secciones, \<section> o \
.
* Estructura con \<header> para cabecera, \<footer> para pie y \<nav> para el menú.
* Los elementos \
deben ser el último recurso.
* Maqueta con Flexbox o CSS Grid para facilitar una disposición receptiva.
En resumen, el diseño responsivo y las etiquetas semánticas trabajan juntos para que el usuario tenga una buena experiencia en cualquier dispositivo.
* Y despues de todo comprueba que los elementos se ven bien al redimensionar el navegador.
Aqyu va mi aporte a la clase para el tutorial
<https://platzi.com/tutoriales/2467-frontend-developer/30804-pagina-web-para-cliente/>
¿Cómo agregar estilos de múltiples archivos CSS a un documento HTML?
En este tutorial, aprenderemos a agregar estilos de múltiples archivos CSS a un documento HTML. Esto nos permitirá organizar nuestro código CSS de manera más eficiente y nos dará más flexibilidad para controlar el aspecto de nuestra página web.
No me deja publicar el tutorial, así que lo dejare en los comentarios:
**Posicionamiento en CSS con relative y absolute**
Antes de comenzar, es esencial comprender el modelo de caja en CSS y cómo se aplica a los elementos. Cada elemento HTML es representado como una caja rectangular.
La propiedad position es clave para el posicionamiento en CSS. Puedes establecerla como relative para posicionar un elemento en relación con su posición original. La propiedad absolute posiciona un elemento con respecto a su primer ancestro posicionado (que no sea static). Si no hay ningún ancestro posicionado, se referirá al elemento \<html>.
La propiedad position en CSS puede tener varios valores, y static es el valor por defecto. Cuando un elemento tiene position: static;, se coloca en el flujo normal del documento, y las propiedades top, right, bottom y left no tienen ningún efecto sobre él. Cuando se establece la propiedad position en un valor diferente de static, como relative, absolute, fixed, o sticky, entonces el elemento se considera posicionado, y las propiedades top, right, bottom, y left pueden tener efecto, lo que permite controlar su posición en la página.
Z-index:
La propiedad z-index controla el orden de apilamiento de elementos posicionados en el mismo contexto de apilamiento (por ejemplo, dentro del mismo contenedor con un posicionamiento). Si el z-index es mayor, entonces el elemento se mostrara por delante de los demás. La propiedad z-index solo tiene efecto en elementos que han sido posicionados.
El posicionamiento relative y absolute te permite tener un mayor control sobre el diseño y la disposición de los elementos en tu página web.
<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/
Mi aporte: Z-Index, la superposición por capas
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/
Mi tutorial de responsive design
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.
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/)]
Hice un tutorial de como usar el position en CSS.
Acá mi aporte. Espero que la persona que vea le guste y pueda darme su opinion.
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.😁👍
comparto mi practica espero les ayude https://platzi.com/tutoriales/2467-frontend-developer/24767-etiquetas-mas-usadas-de-html/
Envío mi aporte, espero les guste.
https://platzi.com/tutoriales/2467-frontend-developer/24741-como-crear-un-formulario-basico-en-html/
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?