Mi Proyecto del curso: Introducción al Desarrollo Web Responsive con HTML y CSS
par iguazelcz @iguazelcz
- 150
- 4
- 3
Este es mi proyecto final del curso. He hecho una versión para escritorio, una para iPad y una para móvil. Decidí utilizar HTML5 tal y como enseñan en el libro que el profesor recomendó al final del curso.
He aprendido mucho, todos los problemas que tuve los conseguí solucionar excepto por uno. Intenté varios métodos distintos de centrar verticalmente el texto dentro de las cajas beige y rojas, pero al final tuve que dejarlo porque ninguno funcionó satisfactoriamente (o no supe aplicarlos bien) y me quedé con el ajuste del padding-top que, aunque no es perfecto, se acerca.
Por otra parte, tuve una "pelea" con el atributo :last-child y :first-child en el menú para móvil hasta que encontré el orden correcto de escribirlo todo en el css. Decidí hacer que el <li> estuviera dentro del <a> en el menú y no al contrario para que fuera más fácil hacer click en los botones del menú, de ahí el lío al intentar añadir :last-child y :first-child.
Estoy contenta además de haber aprendido a utilizar el selector ::after para hacer las líneas que van debajo de los títulos.
En general he aprendido muchísimo y estoy muy orgullosa de lo que he conseguido pese a que sé que todavía me queda mucho más por aprender. Tengo ganas de empezar el siguiente curso.
Dejo el código en este enlace durante unos meses por si alguien quiere curiosear, y agradezco si alguien tiene feedback o mejoras que aportar: https://drive.google.com/drive/folders/1R-vJ0ktfnFNRWyWdFul4XE2cLWPqi3yH?usp=sharing
3 commentaires
brandink
Très bon projet et très bien illustré sur le web!
J'aurais dû le mettre en place d'une manière différente aussi, en voyant le vôtre ... Je suis sûr que pour le prochain je vous encouragerai à mieux l'illustrer au sein de domestika.
Comment avez-vous fait monter toute l'image ici? Avez-vous pris des captures d'écran et les avez-vous fusionnées avec d'autres logiciels?
Bref, très bon projet, salutations!
Afficher le texte original
Masquer le texte original
htmlboy
Professeur PlusBon travail! Merci beaucoup d'avoir suivi le cours :-)
Afficher le texte original
Masquer le texte original
iguazelcz
Plus@jmcdelvalle Bonjour ! Désolé pour avoir mis du temps pour répondre. L'image complète ci-dessus a été extraite de Firefox : lorsque vous ouvrez votre site Web en mode responsive design comme expliqué par @htmlboy dans le cours, vous faites un clic droit et sélectionnez l'option pour prendre une capture d'écran dans le menu déroulant. Ensuite, deux dessins apparaissent pour que vous choisissiez l'option de la façon dont vous le souhaitez, celui de gauche est la capture de toute la longueur de la page Web et celui de droite de ce que vous voyez à ce moment-là.
J'espère que cela peut vous aider. Une salutation et merci beaucoup pour votre commentaire!
Afficher le texte original
Masquer le texte original
Connectez-vous ou inscrivez-vous gratuitement pour commenter