Invierte en tu educación con el precio especial
Antes:$249
Paga en 4 cuotas sin intereses
Termina en:
12d
10h
55m
10s
¡Saludos, solo por curiosidad entre para aprender a programar porque soy bueno escribiendo rápido 7w7! Hoy, te guiaré en la creación de tu propia tarjeta de presentación utilizando los lenguajes HTML y CSS. No estoy seguro de quién vea esto, pero siempre doy todo mi potencial.
Antes de comenzar, asegúrate de tener un editor de texto instalado en tu computadora. Puedes utilizar cualquier editor de texto mas utilizado com Visual studio code. Si eres principiante este tutorial te ira de maravilla!
Paso 1: Estructura básica del documento HTML
Comencemos creando el esqueleto. Abre tu editor de texto y crea un nuevo archivo con extensión".html". Luego, escribe lo siguiente:
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mi Tarjeta de Presentación</title></head><body><divclass="card"><!-- Aquí irán los elementos de nuestra tarjeta de presentación --></div></body></html>Paso 2: Estilizando la tarjeta de presentación con CSS
Ahora, en el mismo codigo debajo del <head> escribimos la etiqueta <style>, y escribe lo siguiente:
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mi Tarjeta de Presentación</title></head><style>.card {
background-color: #f1f1f1;
border-radius: 10px;
padding: 20px;
width: 300px;
margin: 0 auto;
text-align: center;
box-shadow: 04px8pxrgba(0, 0, 0, 0.1);
}
.name {
color: #333;
font-size: 24px;
margin-bottom: 10px;
}
.description {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.skills {
list-style-type: none;
padding: 0;
margin-bottom: 0;
}
.skillsli {
background-color: #333;
color: #fff;
padding: 10px20px;
margin-bottom: 10px;
border-radius: 20px;
}
</style><body><divclass="card"><!-- Aquí irán los elementos de nuestra tarjeta de presentación --></div></body></html>Aquí hemos definido algunos estilos básicos para nuestra tarjeta de presentación. Hemos establecido una fuente, un color de fondo y aplicado algunos estilos de caja para dar forma a nuestra tarjeta. Guiándonos de lo enseñado en el curso de Frontend Developerd
Paso 3: Añadir contenido a la tarjeta
Añadir contenido a nuestra tarjeta. Dentro del elemento <div class=“card”>, agrega lo siguiente:
<h1>Tu Nombre</h1><p>Estudiante de programación web</p><p>Teléfono: 123-456-789</p><p>Email: [email protected]</p>Por último te muestro como quedo el mío:
Muchas gracias por quedarte hasta el final, yo considero lo mismo para mí. Me gustaría mucho su feedback.
Aquí está el enlace, no apareció en el Tutorial por razones que ni yo sé. Pero aquí está.
<ahref="https://blogcreative.super.site/proyectos/primera-practica-html-y-css">Visita mi sitio web</a>