Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog-Preview

@YersonRodriguez2005

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

estoy orgulloso de poder lograr aprender de nuevos elementos de css para los contenedores y su lenguaje en cascada. proximamente haré que la pagina sea responsiva en lo maximo posible.

What challenges did you encounter, and how did you overcome them?

mi problema fue que al momento de centrar la imagen dentro del contenedor no lo lograba ya que faltaba un elemento que no reconocia hasta ahora.

What specific areas of your project would you like help with?

mas elementos de css, los elementos y difernetes opciones de estilos del css.

Community feedback

@xXOsielXx

Posted

Hola. Felicidades por haberle dado solucion a este challenge!

Tu diseño se parece bastante al original; aun asi, quiero darte algunas sugerencias para que mejores tu codigo.

  • Imagen: No necesitas envolverla en un contenedor y centrarla, solo establece esta regla para ella: img {width: 100%}, de esa manera tomara todo el ancho del contenedor padre, en este caso, si modificas el codigo seria .card

  • Attribution: La atribucion te recomiendo que la saques de la .card. Esto ya es decision tuya, pero en mi opinion se ve mejor afuera, y mas dandole unos estilos personalizados. Por ejemplo, yo lo hago asi:

.attribution {
	margin-top: auto;
	background-color: inherit;
	text-align: center;
	padding: 8px;
	border-radius: 16px;
	z-index: -1;
}

.attribution a {
	text-decoration: none;
}

@media only screen and (min-width: 600px) {
	.attribution {
		position: absolute;
		bottom: 0;
	}
}

Y estos estilos son fundamentalmente los mismo para todas mis paginas

  • Active states: Te falto agregarle los active states a algunos elementos. A mi cuando los hice tambien me faltaron jeje, pero una persona se dio cuenta, me lo dijo y lo corregi. En la carpeta que se encuentra en el archivo que debiste descargar, hay otra carpeta que dice "design" y dentro de esta estan los diseños en los que te debes basar. Una de esas imagenes te muestra los active states que debe tener tu pagina, se llama "active-states.jpg".

Pues eso es lo mas importante, espero que te sirvan mis sugerencias.

Que tengas un buen dia y... Happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord