Da un salto y convierte tu Clon de Google en responsive design👨‍💻

23833

Si has llevado el Curso Práctico de HTML y CSS con el profesor De Granda, que tiene como proyecto clonar el buscador de Google con solo HTML y CSS, y todavía quieres seguir mejorando tu habilidad para clonar páginas web, estás en el tutorial correcto. ✨
Vamos aprender qué es Responsive Design y a convertir nuestro clon del buscador de Google se pueda visualizar en diferentes dispositivos con flexbox, grid y media queries ; teniendo el siguiente resultado:

🤔 ¿Qué es Responsive Design?

El diseño web receptivo se trata de usar HTML y CSS para cambiar el tamaño, ocultar, reducir o ampliar automáticamente un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).📲💻

🚀 Comencemos a convertir el clon de Google a Responsive Design

Debemos de inspeccionar en el navegador, solo debes hacer click derecho en nuestra página de clon de Google y click en inspeccionar o con el comando Ctrl + Shift + I. 🧐

1. Header

Comenzaremos haciendo pequeñas mejoras en la etiqueta header ya que al momento de inspeccionar los tamaños del contenedor mide menos que los elementos esto ocurre debido al margin y padding que tiene por defecto la etiqueta ul. 🔍

Etiquetaul

El margin y padding igual a cero para eliminar estilos predeterminados.
```
ul {
	margin: 0;
	padding: 0;
}
```

Etiquetaheader

Se crea la clase header y declaramos un display: flex.

.header {
	display: flex;
	height: 6rem;
	width:100%
}

Etiquetanav

Se declara la clase navigator-container, display: flex y margin-left: auto.

.header.navigator-container {
	display: flex;
	margin-left: auto;
}

Etiquetaul

Cambiamos la clase por navigator-section Cambiamos el CSS, borramos el header y solo nos quedamos con la clase de nav y ul. Le quitamos el width: 25 rem y heigth: auto. Y le damos margin-right: 2.4rem.
```
.navigator-container.navigator-section {
	display: flex;
	list-style: none;
	justify-content: center;
	align-items: center;
	margin-right: 2.4rem;
}
```

Etiquetasli

Previamente habíamos cambiado las etiquetas del nav y nav-right-section por las nuevas clases.
Nos quedamos con solo la clase navigator-section y reemplazamos la etiqueta a por li. Y el color black lo subimos a la etiqueta a.
```
.navigator-section li {
	margin-right: 1rem;
}
```
```
a {
	text-decoration: none;
	cursor: pointer;
	color: black;
}
```

Clasemenu-icon

Borramos la clase de nav(navigator-container)

.navigator-section.menu-icon {
	background-image: url('https://static.thenounproject.com/png/756729-200.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 2.5rem;
	height: 2.5rem;
}

Etiquetaimg

Borramos la clase de nav y también el margin-left.

.navigator-sectionimg {
	border-radius: 50%;
}

👀 Visualización de las modificaciones del header

2. Main

Etiquetamain

Creemos una clase main Reemplacemos en el css con la nueva clase .main.
```
.main {
	margin-top: 15rem;
	text-align: center;
}
```

Modifiquemos ese margin-top del main y cambiemos por un margin-bottom a la clase header.

.main {
text-align: center;
}

.header {
	display: flex;
	height: 6rem;
	margin-bottom: 15rem;
}

Vamos a borrar esos margin autos pero primero debemos:Borrar el text-align y escribir display: flex y flex-direction:column.
```
.main {
text-align: center;
}
```
```
.main {
	display: flex;
	flex-direction: column;
}
```

Clasemain-logo

Cambiar por un display: flex y un justify-conten:center.

.main.main-logo {
	display: flex;
	justify-content: center;
	margin-botttom: 3.5rem;
}

Sección de la barra

Borrar width y margin por display:flex y justify-content.

.main.main-input {
	display: flex;
	justify-content: center;
	margin-bottom: 3.5rem;
}

Secciones de los botones

Borrar el width y margin y reemplazar por display:grid, grid-template-columns y justify-content:center.

.main.main-buttons {
	widht: 53rem;
	margin: 0 auto;
}

.main.main-buttons {
	display: grid;
	grid-template-columns: 20rem20rem;
	justify-content: center;
}

Borrar los div de la sección de los botones.

"main-buttons">
	Buscar con Googlebutton>

👀 Visualización de las modificaciones del main

3. Footer

Crear la clase footer.

Footerul

Borrar el margin: 1em y el padding left.

.footerul {
	margin: 1rem;
	list-style: none;
	displya: flex;
	padding-left: 0;
}

.footerul {
	list-style: none;
	displya: flex;
}

Descomponer

.footerullia {
	margin: 1rem;
	color: #5f6368;
}

Trabajamos con dos niveles y creamos una clase a las etiquetas a del footer.

.footer-left li{
	margin-left: 2rem;
}

.footer-right li{
	margin-right: 2rem;
}

.footer-text {
	color: #5f6368;
	font-size: 1.2rem;
}

Media Queries

768px

@media screen and (max-width:768px){
	.footer {
		grid-template-columns: 1fr;
		height: 8rem;
	}

	.footer.footer-left {
		justify-self:center;
	}
	.footer.footer-right {
		justify-self: center;
	}
}

570px

@media screen and (max-width:570px){
	.main-logoimg {
		width: 25rem;
	}

	.main.main-input-container {
		width: 37.5rem;
	}
	.main.main-inputinput {
		width: 30rem;
	}
}

480px

@media screen and (max-width:480px){
	.main-logoimg {
			width: 20rem;
	}

	.main.main-input-container {
			width: 32.5rem;
	}

	.main.main-inputinput {
			width: 25rem;
	}

	.main.main-buttons {
		visibility: hidden;
	}
}

320px

@media screen and (max-width:320px){
	.main-logoimg {
			width: 18rem;
	}

	.main.main-input-container {
			width: 27rem;
	}
	.main.main-inputinput {
			width: 20rem;
	}
}

😬Como empezamos

😎 Como terminamos

🥳 Siguientes pasos

En este tutorial te ha introducido en temas como Responsive Desing, CSS Flexbox y Grid pero en Platzi puedes profundizar estos temas con los siguientes cursos:

Y recuerda: “Inspirarse es fantástico pero inspirar a otros es mucho mejor”.
#NuncaParesDeAprender 💚

hace 4 años

Escribe tu comentario

+ 2

Entradas relacionadas

¡Propiedades CSS más usadas! ❣

iris-val

Css (UPDATE) nivel intermedio.