Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Taller CSS
Taller CSS
Tripulantes en este taller paso a paso podrán realizar una práctica de todo lo que hicimos en la sección 2.1
y 2.2 espero que les sea de su agrado e iniciemos
Primer paso necesitará crear una carpeta donde guarden todo el proyecto realizado recuerden que en el
drive estará las carpetas videos e imágenes con todo el material visual que vamos a necesitar en este taller
ahora necesitaremos crear los siguientes archivos tanto de css como de html además de ubicar en la
carpeta donde desarrollaremos todo en el mismo lugar.
Crearan la carpeta con el nombre que deseen en este caso le di el nombre actividad
Dentro de ella ubicaran la carpeta con imágenes y videos
https://drive.google.com/drive/folders/1EI3-eLyssKBM8XkFMif9y9mh5MDdUQNK?usp=sharing
Seguido de este paso crearan los siguientes HTML:
- conocenos.html
- create_user.html
- index.html
- login.html
- menu.html
Ahora crearas los siguientes CSS:
- normalize.css
- styles.css
obtendrán un resultado como este
Ahora conocerán algo que será muy útil para reiniciar los valores que le agregan a los navegadores a las
propiedades como margin padding y otras más.
Conocerán primero que es el reset y para que se aplica con el siguiente video:
https://youtu.be/bXqPNoYFK8w
Ya comprendida esta parte el que aplicaremos en este taller es el normalize para normalizar los valores en
nuestro diseño
https://necolas.github.io/normalize.css/
vamos a visitar esta web donde vamos a copiarlo y pegar
El cual al pegarlo les dará un total de unas 349 líneas de código aproximadamente
O la otra opción es guardarlo dando click derecho y la opción guardar como
Ahora en este momento seguiremos con las fuentes de Google fonts donde solo usaremos dos una será
para los títulos y otra será para los textos
Es este paso les dejare aquí para que copien y lo peguen en el <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,
100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,
500;1,700&display=swap" rel="stylesheet">
Cuando lo copien y lo peguen deben obtener este resultado:
Ahora seguiremos con el favicon que tendrá la pagina, para comprender su importancia revisen este video
rápido y de sencilla explicación sobre el y su uso.
https://youtu.be/UARFMjndsZQ
ya comprendido este punto para usar una imagen de favicon usaremos dentro del <head> la etiqueta link
pero donde cambiaremos en el atributo rel el valor de stylesheet que comúnmente usamos para vincular el
css en este caso pasara de <link rel="stylesheet" href=" "> a <link rel="icon" href " ">
entonces lo que vamos a agregar será de la siguiente manera
Dentro de la etiqueta crearemos otros elementos para crear todo el menú de navegación incluyendo el logo
de la pagina en el <header> crearemos un div que será el contenedor de todo lo que incluiremos como el
logo y el menú de navegación y al div le daremos una clase
Ahora aplicaremos a las etiquetas <a> que están dentro de la clase .header-nav donde le cambiaremos a
los textos el color y quitaremos el subrayado y a la clase .header-nav__navigation ul lo que haremos es
quitarle los puntos a los elementos de la lista desordenada
Ahora en el .header-nav__navigation ul li haremos que los elementos en la lista a que se comporten como una
elemento en línea
Y con .header-nav__navigation ul li a aplicaremos estilos donde usaremos la fuente de Google fonts y otras
propiedades conocidads pero una de ellas si es para que la investiguen transition ya sera de tema de consulta.
Ahora le daremos un poco de efecto al menú de navegación de sus opciones recuerda que :hover es una pseudo
clase.
Un detalle tripulante si quisiera ver mas opciones de logos de wp en Font awesome hay algunos mas que son gratuitos
y otros ya son de paga.
Y donde esta la etiqueta <i> es donde va el código del logo <i class="fa-brands fa-whatsapp"></i>
Si quiere revisa que hay otro logo si quieres
Ahora vamos nuevamente con el style.css
Donde le aplicaremos algunos estilos al logo donde te fijaras como esta dentro de una etiqueta <a> tenemos que
aplicar estilos directamente a dicho elemento y con position:fixed hará que el logo quede fijo en un punto y por eso
debemos darle algunos valores para que se ubique en otra parte y de paso con hover para que cambie de estilo
cuando pasemos el mouse encima de el
Nota: si el logo queda muy abajo cambia a la propiedad top al valor de 700px a unos 450px
Ahora continuamos con el index.html
En este punto te daras cuenta que en las clases estamos aplicando la metodología bem bloque elemento modificador
donde nos será muy útil en este punto.
Esto lo agregaras y fijare que en la etiqueta <video> en src” ” los videos lo único que cambiaran es el número y el
texto dando un poco de descripción sobre ese platillo que en este caso lo repetí.
Ahora pasaremos nuevamente al styles.css
Para solo aplicar lo siguiente donde usaremos las grid para dividir esto en 3 columnas y lo único diferente aquí es
que a cada caja en .promo-menu__opcion con box-shadow aplicaremos una leve sombra a cada una de las cajas
En este punto tendrás el siguiente resultado que verán en el navegador:
Si algo no se ajusta prueba cambiando el ancho de las columnas grid-template-columns: 31% 31% 31% bajando
esta medida a menos valor
Ahora seguiremos con el footer o pie de página donde también aplicaremos logos de fonts awesome para la redes
sociales alguna información relacionada de la página y algunos enlaces relacionados pero no serán funcionales es
decir que
Ahora dentro de una etiqueta <footer> harán lo siguiente
Fíjate en lo siguiente en el código donde tengo el comentario con fila, columna esto nos indicará que este footer
tendrá una estructura con grid donde buscaremos tener este resultado
Además, observa que estamos aplicando algunos iconos para hacerlos de enlace para las redes sociales.
Pasaremos al style.css
Donde le aplicaremos los siguiente estilos al footer
Pero ahora vamos a establecer cuantas filas y cuantas columnas va a tener nuestro footer
En este caso conocerán otra manera de trabajar con la propiedad grid-template-columns este valor fr es como decir
que la columna ocupara una fracción en lo ancho, pero si desean fíjense que pasa cuando aumente este valor es
decir pasarlo de 2fr a 3fr o 4fr como aumenta el ancho de la columna.
En esta parte en .footer__columna con la propiedad flex-direction:column le indicamos a css esto es una columna
O a todos los elementos que tengan la clase .footer__columna
Ya en este punto cuando lo revises en el navegador debe verse de esta manera
Un detalle si quieren cambien el nombre en el footer en la fila de copyright por tu nombre tripulante
Y cuando revisen toda la pagina debería verse asi
Ahora seguiremos con el otro html el cual sera menu.html
En este punto crearas la estructura base del html y con lo hecho con el index.html solo necesitaras copiar y pegar
lo del <head> con la única diferencia que en el <tittle> colocaremos menú
Ahora dentro del body también copiaremos y pegaremos también en el <header> y también con el logo de whatsapp
Y como ya hemos aplicado estilos a estos elementos se verán reflejados en el navegador pero ahora vamos trabajar
para lograr lo siguiente:
Aquí aplicaremos en los estilos flexbox para que los elementos se organicen de manera automática
Dentro de un <div> con la clase menu-bloque donde va a contener todo y así mismo flexbox nos permita adaptarse
de manera automática que en este caso se organice solo.
Seguiremos en el menu.html
En este caso en el login con el atributo placeholder será el indicador de la información en la caja y también
manejaremos la opción de que si el usuario no ha creado su cuenta puede llevarlo a donde se crea la cuenta con la
opción ¿No te has registrado? Donde enviaremos al create_user.html.
En la opción ¿Has olvidado la contraseña? No realice nada pero este punto puedes hacer algo muy parecido en lo
que han sido los formularios y crear la opción de recuperación de contraseña.
Ahora copiaras y pegaras el footer nuevamente
Ahora iremos al style.css
En esta parte de css haremos algo diferente aquí usaremos parte de fonts awesome para colocarlo un icono pero
que quede dentro de un circulo esto lo realizaremos en .login__contenedor-logo y en .login__logo usando
display:flex
Ahora continuaremos en el style.css
Ya terminado los estilos al login.html vamos a tener un resultado como este
Ahora seguiremos con el create_user.html donde haremos el crear la cuenta el usuario solicitando unos datos
básicos pero primero crearemos la estructura base del html.
En este punto haremos los mismos pasos copiaremos y pegaremos el <head> todo lo que hemos aplicado en los
demás casos
Y también en el body el <header> con el cambio que en el <tittle> colocaremos crear usuario
Ahora crearemos el formulario en el cual se ingresarían los datos del usuario solicitando información básica.
Pero aquí harán algo diferente en el ultimo <input> en el atributo type=”date” esto desplegara una opción para
colocar la fecha de nacimiento en el formulario.
Ahora simplemente copiaremos y pegaremos el footer
Ahora el siguiente paso será irnos a styles.css para aplicar los estilos a nuestro formulario de registro
Ahora continuaremos con conocenos.html donde harán algo sencillo aplicando las grids en este caso
Crearemos la estructura base en este html donde colocaremos en el <head> lo que necesitamos con lo único que
cambiaremos el <tittle> donde colocaremos conócenos
Ahora en este punto nos vamos al styles.css para aplicar los estilos que necesitaremos para que se organize todo
con la propiedad display:grid.
En este punto te fijaras que aplicaremos la propiedad background-image para colocar de fondo en cada <div> y
luego un texto que se quedara en el centro de ese contenedor este paso lo repetiremos para 5 imágenes mas
Cuando ya terminé este punto el resultado que obtendremos será el siguiente
Si pasan el mouse por cada texto tendrá un leve efecto de aumentar el tamaño del texto con la pseudo clase :hover
Ahora nos iremos a trabajar el responsive de nuestra pagina pero en este caso solo nos fijaremos en realizarlo en
vista móvil para ellos ingresaremos en el navegador en el inspeccionar de nuestro navegador y vamos a fijarnos en
la vista que tenemos para iPhone 6/7/8 que son los dispositivos así mas pequeños en la actualidad.
Buscaremos la opción de diseño adaptable
Ahora nos iremos a buscar la medida del dispositivo móvil mas pequeño
En esta vista desde que se vea bien para este dispositivo para otros se vera bien en otros dispositivos
Continuaremos en este punto en el styles.css
Donde colocaremos el media query
@media screen and (max-width: 450px) { }
Iniciaremos por modificar la vista que tendremos en el index.html a algunos elementos donde lo que cambiaran son
sus medidas que pueden ser como el ancho alto algunos tamaños de fuentes, lo demás lo heredara de su vista mas
grande como lo pueden ser colores y otras medidas algunos elemento no ser necesario mover mucho como por
ejemplo con flexbox podemos que todo se organice de manera automática reduciendo el tiempo.
Ahora vamos con el footer y lo único que haremos para que se adapte
Esta sola línea de código le indicara al footer que simplemente todo se organize cada columna en una fracción
haciendo que todo quede uno debajo del otro.
En este punto ya todo en el index.html quedaría listo para verse así.
Seguiremos en el styles.css pero lo siguiente que haremos lo veremos en el menú
Con solo estos cambios este será el resultado que obtendremos, si siguen bajando todos los productos se organizaran
automáticamente.
Y si continúas bajando en el navegador todo quedara de manera muy organizada con las medidas justas para todo}
Seguiremos en el styles.css y los siguientes estilos aplicaran solo al inicio de sesión al login
Como resultado el inicio de sesión quedaría de esta mnera
Dejare unas capturas con todo el código por si quieren revisar algún detalle en una carpeta