Sesión 3: 10 de marzo

Clase 3 de 4 • #PlatziChallenge: Crea tu primera página web

jose zuñiga

student•

Pos si alguien mas necesita el diseño en figma de la clase y lo estaba buscando como yo. https://www.figma.com/file/BIvMK5z4qpusGfr5l3Of6s/Platzi-Live-Landing?node-id=2%3A2

Jorge Sandoval

student•

gracias, justo estaba viendo el video ahora y no tenia idea de como encontrar el enlace

Maricela Fuentes Vazquez

student•

muchas gracias jose, no lo encontraba

José Mañaricúa Torres

student•

Me propuse como reto maquetar con HTML y CSS la página clon de Platzi Day, anexo las imágenes y el código en HTML y CSS, me falta realizar los media queries para que la página sea responsive web design. Agradezco sus opiniones al respecto y consejos.

Ahora el código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
    <title>Platzi</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <figure class="logo-high">
                <img src="./img/isotipo.webp" alt="">
                <img src="./img/logotipo.webp" alt="">
            </figure>
            <ul>
                <li>
                    <a href="#">Inicio</a>
                </li>
                <li>
                    <a href="#">Planes</a>
                </li>
                <li>
                    <a href="#">Cursos</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
                <li>
                    <a href="#">Agenda</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="main-container">
        <section class="section-up">
            <div class="left-section">
                <h2>Platzi Day</h2>
                <h5>18, 19 y 20 de Marzo</h5>
                <p>Acceso sin costo a todos los cursos <br> de platzi durante 72 hrs</p>
                <div>
                    <input type="text" name="" id="" value="https://platzi.com/l/day-2712939/">
                    <button>Copiar</button>
                </div>
            </div>
            <div class="right-section">
                <img src="./img/Hero.webp" alt="">
            </div>
        </section>
        <section>
            <div class="first-section">
                <h3>¿Qué es el Platzi Day?</h3>
                <p>Platzi Day es la oportunidad perfecta para que, gracias a ti, más personas puedan descubrir <br> 
                y probar la experiencia de la educación profesional efectiva durante 72 horas continuas sin <br>
                necesidad de contar con una suscripción.</p>
            </div>
            <div class="second-section">
                <h3>Subscripciones con las que cuenta Platzi</h3>
                <div class="sub-cat">
                    <div>
                        <h4>Basic</h4>
                        <p>1 estudiante</p>
                    </div>
                    <div>
                        <h4>Expert</h4>
                        <p>1 estudiante</p>
                    </div>
                    <div>
                        <h4>Expert +</h4>
                        <p>2 estudiantes</p>
                    </div>
                </div>
            </div>
            <div class="third-section">
                <h3>Encontrarás cursos de:</h3>
                <div class="courses">
                    <div>
                        <h4>Desarrollo e <br> Ingeniería</h4>
                    </div>
                    <div>
                        <h4>Marketing <br> Digital</h4>
                    </div>
                    <div>
                        <h4>Cursos de <br> Inglés</h4>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer >
        <div class="footer-container">
            <figure class="logo-down">
                <img src="./img/isotipo.webp" alt="">
                <img src="./img/logotipo.webp" alt="">
            </figure>
            <p>Transformamos la economía de nuestros países <br> entrenando a la próxima generación de <br> profesionales en tecnología.</p>
            <a href="#">Preguntas Frecuentes</a>
            <a href="#">Trabaja con nosotros</a>
            <a href="#">Términos y Condiciones</a>
        </div>
    </footer>
</body>
</html>

Y finalmente el código CSS:

:root {
    --bg-nav-fot: #0C1633;
    --letter-white: #FFFFFF;
    --col-btn: #98CA3F;
    --bg-blue: #17A2F8;
    --bg-rose: #FF8080;
    --input-grey: #C4C4C4;

    --big-lg: 6.4rem;
    --lg: 4rem;
    --big-md: 3rem;
    --md: 2.2rem;
    --big-sm: 2rem;
    --sm: 1.8rem;
    --min: 1.5rem;

    --f-weight-medium: 600;
    --f-weight-light: 500;

    --font-site: 'Montserrat', sans-serif;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-family: var(--font-site);
}
img {
    width: 100%;
}

nav {
    width: 100%;
    height: 6.8rem;
    background-color: var(--bg-nav-fot);
}
.logo-high {
    position: absolute;
    top: 1.4rem;
    left: 2.5rem;
}
.logo-high img:first-child {
    margin-top: .3rem;
    width: 2.9rem;
    height: 3.2rem;
}
.logo-high img:last-child {
    width: 4.8rem;
    margin-bottom: .4rem;
}
.navbar ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    height: 100%;
}
.navbar li {
    margin-right: 10.5rem;
}
.navbar li:last-child {
    margin-right: 0;
}
.navbar a {
    text-decoration: none;
    color: var(--letter-white);
    font-size: var(--sm);
    font-weight: var(--f-weight-medium);
}
.main-container {
    margin-left: 12rem;
    margin-right: 12rem;
}
.section-up {
    margin-top: 8rem;
    margin-bottom: 4rem;
    display: flex;
    justify-content: space-between;
}
.left-section h1 {
    font-size: var(--big-lg);
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.left-section h4 {
    font-size: var(--sm);
    color: var(--col-btn);
    margin-bottom: 3rem;
}
.left-section p {
    font-size: var(--md);
    margin-bottom: 5.5rem;
}
.left-section div {
    display: flex;
}
.left-section input {
    width: 34rem;
    height: 3.6rem;
    border: 1px solid var(--input-grey);
    margin-right: 1rem;
}
.left-section input[type="text"] {
    padding-left: 1.5rem;
    font-family: var(--font-site);
    font-size: var(--min);
}
.left-section button {
    width: 13.3rem;
    height: 3.6rem;
    background-color: var(--col-btn);
    border: none;
    border-radius: .6rem;
    font-size: var(--sm);
    color: var(--letter-white);
}
.section-up .right-section img {
    margin-right: 12rem;
    width: 37.1rem;
}
.first-section h2 {
    font-size: var(--lg);
    margin-bottom: 2rem;
}
.first-section {
    margin-bottom: 6rem;
}
.first-section p {
    font-size: var(--md);
}
.second-section {
    margin-bottom: 5rem;
}
.second-section h2 {
    font-size: var(--lg);
    margin-bottom: 4rem;
}
.sub-cat {
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;
}
.sub-cat div {
    background-color: var(--bg-nav-fot);
    width: 30.7rem;
    height: 16.4rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3.1rem;
}
.sub-cat h3 {
    color: var(--letter-white);
    font-size: var(--big-md);
    margin-bottom: 1rem;
}
.sub-cat p {
    color: var(--letter-white);
    font-size: var(--big-sm);
}
.third-section {
    margin-bottom: 8rem;
}
.third-section h2 {
    font-size: var(--lg);
    margin-bottom: 6rem;
}
.courses {
    display: flex;
    justify-content: space-between;
}
.courses div {
    width: 37.5rem;
    height: 16.4rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3.5rem;
}
.courses h3 {
    color: var(--letter-white);
    font-size: var(--big-md);
}
.courses div:first-child {
    background-color: var(--col-btn);
}
.courses div:nth-child(2) {
    background-color: var(--bg-blue);
}
.courses div:last-child {
    background-color: var(--bg-rose);
}
footer {
    background-color: var(--bg-nav-fot);
}
.footer-container {
    margin-right: 5.2rem;
    margin-left: 5.2rem;
    height: 33.7rem;
}
.logo-down {
    padding-top: 5rem;
    margin-bottom: 2.3rem;
}
.logo-down img:first-child {
    width: 3.3rem;
}
.logo-down img:last-child {
    width: 5.5rem;
}
.footer-container p {
    color: var(--letter-white);
    font-size: var(--min);
    margin-bottom: 3rem;
}
.footer-container a {
    color: var(--letter-white);
    text-decoration: none;
    display: block;
    font-size: var(--min);
    margin-bottom: 1.2rem;
}

Luis Alejandro Marcano Guaiquire

student•

Wooo. Esto esta genial ! :D

Valeria Jaimes

student•

¡Súper!

Santiago miguel jesus Kesseler Huber

student•

*{ box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; }

Valeria Jaimes

student•

Soy nueva en programación y los shortcuts en Visual Studio me han hecho la vida mucho más fácil. Aquí se los dejo para quienes deseen 😄 Windows: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf Mac: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Juan Manuel Padilla

student•

Hola, ¿dónde puedo ver la clase del 15 de marzo?

Maricela Fuentes Vazquez

student•

Yo pensaba que el input solo se utilizaba en los formularios, que equivocada estaba 🤔

Florian Martinez

student•

Realmente no estas equivocada. La buena practica es que debes usar un input en un formulario. El formulario te permite definir una página de acción. En el curso definitivo de html y css el profesor dice que un input tiene que estar en un formulario. Ahora también es verdad que buenas practicas no significa reglas

Cristian Choque

student•

Edwin Adrian Borrero Arias

student•

Tienen el link de noticias que mencionan en este video? o es le mismo grupo de telegram?

Tania Sosa

student•

Hola Ed 😄

Aquí te dejo una explicación de los grupos de estudio en Telegram y aquí el link para que te puedas unir a ellos, te recomiendo que lo hagas desde el celular, ya que desde el navegador tendrías que instalar la versión Desktop de Telegram y conectarte desde ahí, en lo personal siento que es mas sencillo desde el teléfono.

También te invito a unirte al grupo de Facebook de la comunidad dando click aquí.

¡Nunca pares de aprender! 💚

Cristian Choque

student•

Cuando es la siguiente clase ??

David Arias Fuentes

student•

Hola Cristian.

Las clases fueron: 03 de Marzo 2022 08 de Marzo 2022 10 de Marzo 2022 15 de Marzo 2022.

jose zuñiga

student•

Dejo mi resultado final en GitHub haciendo el clone del diseño compartido para este reto. En mi perfil de gitHub comparto cada proyecto practico que realice por curso en caso que deseen clonarlo o ser colaboradores de alguno.

https://github.com/joseluis1061/retoPlatziWeb.git

Florian Martinez

student•

Muy bueno este Platzi Challenge. Ahora la pregunta que me hago es: debemos hacer esta misma pagina que la profesora o podemos hacer la que querremos.

Luis Alejandro Marcano Guaiquire

student•

Hola Florian. Puedes hacer la misma pagina o tu proyecto personal. La idea de las clases, es que podamos aprender, como se aplica en un proyecto real lo que estamos aprendiendo en el curso. Saludos.

Jorge Sandoval

student•

nav > *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
    <title>Platzi</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <figure class="logo-high">
                <img src="./img/isotipo.webp" alt="">
                <img src="./img/logotipo.webp" alt="">
            </figure>
            <ul>
                <li>
                    <a href="#">Inicio</a>
                </li>
                <li>
                    <a href="#">Planes</a>
                </li>
                <li>
                    <a href="#">Cursos</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
                <li>
                    <a href="#">Agenda</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="main-container">
        <section class="section-up">
            <div class="left-section">
                <h2>Platzi Day</h2>
                <h5>18, 19 y 20 de Marzo</h5>
                <p>Acceso sin costo a todos los cursos <br> de platzi durante 72 hrs</p>
                <div>
                    <input type="text" name="" id="" value="https://platzi.com/l/day-2712939/">
                    <button>Copiar</button>
                </div>
            </div>
            <div class="right-section">
                <img src="./img/Hero.webp" alt="">
            </div>
        </section>
        <section>
            <div class="first-section">
                <h3>¿Qué es el Platzi Day?</h3>
                <p>Platzi Day es la oportunidad perfecta para que, gracias a ti, más personas puedan descubrir <br> 
                y probar la experiencia de la educación profesional efectiva durante 72 horas continuas sin <br>
                necesidad de contar con una suscripción.</p>
            </div>
            <div class="second-section">
                <h3>Subscripciones con las que cuenta Platzi</h3>
                <div class="sub-cat">
                    <div>
                        <h4>Basic</h4>
                        <p>1 estudiante</p>
                    </div>
                    <div>
                        <h4>Expert</h4>
                        <p>1 estudiante</p>
                    </div>
                    <div>
                        <h4>Expert +</h4>
                        <p>2 estudiantes</p>
                    </div>
                </div>
            </div>
            <div class="third-section">
                <h3>Encontrarás cursos de:</h3>
                <div class="courses">
                    <div>
                        <h4>Desarrollo e <br> Ingeniería</h4>
                    </div>
                    <div>
                        <h4>Marketing <br> Digital</h4>
                    </div>
                    <div>
                        <h4>Cursos de <br> Inglés</h4>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer >
        <div class="footer-container">
            <figure class="logo-down">
                <img src="./img/isotipo.webp" alt="">
                <img src="./img/logotipo.webp" alt="">
            </figure>
            <p>Transformamos la economía de nuestros países <br> entrenando a la próxima generación de <br> profesionales en tecnología.</p>
            <a href="#">Preguntas Frecuentes</a>
            <a href="#">Trabaja con nosotros</a>
            <a href="#">Términos y Condiciones</a>
        </div>
    </footer>
</body>
</html>

:root {
    --bg-nav-fot: #0C1633;
    --letter-white: #FFFFFF;
    --col-btn: #98CA3F;
    --bg-blue: #17A2F8;
    --bg-rose: #FF8080;
    --input-grey: #C4C4C4;

    --big-lg: 6.4rem;
    --lg: 4rem;
    --big-md: 3rem;
    --md: 2.2rem;
    --big-sm: 2rem;
    --sm: 1.8rem;
    --min: 1.5rem;

    --f-weight-medium: 600;
    --f-weight-light: 500;

    --font-site: 'Montserrat', sans-serif;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-family: var(--font-site);
}
img {
    width: 100%;
}

nav {
    width: 100%;
    height: 6.8rem;
    background-color: var(--bg-nav-fot);
}
.logo-high {
    position: absolute;
    top: 1.4rem;
    left: 2.5rem;
}
.logo-high img:first-child {
    margin-top: .3rem;
    width: 2.9rem;
    height: 3.2rem;
}
.logo-high img:last-child {
    width: 4.8rem;
    margin-bottom: .4rem;
}
.navbar ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    height: 100%;
}
.navbar li {
    margin-right: 10.5rem;
}
.navbar li:last-child {
    margin-right: 0;
}
.navbar a {
    text-decoration: none;
    color: var(--letter-white);
    font-size: var(--sm);
    font-weight: var(--f-weight-medium);
}
.main-container {
    margin-left: 12rem;
    margin-right: 12rem;
}
.section-up {
    margin-top: 8rem;
    margin-bottom: 4rem;
    display: flex;
    justify-content: space-between;
}
.left-section h1 {
    font-size: var(--big-lg);
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.left-section h4 {
    font-size: var(--sm);
    color: var(--col-btn);
    margin-bottom: 3rem;
}
.left-section p {
    font-size: var(--md);
    margin-bottom: 5.5rem;
}
.left-section div {
    display: flex;
}
.left-section input {
    width: 34rem;
    height: 3.6rem;
    border: 1px solid var(--input-grey);
    margin-right: 1rem;
}
.left-section input[type="text"] {
    padding-left: 1.5rem;
    font-family: var(--font-site);
    font-size: var(--min);
}
.left-section button {
    width: 13.3rem;
    height: 3.6rem;
    background-color: var(--col-btn);
    border: none;
    border-radius: .6rem;
    font-size: var(--sm);
    color: var(--letter-white);
}
.section-up .right-section img {
    margin-right: 12rem;
    width: 37.1rem;
}
.first-section h2 {
    font-size: var(--lg);
    margin-bottom: 2rem;
}
.first-section {
    margin-bottom: 6rem;
}
.first-section p {
    font-size: var(--md);
}
.second-section {
    margin-bottom: 5rem;
}
.second-section h2 {
    font-size: var(--lg);
    margin-bottom: 4rem;
}
.sub-cat {
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;
}
.sub-cat div {
    background-color: var(--bg-nav-fot);
    width: 30.7rem;
    height: 16.4rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3.1rem;
}
.sub-cat h3 {
    color: var(--letter-white);
    font-size: var(--big-md);
    margin-bottom: 1rem;
}
.sub-cat p {
    color: var(--letter-white);
    font-size: var(--big-sm);
}
.third-section {
    margin-bottom: 8rem;
}
.third-section h2 {
    font-size: var(--lg);
    margin-bottom: 6rem;
}
.courses {
    display: flex;
    justify-content: space-between;
}
.courses div {
    width: 37.5rem;
    height: 16.4rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3.5rem;
}
.courses h3 {
    color: var(--letter-white);
    font-size: var(--big-md);
}
.courses div:first-child {
    background-color: var(--col-btn);
}
.courses div:nth-child(2) {
    background-color: var(--bg-blue);
}
.courses div:last-child {
    background-color: var(--bg-rose);
}
footer {
    background-color: var(--bg-nav-fot);
}
.footer-container {
    margin-right: 5.2rem;
    margin-left: 5.2rem;
    height: 33.7rem;
}
.logo-down {
    padding-top: 5rem;
    margin-bottom: 2.3rem;
}
.logo-down img:first-child {
    width: 3.3rem;
}
.logo-down img:last-child {
    width: 5.5rem;
}
.footer-container p {
    color: var(--letter-white);
    font-size: var(--min);
    margin-bottom: 3rem;
}
.footer-container a {
    color: var(--letter-white);
    text-decoration: none;
    display: block;
    font-size: var(--min);
    margin-bottom: 1.2rem;
} 

Sesión 3: 10 de marzo

Grabaciones

Sesión 1: 3 de marzo

Sesión 2: 8 de marzo

Sesión 3: 10 de marzo

Sesión 4: 15 de marzo