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
Chrome Dev Tools
Header Google Clone
Maquetado del Header
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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 268
Preguntas 18
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.
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.
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! (
 */
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.
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
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.
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?? 😵💫
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.