Condicionales y Loops

Clase 34 de 42 • Curso de Preprocesadores CSS

Contenido del curso

Introducción

Evolución de las Tecnologías de Front-End

Preprocesadores para HTML

Less

Sass

Stylus

Desarrollo del proyecto Platzi Games

Conclusiones y Cierre

42
Conclusiones y Cierre
01:24 min

Tomar examen

Resumen

Un condicional nos permite evaluar cierta condición y bifurcar entre dos caminos dependiendo de si se cumple o no.

Un loop es un fragmento de código que va a ejecutar de forma repetitiva hasta que cumpla una condición.

Imagen del reto

Gonzalo Ceron Denetro

student•

Al contenedor de los artículos le agregue un flex-wrap para que pueda ser responsive

CSS

/*Mixin*/
contenedor(alinear)
 width 100%
 display flex
 justify-content alinear


.contenido 
 contenedor(space-evenly)
 flex-wrap wrap

John Ruiz

student•

Hola @Gonzalo,

He intentado hacerlo resposive pero no logro, podrías compartir tu código para entender como lo lograste.

Gracias.

Gonzalo Ceron Denetro

student•

Holaa @john-ruiz, si claro te paso el código. Espero te sirva HTML

<main>
        <section class="buscador">
            <div class="buscador__contendor">
                <span><i class="fas fa-search"></i></span>
                <input type="text" class="buscador__contenedor--input" placeholder="Buscar...">
            </div>
        </section>
        <section class="results">
            <div class="results__filter">
                <div>
                    <h2 class="results__title">Recomendados</h2>
                </div>
                <div class="filter-icon-container">
                    <h4 class="results__filter--title">Filtrar por</h4>
                    <a href="#">
                        <i class="fas fa-th-large results__filter--icon"></i>
                    </a>
                    <a href="#">
                        <i class="fas fa-bars results__filter--icon"></i>
                    </a>
                </div>
            </div>
            <div class="articulos-recomendados">
                <article class="articulo">
                    <a href="#">
                        <img src="https://static.platzi.com/media/tmp/class-files/git/platzi-games-stylus-publico/platzi-games-stylus-publico-clase-5-loops/images/apex.jpg" alt="">
                    </a>
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Video</span>
                        <h3 class="articulo__info--titulo">Apex Legends Temporada 2: un nuevo trailer muestra cambios al mapa</h3>
                        <p class="articulo__info--desc">Dos nuevos trailers de Apex Legends muestran lo que nos espera en la Temporada 2 del battle royale de Respawn.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <a href="#">
                        <img src="https://static.platzi.com/media/tmp/class-files/git/platzi-games-stylus-publico/platzi-games-stylus-publico-clase-5-loops/images/crash.jpg" alt="">
                    </a>
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Video</span>
                        <h3 class="articulo__info--titulo">Ya salio la reseña de Crash Team Racing Nitro Fueled</h3>
                        <p class="articulo__info--desc">Veinte años después del lanzamiento del original, Crash Team Racing ha recibido un remake total que logra mantener todos los aspectos originales.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <a href="#">
                        <img src="https://static.platzi.com/media/tmp/class-files/git/platzi-games-stylus-publico/platzi-games-stylus-publico-clase-5-loops/images/ff.jpg" alt="">
                    </a>
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Video</span>
                        <h3 class="articulo__info--titulo">Final Fantasy XIV recibirá una serie live-action en televisión </h3>
                        <p class="articulo__info--desc">Final Fantasy XIV Online recibirá una adaptación aTV de parte de Square Enix con Sony Pictures Television y Hivemind.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Noticia</span>
                        <h3 class="articulo__info--titulo">pes 2020 obtiene acuerdo con el manchester united</h3>
                        <p class="articulo__info--desc">Konami ha anunciado que han firmado un acuerdo con el club de futbol inglés Manchester United para ser incluido en el juego.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Noticia</span>
                        <h3 class="articulo__info--titulo">cyberpunk: habrá dos juegos más</h3>
                        <p class="articulo__info--desc">El estudio polaco de videojuegos CD Projekt está trabajando no en uno, sino en tres juegos ubicados en el universo RPG de Cyberpunk.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
                <article class="articulo">
                    <div class="articulo__info">
                        <span class="articulo__info--categoria">Noticia</span>
                        <h3 class="articulo__info--titulo">Mortal Kombat 11: Filtración confirma al Joker como DLC</h3>
                        <p class="articulo__info--desc">Usuarios han investigado el más reciente parche de la versión para PC de Mortal Kombat 11 donde se incluyen datos del Joker, Terminator.</p>
                    </div>
                    <div class="articulo__icons-container">
                        <ul>
                            <li><i class="fas fa-share"></i></li>
                            <li><i class="fas fa-eye"></i></li>
                            <li><i class="fas fa-comment-alt"></i></li>
                        </ul>
                    </div>
                </article>
            </div>
        </section>
    </main>
</body>
</html>```



CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
main {
  width: 100%;
}
.buscador {
  width: 100%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-size: cover;
}
.buscador__contendor {
  width: 70%;
  height: 60px;
  background: #fff;
  border-radius: 40px;
  padding: 20px;
}
.buscador__contenedor--input {
  width: 80%;
  border: none;
  outline: none;
  background: none;
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
}
.fa-search {
  margin-right: 8px;
  font-size: 1.8rem;
  color: #808080;
}
.results {
  width: 100%;
  padding: 14px;
  background: #fff;
}
.results__title {
  font-family: 'Oswald', sans-serif;
  font-size: 2.6rem;
  color: #333;
  text-transform: uppercase;
}
.results__filter {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.results__filter--title {
  margin-right: 10px;
  font-family: 'Lato', sans-serif;
  font-size: 1.6rem;
  color: #333;
}
.filter-icon-container {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 10px;
  box-shadow: 0px 1px 4px 0px rgba(51,49,49,0.722);
}
.results__filter--icon {
  font-size: 2rem;
  color: #333;
  margin: 0 10px;
}
.articulos-recomendados {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.articulo {
  max-width: 380px;
  margin: 20px 10px;
  border-radius: 20px;
  box-shadow: 0px 1px 4px 0px rgba(51,49,49,0.722);
  position: relative;
}
.articulo a img {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.articulo__info {
  padding: 10px;
  margin-bottom: 10px;
}
.articulo__info--titulo {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  color: #333;
  text-transform: uppercase;
}
.articulo__info--desc {
  font-family: 'Lato', sans-serif;
  font-size: 1.4rem;
  color: #333;
  line-height: 1.5;
}
.articulo__info--categoria {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  color: #8841da;
}
.articulo__icons-container {
  padding: 10px 20px;
}
.articulo__icons-container ul {
  width: 80%;
  padding: 10px 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  bottom: 0;
}
.articulo__icons-container ul li {
  list-style: none;
}
.fa-share,
.fa-eye,
.fa-comment-alt {
  font-size: 1.8rem;
  color: rgba(51,51,51,0.4);
}

Condicionales y Loops

Introducción

Qué aprenderás sobre preprocesadores

Conceptos básicos de CSS

Selectores de CSS

Evolución de las Tecnologías de Front-End

Introducción a los Preprocesadores

Metodologías para estructurar código

Introducción a BEM

Guías para creación y mantenimiento de código

Instalación de herramientas de compilación

Preprocesadores para HTML

Introducción a Pug

Sintaxis

Interpolación

Variables