Introducción a Webflow Designer

Información resumida de esta clase
#EstudiantesDePlatzi

• En el panel izquierdo de Webflow podemos encontrar todo el contenido que podemos añadir a nuestros proyectos

• En el panel derecho podemos encontrar todas las opciones para dar estilos al contenido de nuestros proyectos

• Webflow funciona arrastrando los elementos que usaremos

• En la sección de símbolos podemos encontrar los componentes

• Existe una sección de páginas y allí es donde podemos agregar varías páginas a nuestros proyectos

• En el espacio llamado Assets es en donde ubicaremos todos las imágenes, vectores, etc, que estaremos usando en el proyecto

• En la parte superior encontramos las diferentes vistas que tendrá nuestro proyecto en diferentes dispositivos

• Podemos exportar nuestro proyecto como código

• Al momento de exportar nuestro proyecto podemos hacerlo con un subdominio de Webflow o en un dominio personalizado

Comparto mis notas, las tengo en notion, pero se perdió algo de estructura en el copia y pega :P Paso a comentar que la interfaz a cambiado desde la publicación del curso, mi comentario es de jul/2024. no se sorprendan si hay incongruencias en el futuro * En el panel izquierdo de Webflow podemos encontrar todo el contenido que podemos añadir a nuestros proyectos * En `Add Elements` (forma de +) Podremos añadir todo lo relacionado a `HTML` * En `Pages` (forma de hoja), allí podemos añadir las sub páginas. * El `navigator` nos grafica la estructura de nuestra página. * Los `Components` son componentes reutilizables. Una vez creados, pueden usarse en múltiples páginas, secciones, y cualquier cambio en un símbolo se actualizará automáticamente en todas sus instancias en el proyecto. * `Variables` es donde se listan todas las variables del proyecto * `Style Selectors`: Maneja todas las clases CSS añadidas al proyecto,muestra cuantas veces fue usado una clase y donde. * `Assets` es en donde ubicaremos todas las imágenes, vectores, etc, que estaremos usando en el proyecto * El `CMS` es donde añadimos el contenido dinámico * `Logic` ??? * `Users` ??? * `Ecomerce` ??? * `Apps` ??? * En el panel derecho, en la parte superior, podemos encontrar los 3 principales paneles de esta sección. * `Style` Maneja todo lo relacionado con el CSS del bloque seleccionado actualmente * `Settings` Maneja las configuraciones relativas al bloque seleccionado actualmente * `Interactios` Permite la creación de animaciones interactivas en nuestra página * En el **panel superior** hay * Un símbolo de reproducción toggle preview, quita la interfaz de developer. * Tabién estarán la simulaciones de interfaces de teléfono, tablet y portatil. * `` Permite exportar nuestro proyecto como código * `Share` Permite crear un enlace gratuito para compartir nuestra página.

"Symbols" Parece ser que cambió a el nombre de "components"

Daniel, buen día, mencionas una extension de Chrome en los recursos del curso pero no la encuentro (la extensión para ver por independiente HTML y CSS), gracias!