Introducción HTML:
Este código HTML, constituye una página web que representa una carta de presentación de un desarrollador front-end.
Explicación conceptual del código “Carta De Presentación”:
El código "Carta De Presentación" es un documento HTML que crea una página web que muestra una carta de presentación básica. Aquí hay una explicación simplificada:
DOCTYPE HTML: Indica al navegador que el documento está escrito en HTML5.
<meta charset="UTF-8">: Le dice al navegador que use un tipo especial de letras (UTF-8) que puede mostrar muchos idiomas y símbolos.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Le dice al navegador cómo ajustar la página para que se vea bien en diferentes dispositivos:
width=device-width: Hace que la página se ajuste al tamaño del dispositivo.
initial-scale=1.0: Hace que la página se vea del mismo tamaño cuando se carga por primera vez.
Elemento HTML: Engloba todo el contenido y define el idioma del documento.
Elemento HEAD: Contiene información sobre la página, como el título, el conjunto de caracteres y enlaces a archivos externos como CSS y fuentes.
Enlaces externos: Vinculan archivos de estilo y fuentes para darle estilo a la página.
Elemento BODY: Contiene el contenido visible de la página.
Contenido de la carta: Incluye una imagen de perfil, títulos, enlaces a redes sociales y un párrafo con texto de relleno.
Introducción de CSS:
El código CSS proporciona estilos y diseños para mejorar la presentación visual de la carta de presentación en HTML.
Explicación conceptual del código “Carta De Presentación”:
Selector universal (*): Establece valores iniciales para todos los elementos HTML, como quitar márgenes y rellenos predeterminados y definir la fuente para todos los documentos.
Cuerpo de la página (<body>): Hace que el cuerpo de la página se centre tanto horizontal como verticalmente en la ventana del navegador, con el texto en color blanco.
Estilos de la sección (<section>): Da estilo a la sección donde está la carta de presentación, con esquinas redondeadas, fondo negro y sombra para un efecto 3D.
Estilos del contenedor principal (<div>): Organiza el contenido dentro de la sección, centrándolo vertical y horizontalmente y dejando espacio entre los elementos.
Estilos de los iconos (<i>): Define cómo se ven los iconos, como su tamaño y espaciado.
Estilos de los enlaces (<a href=""></a>): Establece que los enlaces sean blancos normalmente y amarillos cuando se pasa el cursor sobre ellos.
Estilos de la imagen (<img>): Da estilo a la imagen de perfil, como su tamaño, borde redondeado y un borde amarillo sólido. También hace que haya una transición suave cuando pasas el cursor sobre la imagen.
Estilos del párrafo (<p>): Define cómo se ve el texto en el párrafo, centrándolo horizontalmente, alineando los elementos verticalmente y dejando un espacio en el lado derecho.
Muestra: Este sería el resultado de nuestro proceso (no necesariamente igual) de nuestra carta de presentación
Felicidades!!!
¡Lo has logrado hiciste tu primera carta de presentación! Puedes volver hacerla para que tengas una mejor práctica y poder seguir adelante como desarrollador Front-End!!
Coach: Julián Charris
Commentaires