No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Estilos CSS en React

5/34
Recursos

Aportes 217

Preguntas 19

Ordenar por:

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

Mi pequeño rediseño

Mi proyecto hasta ahora luce como en la imagen. Si desean utilizar los estilos o basarse en ellos, les comparto mi gtihub: https://github.com/Sharonina/Intro-React

Al mío le agregue un circulo del progreso y tiene responsive.

Mi aporte

La forma mas comoda es la segunda pero encapsulando cada componente dentro de una carpeta y alli el js y el css

Así quedaron mis estilos.

Le agregué Font Awesome para los iconos, porque me daba ansiedad ver como los teníamos antes

Aqui mis avances!
Puse un hero en desktop y limite el tamaño del ToDo a un mobile.!

Avances:

Tengo que admitir que le huí a crear mi propio diseño y preferí terminar el curso primero para luego concentrarme a dejarlo bonito 😅
Aquí les dejo mi repositorio por si quieren usarlo de referencia 💚

Mi diseño 🤣🤣🤣🤣🤣🧑‍🚀
![](

Al final quedo así

Yo me base en el diseño de Juan, solo cambia unas cositas! Hasta el momento muy buen curso 💯

Me alegro que actualizaran esta clase en particular, anteriormente me habia ido a ver el curso en youtube porque me parecia confuso y algo aburrido aplicar las clases de la primera forma, creo que acertaron al darle prioridad a la interactividad que a los estilos ya que algunos queremos aprender mas sobre el dinamismo , herramientas de desarrollo y programacion, teniendo en cuenta que ya tienen cursos para css y estilos. gracias. ahora me siento mas comodo.

Mi diseño me encanto jsjasj

Comparto mi avance hasta ahora

🍃 Yo hice algo sobrio, oscuro y que me gustaría ver a mi en una app. Agregue íconos desde Fontawesome y Animaciones desde animate.style. Y por primera vez me atreví a usarlos como paquetes de NPM y no como CDNs.

Mi aporte

Todavía me falta mejorar el responsive design, pero así quedaria en versiones desktop.

Por el momento así va el mío, no es mucho, pero es trabajo honesto :v!
GitHub

Mi diseño 🎨
💻 Preview
📂 Repo

Mi rediseño. Le quise agregar las listas para organizar las tareas.
GitHub: https://github.com/Gaoux/to-do-list
Página: https://gaoux-to-do-list.netlify.app

Ahí vamos!!! - Faltan algunas cosas por mejorar.

Así voy… no es muy bonito, pero estoy orgullosa.

Comparto mi avance, voy en la clase 5, probablemente cambie el botón por uno flotante como el profe. al final comparto como quedo la versión final xD.

Yo quise usar el concepto de neomorfismo 😊

Me quedo asi no lo hice enteramente copie parte del css de una pagina

Asi va mi Todo y ya pensando en la versión modificada

Esto llevo por ahora, está feo pero lo mejoraré al final del curso. Al menos ya aprendí como manipular estilos y aplicarles flexbox.

Comparto mi diseño

Asi va quedando 😃
![](

no habia mucha creatividad jajajja
deploy: repo: https://huilensolis.github.io/react-todo-app/

Hola, Comunidad 💚

Acá le comparto mi proyecto de TODO 👇👇

https://juancodev.github.io/react-todo-machine/

👀 Tiene un Skeleton para la lista de TODO

Les comparto el diseño que hice 😃

😬 El orden es lo más bonito de la vida.png

Me parece mucho mas cómodo trabajar con archivos css por separado, uno por cada componente (de momento)

En mi opinión, me gusta más agregar estilos con archivos .css, ya que así tengo más organizado todo mi entorno; aunque agregar estilos mediante objetos, también es una manera fiable dependiendo de lo grande que sea tu proyecto o si tu proyecto necesita mucho código css… Creo que todo dependerá a qué le quieres agregar estilos o incluso utilizar las formas que vimos en la clase. Me corrigen si estoy equivocado jejeje mood aprendizaje: activado por siempre 😃

aqui el proceso de mitad de clase… trate de dejarlo algo parecido al figma pero con unos pequeños cambios que a mi parecer me parecia mejor, gracias leo criticas

Utiliza una expresión condicional abreviada (Evaluación de cortocircuito).

A la hora de aplicar el concepto de clases dinámicas, el profe dice que utiliza el operador ternario para validar si la propiedad completed es verdadera y asignar el valor de la clase. Me puse a investigar (intriga) y por lo que pude entender es que en la regla se aplica una característica conocida como expresión condicional abreviada (evaluación de corto circuito).

GOD FIRST Si son como yo y prefieren copy paste de los estilos para centrarse en react y después sí se centrar en los estilos pues vayan al github y gitclone xd

Hola, así van quedando mis estilos…

por ahora va asi

Así esta quedando mi diseño, esta sencillo pero me enorgullece haberlo podido completar por mi cuenta

Y ademas es responsive!

Mi rediseño, espero les guste 😄

Modificando el proyecto del curso y combinandolo con TailwindCss

Este es mi avance (anque ya cambié un par de cositas):


Hola! aquí va mi aporte. Me guié del diseño que mostró JD.

Va tomando forma de a poco, una vez que esté las funcionalidades subiré completo con el código en el repositorio

Hice así el estilo no soy muy bueno con el CSS, me gustaría tener feedback respecto al diseño para pulir un poco mas el diseño.

De esta manera realice mi diseño:

Mi diseño

mi peque;o dise;o aun sin iconos

Hasta avance con el rediseño mío:

Fue un reto!
Al terminar el curso subiré el repo a GitHub!
Gracias Platzi

Aquí mis avances: ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-10-03%20a%20la%28s%29%2019.47.19-acb2397e-ec0f-4ae5-a386-9fb8710531fc.jpg)
hay una aplicacion de TODO que tiene un bug, es decir que hay oportunidades de mejora: ![](https://static.platzi.com/media/user_upload/image-3ffd6441-2ed2-4ad1-b2e6-0dd60829db32.jpg)cuando no has escrito nada en el campo de texto de crear TODOs y le das click al button de crear tarea se crea la tarea asi no halla texto

Hola, aquí está mi versión de la app. Rompí muchas cosas, me morí y renací. Dejo el link de mi GitHub

Respondiendo a la consulta del profe en el minuto 14:40, yo prefiero crear la constante estilos dentro de cada componente para no tener tantos archivos en Components. Se me hace mas fácil a pesar del cambio de nomenclatura de CSS.

Mi versión de la aplicación

Asi me quedo a m (el diseño no es mi punto fuerte xd)

He ido experimentando y añadiendo las funcionalidades antes de cada clase como reto, cuando no consigo realizar una parte, veo el video y trato de recrearlo.

Asi me va quedando el diseño, quise darle un efecto retro analogo, por eso los shadow duros, la idea es que parezca una tablilla que cuanado terminas una tarea le agregas un pin al hueco a la izquierda.

Mi aporte:

me tomó una semana y me quedo medio raro pero alfin puedo continuar con la clase

Mi diseño rapido…

imposible destacar entre tantos genios

No es mucho pero es trabajo honesto :’)
¿A alguien más le pasa que CSS es más difícil que JavaScript?

Neomorfismo

Comillas invertidas: Atl + 96
Hola querida comunidad 💜 Yo decidí optar por diseñar mi app con TailwindCSS, mi framework de CSS favorito :3 ![](https://i.ibb.co/X8BJKt2/Untitled-1.png)
Así quedó mi diseño ![](https://static.platzi.com/media/user_upload/image-2eddab14-9825-4825-aa39-e598bef418e4.jpg)
:3 ![](https://static.platzi.com/media/user_upload/image-a503d79c-31a4-4895-954c-ab54848dabce.jpg)

Así va mi proyecto 😊

Tomé de inspiración un diseño en los aportes, abajo dejo el repositorio, por si alguien lo quiere clonar, modificar o si alguien me quiere hacer un aporte lo recibiré con gusto.

![](

https://github.com/fabian-co/todo_react_platzi_ejercicio

Este hombre cada vez me cae mejor. El metodo de aprendizaje me he podido adaptar a pesar que en las otras clases me parecia algo explosivo ya le ha calmado o estoy en sintonia. A veces sale con unas muy graciosas jaja "Lasaña". Gracias Juan y al equipo de Platzi !!
## MI VERSIÓN algunas mejoras: * Filtrado segun estado * Busqueda por titulo * Cambio de estado al darle clic al circulo de la izquierda![](https://static.platzi.com/media/user_upload/Screen%20Shot%202024-03-06%20at%2022.33.03-cf1e3068-ec01-469b-b931-9dbaae5b843f.jpg)
Después de ver las maravillas que han posteado :) ... Hasta ahora así vamos... ![](https://static.platzi.com/media/user_upload/imagen-1d2b23ea-c39e-49e1-93c2-e56882d4f906.jpg)
Mi humilde diseño ![](https://static.platzi.com/media/user_upload/image-84916d62-39cf-4f19-97f2-4a4cd0caee23.jpg)

Mi proyecto hasta ahorita va asi.

Por el momento va así, este curso esta siendo muy bueno y aun falta!

Rompí todo mi código tratando de copiar algo en github, me arrepiento de no haber hecho commit. A volver a empezar, cuantos ctrl+Z se pueden hacer jaja

✅ Estilos listos, simples y basado en la app TickTick (la recomiendo👀)

Siempre se me ha hecho cómodo el hecho de separar los archivos por su rol, es decir, un archivo para estilos, otro para la presentación y otro para la lógica
Mi humilde diseño ![](https://static.platzi.com/media/user_upload/image-968f68f1-320d-4b3b-ab60-c0761095090d.jpg)
Sin duda trabajar con el archivo .css por un ldo, me parce más práctico, cómodo y fácil de revisar. Además, se me facilita para la revisióm y LOS CAMBIUOS!!!!
Pues el mío quedó así. Usé styled-components para hacerlo, básicamente son estilos embebidos en el mismo js. ![](https://static.platzi.com/media/user_upload/image-a6f4887e-8519-4faa-9a18-4fcad22399d3.jpg) ![](https://static.platzi.com/media/user_upload/image-5c617251-4a44-410f-be58-7328b1afe2f3.jpg)

Les comparto mi variante, me base en un estilo de videojuegos de 8 bits, aun le falta mucho pero por algo se empieza.

es mucho más fácil <> </>

No tengo mucha experiencia en frontend , las dos maneras me parecen geniales. una para cosas generales como los párrafos y títulos, y la otra para casas en específicos como los botones
una solucion para que no salgan "false" o "undefene" en los variables/clases dinamicas: import './TodoItem.css' function TodoItem({ text, complete }) { let completado = "🎃" if (complete) completado = '🐸' return ( \
  • \{completado}\ \

    {text}\

    \❌\ \
  • )} export { TodoItem}

    Mi diseño del Todo list

    Prueben usar lo siguiente para evitar el molesto false.

     ${completed ? "Icon-check--active" : ""}
    

    Hola!
    Espero esten bien, yo me esforce jeje, la verdad me cuestan los estilos, pero acá les dejo lo que hice: 😄

    EStilos En proceso, voy a terminar el curso primero :v estuve casi una hora en esto xd

    Así voy, eventualmente ira mejorando😁

    Aquí dejo mi diseño:

    En mi diseño me base en el concepto de neumorphism