No tienes acceso a esta clase

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

Maquetando el hero

6/27
Recursos

Aportes 33

Preguntas 16

Ordenar por:

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

Cuando crezca quiero ser como tu :3. Desde abril me he estado esforzando tantoooo para lograrlo

Me gustaría recomendarles el Audiocurso de Accesibilidad Web: Casos de Estudio
En temas de accesibilidad se aprenden muchas cosas y se toca el tema del texto alternativo en las imágenes.

Si quieren saber la función de cada una de las etiquetas en HTML les dejo el siguiente recurso:
https://developer.mozilla.org/es/docs/Web/HTML/Element

Vengo del mundo del diseño, estoy dando mis primeros pasos en programación y sencillamente me está encantando.

Unas cosas que tengo para recomendar:

Remarcar la importancia de la Indentación, que es y xq se usa

Y también la importancia del Autoguardado o recordar Guardar siempre que se pueda.

Me encanta el profe como hace su explicación tan sencilla de entender. Genial para dar los primeros pasos en programación.

  • La etiqueta section se utiliza para definir una sección en una página web. Se puede utilizar para agrupar contenido relacionado, como artículos o contenidos promocionales, y se recomienda utilizarla cuando se desea dar énfasis a cierto contenido.
  • El atributo id se utiliza para darle un identificador único a un elemento en HTML. Se puede utilizar para seleccionar un elemento específico desde el CSS o para enlazar a un elemento específico desde otra parte de la página o de un sitio web.
  • El atributo alt se utiliza en la etiqueta img para proporcionar una descripción alternativa del contenido de la imagen, que se muestra en su lugar si la imagen no puede ser cargada. Además, es importante para la accesibilidad web, ya que las tecnologías de asistencia utilizan este atributo para describir las imágenes a los usuarios con discapacidades visuales.
  • La clase (class) se utiliza para identificar un conjunto de elementos HTML que comparten ciertas características y se pueden aplicar estilos CSS a ellos en conjunto. Se pueden definir múltiples clases para un elemento y, por lo general, se utilizan para definir estilos personalizados o aplicar estilos predefinidos de un framework o librería.
  • La etiqueta h1 es utilizada para definir el encabezado principal de la página, normalmente se utiliza para el título. El tamaño de la fuente por defecto es mayor que el de cualquier otro encabezado de HTML.
  • La etiqueta span es una etiqueta en línea que se utiliza para aplicar estilos a una parte específica del contenido de un elemento, o para agrupar y manipular elementos en línea.
  • La etiqueta p se utiliza para definir un párrafo. Se utiliza para estructurar y dividir el contenido en secciones, y ayuda a que el contenido sea fácilmente legible y comprensible para el usuario.

Las hero images son aquellas imágenes de mayor tamaño que aparecen en la parte superior de una página web y que ocupan prácticamente toda la anchura del site. Se utilizan principalmente para llamar la atención del usuario de una manera mucho más eficaz y para mostrar las características que se quieran destacar de la marca

Lo más difícil de las clases es la creatividad al nombrarlas

Me parece genial que hayan diferentes profesores que expliquen las mismas cosas en diferentes cursos. Te ayuda a ver diferentes puntos de vista, etc.

Excelente la clase, la forma de explicar del profesor es muy buena, por primera vez estoy siguiendo los pasos y no me he perdido, ni he tenido ganas de dejar todo botado 🙂👍

La diferencia entre una ID y CLASE es:

  • **ID **se puede usar para identificar un solo elemento y en CSS se representa por (#)
  • CLASE se puede usar para identificar o agrupar más de uno que comparten ciertas características y en CSS se representa por (.).
    NOTA: ID tienen prioridad sobre las clases. Si se aplica un estilo a un elemento utilizando tanto un ID como una clase, el estilo del ID prevalecerá.

Pensar en cajitas para darle el diseño con CSS.

¿Qué es la maquetación?

La maquetación de un sitio web es la etapa en la que se estructuran, organizan y distribuyen de manera gráfica los espacios y elementos que tendrá el sitio; como menús, imágenes, botones, videos, enlaces, títulos y más, para luego pasar a una previsualización de cómo se verá el sitio terminado.

Se eligen paletas de colores, tipografías y estilo para que así el diseño del sitio web luzca increíble pero también sea funcional y cumpla con lo que queremos lograr a través de una página web.

Una vez aprobada la maqueta del sitio, el proyecto pasa a programación para comenzar con la construcción del sitio web.

Visto de otro modo, la maquetación de un sitio web es similar al proceso de diseño en arquitectura; antes de construir un edificio se crean planos con datos técnicos de la estructura y después se crea una maqueta o un modelo en 3D de cómo se verá el edificio terminado.

que buena clase , eres el rey para explicar ¡¡¡

Mejor explicado, Nunca, Gracias Profe

Excelente Clase. Muy bien explicado.

Quisiera aportar que es muy bueno aprender Emmett que es un complemento que está en los editores para la rápida escritura de código.
Buenas, tengo el problema de que la pagina no carga mis imagenes, las imagenes son de mi pc y las coloque en el html pero no cargan en el proyecto. Deberia cargarlas en Drive o algo por el estilo ?
porque a mi no me aparecen las imagenes, ni la opccion de que visual estudio code muestre la carpeta con la imagen? solo me aparecen 2 imagenes y no son las q quiero
que chimba de explicación!!! super claro todo.
`<section>`**: Contenedores para Organizar Contenido** Las etiquetas `<section>` son elementos utilizados para crear áreas de contenido estructuradas dentro de una página web. Sirven como cajitas o secciones donde puedes agrupar y organizar contenido relacionado. Dentro de estas secciones, puedes utilizar etiquetas de contenedor como `
` para una mayor organización. `class`**: Agrupación de Elementos Similares** La propiedad `class` te permite agrupar elementos similares en tu página web. Por ejemplo, puedes aplicar una misma `class` a varios elementos `
` que contengan imágenes diferentes. Esto facilita la aplicación de estilos o manipulación con JavaScript a múltiples elementos al mismo tiempo. A diferencia del `ID`, que es único para cada elemento y se utiliza para identificar un elemento específico. Un pequeño resumen, recomiendo la herramienta **Notion** para ir realizando resumen...

pensar en modelo de caja para mejorar el layout

Es preferible usar texto con la etiqueta P

Muy interesante!

Con Html realizamos la estructura, pero la magia visual ocurre al aplicar los estilos con CSS

Las cajitas! jeje buena forma de verlo, me ayuda a entender mejor!

Maquetar en programación es el proceso de diseñar y crear la apariencia visual de una interfaz de usuario utilizando herramientas de diseño y maquetación. Los diseños visuales se convierten en código utilizando lenguajes de marcado como HTML y CSS para producir una versión funcional de la interfaz en el navegador web. La maquetación es un proceso importante en el desarrollo de aplicaciones y sitios web ya que la apariencia visual de la interfaz de usuario puede influir significativamente en la experiencia del usuario y en la capacidad del usuario para interactuar de manera efectiva con la aplicación o el sitio web.

Carlos: Excelente forma de enseñar con sencillez y conocimiento. Felicitaciones

Este es un nuevo aporte para mis conocimientos en HTML, Muchas Gracias

Excelente clase! Excelente profesor, voy entendiendo perfecto lo que explica!

Aquí podemos ir viendo como en la maquetación de nuestro HTML vamos a ir agregando todas esas secciones que queremos para nuestra página web, y con el CSS le vamos a dar el estilo a estas secciones.