Cierre: diferencias entre CSS Grid y Flexbox

Reto completado

Así quedó:

Repositorio en Github
Live Action

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

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

Reto completado!

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

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

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

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 😄

Reto terminado:

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

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.

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

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.

Asi a quedado, lo hice responsive

[

]

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! (

![](

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

Excelente profesor!!

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.

Buen curso. Resultado

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

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>>

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

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

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

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

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

Reto cumplido!

😦 con amor ❤️

A mi me quedo asi mi clon de Google

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:

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

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

Corto pero sustancioso…

ez

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

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.

Aqui esta la Imagen terminada

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

Este es mi clon de Wikipedia.

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ú…

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;
}

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.

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

part 2

part 3

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

• 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

¡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

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.

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.

yo hize el de codigo facilito

mobile

tablets

desktop

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

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

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

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

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

Bastante práctico este curso

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

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!

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

buen curso, muy practico

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

un curso corto pero lleno de información útil

Excelent!!! vamos pa el examen!!!

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

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.

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

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

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

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

Diego, necesitamos más cursos tuyos!

Muchas gracias Diego. Excelente Maestro.

Buen curso, gracias.

importante tener esta clase para recordar en cualquier momento.

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!

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

Que curso tan increíble!

Gracias Diego por el curso!

Cómo se suben pequeños videos o gifs a la sección de comentarios ?

Diego es un gran profe. Voy a seguir sus cursos.

El Grid me ayuda a posicionar las etiquetas contenedoras y el Flex para ayudarme a posicionar el contenido de esas etiquetas.

https://saberbeingeorge.github.io/WIKICLONE/

asi me quedo

this is my challenge completed.
mobile

tablet

desktop

link de la página:https://joserphc.github.io/WikipediaClone/

Acá esta mi clone de Google como lo tengo en mi pc😊👩‍💻 :

Una excelente clase aqui se aplica los conocimientos aprendidos en el curso definitivo de html y css; muy bueno el profesor su forma de enseñar es muy entendible y aplicable

2 días pero lo logré! Comparto el resultado. Gracias, Platzi y Diego!

Mi aporte 😃

Comparto mi Google Clone con pequeñas adiciones al proyecto realizado (favicon, frase del main y el contenedor de footer Colombia).

Excelente curso, muy buen explicado y ya que has mirado el curso de html y css, se te hace mas fácil de lo que habla el profesor.

Acá dejo los resultados del reto 😃
Aclaro que no es responsive de momento, pero de eso me encargaré luego.

exelente clase gracias profe diego

Comparto mi GitHub page y el repositorio de GitHub por si a alguien le resulta util
https://ossmazon.github.io/google-clone/
https://github.com/ossmazon/google-clone

Excelente curso, solamente un detalle que talvez le hizo falta al clon de Google fue…
<link rel=“icon” href=“https://n9.cl/11yv2”>
debajo del title pero realemente solo es un detalle aprendí mucho aquí gracias por todo.

Por cierto no sabía que eran pratoricinadores del granada FC ¡felicidades!

De poco en poco se va mejorando 💚
El reto

La practica

Trato de poner una pregunta con imagen y no me dejaaaa a alguien más le pasa?? 😵‍💫