A mi también me gustaría sigerir una página llamada Material Palette donde tu puedes combinar dos colores y te entrega toooda una pelata de colores con sus códigos hexadecimal para usar:
.
.
Yo aún sigo pensando en qué colores debería usar… 🤔
Lleva tus conocimientos de CSS a otro nivel
Tips para llevar tu conocimiento de CSS a otro nivel + Quices
¿De dónde venimos y en dónde estamos?
¿Cómo fue pensado CSS cuando se creó?
Limitaciones de CSS y el problema de los elementos flotantes
Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
¿CSS Grid es una idea nueva? La evolución de la especificación
¿Qué significa Grid para CSS?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: margin y line-height
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
Técnicas de alineamiento de CSS Grid: pros y contras
Modos de escritura y ejes de alineamiento + Reto
Propiedades físicas y lógicas en CSS + Quiz
Técnicas de alineamiento con Flexbox
Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
Grid y las relaciones padre e hijos inmediatos + Quíz
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
Creando nuestro contenedor: ¿display: grid o display: inline-grid?
Creando filas, columnas y espaciado + Reto
Alineamiento en el elemento contenedor + Quiz
Generación automática de tracks + Quíz
Funciones: repeat(), minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 120
Preguntas 3
A mi también me gustaría sigerir una página llamada Material Palette donde tu puedes combinar dos colores y te entrega toooda una pelata de colores con sus códigos hexadecimal para usar:
.
.
Yo aún sigo pensando en qué colores debería usar… 🤔
Les recomiendo mucho figma, es fácil de utilizar y puedes llevar tu diseño muy fácil, me ayudó a diseñar y construir mi portafolio😃
https://platzi.com/clases/figma/
Por cierto mi portafolio todavía no esta terminado pero me gustaría recibir algo de feedback 😄
https://brandonargel.github.io/
Va mi identificación de elementos.
Verrrdaderamente, así me sentí:
Hace un tiempo hice este proyecto con lo que aprendí de Estefany en Platzi Master 😄.
Me gustó la idea 1 e hice algo muy similar 😄
Este será mi proyecto para practicar grid 😃, es una mini biografía de unos de mis mangas favoritos
Resumen:
Inspiracion:
Hacer una lista de todo lo que se necesita
Hacer un bosquejo y plasmar las ideas
Encontré éste sitio, es muy interesante: https://gridcritters.com/
Espero lograr el siguiente objetivo:
Punto de partida
puedes construir sus paletas de colores utilizando https://coolors.co
No es mucho pero pues al menos es mío
TABLET:
CEL:
Como cuando uno no tiene ni idea de lo que quiere… y dispara con una metralleta a ver a qué le da… vamo a ver qué sale de todo esto 🤘
Este es mi Borrador …
Por ahora. 😄
Hace tiempo hice una lista con muchos sitios para elegir una paleta de colores, espero que les sea de utilidad:
Les dejo éste sitio para que, no vayan a pesar tanto sus imágenes ( https://tinypng.com/ ).
Mi moodboard
Comparto el moodboard:
Y el bosquejo que realicé a partir de los elementos:
Hola❤ este fue mi proceso creativo y la idea final
Moodboard:
Elementos:
Idea final:
iniciando mi blog
¡Empecemos!
Hola a todos, la verdad me inspiré en muchas revistas de fotografía de animales y en layout grids bastante interesantes.
Conceptos
layout inspiration
Grid inicial
Aqui mis elementos: Ya con ansías
aprovechando que es octubre voy a poner esta obra maestra de los point & clicks como referencia a ver como termina todo

Les recomiendo a los que no han hecho el curso de figma, creo que es el momento
Otra página que les recomiendo para experimentar con paletas de colores es dopely colors
.
En mi caso estoy terminando de generar mi portfolio y quiero actializar los estilos con grid 💪🏽
Les comparto mi lista:
Y mi UI inicial: https://www.figma.com/file/GWWmr8DP1c3mdeXgQ5XaYy/Untitled?node-id=0%3A1
Saludos a todos [email protected] crack!
Acá mi lista de elementos:
Hola PlatziNautas,
Les comparto mi lista :
Saludos!
Tengo mi idea con lo siguiente, espero salga como la tengo en mente, ademas lo hago con mi videojuego favorito!
https://javisperez.github.io/tailwindcolorshades/?eunry=D7AFA3&hemp=967A72 paleta de colores tailwind
https://uigradients.com/#KyeMeh colores gradientes
https://pixabay.com/es/ imagenes gratuitas
Recomiendo como “extra”, el curso de Introducción al diseño.
Anexo una idea para un futuro proyecto:
Pretendo realizar una composición en la que juego con diferentes tamaños y orientaciones de letras:
Quiero utilizar algunos bordes de ciertas cuadrículas que hacen parte de otras cuadrículas. Así mismo, girar la composición en la pantalla. Tener un alto contraste entre tipografía y fondo en un color vivo. Posiblemente aprezcan 1 o 2 imágenes / vectores de deportistas (corriendo, o previo a correr o un escalando).
El mensaje central será: “NUNCA PARES DE APRENDER”. Como textos secundarios ubicados en vértices estratégicos, aparecerán conceptos tales como: reinventarse, explorar nuevas posibilidades, cambiar de carrera, transformación digital, descubrir habilidades, desarrollar nuevas competencias, aprender haciendo, generar nuevas conexiones. | Disciplina, autogestión, constancia, concentración, empoderamiento. | Platzi
Como referente opté por algunas piezas visuales desarrolladas por Paula Scher.
Hola a todos esta es mi tematica para el proyecto:
Mi guía de estilos
Para sacar una paleta de colores a partir de una imagen les recomiendo https://color.adobe.com/es/create/image es bastante intuitiva y sencilla de usar
Hola,
Este es mi aporte. Realice el tablero con HTML Y CSS dejo el código por si a alguien le sirve.
HTML
<main>
<section class="container">
<div class="item item-1">
<article class="container__item-card">
<h2>Temática</h2>
<p>Portafolio web</p>
</article>
</div>
<div class="item item-2">
<article class="container__item-card">
<h2>Figuras princiaples </h2>
<figure>
<img src="/assets/figures.png" alt="fonts">
</figure>
</article>
</div>
<div class="item item-3">
<article class="container__item-card">
<h2>Imágenes</h2>
<p>I'm thinking about it.</p>
</article>
</div>
<div class="item item-4">
<article class="container__item-card">
<h2>Tipografia</h2>
<figure>
<img src="/assets/fonts.png" alt="fonts">
</figure>
</article>
</div>
<div class="item item-5">
<article class="container__item-card">
<h2>Tipografia</h2>
<div class="container__item-card-imgs">
<figure>
<img src="/assets/paletadecolores.png" alt="paleta de colores">
</figure>
<figure class="cover-album">
<img src="/assets/cover-album.png" alt="Night cover image dragons">
</figure>
</div>
</article>
</div>
</section>
</main>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-family: 'Nunito', sans-serif;
font-size: 62.5%;
}
.container{
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas:
"item1 item2 item3"
"item4 item5 item5";
background-color: #3c3a42;
}
.item{
padding: 20px;
}
.container__item-card {
height: 100%;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 14px;
margin: 0;
}
.container__item-card h2{
height: 20%;
font-size: 2.4rem;
}
.container__item-card figure{
margin: 20px;
}
.container__item-card p {
font-weight: 900;
color: #382b43;
font-size: 3rem;
}
.container__item-card img{
width: 200px;
object-fit: contain;
border-radius: 10px;
}
.container__item-card-imgs{
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.item-5{
grid-area: item5;
}
planificación
Hola a todos!!! 😃
les comparto mi lista…
Comparto pagina CSS Gradient para Paleta de colores:
Tematica:Dog´s breed
Figuras principales: circulos, rectangulos, cuadros
Imagenes:puppy dogs
Tipografía:yakone 700 ,poppins 400,500
Paleta de colores:
.dark-primary-color { background: #7B1FA2; }
.default-primary-color { background: #9C27B0; }
.light-primary-color { background: #E1BEE7; }
.text-primary-color { color: #FFFFFF; }
.accent-color { background: #448AFF; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #757575; }
.divider-color { border-color: #BDBDBD; }
Si quieren generar paletas de colores apartir de images les recomiendo esta pagina:
Entro en desesperacion por que no se que hacer
debo ser original o que kmrglmñrqemñlrh mñlrEHHRW
Proceso de imi proyecto
Lo hice en notion.
Aquí mi idea:
Identificación de elementos terminada:
Comparto mi proceso.
Recursos para grid design
 pueden usar su whiteboard para realizar su bosquejo.
La herramienta es relativamente nueva y aun esta en beta pero es bastante buena para que vayan plasmando sus ideas, les dejo un poco su info aca: FigJam
Bueno después de darle muchas vueltas, este va a ser la base de mi proyecto.
Soy muy malo en diseño. Pero este es mí proyecto
Aqui esta mi MoodBoard 😃
Hay dos cursos muy buenos en platzi que nos puede ayudar a la creatividad y a diseñar, son:
Existen dos herramientas que nos pueden ayudar mucho para la búsqueda de imágenes para tomar inspiración de estas, que son:
Es importante tener organizado nuestro Mood board, pero es como tener un grupo de imágenes que nos gusten para nuestro proyecto para que sirva como inspiración.
Necesitamos una lista de elementos que necesitaremos para poder crear esta pagina web, que son:
La pagina web de Jen Simmons (https://labs.jensimmons.com/) hay muchas ideas con el sistema de grid
Esta en particular me encanta:
![](
Buena clase. Necesitamos atrevernos a salir de la zona de confort, arriesgarnos a crear. Dejar que nuestras ideas fluyan, seguro sale algo bueno.
Lo prepare en photoshop, todavia no se usar Figma.
Recomiendo usar para la paleta de colores esta página, la usaba en dibujo, pero si suben una imagen y extraen tema les da la paleta de colores.
https://color.adobe.com/es/create/image
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.