Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafío 1: Haga lo que hicimos

1.- Estilizando elementos con clases CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estilizando elementos</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <p class="texto-destacado"> ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. </p>
    </main>

    <footer></footer>
</body>
</html>
.texto-destacado {
    color: #D5D3C1;
}

2.- Destacando títulos con CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1 class="titulo-blog">Bienvenido a mi blog personal</h1>
    </header>

    <main>
        <p> ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. </p>
    </main>

    <footer></footer>
</body>
</html>
.titulo-blog {
    color: #d2691e;
}

3.- Estilos situacionales con clases CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Noticia</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <p class="urgente"> Noticia Urgente: Alura Latam y Oracle lanzan cursos para programadores </p>
    </main>

    <footer></footer>
</body>
</html>
.urgente {
    color: red;
}

4.- Entendiendo y aplicando el reset CSS

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <h1>Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong></h1>

        <p>
            ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
        </p>

        <a href="https://www.linkedin.com/in/carlos-alberto-gonzalez-custodio">Linkedin</a>
        <a href="https://github.com/CarlosGC-LP">Github</a>
        
        <img src="img/perfil.jpg" alt="Imagen de perfil">
    </main>

    <footer></footer>
</body>
</html>
* {
    padding: 10;
    margin: 10;
}

5.- Inspeccionando elementos y entendiendo el modelo de caja

padding: Al manipular el padding, defines la posición y el tamaño del contenido dentro del espacio interior de su elemento border: Es una propiedad abreviada para propiedades de CSS como lo son: border-color, border-style, border-width, margin: Ayuda a definir dónde comienza y termina una línea de texto dando un margen entre el area del contenido y con los bordes de la misma

6.- Aplicando el modelo de caja en la práctica

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header></header>

    <main>
        <h1>Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong></h1>

        <p>
            ¡Hola! Soy Carlos Gonzalez, desarrollador Front-end con especialización en HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?
        </p>

        <a href="https://www.linkedin.com/in/carlos-alberto-gonzalez-custodio">Linkedin</a>
        <a href="https://github.com/CarlosGC-LP">Github</a>
        
        <img src="img/perfil.jpg" alt="Imagen de perfil">
    </main>

    <footer></footer>
</body>
</html>
* {
    margin: 30px;
    padding: 30px;
}

body {
    background-color: #D5D3C1;
    color: #000000;
}

.titulo-destaque {
    color: #22D4FD;
    border: 2px solid #22D4FD;
}
1 respuesta

Hola, Carlos ,

Gracias por compartir tu código con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!