No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Cierre: diferencias entre CSS Grid y Flexbox

17/18
Recursos

Seguro mientras aprend√≠as las bases de CSS y las pon√≠as en pr√°ctica te llegaste a preguntar ¬ŅUso display flex o grid? ¬ŅCu√°l es la diferencia entre esos dos?¬ŅCu√°l es mejor?

Diferencias entre Grid y flexbox

Lo cierto es que ambos son complementos. Veamos esta imagen para tenerlo m√°s claro:
image.png

Los espacios en las etiquetas no son visibles, pero posicionan el contenido en un lugar determinado. Solo podemos ver qu√© tanto ocupan cuando abrimos las DevTools de nuestro navegador. Entonces, ¬Ņqu√© hace cada una?

  • Grid: genera una cuadr√≠cula que nos ayuda a dividir las cajas que son etiquetas contenedoras.
  • Flex: nos ayuda a posicionar el contenido de las etiquetas contenedoras.

Fin del curso y recomendaciones

¡Felicidades! En este curso práctico de HTML y CSS has creado un proyecto con tus conocimientos en HTML y CSS, pero esto no termina aquí. Tienes grandes rutas en el desarrollo web que puedes tomar, como la Ruta Profesional de JavaScript o la Escuela de Desarrollo Web.

Recuerda: ¬°Nunca pares de aprender!

Contribución creada con aportes de: José Miguel Veintimilla.

Aportes 309

Preguntas 19

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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:

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 ūüėĄ

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.

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

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.

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

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

Buen curso. Resultado

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

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

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.

Asi a quedado, lo hice responsive

[]

Excelente profesor!!

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

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.

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

A mi me quedo asi mi clon de Google

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

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 ‚̧ԳŹ

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…

He aquí mi proyecto en diferentes vistas.

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

Reto Completo

Reto completado, sin plagio ūüėÖ

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

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

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

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

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

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

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 ?

gracias por esta clase, entendí mas en esta.

Hay vamos entendiendo, tengo que practicar, para hacer las cosas solo, intentare lo de wikipedia

estamos listos aqui dejo mi repositorio: https://github.com/sebasthebarber/wikiclone.git
![](

Apesar de que el curso estuvo corto, estuvo interesante y entretenido, despues de aqui al menos ya see que me tengo que ir al Curso de Dise√Īo Web con CSS Grid y Flexbox

El Grid lo veo como para la estructura completa, y el Flex la parte interna de esta estructura.

Les comparto mi repositorio de GitHub:
https://github.com/sebasmalonce
.
A continuación mis proyectos:

Aquí mis dos retos, Google y Wikipedia

Finished:

Mi humilde Reto incompleto. tengo que repasar un poco

Reto Terminado

Mi clon de wikipedia:

As√≠ qued√≥ mi clone de Google ūü•įūü•įūü•į

Aqui les dejo el enlace del clone de google que hice : https://clonegoogle-piervil.vercel.app/

gracias Diego!