Cierre: diferencias entre CSS Grid y Flexbox

Reto completado

Sneyder Alfonso Barreto Buitrago

Así quedó:

Repositorio en Github
Live Action

Jose Luis Campos Bautista

Un pequeño resumen de curso.

HTML
Hypertext Markup Language que nos ayuda a estructurar la información que se muestra al usuario.

Tags
Html utiliza tags que pueden ser contenedoras siempre abren y cierran pero cuando muetran contenido pueden cerrar o no.

CSS
Lenguaje que nos ayuda darle estilos a lo que estasmos mostrando al usuario.

Selector
Selector + propieda + valor de la propiedad = Reglas.

Propiedaes utilizadas en CSS:

Etiquetas: Etiquetas de html que se utilizan como referencia para dar el estilo.
Clases: Son más común utilizar y este es utilizado para dar estilos genéricos.
Id: Nos ayuda a dar estilos a un elemento de forma especifica.

HTML semántico
Son nuevas etiquetas inclidas en HTML que nos ayudan a estructurar mejor un sitio web y añadir un significado concreto.

<header></header>
<nav></nav>
<footer></footer>
<aside></aside>
<section></section>
<article></article>

**Tipos de display **
Los tipos de display más conocidos son:

Layou que inici en CSS1
Flex
Grid
Tipos de displa

Augusto Eduardo Bonalumi

Les comparto mi knock-off, Gracias Diego, estuvo muy bueno el curso.

Héctor Eduardo López Carballo

Reto completado!

Aquí está mi repositorio: https://github.com/hec-lopz/wikiClone

AdriAntanon

Me ha encantado el curso, mi blog ha quedado así si alguien lo quiere ver: https://adrianantanon.gitlab.io/proyecto-static-web-uf2-m04/index.html

Johana Velez

screencapture-file-Users-johanaalejandravelezsaavedra-Pltazi-CPractico-HTMLCSS-wikipedia-clon-html-2020-06-07-21_23_58.png

Diego Andrés Rojas González

Te dejo dos enlaces los cuales te ayudan mejorar las habilidades de Flexbox y CSS Grid de forma retadora
flexboxfroggy
cssgridgarden

Joel Dominguez Merino

Muchas Gracias Diego por este enorme Curso!
Me llevo mucho conocimiento y buenas practicas aprendidas.
Realice todos los ejercicios excepto el ultimo de Wikipedia por que aun no me siento preparado, le daré una estudiada a Grid, pero cuando tenga el conocimiento volveré y lo realizare!
De verdad muchas gracias, enseñas excelente 😄

Mariangelica Useche

Profe Platzi

Super genial el curso. Acá les dejo mi repo: https://github.com/musenberg404/google-clone
Y el DEMO: https://musenberg404.github.io/google-clone/

NOTA: El código no es tal cual el que el hizo el profesor porque estuve practicando más CSS Grid Layout.

Byron Mesias Cueva Cabrera

https://byron7cueva.github.io/arquitecto-frontend/htmlCssPractico/wikipedia/

Reto terminado:

Jose Fernando Espinosa Beltran

Aplausos, un curso muy corto pero bastante nutritivo. Excelente profesor y gracias Platzi, más cursos como este por favor.

Lizeth Natalia Hilarión Ávila

Luis Tapiero

Decidí hacer youtube, les dejo el link: https://youtubelt.netlify.app/

Christian David Sánchez

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo.

Edhu Nuñez Alvarado

![](
Reto terminado, hice la version en dark theme
https://github.com/albertnucom/Google-clon

emiliataborda

Diego, Muchas gracias por tu paciencia y facilidad de explicar y enseñar, me estaba arrepintiendo de la suscripción, aqui dejo mi clon! Gracias! (

Dauxer

Buen curso. Resultado

Lizeth Natalia Hilarión Ávila

Falto el icono en la pestaña del navegador:

<<head>
  <link rel="shortcut icon" href= "https://www.sketchappsources.com/resources/source-image/google-g-logo.jpg" type="image/png">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/main.css">
  <title>Google</title>
</head>>

Lioevaz

Una cosa que le faltó a la clase fue poner el favicon de google

Alfonso Martínez Mireles

Les comparto mis apuntes de este curso por si a alguien le sirven:

HTML y CSS

HTML y CSS NO son lenguajes de programación, son lenguajes de marcado, sirven para estructurar documentos de páginas web.
HTML : Hypertext Markup Language
CSS: Cascading Style Sheets
CSS:
- - { margin: 0, padding: 0 } -> Sirve para resetear el formato que establece cada navegador, esto se aplica a cada elemento y te ayuda a homologar los formatos en cascada independientemente del navegador en que visualices la página web.
- a{ text-decoration: none; cursor: pointer; } -> Con esta regla se quita la línea debajo de los links y se muestra una manita al pasar el mouse sobre el mismo.
- header nav .nav-right-section{ list-style: none; } -> Sirve para quitar las viñetas de las listas ordenadas o desordenadas.
- ?background-image: url(‘https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/420/06_menu_grid-512.png’); -> Puedes utilizar una imagen directamente desde una URL externa en el caso que no la tengas descargada.
- background-repeat: no-repeat; -> No repetir la imagen para rellenar el espacio vacío.
- background-size: contain; -> Que la imagen rellene el espacio vacío del contenedor.
- border-radius: 50%; -> Redondear esquinas para un círculo perfecto.
- margin: 0 auto; -> Para centrar automáticamente independientemente del ancho de la pantalla.
- display: flex; -> Es el el tipo de visualización más reciente, CSS3.
- justify-content: center;-> Justifica el contenido HORIZONTALMENTE.
- align-items: center;-> Alinea el contenido VERTICALMENTE.
- outline: none;-> Quita el recuadro de realce cuando un elemento está activado o seleccionado.
- display: grid-> Para alinear etiquetas contenedoras. ( header, footer, div, etc. ).
- display: flex-> Para alinear contenido. ( img, a, li, etc. ).
- justify-self: right; -> Define la manera en que se justifica una caja dentro de su contenedor.

MGuedez

Asi a quedado, lo hice responsive

[]

Daniel Esteban Ossa Vanegas

Excelente profesor!!

Hernan José Jose Chaparro

Reto completo
![](

Me tomó tiempo, pero cuando tomé el curso la página de Wikipedia ha cambiado he intente realizarla lo mas parecida posible

Les dejo el link de mi repositorio GitHub con todo el código
https://github.com/H3rnan304/WikipediaClon.git

Jeffreys Andrew Suárez Matos

Pequeño énfasis

Css Grid tiene como función ayudar a con la posición y división de las etiquetas contenedoras

Flexbox te permite posicionar el contenido que este dentro de las etiquetas contenedoras

Utilizar ambas ayuda bastante en la maquetación de tus futuros proyectos.

SebastianTuquerrez Gomez

Hice algo diferente jsjs, me gusto la verdad, comenzare con el reto de wikipedia

Andersson Sanabria

A mi me quedo asi mi clon de Google

Melissa Vela

Esta explicación de la diferencia entre CSS grid y flexbox me confude un poco, prefiero esta definición… "Flexbox alinea cosas en una dirección mientras que Grid alinea cosas en ambas direcciones."
https://www.youtube.com/watch?v=hs3piaN4b5I&ab_channel=LayoutLand

Christian Velázquez

Curso para seguir practicando, y aprendiendo.
Dejo mi repositorio de Google : https://github.com/Christiano0407/Google-practice

Juan Torrealba

Muchas gracias! El curso es rápido y nutritivo… Excelente para refrescar conocimientos!

Jennifer Gomez

Reto cumplido!

Luis Felipe Medina Rodriguez

😦 con amor ❤️

Aldo Juarez Virgen

Al fin, después de dos semanas, ya terminé el reto. Aunque hay dos cosas que no pude lograr, lo hice con Responsive Design.
Sitio con el reto terminado
Sitio con el repo
En Desktop

En Tablet

En Mobile:

Brayan Pablo Puerto Coronado

Reto completado solo usando lo basico de flexbox ya que aun no he tomado el curso del CSS Grid

Lucas Ramirez

Muy buen curso aprendí muchísimo y reforze los conceptos de los cursos anteriores !!

FredyColorado

Corto pero sustancioso…

Ricardo Alfonso Chavez Vilcapoma

hace 6 meses

He aquí mi proyecto en diferentes vistas.

Carlos Ramos

hace 7 meses

Clase 17 - Cierre: Diferencias entre CSS Grid y Flexbox

¿Grid y Flexbox son opuestos?

No, todo lo contrario. Ambos se complementan.

¿Cómo debemos ver a Grid y Flexbox para entender cuándo debemos usarlos?

Grid: la usaremos para dividir las cajas contenedoras.
Flex: Nos ayuda a posicionar los elementos de las etiquetas contenedoras

Monica Ortiz Alvarez

hace 6 meses

Reto Completo

Carlos Eduardo Carvajal Pérez

Reto completado, sin plagio 😅

les comparto mi link https://carloscarperz.github.io/Kiwipedia/

Pedro Isaac Aguilar

Buen curso!! Me gustó que se aboca a crear un proyecto explicando cómo hacerlo paso por paso.

edupr

Screen Shot 2022-05-17 at 11.52.47 p.m..png

Jefferson Ramos

Captura de pantalla de 2022-05-08 16-23-22.png

Karol Dayanne Delgado Saenz

Jeison Wu Mitre

Reto listo, la parte de abajo creo con un grid debe ser mas sencillo asi que la termino cuando sepa usarla, por ahora:

Jonathan Huayamabe

Madre del amor hermozo Profe, lo que he sufrido para hacer el reto, eso si he aprendido un monton:
aqui el link

He intentado utilizar en casi todo Grid y creo que no me quedo mal.

Julian Monroy

Aqui esta la Imagen terminada

Antonio Mora

Les comparto mi resultado, pueden consultar el código aquí

Harold José Arguello

Este es mi clon de Wikipedia.

Jose Manuel Solves Jordá

Bueno, aquí dejo mi proyecto final, el Clone de Google:
https://google-clone-solves.netlify.app/
No he conseguido dejar igual el menú en hover, porque el fondo se comía al propio menú…

Miguel Enrique Velásquez Millán

Dejaré por aquí aporte con mi clon de google, je je.
Tiene algunos detallitos, pero pienso que quedó bonito ✨.
·
·
Imagen:

·
·
HTML:

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>Clon de Google</title>
		<link rel="shortcut icon" type="image/png" href="assets/icon.png" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	
	<body>
		<div class="global-container">
			<header>
				<nav>
					<ul>
						<li>
							<a id="gmail" href="">Gmail</a>
						</li>
						<li>
							<a id="imagenes" href="">Imágenes</a>
						</li>
						<li>
							<a id="google-apps" href="">
								<img src="assets/google-apps.png" alt="Aplicaciones de Google" />
							</a>
						</li>
						<li>
							<a id="iniciar-sesion" href="">Iniciar sesión</a>
						</li>
					</ul>
				</nav>
			</header>
			
			<main>
					<section class="google-logo-container">
						<img src="assets/google-logo.png" alt="google" />
					</section>
					<section class="search-bar-container">
						<img src="assets/magnifying-glass-icon.png" id="magnifying-glass-icon" />
						<input type="text" id="search-bar" />
					</section>
					<section class="search-bar-buttons-container">
						<input type="submit" class="button" id="buscar-con-google" value="Buscar con Google" />
						<input type="submit" class="button" id="me-siento-con-suerte" value="Me siento con suerte" />
					</section>
			</main>
			
			<footer>
				<section class="country-container">
					<span>Venezuela</span>
				</section>
				<section class="information-container">
					<ul>
						<div>
							<li>
								<a href="">Sobre Google</a>
							</li>
							<li>
								<a href="">Publicidad</a>
							</li>
							<li>
								<a href="">Negocios</a>
							</li>
							<li>
								<a href="">Cómo funciona la Búsqueda</a>
							</li>
						</div>
						<div>
							<li>
								<a href="">Privacidad</a>
							</li>
							<li>
								<a href="">Condiciones</a>
							</li>
							<li>
								<a href="">Preferencias</a>
							</li>
						</div>
					</ul>
				</section>
			</footer>
		</div>
	</body>
</html>

·
·
CSS:

/* Variables e Inicializaciones */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	font-family: Arial;
}

.global-container {
	display: flex;
	flex-direction: column;
	
	height: 100vh;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

/* Encabezado (header) */

header {
	width: 100%;
	height: fit-content;
	
	display: flex;
	justify-content: flex-end;
}

header nav {
	margin: 10px 18px;
}

header nav ul {
	display: flex;
	font-family: Arial;
}

header nav ul li {
	display: flex;
	align-items: center;
	justify-content: center;
}

header nav ul a#gmail,
header nav ul a#imagenes {
	color: black;
	margin: 0px 7px;
	font-size: 1.3rem;
}

a#gmail:hover, a#imagenes:hover {
	text-decoration: underline;
}

header nav ul a#google-apps {
	width: 40px;
	height: 40px;
	
	text-align: center;
	padding: 12px 0;

	margin: 0px 12px;
}

header nav ul a#google-apps:hover {
	border-radius: 50%;
	background-color: rgba(60,64,67,0.08);
}

header nav ul a#iniciar-sesion {
	color: white;
	font-size: 1.4rem;
	border-radius: 4px;
	background-color: #1a73e8;
	
	letter-spacing: 0.1px;
	padding: 9px 25px 10px 25px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

header nav ul a#iniciar-sesion:hover {
	background-color: #2b7de9;
	box-shadow: 0px 1px 2px 0 rgba(66,133,244,0.3), 0px 1px 3px 1px rgba(66,133,244,0.15);
}

/* Contenido Principal (main) */

main {
	display: flex;
	align-items: center;
	flex-direction: column;
	
	width: 100%;
	height: fit-content;
}

main section {
	height: fit-content;
}

main section.search-bar-container {
	display: flex;
	align-items: center;
	
	width: 582px;
	height: 46px;
	margin: 23px 0px;
	
	border-radius: 24px;
	border: 1px solid #dfe1e5;
}

main section.search-bar-container:hover {
	border-color: rgba(223,225,229,0);
	box-shadow: 0 1px 6px rgba(32,33,36,.28);
}

main section.search-bar-container input#search-bar {
	font-size: 1.6rem;
	font-family: Arial;
	
	width: 500px;
	height: 30px;
	border: none;
}

section.search-bar-container img#magnifying-glass-icon {
	margin: 0 16px;
}

main section.search-bar-container input#search-bar:focus {
	outline: none;
}

main section.search-bar-buttons-container {
	margin-top: 6px;
	margin-bottom: 25px;
}

main section.search-bar-buttons-container input.button {
	color: #3c4043;
	border-radius: 4px;
	border: 1px solid #f8f9fa;
	background-color: #f8f9fa;
	
	font-family: Arial;
	font-size: 1.4rem;

	height: 36px;
	margin: 0px 4.75px;
	padding: 0px 16px;
	line-height: 27px;
	text-align: center;
	
	cursor: pointer;
}

main section.search-bar-buttons-container input.button:hover {
	color: #202124;
	
	border: 1px solid #dadce0;
	background-color: #f8f9fa;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
}

/* Pie de Página (footer) */

footer {
	color: #70757a;
	margin-top: auto;
	font-size: 1.5rem;
	background-color: #f2f2f2;
}

footer section {
	width: 100%;
	padding: 15px 30px;
}

footer section:first-child {
	border-bottom: 1px solid #dadce0;
}

footer section.information-container ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

footer section.information-container ul div {
	display: flex;
	flex-flow: row wrap;
}

footer section.information-container ul div a {
	color: #70757a;
}

footer section.information-container ul div a:hover {
	text-decoration: underline;
}

footer section.information-container ul div li {
	margin-right: 30px;
}

footer section.information-container ul div li:last-child {
	margin-right: 0px;
}

Dario Paladines

Casi que no lo termino, pero lo logre!! con demasiado codigo porque no use nada de grid 😅😅. Me falto un poco mas que sea responsive, ya que el footer se me descuadra un poco 😂 con ese espacio en medio.

Jesús alfaro

Me tomó varios días pero al fin lo terminé

part 2

part 3

danielmedina

Reto listo.
https://danielmedinaarmada.github.io/retoCloneWikipedia/

Captura de pantalla de 2022-01-03 13-14-48.png

Juan Camilo Valencia Silva

El Grid se puede ocupar para posicionar las etiquetas contenedoras
El Flex se ocuparía para posicionar el contenido que está dentro de esas etiquetas contenedotas

angelqui

¡Ambos retos completados!
Dark mode Google:

Live preview: https://angelnewgate.github.io/first-google-clone
Repo: https://github.com/angelNewgate/first-google-clone

Wikipedia (al menos la versión Desktop):

Live preview: https://angelnewgate.github.io/wiki-clone-desktop/
Repositorio: https://github.com/angelNewgate/wiki-clone-desktop

Maricela Fuentes Vazquez

Hola todavia no me siento capaz de poder hacer el reto de wikipedia, seguire aprendiendo y y cuando este lista las adelante subire mi desafio, ahora me siento confundida.

JochuaOrtiz

yo hize el de codigo facilito

mobile

tablets

desktop

Diego Alejandro Toro Reyes

Les dejo mi resultado, en el comienzo del curso vi un resultado que me gusto mucho, y era un buscador como con theme de #platzi… Decidí tomar la idea para continuar el curso con esta misma idea, cambiando ciertos detalles y practicando lo aprendido en ingles… Search Platzi

Les comparto el link: https://github.com/DALcompany/SearchPlatzi

Loreli Cervantes

Este es mi aporte del curso: https://github.com/Lorelicervantes/Google-clone
(

Javier Mauricio Medina Valencia

Decidí ir un paso más allá y ahora que lo logré vengo a motivarlos. Solo es cuestión de que decidan cumplir sus retos

Tatiana Andrea Rodriguez Cruz

Hola! Comparto mi resultado:
Repositorio: https://github.com/Tatiaarc/wikipedia_clone
GitHub Page: https://tatiaarc.github.io/wikipedia_clone/

Jhoana España Urresty

Bastante práctico este curso

Sergio Garnica

Logré completarlo e incluso hacerlo responsive. Les dejo el enlace a la página y también el enlace al código en Github

David Axel González Flores

Muy genial el curso, de mis favoritos hasta ahora. Si a alguien le sirve, dejo aqui el codigo desarrollado durante el proyecto, y si quieren ver el proyecto publicado también lo pueden ver aqui, saludos!

Alex Garzon

Excelente Profesor, aprendí cosas nuevas y reforcé otras.

dalejandro06

buen curso, muy practico

Cristian Antony Soncco Boza

Gracias Diego, hay mucho utilitario y buena práctica que he aprendido.

Alejo5004

un curso corto pero lleno de información útil

Maria Auxiliadora Sanchez

Excelent!!! vamos pa el examen!!!

Camilo Alexander Velandia Velandia

genial, muy buen curso para reforzar la aprendido en el curso de desarrollo web online

JOSE DANIEL RAMIREZ PABON

O sea que es recomendable usar tanto CSS Grid como Flexbox en el mismo proyecto, uno para las etiquetas contenedoras y el otro para las etiquetas de contenido.

Oliver Uriel Chávez Arce

Saben si se puede alinear de otra forma mi footer, Atom no logra reconocer justify-self, por lo cual no se logra alinear.

Captura de Pantalla 2020-01-08 a la(s) 18.02.13 2.png

Manuel Rivera

Son un excelente complemento tal cual lo miramos en una clase del curso, gran aclaració profe 😄

Wladimir

Gracias, a por el examen y a seguir aprendiendo y nunca para de Invertir en mi Mente

Christian Camilo Beltran Fonseca

Que buena practica la de este curso, que mejor forma de aprender que practicando.

Luis Diego Cárdenas Padilla

Diego, necesitamos más cursos tuyos!

Juan David Puertas Vargas

Muchas gracias Diego. Excelente Maestro.

David Morales Orozco

Buen curso, gracias.

Enrique Gutierrez

importante tener esta clase para recordar en cualquier momento.

Rabbit

amigo el curso finalizó y veo que hubo código que no tuvo sentido alguno en la página… Creo que hay que mejorar esa parte!

Andrea Lozano Cataño

Excelente metodología del profesor. Se nota que prepara todas sus clases.

Matías Wasiak

Que curso tan increíble!

Luis Matos

Gracias Diego por el curso!

Jerry Gil Contreras