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,
Iniciar sesiónAportes 16
Preguntas 2
Ordenar por:
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:
-
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.
Pueden utilizar esta herramienta para descargar los iconos gratis y en buena calidad!
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.