No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Maquetando el hero

6/27
Recursos

Aportes 29

Preguntas 16

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

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.

Vengo del mundo del dise√Īo, estoy dando mis primeros pasos en programaci√≥n y sencillamente me est√° encantando.

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

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

  • 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.

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.

`<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.