Identifica las pantallas de tu proyecto

Desde el curso practico de Html y Css amo usar figma para apoyarme al hacer el front, que genial que hayan manenido esa metodologia ❤️

Wowowowowowoowow, no me puedo creer que este diseno tan espectacular lo desarrollare yo con ayuda de estefany, no veo la hora de terminar este curso 😃
Pero lo mas importante eso si, de aprender

Lo que más me gusta son los cursos prácticos. ¡Vamos!

Comparto que intenté imitar la pagina browse de Netflix y ahí más o menos quedó

Voy a hacer el proyecto con React 😄, a ver que pasa xD

Heyyy este curso se ve que esta geniall y nos adelantaron que Oscar estara complementado me imagino que en el Curso de React Practico
Que notaaaa 💚

Este proyecto va para mi github ❤️

¿Quieres saber más del diseño movil First?

Este curso de Diego de Granda de Mobile first te ayudara ¡Quiero ir al Curso Ya!
Te tomara solo una tarde en completar el curso, en promedio, pero te ayudara en fundamentos gigantes para la Práctica. Además tiene un proyecto de una empresa real para que añadas a tu Github, sin duda va como anillo al dedo a este curso Práctico, sin más, Vamos a ello!!

Muy emocionado por este curso 💚💚

Este proyecto se ve espectacular 💚

0:22 ya se había tardado en decir básicamente…

me encanta esta profesora !! team Estefany !!

Si alguien quiere observar de mejor manera los estilos. Si entra al enlace que compartió la profesora.
Pueden darle click a la flechita que aparece a lado del nombre del proyecto en la parte superior y seleccionar abrir en editor

Una vez se les habra, pueden ver de mejor manera los estilos.
Pueden cambiar de vista entre móvil o desktop en la barra lateral de la izquierda, entre más opciones que ofrece Figma.

Muy emocinado, el material de ayuda es similar con el de curso practico de HTML y CSS, gracias al equipo de diseño de platzi.

¡Me acabo de caer de la silla al ver el diseño tan espectacular!

Ver el total del shopping cart me dio ansiedad jajajajajajaja

Tienen que cuidar el lenguaje de los profesores, vengo del curso de frontend developer, y cada vez que dice básicamente se me quitan las ganas de seguir viendo las clases.

Oh me encanta el proyecto pero siento que necesito más conocimiento, se me hace que está mal ordenada la ruta de web developer…voy a hacer primero el curso definitivo de html y css y volveré! les juro que volveré ! jejej

Que bueno cuando se deja claro el proyecto y el objetivo del curso, Vamo a darle

la primera vez que vi Figma fue en el curso de Mobile first responsive desing de Diego DeGranda, esta genial que lo usen nuevamente en este curso, gracias equipo Platzi, estoy super emocionada por empezar!

Se ve muy interesante y desafiante al mismo tiempo, ya hize un intento de pagina web con ayuda solo de ChatGPT y con este curso espero mejorar mus habilidades y poder colocar un bonito proyeto en mi portafolio

y aqui esta mi Proyecto (estoy abierto a criticas constructivas) https://github.com/Nyu00/SkinCare-PageWeb

Wow este proyecto está súper estructurado y tiene paleta de colores me encanta ❤️

Es bastante claro el uso de figma incluso en la industria, recomiendo m[as usarlo en la aplicación de escritorio para optimizar recursos del navegador. En cuanto al diseño es lindo y se puede reutilizar para proyectos

Clase 3 - Identifica las pantallas de tu proyecto

¿Con quienes debemos de hablar para saber el diseño de las pantallas de los errores en un proyecto, además de las razones de estos mismos?

• Con el equipo de diseño.

¿Es importante saber el flujo de las pantallas de un proyecto web o app antes de empezar su maquetación?

• Sí.

¿Qué es maquetación o diagramación web?

• Es una técnica que se usa en desarrollo web la cual consiste en transformar un diseño gráfico (boceto) en una interfaz funcional en el sector de la programación y que el navegador o dispositivo la entienda.

Wow esta increíble, ansioso por aprender nuevas cosas de fronted!💪

Apuntes de este curso en Notion

Excelente clase , Me gusto que comenzara con un diseño ya construido con figma y poder trabajar con el proyecto desde 0.

muy muy interesante este proyecto, ya quiero codear esas lineas

¡Profundiza tus skills de diseño con Figma!

• Curso de Figma
• Curso de Figma Avanzado

Esto esta de lujo, así da gusto aprender, gracias Platzi.

Proyecto bastante interesante para practicar. Buena UI.

esta de locos el proyecto!

Buenisimo proyecto para empezar a practicar!! Toda la emoción!!

Recién comenzando el curso en la escuela de JavaScript con mucho entusiasmo en el 2023

yard sale

• proyecto

• texto
• tipografia
• fuente
• diseños
• password

Estoy muy feliz de iniciar mi Primer proyecto para mi Portafolio ❤️

https://www.figma.com/file/bcEVujIzJj5PNIWwF9pP2w/Platzi_YardSale?node-id=5%3A3158

No sé si le pasó a alguien más pero cuando empecé a ver el proyecto empecé a imaginarme las etiquetas en VSC. Ya me imaginaba las div, .class y sobre todo las ul y li.

Veo que el proyecto está en Zeplin y no en Figma, como dijo la profe. Osea que es otra app para sketching para conocer, eso me parece bien

¡que emoción este curso! 🙊🤩

Se ve incredible iniciando este increible curso

Dia uno iniciando este curso, ya estoy emocionada 😮

Maquetación

La maquetación web consiste en transformar el diseño de una web en un conjunto de archivos (HTML, CSS, JS) para que los navegadores web puedan interpretarlos y reproducirlos correctamente en diferentes dispositivos. La maquetación es una fase avanzada del proceso de desarrollo web.

Fuente: https://www.mantis.cat/es/maquetacion-web.html

La maquetación o diagramación web se refiere a transformar un diseño gráfico en una interfaz funcional en términos de programación que entienda un navegador o dispositivo específico.

Fuente: https://www.pragma.com.co/academia/lecciones/10-pasos-para-una-maquetacion-eficiente-con-html-y-css#:~:text=La maquetación o diagramación web,un navegador o dispositivo específico.

Mi concepto

La maquetación o diagramación web consiste en transformar un diseño gráfico —boceto— (hecho por UX/UI en Figma o Scketch) en una interfaz funcional en términos de programación que entienda un navegador o dispositivo específico.

Sencillo: De un boceto → Archivos HTML, CSS, JS

Sería bueno tener una lista genérica de las cosas que debemos preguntar y tener en cuenta para que no se nos olvide nada, de ahí en más ajustar nuestra lista a los proyectos que se nos presenta.
También ver contantemente diseños para poder aportar nuestro granito de arena y sugerir una estilización que se ajuste al máximo a nuestros clientes.

Amo Figma, pero que deli trabajar sobre un diseño, nos ahorra ese tiempo y vamos de una al código. Me encanta. ❤

Excelente que nos familiaricen con la forma en que se realizan las entregas por parte del equipo de diseño. Considero súper importante que como frontend developers le tomemos atención a esta parte.

💚 CURSO Adobe XD
💚CURSO Figma

Enamorándome fuertemente de esto. ❤️

Let’s do it

Seria interesante pegarse a una API y traer los productos, se ve genial esta practica, voy a ver si la hago ocn bootstrap 5

Interesante

Se ve super bien el proyecto :3

A poner en practica la teoria aprendida

.

Nueva ventaja Figma 2023 😍

Gente cómo están!?
En 2023 tenemos disponible la extensión de Figma para VSCode.

.
Sugerencias de auto completado al codear
interacción con comentarios… en fin:

Herramientas de sincronización con los proyectos en Figma desde el editor.

Game changer.
.

el link y

Resumen de info

por Bing

https://www.figma.com/file/bcEVujIzJj5PNIWwF9pP2w/Platzi_YardSale?node-id=3%3A1308&mode=dev

• Figma para VS Code:

una extensión que te permite navegar e inspeccionar archivos de diseño, colaborar con diseñadores, seguir los cambios y acelerar la implementación sin salir de tu editor de texto.

• Características principales:

recibir y responder a comentarios y actividades dentro de los archivos de Figma, obtener sugerencias de código basadas en las capas del diseño, añadir y revisar enlaces de recursos de desarrollo, y mantener sincronizados el sistema de diseño y el código fuente.

• Requisitos y condiciones:

para usar esta extensión, necesitas tener una cuenta activa de Figma y aceptar sus términos de servicio y política de privacidad. La extensión está en beta y es gratuita para todos durante 2023. La experiencia puede cambiar durante este período.

woow… ya ansioso de empezar el proyecto…

Debemos revisar el orden de las pantallas para que funcionen con una logica pensada para una buena interactividad para el usuario

usar figma para conocer los diseños

Ya me dieron ganas de aprender algo de Figma para complementarlo con el curso…

Es importante tener los diseños establecidos antes de empezar a programar ya que, es importante tener claro el contexto de la aplicación

.

Excelente, este proyecto se ve genial 😍

Luego de haber tomado el curso de Frontend Developer, siendo que será un gran reto, apenas empiezo en este mundo y espero comprender muchas más cosas e ir interiorizando conceptos más adelante.

lo que me parece interesante es que se puede hacer el proyecto desde la planificación y pasando por el proceso de diseño y el orden de las pantallas; por esas cosas es que me gusta el desarrollo web, no me imagino como sería el producto final, seria super

Estoy siguiendo la ruta de HTML y CSS a profundidad y espero no tener que llevar otros cursos a parte de este por el momento 😅

Excelente ejercicio práctico para aplicar los conocimientos adquiridos de los anteriores cursos. No puedo esperar para ver el resultado final. 😁😁

Se ve asombroso todo lo que vamos a construir, espero interiorizar todos los conocimientos y en el futuro hacerlo sin seguir los videos.

Let’s Get It! 🔥🔥

Me gusto mucho la interfaz se ve muy limpia. Excelente trabajo equipo Platzi.

Sin duda muchas espectativas, se ve magnifico

Termine el curso práctico de HTML y CSS donde se realiza un clon de Google y estoy muy emocionado de continuar con este curso y este proyecto, con la profe Teff ya sé que voy a comprender muy bien los temas y explicaciones

Súper emocionado por empezar a desarrollar este maravilloso proyecto!

Se ve muy bueno el proyecto, intentaré construir otro en paralelo conforme vamos avanzando en el curso.

El proyecto final se ve bastante interesante. Comencemos!

El producto estará más orientado a un diseño mobile.
Veo que no cambia mucho en web 😅

ok

muy buena expicacion gracias

Wao! sinceramente se ve espectacular esta vista previa del proyecto 😄

Realmente estoy emocionado, desde que comencé la carrera estaba esperando este momento. 😁😎

No conocía esta valiosa herramienta <<Figma>>. Va a ser de gran aporte al desarrollo profesional.

Muy innovador. ¡¡Adelante!!

Veo que es muy importante poder usar figma, espero poder aprender ello en el transcurso de la ruta.

Que Genial!!!

Estafany tienes un gusto… exquisito, me parece super profesional el diseño

y en este punto es donde te das cuenta q debes volver a ver el curso anterior jajaja xD

Esta muy chevere el proyecto

Este es el link de Yard Sale en zeplin:
https://scene.zeplin.io/project/60afeeed20af1378ed046538

No soy muy bueno en UI/UX pero todo se aprende así que ¡Aquí vamos!

¡¡Excelente!! Tener al menos la sensación de un proyecto real, es gran ayuda para nuestro desarrollo, aunque depende mucho de nosotros también, ya que nosotros mismo podemos plantearnos el reto de desarrollar en paralelo un proyecto con los conocimientos obtenidos en clases anteriores, para poder desarrollar proyectos solo por diversión o simplemente jugar con los elementos.

Super emocionado de iniciar el proyecto! Se ve espectacular!

Sencillamente, esto se ve espectacular!! 😲

wooow!! estoy muy emocionado de hacer este proyecto!!

Aprendo muhco más con los cursos prácticos que con las teorias…

En 20 clases vamos a hacer este proyecto!! Estoy myuy emocionada por comenzar!!

Pinta muy bien, justo lo que busco aprender.