Saludos Platzinauta! Que bueno tenerte aqui ahora sé que deseas saber como maquetar y diseñar la versión responsive del proyecto del curso, ¡Comenzemos a trabajar! yo te guiaré con este tutorial y lo haremos paso a paso, sin saltarnos nada.
.
El objetivo de este tutorial es ayudarte a ver el proyecto con ojos de programador, solo con un par de cambios llegaremos a la version responsive del proyecto. Entonces ¡Manos a la obra!
El proyecto de este curso funciona gracias a la estrategia basada en la maquetacion del Curso de Responsive design: Maquetación Mobile First , el cual nos servirá para no dañar lo que hicimos con anterioridad en el curso.
.
En este tutorial lo explicare para cualquier Sistema Operativo, entonces ¡Date un respiro! ya que será un tutorial muy entretenido.
.
Tambien estaremos usando git así que no caería mal el Curso Profesional de Git y Github
.
Excelente, ya lo tienes ¡Comenzemos!
Muy bien, primero que nada debemos tener el proyecto hasta la última clase en nuestro ordenador, en caso de no contar con uno te dejo este repositorio para que lo clones:
git clone git@github.com:paolojoaquinp/lego-superheroes.gitPersonalmente yo utilizo una clave SSH, si no usas SSH (Deberías usarlo), es una buena práctica y los buenos programadores lo usan. Sustituye el enlace http que solías usar.
.
Genial, ya tienes el proyecto, sin embargo, debemos “retroceder en el tiempo”, ya que aún no esta hasta la última clase, entonces ejecutamos:
cd lego-superheroes
git reset f9edf1d --hardBasicamente con este último comando (git reset) retrocedimos en el tiempo, pero ¡ten cuidado! porque no se puede volver al futuro, es decir, no podremos volver donde comenzamos.
.
Excelente, ahora que tenemos el proyecto en nuestro ordenador ¡Vamos a ello!
Empezamos creando los archivos tablet.css y phone.css en la carpeta ./styles.
.
Perfecto, ahora realizaremos un par de modificaciones en nuestro index.html, esta es la parte más importante, así que presta mucha atención.
.
Para comenzar agregaremos en la etiqueta head nuestros archivos css que creamos con anterioridad:
.
....
<link rel="stylesheet" href="./styles/main.css">
<link rel="stylesheet" href="./styles/tablet.css" media="(max-width: 900px)"/>
<link rel="stylesheet" href="./styles/phone.css" media="(max-width: 580px)"/>
......Mucho ojo que deben estar en ese orden ya que el index.html se lee en cascada, y se podría causar problemas a futuro.
.
Genial, ahora reemplazaremos el código que esta en la imagen, esto en todo caso es encerrar la etiqueta
cambiar el rojo por el verde
Además como pueden ver también hay que agregar un hipervinculo debajo de nuestra lista y no olviden agregarle las clases css.
Muy bien, ahora nos concentraremos en los estilos, para lograr nuestro cometido he dejado un Gist de los estilos main.css, y también para nuestro phone.css, el cual lo encuentras en el siguiente Gist de los estilos phone.css.
La respuesta es que este tutorial es plenamente orientado a la maquetacion responsive y los estilos anteriores se concentraban en darle color, tamaño de fuente, margin padding, etc.
.
Genial!, ahora viene la magía. ¡Vamos por ello!
Entonces ahora solo nos queda tablet.css y Copiaremos este Gist especial, el cual es especial porque le falta una clase, puedes adivinar cual es?.
.
Excelente, si dijiste container, la implementaremos en tablet.css, con las siguientes observaciones:
// RESPONSIVE
.container {
display: grid;
grid-template-columns: 75%25%;
grid-template-rows: 15%60%25%;
grid-template-areas: "nav nav""aside footer""section section";
}
En comparación de la otra versión (para ordenadores):
// ORDENADORES.container {
position: absolute;
z-index:1;
width: 100%;
height:100%;
display: grid;
grid-template-columns: 55%45%;
grid-template-rows: 20%50%30%;
grid-template-areas: "nav aside""section aside""footer aside";
}
Perfecto!, enfasís en grid-template-areas, lo que hicimos fue estirar nuestro nav, estirar nuestro section, y mover nuestro footerjunto al àside`.
.
En conclusión podemos decir que es completamente posible ver con ojos de programador nuestro proyecto. Es muy importante que nosotros como programadores logremos adaptar nuestras páginas y aplicaciones a todos los dispositivos y usuarios.
.
¡Ahora si! puedes publicarlo en tu portafolio.
