No tienes acceso a esta clase

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

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

3D
21H
34M
56S

Maquetando la sección de redes sociales

7/27
Recursos

Aportes 16

Preguntas 2

Ordenar por:

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

o inicia sesión.

Confirmo que es con la tecla ALT✨ , para realizar cambio simultaneo

Les comparto el siguiente sitio web: https://www.flaticon.es/ allí pueden descargar diferenes iconos gratis en diferentes formatos

Con tecla window + punto. Te abre los iconos para que pongas en tu páginas.

→ head para la cabecera
→ Main para el contenido principal
→ footer para el pie de página

 

  • Lorem para texto genérico

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:

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

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

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

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

Pueden utilizar esta herramienta para descargar los iconos gratis y en buena calidad!

https://www.flaticon.es/

Les comparto una biblioteca de iconos, los pueden descargar como SVG o utilizar el codigo https://fontawesome.com/

Prepárense, que lo que viene es bueno.

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.

No están las fotos de redes sociales :S

debieron colocar los pngs de las redes sociales en recursos

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 🤗

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>

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