Skip to content

verlandev/Tesla-ModelS-clone-desde-cero

Repository files navigation

Copycat - Model S de Tesla desde 0

Imagen del proyecto

Descripción

Este es un proyecto de exploración personal para asentar las bases en maquetación web empleando HTML, CSS (SASS) y Javascript. No tiene en sí funcionalidad más allá de un menú responsive (sin enlaces), transiciones dinámicas y alguna característica visual para replicar lo más fielmente posible la página de Tesla Modelo S.

Note

Accede al proyecto haciendo clic aquí: https://tesla-model-s-clone-desde-cero.vercel.app/

Important

  • Este proyecto se ha hecho con fines de entretenimiento y aprendizaje.

  • Este copycat sigue el diseño de la página tal y como estaba en octubre 2023.

  • El diseño de la web original puede variar.

  • Solo es una maqueta, ningún enlace lleva a ninguna parte.

Tecnologías usadas

HTML CSS SASS JavaScript GIT BEM Methodology

🏅 Desafíos y aprendizajes 🏅

📱 Responsive

  • Lo mejor: he profundizado mucho más en mis conocimientos de HTML asegurando la base de una buena estructura que luego no me ha costado tanto adaptar en la mayoría del proyecto.
  • Lo regular: las partes más delicadas como el menú, banner y algunas secciones con una disposición diferentes de la versión escritorio han necesitado de una adaptación menos elegante.

Note

Para asegurar una estructura HTML eficaz se ha priorizado la versión de escritorio y finalmente se ha pasado a la adaptación mobile.

🎨 BEM y aprovechamiento de SASS

  • Lo mejor: asegurar las buenas prácticas de BEM.
  • Lo regular: necesidad de volver atrás y repasar las clases cuando el proyecto ya estaba muy adelantado.

Note

Si das con los nombres adecuados (cortos y descriptivos) para bloques y modificadores, aún mejor.

👩‍💻 Javascript

  • Lo mejor: entender que en la maquetación web, activar y desactivar clases se vuelve esencial para lograr más de un efecto.
  • Lo regular: retomar muchas funcionalidades que no estaban pensadas para el responsive.

🧠 GIT

  • Lo mejor: mayor capacidad de planificación con respecto a ramas y commits.
  • Lo regular: replanteamiento de las subidas y el trabajo versionado una vez se ha empezado el proyecto, creando un poco de caos en el histórico.

Note

Trabajar por versiones hace que el avance del proyecto y ejecutar los cambios se vuelva más sencillo y organizado.

📂 Módulos CSS

  • Lo mejor: mejor accesibilidad para gestionar los cambios y trabajar el responsive.
  • Lo regular: una mejora que he implementado una vez había iniciado el proyecto

Note

No se ha empleado la lógica de componente reutilizable, pero hubiese estado bien pensar en ello.

Contribuciones

¡Las contribuciones son más que bienvenidas!

Siéntete libre de abrir un issue o enviar un pull request si hay algo que creas que se puede mejorar en el proyecto o encuentras algún problema. ¡Muchas gracias!

🙋‍♀️ Beatriz Verlan Developer

¡Gracias por llegar hasta aquí!

Soy desarrolladora en constante aprendizaje. Me encanta la programación y aprender siempre algo nuevo. Por eso aprovecho los ratillos libres para sacar algún proyecto con el que seguir practicando.