Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Taller CSS

    Cargado por

    Diego Marmolejo
    23 vistas47 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    23 vistas47 páginas

    Taller CSS

    Cargado por

    Diego Marmolejo

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 47

    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

    Le darán click download


    Donde les abrirá la siguiente página:
    En este punto copiaran todo lo que hay ahí y lo pegaran en el archivo que le dimos el nombre de
    normalize.css

    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

    Y luego les saldrá esto

    Y ya por último lo guardan y luego lo ubican en la carpeta donde creen el proyecto


    Ahora iniciaremos con el archivo index.html
    Donde crearemos la estructura base de nuestro html, no lo olviden tripulantes html:5
    Ya creada la estructura base iniciaremos a hacer algo dentro de la etiqueta <head>
    Vamos vincular nuestros archivos .css en todos los html este paso lo vamos a repetir
    Vamos a vincularlo con la etiqueta <link> tanto el styles.css y el normalize.css
    Obtendrás el siguiente resultado:
    Pero ahora adicionaremos otras cosas más, vamos a conocer cómo usar iconos online para ejemplos logos
    de whatsapp Facebook etc.
    Ahora revisa este video donde te explicaran como crear una cuenta en https://fontawesome.com/ y que
    paso seguir y que resultado obtendrás
    Revisa este video con que pasos a seguir: https://youtu.be/BP4DEDU36hE
    después de esto comprenderás donde debes colocar el script para usar estos iconos que nos serán muy
    útiles en este taller.
    Cuando ya tengas el copiado y pegado el script tal cual como en el video en el <head> tendrás un
    resultamos como el siguiente:

    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

    En el atributo href en el valor buscaremos en la carpeta Imágenes la imagen fav-icon.png


    Y ahora en la etiqueta de <tittle> vamos colocarle Inicio
    Pero antes que se me olviden arriba en la etiqueta <html Lang=”en”> lo pasaremos a “es”
    Ya con esto hecho obtendrás el siguiente resultado

    Ahora iniciaremos a trabajar en el <body> de index.html


    Espezaremos por header en index.html para buscar obtener este resultado que lo replicaremos en varias
    partes

    Para el código en html será de la siguente manera


    Dentro del body
    Crearemos la etiqueda <header> donde le daremos una clase a este elemento

    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 dentro de este <div>


    Ubicaremos lo siguiente
    En la etiqueta <a> en el atributo href=”index.html” esto hará que cuando demos clic en logo nos
    redireccionara a la pagina principal el index.html a la etiqueta le hemos dado una clase class=”header-
    nav__logo” dentro de la etiqueta <a> colocaremos lo que sea el logo usando la etiqueta <img> donde
    buscaremos la imagen en la carpeta Imágenes logo-nav.png donde le daremos un width=”100px”
    Ahora en una etiqueta <nav> le daremos una clase y dentro de ella crearemos una lista desordenada <ul>
    para cada etiqueta <li> ubicaremos una etiqueta <a> para con ello redireccionar a las distintas paginas en
    el href y seguido del nombre de esa pagina
    En este punto ya pueden ir abriendo todo en el navegador con la extensión de live server
    Se vera algo sin estilos entonces empezaremos a aplicar estilos a los elementos del <header>
    Empezaremos en el archivo style.css
    en el .header-nav aplicaremos estilos en este punto fíjate que cambios va pasando
    y en .header-nav__contenedor empezaremos a aplicar estilos que usaremos para que el menu de
    navegación se deje mover fácilmente con la propiedad y el valor display:flex

    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.

    Ahora ya tu menú de navegación debe lucir de esta manera

    Ahora continuaremos en el index.html


    Donde colocaremos esto debajo del <header>
    Donde usaremos un video de promoción donde aplicaran algo extra los atributos autoplay para que se reproduzca
    automáticamente el video muted para que el video si tiene sonido inicie sin sonido y loop para que se repita una y
    otra vez.
    Seguido de el crearemos una barra para que se registren además de cuando le den click los lleve a la parte del
    registro que lo haremos mas adelante

    Ahora volveremos al style.css


    Donde le daremos estilos al video

    Ahora seguimos con el banner de registro


    En este punto en el navegador se debe ver así

    Ahora regresaremos al index.html


    Donde ahora haremos uso de los iconos de Font awesome donde usaremos una etiqueta <a> donde enlazaremos a
    whatsapp web nada mas y dentro de la etiqueta aplicamos el atributo target=”_blank” que nos permitirá hacer que
    cuando se de click al logo de whatsapp este nos envie allá en una pestaña nueva en el navegador

    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

    Este paso lo repetiremos 11 veces más con el único cambio.

    En la parte de la imagen cambiaran el número por ejemplo a 2 src="/Actividad/Imagenes/img_menu2.jpg" y así


    sucesivamente hasta llegar a 12
    Ejemplo asi pero todo dentro del div con la clase menu-bloque
    Pero fijensen algo un momento aquí harán algo interesante en el input con la clase menu-bloque__cantidad dentro
    de la etiqueta colocaran un atributo min=”1” max=”10” donde limitaran lo mínimo y máximo que se puede colocar
    en la cantidad de ese plato.
    Ya luego de repetir ese paso hasta llegar a la imagen 12 seguiremos con el footer que simplemente seria copiarlo y
    pegarlo del index.html

    Ahora nos vamos al style.css


    Para aplicar los estilos que necesitaremos para que flexbox nos facilite el trabajo en este caso
    Aquí haremos que todo el contenedor con display:flex

    Aplicaremos los siguientes estilos al menu


    Veamos lo siguiente en .menu-bloque__cantidad la caja de donde le quitaremos los estilos la caja y asi con border-
    bottom solo le haremos que tenga una línea en la parte inferior
    En este punto se vera así en el navegador

    Ahora continuamos en el html login.html


    Donde crearemos la estructura base del html y en el <head> copiaremos pegaremos el contenido y el único cambio
    el <tittle> donde dira inicio de sesión
    También copiaran y pegaran en el body el <header>

    Ahora crearemos el formulario con el cual vamos a hacer el inicio de sesión

    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 dentro del body copiaremos el <header>

    Ahora vamos a crear lo que necesitamos en el html


    Que no se te olvide copiar y pegar el footer

    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

    Pero si se encuentran en Google Chrome

    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

    Ahora iremos con conócenos


    Seguiremos en el styles.css
    donde aplicaremos lo siguientes estilos en el media query pero aquí para que se adapten las imágenes de cada caja
    vamos usar otra imágenes que igualmente las encontraran dentro de la carpeta imágenes.
    Como resultado obtendremos esto
    A medida que bajen podrán ver como quedan las imágenes nuevas que solo se aplicaran en este punto medida del
    ancho del media query aclaro son las mismas imágenes de antes, pero recortadas
    Ahora por último iremos a por la última página el registro de usuario
    Seguiremos en el styles.css
    Ya con este punto terminado nuestra pagina en la parte de creación de usuario quedara así recuerden que puede
    ingresar a este punto por medio del inicio donde sale la opción de registrarse o por el ingresar en la opción ¿no te
    has registrado?

    Dejare unas capturas con todo el código por si quieren revisar algún detalle en una carpeta

    También podría gustarte