Confirmo que es con la tecla ALT✨ , para realizar cambio simultaneo
Introducción
Cómo se crean las páginas web
¿Qué es el Frontend?
¿Qué es el Backend?
Sitios Code con HTML y CSS
¿Qué debo saber de HTML?
Mi primera página web con HTML
Maquetando el hero
Maquetando la sección de redes sociales
¿Qué debo saber de CSS?
Mis primeros estilos con CSS
Estilos del menú
Estilizando el Hero: elementos encima imágenes
Estilizando el Hero: información del hero
Estilos para las imágenes de redes sociales
Detalles finales con HTML y CSS
Despliega tu página a internet
Cómo hacer deploy a internet
Cómo publicar tu página web gratis en internet
Compra el dominio de tu página web
Cómo comprar un hosting para mi página web
Sitios No-code con WordPress
Qué es no-code
Despliega tu página web con WordPress
Instalación y configuración de Elementor
Mi primera página web con Elementor
Maquetando el hero con Elementor
Mi primera página web con una plantilla de WordPress
Conclusiones
¡Conoce otros proyectos de este curso!
Próximos pasos para convertirte en Web Developer
Comparte tu proyecto del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
16 Días
6 Hrs
36 Min
6 Seg
Maquetando la sección de redes sociales
7/27Recursos
Aportes 35
Preguntas 6
Ordenar por:
Con tecla window + punto. Te abre los iconos para que pongas en tu páginas.
Estructura básica HTML
Antes de ver los códigos básicos, debes saber que la primera línea de tu documento HTML siempre debe contener la etiqueta <!DOCTYPE html>. Esto hará que el código de tu sitio sea legible en cualquier navegador.
Ahora bien, un documento HTML bien armado tiene cuatro etiquetas esenciales para que el contenido se distribuya correctamente. Estas son:
-
HTML
<html> está al inicio de un documento HTML e indica a los navegadores que la página tiene código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje, la etiqueta de cierre </html> será el último elemento del documento. -
Encabezado
<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal función es contener toda la información del funcionamiento del sitio. Debido a esto, es un código encriptado que las personas que entran a la página no pueden ver. -
Título de la página
<title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo. Es el título que puedes ver en las pestañas del navegador. -
Cuerpo
<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de otra forma, comprende todo el contenido visible del sitio. Aquí podrás insertar texto, imágenes, videos o cualquier otra funcionalidad que desees mostrar.
→ head para la cabecera
→ Main para el contenido principal
→ footer para el pie de página
- Lorem para texto genérico
Para mi este es el mejor sitio para buscar iconos
Te permite lo siguiente
- Descargar en PNG
- Descargar en SVG
- Copiar codigo SVG para usar directo en HTML o Figma
- Copiar link para usarlo en Notion
- Seleccionar un color determinado (aunque eso pude quedar de lado cuando ya sepas usar CSS)
Pueden utilizar esta herramienta para descargar los iconos gratis y en buena calidad!
Algo que les puede ayudar mucho para darle orden al texto (para los que usan visual studio) es seleccionar todo el texto con ctrl + a y luego darle windows + p y dar formato al documento, esto les pondra todo el texto con los espaciados y orden correspondiente. sigan viendo 🤗
11 minutos, de la clase 2 horas de practica
<main>: Esta etiqueta define el contenido principal de la página y debe contener todo el contenido relevante de la misma. Solo debe haber una etiqueta<main>en la página.lorem: “Lorem ipsum” es un texto ficticio que se utiliza como marcador de posición en diseños gráficos. Puedes generar texto de este tipo utilizando generadores de texto aleatorio.<ul>y<li>: Estas etiquetas se utilizan juntas para crear listas. La etiqueta<ul>define la lista en sí misma, y cada elemento de la lista se define con la etiqueta<li>. Puedes utilizar estilos CSS para personalizar el aspecto de las listas.<a>: Esta etiqueta se utiliza para crear enlaces a otras páginas o a otros lugares de la misma página. Debes utilizar el atributohrefpara indicar la URL del destino del enlace. También puedes utilizar el atributotargetpara indicar si el enlace debe abrirse en una nueva ventana del navegador.
No están las fotos de redes sociales :S
En vscode es mejor usar Ctrl + D para seleccionar multiples palabras con el mismo texto, primero hay que seleccionarla y después presionar el comando
Prepárense, que lo que viene es bueno.
Les comparto una biblioteca de iconos, los pueden descargar como SVG o utilizar el codigo https://fontawesome.com/
para citar los emojis desde una pc windos es:
Windows + .
Confirmo, Windows con la tecla Alt
Para seleccionar varias cadenas iguales a la vez en Windows yo uso ctrl+d
Google ha compartido una base de íconos espectacular:
[Material Symbols and Icons - Google Fonts
](https://fonts.google.com/icons)
También puedes descargar fuentes gratuitas y ver algunos artículos e información valiosa.
Quisiera comentar que hasta el momento me ha agradado mucho el docente. Muy didáctico, sabe explicar y se le nota que le gusta enseñar. 🙌
Otro tip! Al momento de crear textos de tipo "Lorem Ipsum" dentro de VS Code, también podemos especificar la cantidad de palabras que queremos que contenga el bloque de texto. Por ejemplo, si queremos incluir un párrafo de 20 palabras podemos colocar la etiqueta de párrafo:
``
Y luego dentro escribir:
`
Lorem20
` `Presionamos enter y listo! 💪🏻😁`
Tip para vscode al escribir listas que van a tener misma estructura de etiquetas en el interior
`li*4>a>img`
La principal razón por la cual es importante realizar la maquetación del sitio previo a la programación del mismo es la organización de los elementos y el poder visualizar cómo será el sitio una vez sea publicado.
Esta clase se centra en la creación de una sección de iconos sociales utilizando HTML. Se inicia con el código previo y se explica cómo contraer secciones en Visual Studio Code para facilitar la visualización. Luego, se introduce la etiqueta `<main>` para el contenido principal, donde se añade una descripción personal usando la etiqueta `
`. Se crea una lista desordenada `
- ` para los iconos sociales, cada uno representado por un elemento `
- ` que contiene un enlace `` y una imagen `
`, destacando la importancia de usar imágenes adecuadas. Finalmente, se menciona que, aunque el diseño es básico, el siguiente paso será aplicar CSS para mejorarlo.
agrego que para organizar el código automáticamente debemos presionar alt+shift+f
Excelente, explica muy bien!
Podrían mejorar su accesibilidad poniendo una aria-label a su icono de facebook de la siguiente manera
<a href="url" aria-label="Enlace de Facebook">
<img>
</a>
Muy avanzado creó, pero a mi hubiese gustado saberlo al principio.
no estan los recursos
Que diferencia con CSS. Excelente explicación de HTML.
Es con la tecla ALT que se escribe en simultaneo
Genial!!, vamos a darle formaaa =D
debieron colocar los pngs de las redes sociales en recursos
divides head body y footer?
caray, tenia entendido que van dentro del body
Les comparto la sintaxis básica para maquetar la sección de las redes sociales:
<ul class="social-icons">
<li>
<a href="#" class="Social icon" id="Gmail">
<img src="Imagenes/Gmail.png" alt="Gmail">
</a>
</li>
<li>
<a href="https://www.facebook.com" class="Social icon" id="Facebook">
<img src="Imagenes/Logo_de_Facebook.png" alt="Facebook">
</a>
</li>
</ul>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?