Como crear una LANDING PAGE con FIGMA [HTML y CSS]
Вставка
- Опубліковано 19 вер 2024
- 👨💻🎁 Aprende Diseño Web Desde Cero 👉 alexcgdesign.c...
Aprende como crear una Landing Page en Figma, para posteriormente maquetarl la Landing Pageb con HTML5 y CSS3.
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger....
✉️ Redes sociales:
Blog de desarrollo web: www.alexcgdesi...
Facebook: goo.gl/7o77tx
Linkedin: goo.gl/byCJnS
Github: github.com/Ale...
![[ 🔴 LIVE CODING ] como CREAR una PAGINA WEB con HTML CSS [Adaptable a dispositivos móviles]](http://i.ytimg.com/vi/T1L73L5j1ws/mqdefault.jpg)
![[ 🔴 LIVE CODING ] como CREAR una PAGINA WEB con HTML CSS [Adaptable a dispositivos móviles]](/img/tr.png)
👨💻🎁 Aprende Diseño Web Desde Cero 👉 alexcgdesign.com/descuento-diseno-web-moderno/
ayudame
Me encantó este video, por fin pude encontrar un método más entendible para hacer responsive desing sin tener que cambiar toda la página solo usando el keyframe :D
Muchas gracias por solucionar mi duda, espero que puedas tocar el tema ocasionalmente en próximos videos
Por fin alguien que muestra como aplicar algo de figma en código, porque la verdad no entendía como aplicar los diseños increíbles que se pueden hacer en figma a código o a js para darle funcionalidad a los botones
Excelente video! En 28 minutos yo a lo mejor estuviese todavía haciendo el diseño en Figma y viendo vídeos de UA-cam de cómo resolver un bug de Figma 😅, eres todo un pro.
Bro este tutorial me dejó impresionado. No sabía que con Figma se podía diseñar tan bien una página. Además explicaste todo muy claro y fácil de entender, eres un CRACK!
Muchas gracias por el tutorial, simplemente muy bueno. Me dedico al desarollo web, pero la verdad que para hacer estas cosas del front-end soy muy malo pero, lo hiciste ver tan simple, que creo que puedo mejorar. Me va a servir para la web de mi futura empresa, muchísimas gracias nuevamente.
Creo que lo viste facil por que en si eso no es desarrollo web, es casi casi como usar WordPress, pero para tu propósito es mas que suficiente
Me gustó esta guía. Está muy clara y me ayudó para ir aprendiendo a usar la interfaz de figma, lo que me queda es terminar de aprender el leguaje de código necesario para que la landing page funcione
Todo genial con el tutorial hasta el momento de pasar de FIGMA a CODIGO, para los que no sabemos nada de codigos nos perdemos por completo. Te agradecería si pudieras explicarlo paso a paso y como crear los codigos desde cero. Ya que no se entiende a partir de ese paso, al menos no las personas que nunca hemos usado codigos ni html.
Gracias por esta clase , super genial y aprendí cosas nuevas
Me volaste la cabeza con todo el css xd, tengo que llevar tu curso para entenderlo mejor, buen video 😁
Quiero agradecerte Alex, ya que gracias a ti, se muchísimo sobre HTML y Css, muchísimas gracias.
Me encantó tu explicación, te agradezco muchísimo en compartir tus conocimientos.
Hola, no entiendo lo que haces cuando modificas el wave, que dices que presionas scot? no entiendo bien cual es esa funcion
Hola, es la tecla "esc" que normalmente está en la parte superior izquierda
Yo también me quede así de "scot" Asu madre!! ¿Cual es esa tecla? xD
Jajajajaja si perdón, me confundí jajaja
Espectacular
Esta brutal tu explicación muy clara...felicidades.
Muy buen video. Gracias.
cómo eliminas los nodos fuera del área de trabajo del vector?
Gracias Lalo Garza
Muchas gracias, muy buen video y bien explicado
Muchas gracias justo lo que buscaba sigue así crack
Alex vengo de ver el primer video de figma y ahora con este. Venia entendiendo todo bien con los vectores, como armar la landing pero cuando pasaste a la parte de código, de repente ya tenias una carpeta con todos los archivos de html .. ahi no pude seguirte mas. No se si habrá algun video de como preparar bien esa carpeta. gracias
Lo primero de todo, enhorabuena por el tutorial, muy buena calidad y bien explicado. Lo segundo: me pierdo a partir del minuto 12:23, cuando dices "Voy a pasar a mi editor de código". Qué editor es? No se puede publicar la página web directamente desde Figma?
Que buen video, super completo y bien explicado como siempre.
Hola, recién descubro esto y probando en mi primera incursión descubro que con la barra espaciadora igual que en ilustrator puedes moverte por todo el espacio de trabajo y tambien puedes copiar los vectores de ilustrator y pegarlos aquí
de verdad me gustó mucho este video esta genial
Me ha servido de mucho, Muchas gracias sigue asi!!
Tremendo!
Gracias por la clase Alex. Muy buen vídeo!
Muy bueno, pero...mucho trabajo para hacerlo responsivo no? Hay algun otro metodo o formas de hacerlo mas sencillo? Gracias x el aporte. Por lo demas, me gusto tus tips en el diseño en Figma.
Muy buen video, todo bien explicado
No sabia que Lalo Garcia tmb enseñaba figma
Gran video 🙌🙌🙌💯💯💯
Muy didactico, buen aporte colega, pero alguien me puede decir quien C...jos es SCOTT?
Creo que quiere decir Escape
@@nesperides si, logré decifrarlo después de un análisis exhaustivo en grupo.
Vengo del futuro, perdon, de Elementor y la verdad, elementor tambien tiene sus propios problemas...
Buscaba algo como "Dibujalo como quieras y al dar clic al Boton EXPORTAR descargaras un Zip listo para subirlo a tu servidor"
Creo que pido demasiado a 2022!
Es lo que estoy buscando yo también.
Gracias @AlexCG Design por tu aporte. Podrán ayudarme con el scott para qué es? cúal es la tecla para seleccionarlo?
Hola Francis, una disculpa jaja es la tecla ESC :))
@@AlexCGDesign jajjaj gracias
Hola a todos, muy buen tutorial, me sirve muchisimo cada herramienta que ensañas. Solo una duda, ¿A que te refiere cuando dices "Presionar scot"? En el minuto 09:29 lo dice y no entiendo de que se trata.
Una disculpa, es la tecla ESC jeje, me equivoqué de nombre
Muy bueno, aunque recién estoy aprendiendo.
PD: Podrías hacer tutoriales de python?
Por el momento no creo tener tiempo para tutoriales de Python
Muy buen video
No termino de entender de donde sacas los .html que tienes en las carpetas. Los genera figma automaticamente o los has hecho tu a mano por separado??
amigo exelente video, pero una recomendacion, hay gente que no sabe aun me incluyo y haces y mueves las herramientes y aprietas comandos, sin explicar bien donde estan o para que son, me gustaria y ayudaria de mucho si las nombraras y dijeras que hacen
Gracias por el video.
Cuando queiro pasar los "waves" al HTML no sé como pasar el código de la forma; ¿podrás explicar esa parte, concretamente el código de las curvas dónde están?
Gracias
Pregunta, en tal caso tengo mi vector abajo al 100% de la pantall, y mi ilustración en la mitad debajo de contenedor texto, cuando hago en el @media de 800px. flex-direction: column-reverse por que la ilustracion no pasa arriba, he mirado los llamados por orden cambio variables y nada.. es una forma difernte obvio a la que tienes pero el cambio es minimo y no funciona, que puedo hacer Gracias..
hola no entiendi cuando usted paso todo lo q creo en la carpeta de el curso de figma
execelente tutorial Alex , me podrias indicar algún lector de código gratuito o es que forma parte de Wordpress
porque reseteas el box-sizing?
Hablas como Francis de Malcolm el de enmedio :O
Buen video crack
Alex intento hacer todo como lo haces pero al exportar el vector me sigue saliendo un fondo blanco
En el responsive, el wave no sale completamente pegado a la derecha, ¿Cómo lo logro sin usar alguna libreria como boiler-plate?
cuales son los breakpoints más usados?
Buen video !!!. Como puedo encontrar tus cursos que se complementen estos con acceso a datos ?. Es decir html,css y js ?
Hola, qué prorgama es cuando dices que vas a pasar a tu editor de código? :(
Para pasar la página web al tamaño de celular como hay que hacer? Tengo que adaptarlo a todos los tamaños desde figma o solo a uno? (android por ej.)
figma vendría siendo como un framework?Que diferencia hay con boostrap o algun framework? nuevo sub
Figma es diseño gráfico, Bootstrap es un framework de CSS, se usa codigo html, css3 y javascript/jquery(libreria de js)
¿Es posible importar un video aun frame de mi prototipo?
Gracias Alex Figma o Adobe XD? Cuál te parece más completo?
En lo personal Figma, aunque Adobe xd igual es bueno, pero obviamente prefiero figma
Estoy iniciando en esto, ¿manypixels es pagado?
tendrás algún nuevo cupón para el curso de html y css?
Muy buen video, lástima que los de Adobe compraron a Figma.
Parece que no se puede exportar a html en las ultimas versiones.
Si es verdad 😩 ahora es pago
Que martirio es para los que usamos Mac y tengo que verme con este tipo de transiciones de "scot"
El video me parece que está desincronizado del audio.
La primera parte lo entendi pero la segunda bole :'(
En este caso
cómo puedo encontrar un empleo haciendo esto?
5
No me gusta que la página te diga todo el código, le quita el sentido al desarrollo web🤦♂️
uf
Esa pronunciación selectiva ❤
prefiero aplicar css a lo macho :v
que mal tutorial