Reto completado
Introducción
#PlatziCodingChallenge || PlatziCodingChallenge
Lo que aprenderás sobre HTML y CSS
Análisis y creación del proyecto
Análisis del proyecto Google Clone
Configuración del proyecto
Chrome Dev Tools como herramienta
Qué son las Chrome Dev Tools
Header Google Clone
Qué es el Header y cómo hacer su maqueteado
Agregando estilos al Header
Posicionar una lista en horizontal
Manejo de íconos e imágenes en etiquetas
Contenido principal Google Clone
Maquetado de la sección principal
Estilos en la sección principal
Estilos en la sección del input
Íconos y manejo de background hover
Estilos en los botones
Footer Google Clone
Maquetado del Footer
Estilos en Footer
Cierre
Cierre: diferencias entre CSS Grid y Flexbox
Comparte tu proyecto y certifícate
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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?
Lo cierto es que ambos son complementos. Veamos esta imagen para tenerlo más claro:
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?
¡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 314
Preguntas 19
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:
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.
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.
 */
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
¡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
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/
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
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 ?
Excelente curso y buena tactica los retos que mando, es una manera de adquirir conocimientos y sin importar el tiempo que me llevo en realizarlo me siento complacida,porque investigue, revise clases anteriores, probe, borre y volvi a probar y TERMINE… lo importante es no procrastinar…Gracias profe Diego,se le admira un monton
Wikipedia clone project done, it was challenging, but finally i did it 😃
Repositiorio: https://github.com/marindiego/Wikipedia-Clone-
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?