No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Finalizando ejercicio de Landing Page

16/42
Recursos

Imagen del reto:

Platzi Games - Reto PUG.jpg

Aportes 208

Preguntas 27

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Interesante pug verdad, pero no me gusta.

Aunque entiendo la relevancia de poner h1 en el footer, creo y me corrigen si estoy mal por favor, esta ser铆a una mala practica para SEO. Aunque f谩cilmente en footer podr铆a llevar un h4 por ejemplo y fin de la mala pr谩ctica.

<h1>PUG Tutorial</h1>

Interpolation

Example:

section.intro
    .intro__image: img(src="images/image.png")

String Multiple

Example:

p.
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit.
  Quod repellendus ipsum laborum voluptates nostrum,
  qui aspernatur quos perferendis quae recusandae pariatur
  suscipit sint quidem sit, sequi asperiores sunt accusamus dolorum.

p
  | Lorem ipsum dolor sit amet,
  | consectetur adipisicing elit.
  | Quod repellendus ipsum laborum voluptates nostrum,
  | qui aspernatur quos perferendis quae recusandae pariatur
  | suscipit sint quidem sit, sequi asperiores sunt accusamus dolorum.
  span
    | Lorem ipsum dolor sit amet,
    | consectetur adipisicing elit consectetur adipisicing elit.

Variables

Example

Notes: Variables, mixins and functions must be declared before the html doctype tag

-var title = "Main Title"
-var titles = ["Titulo Principal", "Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
doctype html
    body
    h2= title
    h2 #{title}
    h2 #{titles[0][1]}

Loops

Example

ul
  each title in titles
    li=title

Conditional

Example

-var user = 'Paco'
doctype html
  body
    if user
      a Hola #{user}
    else
      a.boton Registro

Mixins

Example

mixin caja(imagen, titulo, contenido)
  .caja
    .caja__imagen: img(src="images/"+imagen)
    .caja__contenido
      h3= titulo
      p= contenido
      a.buton Leer M谩s
doctype html
  body
    +caja('imagen.png', titles[1], 'Lorem ipsum dolor sit amet')
    +caja('imagen.png', titles[2], 'Lorem ipsum dolor sit amet')
    +caja('imagen.png', titles[3], 'Lorem ipsum dolor sit amet')

Includes

Example

Notes: Create a head.pug component first

	include components/head.pug

Extends

Example
Notes: Create a template.pug component first

//template.pug
-var title = "Sub-titulo Principal"
-var titles = ["Titulo Principal", "Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
-var user = 'Paco'
mixin caja(imagen, titulo, contenido)
	.caja
		.caja__imagen: img(src="images/"+imagen)
		.caja__contenido
			h3= titulo
			p= contenido
			a.buton Leer M谩s
doctype html
html
	include head.pug
	body
		header
			h1 PlatziGames
			if user
				a Hola #{user}
			else
				a.boton Registro
    block content


//Use
extend components/template.pug
block content

Felicidades y aplausos a ustedes 馃憦 隆Excelentes trabajos con esos retos!

Pienso mucho en vue y como muchas de las cosas de pug ya no se necesitar铆an por ejemplo condicionales y ciclos en el html, en pug son algo m谩s est谩ticas pero no suficientemente dinamicas como lo pueden ser en los frameworks modernos.

Creo que para crear sitios est谩ticos como landing pages ser铆a una forma m谩s profesional usar pug, pero hasta ah铆.

Hay muchos comentarios diciendo que 鈥淢ejor me quedo con mi archivo.html鈥, brothers, aun no han hecho proyectos con al menos 3 archivos html? Eso de tener que cambiar un link varias veces en cada pagina es una perdida de tiempo.
.
Lo que ofrece pug es que 鈥渙ptimizaci贸n de c贸digo鈥, adem谩s de una mayor legibilidad, es valioso.

Lo que hice fue crear m谩s mixins y reutilizar variables:

siempre me quedo la duda como seleccionaba todo y lo identaba.
aqu铆 les dejo como:

para quitar espacios
teclas SHIF+TAB

para agregar espacios:
tecla TAB

Reto cumplido:

// ARCHIVO CSS

.container{
	display:flex;

}

.container__menu{

	width: 35%;
	background: #F1F3F9;
	padding: 40px;
}

.container__menu ul{
	margin-top:30px;
}
.container__menu li{
	list-style-type: none;
	font-weight: bold;
	margin-top:20px;
	color: #012178;
}

.container__content{
	width: 65%;
	padding:20px;
}

.container__content .boton{
	margin-top: 20px;
}

// ARCHIVO PUG

extend components/plantilla.pug
block contenidos
    .container
        .container__menu
            h3 Men煤
            ul
            each enlace in enlaces
                li #{enlace}
        .container__content
            h1  T铆tulo Principal
            p
            |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            |   Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. 
            |   Proin sit amet tellus nec nisl bibendum ornare nec at augue. 
            |   Integer semper feugiat varius.
            p
            |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            |   Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. 
            a.boton hola amigos

homepage.pug

include ../components/configs.pug
<!DOCTYPE html>
html(lang="en")
  include ../components/head.pug
  body
    include ../components/header.pug
    .contenido
      .contenido__side
        h2 Menu
        ul
          each menu in menus
            li=menu
      .contenido__principal
        h2 Titulo Principal
        p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus expedita eum tempora. Inventore ipsum provident sint voluptatibus sapiente architecto officiis incidunt at, iste non, deserunt similique repellat quaerat laudantium voluptatem!
        p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus expedita eum tempora. Inventore ipsum provident sint voluptatibus sapiente architecto officiis incidunt at, iste non, deserunt similique repellat quaerat laudantium voluptatem!
        a.boton Ver M谩s
  include ../components/footer.pug

.contenido{
	display: grid;
	grid-template-columns: 1fr 3fr;
	height: 75vh;
}

.contenido__side{
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	font-weight: bold;
	justify-content: center;
	background-color: #EEF1F8;
	padding: 35px;
	width: 100%;
	height: 100%;
}
.contenido__side ul{
	height: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color:#012179;
	list-style: none;
	padding: 0;
}

.contenido__principal{
	padding: 50px;
}

Tengan mucho cuidado con no dejar espacios extra al final de sus componentes. Si no se los marcara como error.

Me gusto bastante la parte de corroborar la clase anterior, lo sent铆 muy personal, como si se pusiera en mi lugar. Genial por eso. No creo que sea muy relevante para le curso pero pienso vale la pena decirlo. 馃槑

As铆 me qued贸 el reto

Reto:

Hace poco maquet茅 un proyecto de 3 p谩ginas, todos ten铆an enlaces internos que se repet铆an por estar en servidor de desarrollo y en dos archivos se compart铆a un bloque diferente de informaci贸n que estaba dentro de otro archivo.
Cuando lleg贸 la hora de entregar el proyecto fue una pesadilla porque tuve que cambiar los enlaces de prueba por los enlaces de producci贸n. Aparte de eso hubo cambios en el header y algunos bloques m谩s. Pug me hubiera salvado en ese entonces, pero no ten铆a ni idea de su existencia.
Aunque el curso fue muy b谩sico, lo que sigue ahora es practicar e ir conociendo el resto de beneficios que ofrece pug porque para ser tan conocido debe existir una gran cantidad de funcionalidades

Gracias por el curso, fue excelente

Reto superado!

C贸digo:

reto.pug

extend componentes/plantilla.pug
block contenidos
  section.grid
    aside
        h2 Menu
        ul
        each enlace in enlaces
          li= enlace
    article
        h2= titulo
        p Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum animi tempora molestias
optio odio unde maiores, voluptas culpa aut autem corrupti non vel saepe in architecto nisi.
        p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum rerum sit repellat quisquam at reprehenderit molestias, , debitis fugit ipsa dolore molestiae!
        a.boton Ver M谩s

Agrego en el CSS

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.grid aside {
	padding-top: 20%;
	padding-left: 20%;
	background-color: rgba(90, 121, 205, 0.200);
}

.grid li {
	color: #4667b9;
	list-style: none;
	text-transform: uppercase;
	font-size: 1.25rem;
	line-height: 3rem;
	font-weight: bold;
}

.grid article {
	padding: 10%;
	grid-column: 2/4;
}

.grid p {
	font-size: 1.5rem;
}

16. Finalizando ejercicio de Landing Page:

Interesante pug, bastante complejo en vez de usar HTML, pero con bastante potencial.

Reto cumplido 馃槉馃憤馃挌

Interesante pug, pero realmente es muy tedioso para proyectos sencillos, es bueno conocerlo y entenderlo un poco. Si existe es que esta solucionando un problema, me imagino que deben ser proyectos complejos y grandes, pero es una gran explicaci贸n.

mi reto:

SI tienen problema de identacion o espacios pueden usar la extension para VSCODE pug(jade) formatter

Reto cumplido

Si hago el include del footer en plantilla.pug , el footer no se en la pagina resultante, si el include lo hago en landing.pug , luego del contenido
entonces si se ve bien.

Lo que mas me ha encantado de PUG es que siento que me a ayudado a practicar y entender sobre la modularizaci贸n, preparando terreno para cuando necesite usar modulos en React 馃槃

Esto fue lo que termin茅 haciendo en este m贸dulo
https://codepen.io/joseriosdev/full/qBrGajB

Reto superado

extend componentes/platilla.pug
block contenidos
    section.container
      aside.left
        h2 menu
        ul
          each enlace in enlaces
            li=enlace
      article.right
        h2 #{titulos[0]}
        p.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas neque id facilis libero eligendi illo iusto? Ullam, consequatur ipsum tempora dolorem harum qui, magnam voluptatibus molestiae suscipit ad alias? Obcaecati.Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis cupiditate unde in magnam debitis enim ex eum eligendi, pariatur omnis et dolorem possimus vero a fugit id, dolore voluptate error.
        p.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas neque id facilis libero eligendi illo iusto? Ullam, consequatur ipsum tempora dolorem harum qui, magnam voluptatibus molestiae suscipit ad alias? Obcaecati.Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis cupiditate unde in magnam debitis enim ex eum eligendi, pariatur omnis et dolorem possimus vero a fugit id, dolore voluptate error.
        a.boton ver m谩s
.container {
	display: grid;
	grid-template-columns: minmax(100px, 300px) 1fr;
	grid-template-rows: 1fr;
	height: 73.6vh;
}

.left{
	background-color: #eef1f8;
	text-align: center;
	padding-top: 50%;
}

.left ul{
	list-style: none;
	padding: 0 37%;
	line-height: 30px;
	text-align: start;
}
.left ul li{
	color: #012179;
	font-weight: 800;
	text-transform: uppercase;
}

.right{
	grid-column: 2 / span 3;
	margin: auto 100px;
}


Reto realizado 馃槂

Comet铆 varios errores , la cuesti贸n es de pr谩ctica y paciencia.

Reto cumplido
layout
.

include data/data

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="stylesheet", href="css/stylus.css")
        title #{titulo}
    body
        block header
            include include/header

        block main
        
        block footer
            include include/footer

data
.

-var titulo = "PlatziGames"
-var menu = ["Acerca","Noticias","Contacto"]

header

header 
    .header__titulo 
        h1 #{titulo} 
    .header__button 
        a(href="#") Registro

index
.

extends layout 

block main 
    main
        aside
            .aside__wrap
                h2 Menu
                ul
                    each opcion in menu 
                        li #{opcion}

        section
            article
                h2 Ttulo Principal
                p Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus optio amet similique numquam dolor quaerat vero est, reiciendis beatae consectetur, quae nostrum ipsa facilis culpa nobis ipsum repellendus reprehenderit totam obcaecati sed repudiandae laborum quisquam.

                p Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse et corporis nam perferendis voluptate sed eligendi nulla voluptas natus est incidunt sequi maiores voluptatum obcaecati recusandae, modi, quasi aut impedit perspiciatis. Reiciendis sequi laudantium dolorem!

                a(href="#") Ver ms

footer
.

footer 
    .footer__titulo 
        h1 #{titulo}
    nav
        ul
            each opcion in menu 
                    li #{opcion}

.
.
馃尃馃尃Resultado馃尃馃尃

As铆 quedo 馃槂 quieres ver el c贸digo?


.

El pug principal basado en la plantilla qued贸 as铆:

extend components/plantilla.pug
block contenidos
    section.description
        include components/sideMenu.pug 
        .description__article
                h2= titulos[0] 
                p Lorem ipsum dolor 
                 
                p Lorem ipsum 
                a.boton Ver m谩s

El pug del sideMenu lo hice as铆鈥

aside.side-menu
    .side-menu__div
        h2 Menu 
        ul.side-menu__links 
             each enlace in enlaces 
                 li=enlace

Y los estilos de CSS que agregu茅 fueron estos:

.description {
	display: flex;
	width: 100vw;
	height: calc(100vh - 200px);
}

.description__article {
	padding: 70px;
	display: inline-block;
	width: 75%;
	min-width: 480px;
	max-height: 700px;
	
}

.description__article p {
	margin: 30px 0;
	font-size: 20px;
}

.side-menu {
	width: 25%;
	max-width: 380px;
	min-width: 170px;
	padding: 70px 0 0 0;
	display: flex;
		flex-direction: column;
		align-items: center;
	background-color: #EEF1F7;
}

.side-menu__div {
	margin-right: 35%;
	/* margin-left: 10px; */ 
}

.side-menu__links {
	list-style: none;
	margin:0;
	padding: 10px 0;
}

.side-menu__links li {
	margin: 40px 0;
	font-size: 17px;
	font-weight: bold;
	color: #012179;
	text-transform: uppercase;
}


Lo que me gusto de pug es que ya solo te enfocas en el contenido que cambia, ahorr谩ndote copiar y pegar c贸digo

Reto completado, buena clase, me ha gustado el tema este

Interesante PUG pero por alguna raz贸n no le veo tan necesario cuando se trabaja con librerias como react etc:

La verdad muy interesante Pug pero, he echo los mismos pasos
que el profesor y prepos se me a cansado de tirarme errores con lo cual se me hizo bastante denso, obio que no quito que debo tener errores yo en la sintaxis.
Aun que parece facil, es bastante complejo y sacar la costumbre de usar TAB y espacio.

Mi reto

Magn铆fico, me llama bastante la atenci贸n pug. Creo que lo empezar茅 a usar de ahora en adelante.

Hasta el momento creo que este es uno de los mejores cursos y pug una de las herramientas m谩s 煤tiles, no s茅 por que no est谩 en la Carrera de Desarrollo Web 馃槸

Reto cumplido.

Voy a probarlo, pero se ve mejor que el fenecido dreamweaver

Challenge complete隆隆

Me gusta bastante como se ve pug, esta bastante sencillo de utilizar.

Reto Cumplido:

listo use flex para posicionar y algunas clases, ahora lo interesante seria trabajar pug con movil first eso seria el siguiente nivel, o ya verlo con algun framework, que creo seria la verdadera tirada de los preprocesadores.

Reto cumplido

Reto cumplido

homepage.pug

extend componentes/plantilla.pug
block contenidos
  section.home
    aside.home__menu
      h2 menu 
      ul 
          each enlace in enlaces
              li.home__enlaces=enlace 
    section.home__articulo
      h2 #{tituloPrincipal}
      p.
          | Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          | Commodi, quos cumque voluptatum labore nisi id quod temporibus 
          | tempore eos esse quae minima facere culpa numquam doloremque vel provident, cum quibusdam?
      p.
          | Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          | Expedita enim quas eos sed recusandae totam repudiandae blanditiis quae officiis accusantium, explicabo, 
          | nisi consequuntur odit, eligendi illo iusto provident error! Deleniti voluptatum exercitationem nulla dolores 
          | excepturi delectus, repellat ullam? Sed, ea voluptatibus quam enim architecto cum non recusandae nulla nisi maxime!

      a.boton Ver M谩s

css

.home {
	display: flex;
}
.home__menu {
	padding: 2rem 9rem 2rem 2rem;
	background-color: #e4f5fb;
	min-height: 50vh;
}
.home__menu > ul {
	margin-left: 0;
	padding-left: 0;
}
.home__articulo {
	padding: 2rem 5rem;
	line-height: 1.4;
}
.home__articulo > p {
	margin-bottom: 2rem;
}
.home__enlaces {
	list-style: none;
	text-transform: uppercase;
	margin: 2rem 0;
	font-weight: 600;
	color: #3c5697;
}

el reto de la clasee siuuu!!

reto cumplido, me da unos errores cuando lo modularice, pero compila bien.


un detalle que no me gusta de pug es que si puede ser 煤til al momento de reusar c贸digo pero no me parece del todo como tener que manejar tantos archivos por estar dividiendo cada secci贸n del c贸digo. A lo que quiero llegar es que no se me hace muy 煤til el hecho de tener un archivo header.pug otro section.pug otro footer.pug etc鈥 Claro que gustos hay muchos!

La verdad pug puede ahorrarte tiempo, pero no megusta en el sentido de que si haces mal un espacio te manda un error o tu codigo se vuelve una nada -_- yo creo que es por que estoy acostumbrado a trabajar con el codigo puro de HTML, le voy a dar una oportunidad para usarlo por que tiene cosas muy interesantes.

Reto Cumplido !

Desarrolle el ejercicio desde 0, pueden verlo en mi repositorio.

https://github.com/juliolh0686/Reto_Pug

As铆 lo hice yo, espero sea de ayuda.
Tuve que agregar unas cuantas lineas al CSS y fueron estas

aside {
	display: inline-block;
	width: 25%;
	height: 71vh;
	padding: 60px 30px;
	background-color: #EEF1F7;
}
aside h1 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	margin: 0;
	font-size: 40px;
}
.aside__link-container {
	list-style: none;
	padding: 0;
}
aside li {
	padding: 18px;
	padding-left: 0;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color: #012179;
}
main {
	display: inline-block;
	width: 74%;
	height: 71vh;
	padding: 0 50px;
}
main h1 {
	margin-top: 100px;
}

Luego agregue en el PUG lo siguiente

extend componentes/plantilla.pug
block contenidos
  aside
    h1.aside__title MENU
    ul.aside__link-container
      for enlace in enlaces
        li=enlace
  main
    h1 #{titulos[0]}
    p Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus repellendus nostrum harum numquam rerum nesciunt omnis sunt autem praesentium libero nemo similique atque dolor officia ad velit, sequi voluptas. Ipsa.
    p Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sapiente molestiae veritatis rerum fuga harum consectetur? Nisi, nemo similique aut harum temporibus corporis natus explicabo debitis magnam ea modi atque!
    a.boton VER MAS

Y quedo as铆.

Me encanto la verdad seguire estudiandolo 鉂わ笍 鈥!
Profe = 5 stars

finalizando reto

Al principio fui reacio a PUG. Pero entiendo que es mi mente negandose a aprender. As铆 que lo tomare como un reto. Don鈥檛 stop learning

No se dice 鈥淵 todo se mira mucho mas limpio鈥, se dice 鈥淵 todo se ve mucho mas limpio鈥

Se parece 馃槃

Principal diferencia entre include & extends

  • Con include, tu vas a agregar codigo dentro de una etiqueta
  • Con extends, tu vas a seguir agregando codigo, pero fuera de una etiqueta. Por eso se le agrega un block bloc_name cuando usamos un extends.

.
En otras palabras, extends extiendo el contenido del html, mientras que include, solo incluye mas contenido adentro de una etiqueta.

me quedo con mi html cl谩sico

Reto Cumplido:

Listo!!

La verdad es que me gusta como ense帽a el profesor y me pareci贸 un m贸dulo sumamente interesante pero, creo que me quedo con el HTML cl谩sico. 馃槄

Usar pug me parece contraproducente.Genera mas trabajo.

Reto Finalizado

home.pug

extend componentes/plantilla.pug
block contenidos
  main.home
    .menu
      h2 MENU
      ul
        each enlace in enlaces 
          li
            a=enlace
    .content
      h1 TITULO PRINCIPAL 
      p #{contenido}
      p #{contenido}
      a.boton VER MAS

CSS

.home {
	width: 100%;
	min-height: 600px;
	display: flex;
}

.menu {
	width: 25%;
	min-width: 100px;
	padding-top: 40px;
	padding-left: 40px;
	background-color: #EEF1F8;
}

.content {
	width: 75%;
	min-width: 220px;
	padding: 50px 70px 0 50px;
}

.menu ul {
	padding-left: 0;
	list-style: none;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
}

.menu li {
	margin-top: 20px;
	color: #405694;
}

RETO TERMINADO

C贸digo homepage.pug

extend componentes/plantilla.pug
block contenidos
	.container 
	section.menu
			.menu__contenido
		h2 #{titulos[4]}
		ul 
			each enlace in enlaces 
				li=enlace
	section.main
		h1 #{titulos[0]}
		p Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi reprehenderit unde itaque dicta hic repellendus ducimus quia distinctio deleniti iure autem iusto exercitationem magni, id suscipit voluptas odio optio atque.
		p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti similique iure voluptas voluptates reprehenderit neque consequatur dolorum asperiores numquam quos repudiandae incidunt maiores officiis, non nemo vel nostrum inventore minus?
		a.boton ver mas

CSS

.container{
	display: flex;
	align-items: center;
}
.menu{
	display: flex;
	background-color: #EEF1F7;
	width: 400px;
	padding: 50px 0 50px 40px;
}

.menu h2{
	font-size: 24px;
}

.menu ul{
	padding: 0;
}
.menu ul li{
	list-style: none;
	line-height: 50px;
	text-transform: uppercase;
	font-weight: 700;
	color: #8898C0;
}

.main{
	padding: 30px;
}

He aqu铆 el desaf铆o nenes

Hice el reto, pero tuve un problema con extend y block: me compilaba sin problemas pero lo que ten铆a en mi archivo de pug no lo renderizaba en el HTML. Al final termin茅 utilizando include para todo y s铆 fucion贸.

Resultados:

Me costo un poco finalizarlo pero al final sali贸:

puede ser mi interpretaci贸n pero pug es agradable de usar si ya tienes el css listo sino perder铆a gran parte del dinamismos con el que funciona o no sabes nada de react

No es mucho, pero es trabajo honesto

Aqu铆 el c贸digo en Pug

extend componentes/plantilla.pug
block contenidos
    main.reto 
        .main__menu-lateral 
            include componentes/menu-lateral.pug
        .main__contenido
            h2 Titulo Principal 
            p.
                Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit. Blanditiis mollitia 
                sint explicabo! Voluptate amet quasi 
                magni ab ad aut iusto maiores delectus 
                sed odit soluta enim voluptatum, 
                perspiciatis sint in.
            p.
                Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit. Blanditiis mollitia 
                sint explicabo! Voluptate amet quasi 
                magni ab ad aut iusto maiores delectus 
                sed odit soluta enim voluptatum, 
                perspiciatis sint in.
            a.boton Ver M谩s

Aqu铆 el c贸digo del men煤 lateral

h3 MEN脷
ul
    each enlace in enlaces 
        li
            a(href="/")=enlace

Intente hacerlo con extend pero no me funciono, tendre que repasar las clases para entenderlo mejor:)

Y por ultimo el css

.reto{
	display: flex;
	height: calc(100vh - 200px);
}
.main__menu-lateral{
	width: 30%;
	margin-top: 40px;
	padding-left: 40px;
}
.main__menu-lateral h3{
	margin-bottom: 20px;
}
.main__menu-lateral ul{
	list-style: none;
	padding: 0;
}
.main__menu-lateral ul li{
	margin-bottom: 30px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
	color: #435792;
}
.main__menu-lateral ul li a{
	text-decoration: none;
}
.main__contenido{
	width: 70%;
}
.main__contenido h2{
	margin: 40px 0;
}
.main__contenido p{
	margin-bottom: 40px;
	font-size: 18px;
}

As铆 se ve en el navegador
![](

Cualquier recomendaci贸n o correcci贸n es bienvenida 馃槃

El resultado del reto:

extend components/plantilla.pug
block contenidos
	.main-container 
		nav.menu
			h2 MENU 
			ul.menu__lista
				each enlace in enlaces 
					li.menu__item=enlace
		section.intro 
			.intro__contenido
				h2 #{titulos[0]}
				p Lorem ipsum dolor sit amet consectetur adipisicing elit. 
					| Accusamus, dolorum veritatis nisi quisquam quo suscipit
					| aliquid voluptates sequi excepturi exercitationem voluptatum
					| aliquid voluptates sequi excepturi exercitationem voluptatum
				p Lorem ipsum dolor sit amet consectetur adipisicing elit. 
					| Accusamus, dolorum veritatis nisi quisquam quo suscipit
					| aliquid voluptates sequi excepturi exercitationem voluptatum
					| aliquid voluptates sequi excepturi exercitationem voluptatum
				a.boton Leer Mas

No es mucho pero es trabajo honesto

Reto cumplido, cuesta un poco acostumbrarse a pug, considero que es utili para temas de plantilla, reutilizar partes de codigo agiliza y reduce tiempo.

Aunque me 鈥渓leve un poquito mas de trabajo鈥, aunque solo haga landing pages, mejor sigo haciendo mis bonitas etiquetas de abre y cierra, copiando y pegando bloques de codigo xdd

Recuerda que son herramientas, y la mejor de todas es aquella con la que te sientas comodo trabajando.

.
En mi caso, una vez le hechas un ojo a React, y a ver todo como componentes, no le veo mucha relevancia a Pug. Ya un pre para CSS si ya es otra cosa. 馃挌

Despues de repasar un poco de css, lo termine 馃槂
https://imgur.com/a/fBGpB5y

Link del ejercicio en la nube por si quieren darle una visita
Link del ejercicio

Link del template de glitch con pug

Pug es el nuevo React xD
creo que primero fue pug, pero para una SPA creo que estaria muy bien, usando js solo para mover componentes y las rutas

Reto completado:

La verdad a m铆 s铆 me ha gustado mucho PUG! 馃槂

Saludos.

As铆 me qued贸 el reto.

Excelente clase 馃憣