¡Bienvenido a mi tutorial! 🤓
Antes que nada te recomiendo que tomes los cursos de:
Prework: Aquí, básicamente, te enseñan a preparar tu computadora para que esté lista al momento de programar.
Frontend Developer: Aquí vas a aprender todo lo relacionado con el diseño de una página web.
Las herramientas que yo utilizo son:
Los datos claves para tener en cuenta al momento de crear la tarjeta son:
box-sizing: border-box: Esta propiedad nos ayuda a que todo encaje en el contenedor, ya que, por ejemplo, en un width al establecer un padding o un border, estos se incluirían a ese cálculo.
Display: Las formas de visualización Flex o Grid.
Posicionamiento: Las más utilizadas en este caso relative para el padre y absolute para los hijos, así estos se pueden mover libremente dentro de ese contenedor.
z-index: Consiste en la superposición de capas, así podemos manipular un elemento sobre otro, si el valor es mayor se sobrepone sobre el que tiene menor valor.
🧑🚀El resto ya es cuestión de la imaginación y lo más importante practicar para así ir comprendiendo cada propiedad.
Espero les sirva, dejo el código de mi primera tarjeta y recuerda “Nunca dejes de aprender” 🚀:
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Mi Tarjetatitle>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;width: 100%;
height: 300px;/* background-color: aquamarine; */
position: relative;
}
.card {
width: 140px;
height: 140px;
background-color: black;
border-radius: 50%50%50%50% / 50%50%50%50%;
border: 2px solid white;
position: absolute;
z-index: 2;
top: 5px;
left: 5px;
overflow: hidden;
}
.nav {
display: flex;width: 100%;
height: 150px;
background-color: #BA4A00;
position: absolute;
z-index: 1;
justify-content: center;
align-items: center;
}
.nav:nth-child(1) {
font-weight: 900;font-size: 50px;
}
.cardimg {
width: 100%;
height: 100%;
}
.text {
z-index: 3;
position: absolute;/* align-self: center; */
top: 200px;
left: 500px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.container-footer {
display: grid;width: 100%;
height: 200px;
background-color: #1e130b;
grid-template-columns: 1fr 1fr;
border: 0.5px solid white;font-size: larger;font-weight:lighter;color: whitesmoke;
text-align: justify;
}
.container-footerdiv:nth-child(1) {
align-self: center;
padding: 20px;
margin: 20px;
}
.container-footerdiv:nth-child(2) {
align-self: center;
padding: 20px;
margin: 20px;
}
style>
head>
<body>
<sectionclass="container">
<divclass="card">
<imgsrc="https://images.pexels.com/photos/7210672/pexels-photo-7210672.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Jack Rusell">
div>
<divclass="nav">
<h1>MILA SEIS DEDOSh1>
div>
<h2class="text">She is my beatiful little dogh2>
section>
<footerclass="container-footer">
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit repellendus illo sapiente accusantium numquam dolorem sint enim aliquam et quas corporis doloremque nihil, ipsum recusandae laboriosam architecto magnam est quae?div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum mollitia fugiat laudantium inventore explicabo facere porro laborum. Ducimus, ullam, impedit possimus cumque aperiam dignissimos quis distinctio reiciendis eum recusandae sequi.div>
footer>
body>
html>
