Bootstrap

1.
- ¿CÓMO AGREGAR BOOTSTRAP A UN PROYECTO O ARCHIVO HTML Y CÓMO USAR ESAS CLASES PARA DARLE UN
ESTILO?
1.1 HACER ENLACE CON BOOTSTRAP
Tener el archivo INDEX.HTML y dentro de él – Crear estructura Básica de un archivo HTML (<!DOCTYPE html>
<html>…</html> – Cambiar Identación =2 (Barra de estado de VSC – Spaces – Indent using spaces=2) – Nos colocamos
DENTRO de <HEAD> - IR a la DOCUMENTACIÓN (getbootstrap.com) – Clic en DOCS – Download – CDN via jsDetivr –
Copiarlo y Pegarlo dentro de <HEAD>
Ya pegado dentro de <head>
1.2 CREAR UN CONTENEDOR CLASS=”CONTAINER”
(Este 1er TIPO no tiene un ancho máximo, no llena el ancho de la ventana en el navegador)
Dentro de <body> creamos un <div> y dentro del de apertura creamos la CLASE container – Momentáneamente le
aplicamos un ESTILO – Probamos cómo se ve, CLIC en GO LIVE –
Página 1 de 125
Al ejecutar sólo el PRIMER TIPO container Se vería así (Este tipo no LLENA el ancho de la ventana)
Página 2 de 125
Para ver si este contenedor de ajusta a los diferentes tamaños de pantalla – En un lugar libre de la pantalla del navegado
Clic derecho – Cambiar a Diferentes dispositivos (Toggle device toolbar)
Al cambiar los tamaños se puede ver que NO LLENA el ancho total de la ventana,
1.3 2do TIPO DE CONTENEDOR CLASS=”CONTAINER-FLUID”
Página 3 de 125
1.4 OTRO TIPO DE CONTENEDOR, SON LOS CONTENEDORES RESPONSIVOS
Son clases que permiten crear contenedores que cambian dependiendo de breakpoinst (puntos de quiebre) que se
pueden especificar, (cubren el ancho de la ventana) entre otros existen:
Cada uno de estos tipos tiene un ancho máximo, que es hasta dónde se extenderá (TODO DEPENDE DEL TAMAÑO DEL
DISPOSITIVO DONDE SE ESTÉ TRABAJANDO). Si el dispositivo es MENOR a “container -lg” PARECERA que se comporta
como un Container-fluid, PERO si tenemos “container-lg” y si el dispositivo es MAYOR, PARECERA que se comporta como
un container simple.
Página 4 de 125
Al usarlo se pueden ver los 2 comportamiento, dependiendo del tamaño de la pantalla
FINALMENTE, dentro de estos contenedores CREAREMOS LA CUADRÍCULA y usaremos FLEXBOX
2.- CREAR ESTRUCTURA GRID O CUADRÍCULA
Una GRID es un conjunto de filas y columnas
2.1 CADA FILA TIENE 12 COLUMNAS
Los elementos de una FILA pueden ocupar varias COLUMNAS
Página 5 de 125
En la imagen anterior se indica que si la página se está viendo en un DIPOSITIVO PEQUEÑO, el elemento izquierdo se
ajuste a 5 columnas y el otro a 7 columnas RESPECTO AL TAMAÑO DEL DISPOSITIVO DÓNDE SE ESTÉ VIENDO.
Se puede generar CUALQUIER TIPO DE COMBINACIONES, como la siguiente
Ejemplo con varias filas y columnas CON ANCHO O DISTRIBUCIÓN AUTOMÁTICA (Sin Break Points)
Partiendo de que YA TENEMOS EL CONTENEDOR - Estando dentro de <body> y dentro del contenedor <div
class=”container”>
Creamos 2 FILAS, la 1ra con 2 columnas y la 2da con 3 columnas – Lo ejecutamos y vemos el resultado (CON Y SIN UN
ESTILO DE FORMATO tanto a las filas .row{ } como columnas .col { } )
Página 6 de 125
Cuando NO DAMOS VALORES ESPECÍFICOS en el ancho de columnas, se ajustan o distribuyen de manera AUTOMÁTICA
Aplicando DENTRO DE LA CLASE CONTAINER principal, la clase TEXT-CENTER podemos centrar los contenidos
Página 7 de 125
Si cambiamos los tamaños de pantalla, la hoja anterior se ajusta en función del tamaño, - Clic derecho sobre uno de los
elementos – Inspeccionar – Toggle device Toolbar – Cambiar a distintos tamaños.
Ejemplo con varias filas y columnas CON BREAKS POINTS (Se indica puntos de quiebre específicos)
DEFINIMOS 1 FILA CON 2 SECCIONES: La primera utiliza 4 columnas y la segunda usa 8 columnas. Aún cuando se cambie
el ancho de pantalla seguirán viéndose las 2 secciones
Página 8 de 125
DEFINIMOS 1 FILA CON 2 SECCIONES PERO CON PUNTOS DE QUIEBRE ALTERNATIVOS: La primera utiliza 4 o 6 columnas y
la segunda usa 8 o 6 columnas, el cambio se ve en función del tamaño del dispositivo.
3 LOS COMPONENTES DE BOOTSTRAP
Un componente de Bootstrap es un código HTML REUTILIZABLE que ya viene con un estilo predeterminado (que incluye
una serie de clases y si se quiere, se puede PERSONALIZAR) y que podemos usar o insertar en nuestra página web.
3.1 ACCEDER A LOS COMPONENTES
Estando en getbootstrap.com – DOCS – Components (Todo viene en inglés, pero TRAE el elemento de ejemplo ahí
mismo, por tanto lo podemos usar y ver cómo funciona) - Se COPIA y se pega dentro (normalmente dentro de <body>)
de nuestra página web.
Página 9 de 125
EJEMPLO 1 INSERTANDO UN ACORDION (De esta forma se extiende al 100 de la pantalla = No se ajusta)
Debemos tener ya el enlace a Bootstrap – En getbootstrap.com – DOC- Component – Accordion – Copiar código – Pegar
entre <body> </body> - Ver cómo se ve en el navegador.
Página 10 de 125
Página 11 de 125
EJEMPLO 2 INSERTANDO UN ACORDION DENTRO DE UN CONTENEDOR PARA QUE TENGA UN ANCHO MÁXIMO y se
Ajuste dependiendo de la pantalla
Haciéndolo de esta manera el Accordion se ajustará a la pantalla del dispositivo en que se visualice.
Debemos tener ya el enlace a Bootstrap – En getbootstrap.com – DOC- Component – Accordion – Copiar código – Pegar
entre <body> <div class=”container”> aquí </div> </body> - Ver cómo se ve en el navegador.
EJEMPLO 3 CAMBIANDO LOS ELEMENTOS DEL ACCORDION
Localizamos el elemento a cambiar y lo sustituimos por nuestro contenido
Página 12 de 125
Lo mismo se refleja en el navegador
OJO, Existe componentes que NECESITAN JavaScript para que funcionen o se vean bien. Así mismo, cuando usamos
ICONOS es probable que se tenga que copiar el LINK del estilo para que se vean iguales. Esto se ve en el punto 3
siguiente.
3.- ICONOS DE BOOTSTRAP
Los encontramos en la página principal getbootstrap.com – Casi hasta abajo, en PERSONALIZE IT WITH BOOTSTRAP
ICONS – Get Bootstrap Icons 
Página 13 de 125
SVG indica que son iconos que no se deforman al modificar su tamaño
En la ventana de los Filtro – Buscar o Filtrar Por ejemplo. “androi”, Aparece lo relacionado con esa palabra – O buscamos
“calendar”, aparece lo relacionado a calendarios; O buscamos “facebook” y aparece todo lo relacionado con facebook
Al dar CLIC sobre el icono – Me permite Descargarlo o Copiarlo y pegarlo dentro de mi código HTML (similar a los
componentes)
Página 14 de 125
PARA QUE LOS ICONOS SE VEAN IGUAL, DEBEMOS HACER ALGO SIMILAR A LOS COMPONENTE, COPIAR e INSERTAR el
ENLACE a nuestra página WEB
En pantalla de los todos los ICONS hasta abajo – Copiar y pegar en nuestro HTML el código “CDN con los estilos” para
que, sin descargar, los iconos se vean iguales. T
3.1 INSERTANDO ALGUNOS ICONOS EN NUESTRA PÁGINA WEB
Queremos insertar un icono de ANDROI – en getbootstrap.com – Clic en menú ICONS – Buscar – Androi – Clic en el icono
del robot - copiamos – Pegamos dentro de <body> aquí </body> - Antes de Visualizarlos…
Página 15 de 125
Antes de Visualizarlos, hay que incluir BOOTSTRAP ICONS para hacer el enlace – En la ventana de icono al FINAL en el 1er
enlace de CDN – Copiar y pegar DENTRO de <head> aquí </head> - Visualizar en el navegador.
Página 16 de 125
Para NO USAR el zoom – En HTML insertamos
<style> i { Font-size: 25px; Color: rgb(8, 212, 8); } </style>
4.- FLEXBOX
CSS Flexible Box Layout (Distribución Flexible en las Cajas o Modelo de Cajas de distribución Flexible) – FLEXBOX permite
que los elementos responsivos ubicados dentro de un contenedor se distribuyan automáticamente en base al tamaño del
dispositivo.
Página 17 de 125
Propósito de FlexboX
BOOTSTRAP Incluye clases que podemos usar para trabajar con Flexbox más fácilmente.
4.1 Se pueden usar con Flexbox o con Bootstrap
En FLEXBOX sería de forma esquemática un contenedor flexible que se declara como una clase personalizada en HTML
Con BOOTSTRAP sería más sencillo sí sólo se lo queremos aplicar a un elemento o contenedor, CON SOLO declarar la
clase d-flex ya tendremos un contenedor flexible.
4.2 PROPIEDADES y MODELO DE LA ESTRUCTURA DE FLEXBOX
4.2.1 PROPIEDAD FLEX-DIRECTION
Esta propiedad ESTABLECE el eje principal del contenedor o dirección en que se colocan los elementos dentro del
contenedor. Podemos hacer que todos los elementos de ajusten horizontal o verticalmente y ASÏ SE ESTABLECE EL EJE
PRINCIPAL.
Página 18 de 125
Dependiendo del valor ELEGIDO (row o colum) se establecerá el eje principal, dependiendo de esto habrá propiedades
(Como: JUSTIFY-CONTENT…. que se apeguen a ese eje.
4.2.2 PROPIEDAD JUSTIFY-CONTENT (Justificar)
Define cómo se distribuyen los elementos EN EL EJE PRINCIPAL, esta propiedad tiene diferentes valores
FLEX-START.- los elementos se sitúan al principio de la dirección principal, es decir, el espacio

disponible se sitúa al final.
FLEX-END.- los elementos se sitúan al final de la dirección principal, es decir, el espacio
disponible se sitúa al principio.
CENTER.- Centra los elementos
SPACE-BETWEEN.- Deja espacio entre los elementos
SPACE-AROUND.- Deja espacio alrededor de los elementos
SPACE-EVENLY.- Hace una distribución equitativa del espacio
Página 19 de 125
La propiedad JUSTIFI-CENTER TIENE SU ANÁLOGO DE TRABAJAR EN BOOTSTRAP, que permite hacerlo más fácilmente
Justify-content-START.- los elementos se sitúan al principio de la

dirección principal, es decir, el espacio disponible se sitúa al final.
Justify-content-END.- los elementos se sitúan al final de la dirección
principal, es decir, el espacio disponible se sitúa al principio.
Justify-content-CENTER.- Centra los elementos

Justify-content-BETWEEN.- Deja espacio entre los elementos
Justify-content-AROUND.- Deja espacio alrededor de los elementos
Justify-content-EVENLY.- Hace una distribución equitativa del espacio
4.2.3 PROPIEDAD ALIGN-ITEMS (Centra los contenidos en base al eje perpendicular) – TIENE SIMILAR EN BOOTSTRAP
Define cómo se distribuyen los elementos en el EJE PERPENDICULAR al EJE PRINCIPAL.
Página 20 de 125
Valores de ALIGN-ITEMS
Flex-start.-
Flex-end.-
Center.-
Baseline.-
Stretch (estirar).- Estira los elementos para que ocupen el espacio, en el eje
perpendicular
El similar en Bootstrap
Align-items-start.-
Align-items-end.-
Align-items-Center.-
Align-items-baseline.- Para alinear un ítem
Align-items-Stretch (estirar).- Estira los elementos para que

ocupen el espacio, en el eje perpendicular
Página 21 de 125
4.2.4 PROPIEDAD FLEX-WRAP (Hace que todo se REDISTRIBUYA en una sola línea, ya sea reduciendo tamaño o espacio)
Determina si los elementos deben ser ajustados para que siempre estén en una misma línea o si se les permite distribuirse
en varias líneas si es necesario. Por defecto se aplica NOWRAP.
-Por defectp
- Se aplica
-Hace la redistribución a la inversa
Con cada uno de los valores se obtiene una visualización diferente de los elementos.
Página 22 de 125
El similar de de FLEX-WRAP en Bootstrap es
-Por defectp
- Se aplica
-Hace la redistribución a la inversa
5.- PROYECTO (sitio web de portafolio)
5.1 AÑADIR BOOTSTRAP AL PROYECTO
VSC – Creamos carpeta “Proyecto” – Creamos archivo “Index.html” – LINK a Bootstrap (getbootstrap.com – Introduction -
CDN – Copiar LINK -Pegar entre <head> y </head>
5.1.1 OTRA FORMA DE HACER ENLACE A BOOTSTRAP
En getbootstrap.com – DOCS – Download – Copiar el LINK de CDN via jsDelivr – Pegamos entre <head> y </head>. Según la
documentación de Bootstrap el LINK DE JAVASCRIPT debe ir AL FINAL DE cierre de </BODY>.
Página 23 de 125
Ya pegado y modificado queda así (esta recomendación de poner el LINK de javascript antes del cierre de body, es
principalmente cuando dentro de la página web hay eventos en vivo (proyecto en vivo)).
La recomendación anterior se puede ver dentro de INTRODUCTION – 2.- Include Bootstrap´s CSS and JS.
Página 24 de 125
5.2 USANDO UNA HOJA DE ESTILOS CSS EN LUGAR DE ESCRIBIR EL ESTILO DENTOR DEL DOCTO HTML
5.2.1 CREAR LA HOJA DE ESTILO
Teniendo desplegado el explorador de VSC – Clic Derecho debajo de INDEX.HTML – New file “style.css” – Una vez creado,
se ve debajo de “index.html”
5.2.2 ENLAZAR ese archivo STYLE.CSS al documento HTML
Nos colocamos debajo del LINK DE BOOTSTRAP (o antes del cierre de head </head> - Escribimos
<link href=”style.css” rel=”stylesheet”> (rel=”stylesheet” hace alusión a que es una hoja de estilo)
Página 25 de 125
Para probar el archivo style.css creamos un ENCABEZADO1 con el letrero “MI Titulo” SIN ACENTO. Porque para ello
debemos ESPECIFICAR los caracteres a usar ( Se usa después del head de apertura <head> con la etiqueta <meta
charset="utf-8" />).
Le asignamos un estilo – Nos cambiamos al archivo style.css – Escribimos - h1 { color: blue; }. OJO, ES IMPORTANTE QUE
LOS 2 ARCHIVOS ESTÉN EN LA MISMA CARPETA, DE LO CONTRARIO LOS ESTILOS NO SE VERÁN REFLEJADOS EN EL
NAVEGADOR.
Página 26 de 125
PARA COMENTAR RÁPIDO EN VISUAL STUDIO CODE.- Seleccionar la líneas Ctrl+K+C se debe convertir a comentario
5.2.3 METADATOS
<meta charset=”utf-8”> para caracteres especiales.
<meta name=”author” content=”Jane Doe”> para especificar el autor de esta pa´gina web.
<meta name=”descrption” content=”Portafolio de desarrollo web de Jane Doe”>.
<meta name=”keywords” content=”HTML, CSS, JAVASCRIPT, REACT”> Son las palabras clave de la página web.
<meta name=”viewport” content=”width=device-width, initial-scale=1”>. Permite que se ajuste el tamaño de la ventana

al tamaño de la ventana del dispositivo dónde se esté visualizando.
Los metadatos son elementos HTML que tienen como función describir la página web que los contiene. Estos son usados
por los motores de búsqueda para hacer un análisis de dicho sitio web en cuanto a qué tipo de contenido se ofrece y cuál es
la temática que allí se maneja. Se insertan debajo de <HEAD> de apertura.
<meta charset=”utf-8”> para caracteres especiales.

<meta name=”author” content=”Jane Doe”> para especificar el autor de esta página web.
<meta name=”description” content=”Portafolio de Descripción general del propósito de la página web.
desarrollo web de Jane Doe”>
<meta name=”keywords” content=”HTML, CSS, Son las palabras clave de la página web.
JAVASCRIPT, REACT”>
<meta name=”viewport” content=”width=device-width, Permite que se ajuste el tamaño de la ventana al tamaño de
initial-scale=1”> la ventana del dispositivo dónde se esté visualizando.
Página 27 de 125
5.2.4 INSERTAR EL TÍTULO DE LA PÁGINA WEB y SU ICONO
Entre las etiquetas <title> y </title> debemos ingresar ese contenido LETRERO que se ve en la pestaña del navegador
cuando se accede a la página web.
Por ejemplo para personalizar el título hacemos
<title> Jane Doe | Desarrollo Web Front – End </title>
Y para personalizar el icono hacemos
Tenemos que VERIFICAR que tenemos el icono en nuestra carpeta del proyecto – Creamos una carpeta IMAGES (que
dependa de la carpeta del proyecto) – Copiamos, descargamos o movemos hacia ella el archivo *.png (png,jpg,jpeg,svg),
(Previamente ya vimos el tamaño, resolución, etcétera ).
<link rel="icon" type="image/x-icon" href="images/router.png">
La opción “image/x-icon” indica que es el icono de la pestaña. Probando en el navegador se ve de la sig. Forma.
Página 28 de 125
6.- AGREGAR CONTENIDO AL BODY
6.1 AGREGAR BARRA DE NAVEGACIÓN RESPONSIVA ADAPTABLE A DISTINTOS TAMAÑOS DE DISPOSITIVOS con Bootstrap
Esta barra de navegación se va a OCULTAR (simplificar) en dispositivos pequeños y se va a AMPLIAR en dispositivos más
grandes.
Getbootstrap.com – DOCS – Components – Navbar – (Nos desplazamos hacia abajo O damos CLIC en RESPONSIVE
BEHAVIORS en el ÍNDICE DE LA DERECHA) Y Seleccionamos RESPONSIVE BEHAVIORS – Ubicamos la barra – Copiamos el
código – Pegamos DESPUÉS de <body>
Página 29 de 125
Al ejecutar el HTML – Se en su modo (Sin personalizar) original
Página 30 de 125
Probando con INSPECCIONAR – Verificamos que la NAVBAR se compacta o se expande según el tamaño de la pantalla
6.1.1 PERSONALIZANDO LA NAVBAR
Partiendo del código original podemos identificar que en la línea de código
<nav class="navbar navbar-expand-lg bg-light">

Especificamente en navbar-expand-lg se está indicando que se expanda hasta la pantalla alcance el tamaño LARGE o
grande, pero si lo modificamos a navbar-expand-md SE EXPANDIRÁ desde que alcance el tamaño de pantalla mediana.
Página 31 de 125
Al cambiarlo “navbar-expand-md …” la barra completa se muestra desde que alcanza el tamaño mediano
En la DOCUMENTACIÓN se pueden encontrar las diferentes clases dentro de bootstrap, ahora cambiamos la clase (En la
misma línea anterior) bg-light POR navbar – light y probamos.
Página 32 de 125
A la altura del botón hacemos 2 cambios en el identificador
De data-bs-target=”#navbarTogglerDemo01” se cambia por data-bs-target=”#navbar-toggler”
De id=”navbarTogglerDemo01”> lo cambiamos por id=”navbar-toggler”> y debe ser igual al elemento de la línea 24
El enlace href=”#”> Hidden brand </a> lo reemplazamos por una imagen (como logotipo), se reemplaza “Hidden Brand” y
en su lugar se agrega la imagen de logotipo (router,jpg)
Al probarlo se ve así
Página 33 de 125
Hacemos cambios en
Y al probar tenemos los cambios
Luego, se hacen cambios en los elementos de navegación (Home, Link, Disabled) por los siguientes (Sobre mi, Proyectos,
Testimonios, y se agrega uno más, Contacto). Se agrega a los 2 últimos HREF=”#” para posteriormente ponerles un enlace.
OJO, a los 2 último se les quita el atributo “disabled” para QUITAR ESTILO atenuado.
Página 34 de 125
En vista de prueba se ve así
Página 35 de 125
Dentro del código quitamos la parte del formulario (Campo de búsqueda y botón), originalmente se ve a sí
En el código se identifica la parte a eliminar y SUPRIMIMOS
6.1.2 PERSONAR A TRAVÉS DE ARCHIVO CSS y BARRA DE NAVEGACIÓN RESPONSIVA
Página 36 de 125
En el archivo CSS modificamos las clases NAVBAR y NAVBAR-COLLAPSE, para modificar el aspecto de la barra de
navegación, aspecto del ICONO y opciones de enlaces.
Al ejecutarlo, tenemos.
Si se verifica en INSPECCIONAR, se pueden comprobar que es responsivo al cambiar el tamaño de la pantalla
Página 37 de 125
ICONO RESPONSIVO SEGÚN EL PUNTO DE QUIEBRE
OJO, el ICONO se sigue mostrando del mismo tamaño, USANDO UNA Media Query podemos hacer que el icono
desaparezca cuando el dispositivo sea de tamaño pequeño. Una Media Query le dice al navegador que si el tamaño es
pequeño aplique “esté otro estilo” y en consecuencia desaparece el icono.
La opción (max-width: 767px) le indica al navegador que cuando la pantalla SEA MAYOR A ese tamaño (767px) muestre el
icono, en caso (IGUAL A 767PX) contrario lo no lo muestre.
Página 38 de 125
6.2 PERSONAR SECCIÓN PRINCIPAL O “HEROE o HERO” (Imagen de perfil e información que verá el usuario al entrar a la
página) (A esta sección pertenecen los elementos de la parte SUPERIOR)
6.2.1 OCULTA ETIQUETAS HEAD Y BARRA DE NAVEGACIÓN
Estando en VSC – Clic en los signos de MAYOR de las etiquetas <head> y <nav class=”nav”…> y se ocultan estas secciones
Página 39 de 125
6.2.2 CREAR SECCIÓN PRINCIPAL O HERO
Estando DEBAJO DE </NAV> - Creamos <section> y </section> - Entre ellas <di> </div>, entre éste último 3 etiquetas más:
unaa imagen <IMG>, un Titulo principal y un sibtítulo <img>, <h1> y </h1>, <h2> y </h2>. Se crea la CLASE HERO y se le da el
atributo para que todo lo contenido en esta sección se ajuste al tamaño de la pantalla (opción STRETCH)
Página 40 de 125
Se crean los estilos en el archivo CSS
Al ver el resultado
Página 41 de 125
<DIV> es el contenedor PRINCIPAL DE LA SECCIÓN HERO, Le creamos una CLASE (Dentro del <DIV> ) – CLASE DE BOOTSTRAP
para hacer CASI lo mismo que en el CSS. Y también se declara en CSS
Página 42 de 125
Declarando la clase “hero-principal” en CSS – El padding le da más espacio en el borde interior
Página 43 de 125
Ahora se AGREGA UNA CLASE A LA IMAGEN – En la etiqueta <img> modificamos
Página 44 de 125
Esa clase personal se define en el archivo CSS
Página 45 de 125
SE CAMBIÓ DE ICONO Y SE VE EL CAMBIO EN EL TAMAÑO
Página 46 de 125
2:54
Otra forma de poner a BORDER-RADIUS: 50% en el archivo CSS, es ponerlo en el archivo index.html dentro de la misma
etiqueta <img> con la clase ROUNDED-CIRCLE.
Página 47 de 125
Al USAR rounded-circle debemos quitar o inhabilitar en CSS su análogo.
Es importante mencionar que si la imagen tiene un fondo diferente al fonde de la página, se verá el borde (Hay que buscar
que sea trasparente), pero la opción (rounded-circle y borde-radius: 50%) lo que hacen (con ese redondeo) es quitar ese
borde de la imagen y no importaría si su color es diferente al del fondo de la página.
2:55
6.2.2.1 PERSONALIZAR TÍTULO Y SUBTÍTULO
Siendo la clase “hero-principal” contenida en el DIV que a su vez contiene H1 y H2, Personalizaremos estos títulos desde el
archivo CSS a través de un SELECTOR.
Personalizando H2.
Desde el CSS ponemos .hero-principal h2 { código css } con ello se le da formato DIRECTAMENTA a H2. Guardamos y
probamos.
Página 48 de 125
Con las instrucciones, la letra del subtítulo es más chica que el título
Personalizando H1 CON GOOGLE FONTS
Estando en fonts.google.com – Cuadro de búsqueda “Rubik Dirt” – Clic en la fuente – A la derecha Clic en “Select Regular
400 +” – Aparece el panel “Family Select” – Copiar los 3 elementos LINK – Regresamos a INDEX.html – Al final de <head> o
antes de </head> Pegamos los 3 LINK - Guardar - Probar
Ya creada la sección  GOOGLE FONTS  y pegado el código. Con podemos tener el acceso a ese tipo de letra
Página 49 de 125
Es necesario HACER LO ANTERIOR EN EL ARCHIVO INDEX.HTML , pero para ASIGNARLO DE MANERA ESPECÍFICA hay que
copiar (la ventana anterior de googgle fonts) la REGLA CSS (parte inferior) y PEGARLA en el archivo CSS – Especificamente
DÓNDE QUIERO APLICARA – En este caso en el H1 { código }.
Probando el efecto
Todo lo anterior se le consideran elementos de la parte SUPERIOR, ahora se verán cambios a la parte INFERIOR.
Página 50 de 125
Index.html - Ocultamos el contenido de <head> - Nos colocamos “SECCION HERO” - Nos colocamos ANTES del FINAL de
</section> - Creamos un Nuevo DIV con una CLASE llamada “hero-inferior” - Dentro del anterior DIV creamos una IMAGEN
con <IMG> - Se insertan otras clases y atributos.
Ahora en el archivo CSS se crea una MEDIA QUERY para indicar las dimensiones de la PARTE INFERIOR y el máximo de ancho
que podrá extenderse la imagen (600 px).
Página 51 de 125
Probando el estado responsivo, se ve que la página y sus imágenes se ajusta a diferentes de pantalla
3:03
Hasta aquí se terminan las 2 partes (Superior e Inferior) – Sigue hacer cada hoja de los LINKS superiores de la página
principal.
7.- CREACIÓN DE LAS SECCIONES (ABOUT ME o Sobre mi, Proyectos, Testimonios, Contactos )
7.1 SECCIÓN ABOUT ME
Nos colocamos JUSTO antes de JS y </body> - Creamos nueva sección <section> y </section>, <div> y </div>, <h2>
PONEMOS TITULO </h2>, <p> Contenido de LIPSUM.COM </p>.
En la vista previa lo vemos así
Página 52 de 125
Ahora le aplicamos un estilo CSS – En ésta última sección - Creamos 2 clases (“sobre-mi” , “seccion-oscura”) – En el DIV de
esta sección – Creamos la clase (“contenedor”) – En el H2 de esta sección – Creamos 2 clases (“seccion-titulo” , “texto-
blanco” Aunque, si por defecto el texto es blanco, se DEBE quitar esta clase “texto-blanco”) -En el párrafo de esta sección -
Creamos la clase (“seccion-texto”).
7.1.1 SECCIÓN ABOUT ME (Específicamente a la SECCIÓN-OSCURA)
Ahora, usando las clases anteriores, en CSS le asignamos el ESTILO – En CSS – DEBAJO de H1 – CREAMOS “ /*About Me*/ -
Página 53 de 125
Con este estilo cambia el texto del párrafo y su fondo
7.1.2 SECCIÓN ABOUT ME (Específicamente a la Sección SOBRE-MI)
En CSS, debajo de “.HERO-PRINCIPAL H2” – Ponemos el comentario  SOBRE MI - “.sobre-mi” { altura de 500 px y
padding de 10px.. (height: 500px; padding: 10px) }. TAMBIÉN usamos “.sobre-mi .contenedor { } para aplicar formato
específicamente a la clase contenedor que está dentro de “.sobre-mi”.
Página 54 de 125
Al ejecutarlo como vista previa se así
7.1.2 SECCIÓN ABOUT ME (Específicamente a la Sección SECCION-TITULO)

Página 55 de 125
En la parte de “Estilos Generales” de CSS, ENTRE “h1 y hero” – Crear  SECCION-TITULO - “.seccion-titulo { Font-size:
2rem (El doble del elemento raíz); padding: 15px 0 (15 arriba y abajo y CERO a la izquierda y derecha; Font-family: ‘Rubik
Dirt’, cursive; } ”.
En vista previa se
Página 56 de 125
7.1.2 SECCIÓN ABOUT ME (Específicamente a la Sección SECCION-TEXTO)
En CSS y DEBAJO de “sección-titlo” se especifican los siguientes estilos para “sección-texto” que está en la 2DA SECCIÓN del
index.html. Solo se le da un tamaño al texto.
Página 57 de 125
Con la vista previa
7.2 SECCIÓN EXPERIENCIAS (USAREMOS LA CUADRICULO + RESPONSIVA)
7.2.1 TRABAJAR CON LA GRID DE BOOTSTRAP
Index.hetml - Nueva SECCION “EXPERIENCIA” antes de JS y </body> -
Página 58 de 125
En CSS y DEBAJO de la Sección “.sobre-mi .contenedor” – Creamos “experiencia” – “.experiencia{ … }. Y hacia arriba, debajo
de “.seccion-oscura” – Creamos “sección-clara{ con color de texto Negro y fondo blanco}.
Más ADELANTE se modificará “padding: 40px;” por “padding: 40px 40px 60px 40;” Que indica una ampliación de 60px para
el lado IZQUIERDO.
En vista previa con pantalla de MD en adelante
Página 59 de 125
Al reducir el tamaño de la pantalla se ajusta y ocupa las 12 columnas, se acomodan debajo una de la otra.
7.2.2 CREAR EL CONYENIDO EN CADA FILA

Página 60 de 125
En la 1ER FILA se crear 2 párrafos, el primero cómo título y el segundo para un contenido (Lorem ipsum) – Se le da un Estilo
CSS – En CSS, DEBAJO de Experiencia.rodDIV – Creamos una sección “EXPERIENCIA-TITULO” y creamos su
estilo .experiencia-titulo{ Font-size: 25px; Font-weight: bold; margin: 10 0 (10 px en superior e inferior y CERO a la derecha e
izquierda) }
En vista previa se ve así.
Página 61 de 125
PERO EXISTE UN PROBLEMA, al reducir la pantalla el texto se “sale” del recuadro, es decir, el texto NO ES RESPONSIVO. Una
SOLUCIÓN ES que sea poco texto, el mínimo de información.
OJO. Con el ESTILO anterior (Dónde se uso BOLD), el estilo “.experiencia .row div { }” SALE SOBRANDO, Lo eliminamos,
guardamos y ejecutamos, ya no se vería el fondo morado ni el borde naranja.
Página 62 de 125
Para APLICAR FORMATO A LAS 3 FILAS AL MISMO TIEMPO – Creamos una <div class=”columna + col-12 col-md-4 “ > en
cada DIV de fila.
PONER ICONO en la parte superior (arriba del título) de cada FILA. – (En getbottstrap.com – icons – Buscar “laptop” –
Escogemos algo que se pueda personalizar – Clic en icono - Copiamos y pegamos en INDEX.HTML el código.
PARA QUE FUNCIONE LA CONEXIÓN CON BOOTSTRAP, hay que copiar el código de ENLACE “CDN” (Que viene en la página
dónde se muestra el icono resultado de la búsqueda “CDN Include icon fonts stylesheets – in your website <head> or via
import in CSS – from our CDN and get started in seconds see icon Font docs for examples” – COPIAMOS EL CÓDIGO –
PEGAMOS debajo de <HEAD> en la SECCIÓN DE BOOTSTRAP – Creamos una nueva sección “ICONOS DE BOOTSTRAP” –
Pegamos el código CDN.
Página 63 de 125
Página 64 de 125
Página 65 de 125
PERSONALIZANDO EL ELEMENTO “ i ” DEL ICONO
Dentro de la CLASE “Experiencia”, tenemos el código <i class="bi bi-laptop"></i> para personalizarlo – en CSS – Ponemos:
Un color de fuente, un color de fondo, un padding y borde que redondea el fondo.
HACIENDO UNA MODIFICACIÓN A LOS valores de PADDING – en CSS sección “.experiencia {padding: 40px;}” Hacemos el
siguiente cambio:
Página 66 de 125
7.2.3 CREAR INSIGNIAS (badges) desde Bootstrap EN CADA FILA
En la FILA 1 debajo del párrafo – Crear nuevo DIV y dentro de él la CLASE=”BADGES-CONTENEDOR” – Getbootstrap – DOC –
Componentes – badges – Buscamos LA SECCIÓN background-color - “PRIMARY” – Copiamos el código que le corresponde
a PRIMARY <span class=”badge text-bg-primary”>Primary</span> - Pegamos dentro del DIV creado –
Finalmente pondremos 4 badges: HTML, JAVASCRIPT, CSS y REACT
En vista previa tenemos
Página 67 de 125
PONIENDO UN POCO MÁS DE MARGEN ENTRE CADA BADGE
EN CSS debajo de .experiencia-titulo { } – Creamos la etiqueta “BADGES” y el código “.badges-contenedor{ …}” con lo
siguiente: Font-size: 25px; Font-weight: bold; margin; 10px 0;. Y para cada uno de los BADGES un margen de 5px cada uno.
En vista previa
Página 68 de 125
Con lo anterior se finaliza la PRIMER FILA – Copiamos a las otras 2 filas y PERSONALIZAMOS
Una vez copiado, PERSONALIZAMOS CADA FILA – Vista previa
Página 69 de 125
Con fuente a 20px y en pantalla pequeña
Página 70 de 125
Ahora, en la SECCION Experiencia, se aplica un estilo a las COLUMNAS – de cada FILA – “class=columna…” – Nos colocamos
en CSS debajo de el último estilo – creamos “CLASE COLUMNA DENTRO DE SECC EXPERIENCIA 3 FILAS” –
“.experiencia .columna {padding: 20px; border: 2px solid #8080804d; display: flex; flex-direction: column; align-
items: center; justify-content: space-evenly;}.
Página 71 de 125
En vista previa
En pantallas pequeñas se ve así
Página 72 de 125
Enseguida se APLICA UN POCO DE INTERACTIVIDAD CON EL LA INSTRUCCIÓN HOVER
EL EFECTO Consiste en cambiar el FONDO a oscuro y el TEXTO a blanco de forma GRADUAL Cuando el cursor esté sobre una
de las 3 áreas – EN EL CÓDIGO CSS ANTERIOR – Agregamos una línea más “transition: all 0.2s ease-in;” - Aparte se crea una
sección (debajo de la última) “.experiencia . columna:hover{color: White; background-color: #1b1b32; }
Página 73 de 125
En vista previa tanto en pantalla grande (a partir de MD) o pequeña
Página 74 de 125
3:35:20
CON ESTO TERMINA LA SECCIÓN EXPERIENCIA
8.- CREACIÓN DE LA SECCIÓN PROYECTO(s)
Hasta este momento tenemos las secciones: HERO, ABOUT ME y EXPERIENCIA. Sigue la sección de proyectos
Página 75 de 125
8.1-
Creamos el COMENTARIO “PROYECTOS” y la SECCIÓN “proyectos” ANTES del LINK a JAVA y <body> - Dentro de Sección
creamos <h2> Título </h2> y clases, tal como se ve en la imagen.
Se crear sus correspondientes ESTILOS EN CSS – DEBAJO de la sección BADGES en CSS – Creamos el letrero “ Proyectos ” y el
estilo “.proyectos-recientes { … } ”.
Página 76 de 125
La sección SECCIÓN -CLARA, YA FUE CREADA PREVIAMENTE (Está en la línea 28 aprox.) –
Las secciones: SECCION-DESCRIPCION, TEXTO-NEGRO y TEXTO-BLANCO se debe crear debajo de la sección-texto (en la línea
40 aprox) –
En vista previa, la sección PROYECTOS se ve así.
Página 77 de 125
DENTRO DE LA SECCIÓN PROYECTOS – Creamos un nuevo DIV como contenedor y dentro de éste – Creamos una FILA –
También se crea su respectivo estilo en el archivo CSS – Nos colocamos DEBAJO DEL último “proyectos-recientes” – y
creamos… “proyectos-recientes img {… }.
Página 78 de 125
Ahora el estilo del “proyecto-contenedor” (que estará en el index.html) – Estando DEBAJO del anterior –
En vista previa se vería así
Página 79 de 125
3:45:30
Para que al pasar el puntero sobre la imagen, se vea el LETRERO SOBRE ELLA (overlay) – DEFINIR EL ESTILO CSS – (estando
debajo de “.proyectos-contenedor” – Se crean 4 estilos: /* TEXTO SOBRE LA IMAGEN OVERLAY */, /* OVERLAY A LOS
PARRAFOS */, /* CUANDO CURSO DE COLOQUE SOBRE PROYECTO, LA IMAGEN CORRESP CAMBIA SU OPACIDAD */, y , /*
CUANDO EL CURSO ESTE SOBRE ESTE ELEMENTO DE PROYECTO -->ASIGNE OVERLAY */.
Página 80 de 125
EN vista previa se ve el DESVANECIDO al colocar el cursor SOBRE LA IMAGEN
Página 81 de 125
Ahora, para HACER QUE EN LA IMAGEN (Al poner el cursor) se VEA EL LETREO – EN CSS (Estando ARRIBA DE
“.proyecto:hover img{…} - ponemos el estilo “.proyecto{ position: relative;}
AGREGAR 2 ICONOS (QUE SERÁN enlaces a: github y al proyecto en vivo)
En ICONS de Bootstrap – Buscar “github” – Copiar su código CDN – Pegar en un nuevo DIV con ENLACE, DEBAJO del párrafo
del CENTRO “<p>Proyecto 1X</p>” - y MAS. (OJO, No pegué el LINK CDN debajo de <head> en la sección de Bootstrap)
Se hace su correspondiente ESTILO en CSS

Página 82 de 125
DEBAJO de “.proyecto:hover .overlay{ … }” – Creamos “.overlay .iconos-contenedor{ display: flex (Los iconos se muestran en
UNA SOLA FILA) … }” - APARTE, se crea OTRO ESTILO – “.overlay i{… } que es un Estilo para los iconos
3:50:28
CREACIÓN 2DO ENLACE, ENSEGUIDA DEL LINK A GITHUB
En el index.html nos colocamos DEBAJO del link a github – Creamos un nuevo enlace que nos mande a la versión en VIVO
del proyecto (para este caso usaremos una página de ejemplo: freecodecamp.org/espanol/ - También se agregará el ICONO
de LAPTOP con el mismo proceso hecho anteriormente (OJO. Excepto que ya no copiamos y pegamos el código CDN en el
área de <head>)-
Probando en vista previa
Página 83 de 125
HASTA AQUÍ SE CONCLUYERON todos los aspectos para el PROYECTO1
Copiaremos el bloque 5 veces más, se deben personalizar a manera de TENER 6 PROYECTOS
Identificamos el bloque a copiar – SE CONTRAE – Se va copiando, cambiando el nombre de cada proyecto y probando uno a
la vez.
En vista previa, uno a uno se fue probando hasta tener los 6 proyectos.
Página 84 de 125
Personalizando TEXTO e IMAGEN, USANDO LAS IMÁGENES RESPECTIVAS
En el PROYECTO 1 (Y todos los demás, se pudo OMITIR el código CSS “.overlay .iconos-contenedor{…}”, PONIÉNDO en el
mismo index.html “d-flex” de Bootstrap.
Página 85 de 125
CORREGIR LOS ICONOS QUE EN PANTALLA PEQUEÑA SIGUEN TENIENDO EL TAMAÑO DE PANTALLA GRANDE
Se puede cambiar EL TAMAÑO del texto e iconos con un MEDIA QUERY
Estando en CSS en la sección “ADAPTABLE-RESPONSIVO” – Se CREA ESPECÍFICAMENTE un Media Query para Dispositivos
PEQUEÑOS de máximo 400 px. – “.overlay p{ font-size: 18px} “ – y aparte “.overlay i{ Font-size: 40px;}”
En vista previa
Página 86 de 125
OJO. Los efectos de mostrar el texto encima y los 2 iconos encima de cada imagen SOLO FUNCIONA con el PUNTERO del
mouse, si es en pantalla TOUCH hay que implementar otra cosa.
AGREGAR UN BOTON DEBAJO DE LOS PROYECTOS
Ese botón nos puede llevar a VER MÁS PROYECTOS – Será un componente de BOOTSTRAP – DEBAJO del <DIV
class=”container…” o ANTES de </section> DÓNDE SE AGRUPAN LOS 6 PROYECTOS - Insertamos el código de un BOTÓN –
getbootstrap.com – DOC – Components – Buttons – Buscar BOTÓN DE INFORMACIÓN (Info) – Identificamos el código –
Seleccionamos – Copiar y pegar antes de </section> - Una vez pegado, se le cambia el letreo INFO por “Ver más proyectos”
–
Página 87 de 125
Página 88 de 125
En vista previa de pantalla grande como pequeña
Página 89 de 125
CAMBIAR EL ASPECTO DEL BOTÓN CON UN ESTILO GENERAL
En CSS en “Estilos generales” – NOS COLOCAMOS ENTRE “.texto-negro{ …}” y “.texto-blanco{…}” - Creamos “.btn-info{ …}”
En vista previa, el botón cambia un poco
Página 90 de 125
AGREGAR UN ICONO AL BOTÓN ANTERIOR
Desde ICONS de Bootstrap – Buscar “Arrow-right-circle-fill” (o buscar arrow y después buscar el correcto) – Copiar y pegar
en index.html ENTRE <button… > Aquí </button>
En vista previa el botón ya aparece con el icono
Página 91 de 125
CONVERTIR BOTON ANTERIOR EN UN ENLACE
Estando ARRIBA del código del botón – Usar etiqueta de enlace <a> … </a> - Y ENCERRAR HACIA ABAJO HASTA DESPÚES
DEL ICONO – Usar <a href=”url” target= ”_blank” rel=”noopener noreferrer”>.
En vista previa
Página 92 de 125
HASTA AQUÍ QUEDA COMPLETA LA SECCIÓN PROYECTOS
9.- CREACIÓN ARTÍCULOS (Usaremos un grupo de LISTAS CON TARJETAS “listgroup”)
En index.html creamos la SECCION-ARTICULOS – Se crean las clases – se crea un H2 – Se pega el código de Bootstrap –
contents-Cards-listgroup -Featured.
4:06:00
PERO NO SE DEJA ASÍ – se modifica: H2, clase card, clase card-header, Features, se agrega <a>…</a>, (en este momento
será sólo para 1 elemento) a manera de que se vea como en la sig. Imagen.
Página 93 de 125
Copiando el primer ejemplo anterior, creamos en total 6 DMODIFICACIONES, tal como se ve en la sig. Imagen.
AHORA LE ASIGNAMOS UN ESTILO A LAS CARDS
Estando en CSS, ANTES DE LAS MEDIA QUERY – Creamos la sección “ARTICULOS” (No estamos poniendo acentos para
mantener la compatbilidad con HTML)
Página 94 de 125
Comparando el ANTES y el DESPUËS de los estilos
FALTA AGREGAR UN BOTÓN AL FINAL DE ESTA SECCIÓN DE ARTÍCULOS
JUSTO antes de la etiqueta de cierre </section> de ARTICULOS – Insertar CÓDIGO BOTÓN INFO (utilizado anteriormente) –
Cambiar “INFO” por “Ver más artículos” – Se le agrega un ICONO (Cómo el utilizado anteriormente, DE HECHO, se puede
COPIAR del ejemplo anterior el código correspondiente y personalizarlo)
En vista previa el botón se vería similar al de la sección anterior
Página 95 de 125
4:12:17
10.- CREACIÓN SECCION TESTIMONIOS USANDO UN CARRUSEL CON CONTROLES PARA AVANZAR O RETROCEDER ENTRE
CADA TESTIMONIO
Nos colocamos ANTES DE <..JASCRIPT..> - Creamos <section> <h2>Título</h2><h3>Descripción</h3> </section> - A los

H2 y H3 se les hacen modificaciones - DESPUÉS se insertar el código del CARRUSEL al que también se le harán
modificaciones
Inserando el código del carrusel desde bootstrap
Página 96 de 125
Con las modificaciones hechas se ve así
Página 97 de 125
En vista previa se vería así.
PERSONALIZANDO LA SECCIÓN TESTIMONIOS y EL CARRUSEL
En CSS, debajo del último estilo de CARDS (o antes de Media Query) – Creamos TESTIMONIOS y debajo
“.testimonios{padding: 40px}
40px 80px 40px ;”. Además, creamos “.testimonios .carousel{ max-width: 800px;”.
Página 98 de 125
En vista previa
MODIFICANDO LA ALTURA DEL CARRUSEL
En CSS se agrega un estilo que afecte a la clase “.carousel-tem{ height: 500pz;}” – Con esto se indica que cada imagen
(Cuando su altura es diferente) tenga una altura fija de 500px.
Página 99 de 125
En vista previa no se ven muchos cambios
4:19:50
MODIFICAR LA IMAGEN DE CADA ELEMENTO DEL CARRUSEL
Modificación del PRIMER ELEMENTO IMAGEN del carrusel
Página 100 de 125

Eliminamos la etiqueta de apertura y cierre <img > .. - Dejando solo el DIV que lo contiene
Así quedaría:
Ahora INSERTAMOS un nuevo <DIV class=”container”> - <img> <p> <div> <p><p> dentro del ANTERIOR, para que se vea así
Página 101 de 125

Ya modificado debe quedar así.
Enseguida se CREA SU ESTILO EN CSS
Estándo DEBAJO del anterior “.carousel-item{…}” – Creamos “.carousel-item .container{ …}
Con el estilo anterior en vista previa
Página 102 de 125

Como la imagen es muy chica se le da un ESTILO CSS para modificarla
En vista previa se ve así
Página 103 de 125

Página 104 de 125
Ahora se crean 5 ESTILOS CSS para TODOS LOS TEXTOS que están debajo de la imagen (La INFO).
En vista previa se ve asi.
Página 105 de 125

Ahora, se personaliza el tipo de letra de la INFO (Lorem ipsum) – En google fonts se busca la fuente “Share tech mono” – Clic
en la fuente, a la DERECHA clic en “Regular 400+” – En el panel derecho (OJO, se muestran las fuentes YA USADAS
anteriormente, por ello se ven las DOS fuentes en el panel) – Seleccionamos y Copiamos TODO el código – En el
apartado <!—Google fonts de <HEAD> - Seleccionamos TODO los enlaces anteriores – Pegamos LO NUEVO DE
google fonts (Porque en ese LINK ya están incluidas las fuentes anteriores a esta última) – Con esto deben funcionar
TODAS las fuentes previamente vinculadas a google fonts.
Página 106 de 125

La FUENTE SHARE TECH MONO debe AGREGARSE al estilo “.textimonio-texto {…}” en CSS – DEL MISMO GOOGLE FONTS
COPIAMOS (Esquina inferior derecha) el código – Se pega en “.testimonio-text{…}”.
Página 107 de 125

4:27:23
Una vez que se ha conseguido la PLANTILLA para el PRIMER CLIENTE, seleccionamos el código y lo pegamos en los 2
siguientes clientes – Les cambiamos la foto, el cargo y su nombre.
En vista previa se vería así.
Página 108 de 125

OJO, estos mismo testimonios vistos en una pantalla chica, tiene el error de que el texto se “sale” del
contenedor.
Página 109 de 125

El problema anterior se puede resolver con un MEDIA QUERY que evalúe si la pantalla es MENOr a 800px, de ser así, que
reduzca el alto y ancho de la foto del cliente, así mismo que reduzca el tamaño de la descripción del cliente. En CSS
se hace la siguiente MEDIA QUERY
Página 110 de 125

Aún con el cambio anterior, la foto y texto se siguen viendo un poco grande, PROBÉ con los siguientes valores y se ve mejor.
Página 111 de 125

HASTA AQUÍ TERMINA LA SECCIÓN TESTIMONIOS
10.- INICIAMOS LA SECCIÓN DE CONTACTO
En esta sección se creará un botón para que nos contacten, compartir en redes sociales
10.1 Crear sección de contacto – Creamos sección con todos los elementos que se muestran
Página 112 de 125

Página 113 de 125

Ahora se establecen los estilos en CSS – Estando ANTES del primer MEDIA QUERY – Creamos como 5-6 estilos
Página 114 de 125

En vista previa tanto en pantalla grande como pequeña
Página 115 de 125

4:44:20
11.- CREAR EL PIE DE PÁGINA (FOOTER Y REDES SOCIALES)
11.- En este apartado se incluirán los enlaces a las redessociales (twitter, github, linkedlink, Instagram, sobre para el correo)
y la información de derechos de autor, una vez creados DEBEN ACTIVARSE – Nuevamente Creamos una nueva
sección <footer> </footer> ANTES de <JSCRIPT> y </body>
Una vez que se copian HAY QUE MODIFICARLAS (Una de esas modificaciones es un ENLACE los REPOSITORIOS DE
FREECODECAMP EN GITHUB).
Por lo tanto PRIMERO VEREMOS CÓMO BUSCAR Y LLEGAR AL REPOSITORIO DE FREECODECAMP EN GITHUB, que será el
SEGUNDO ENLACE A USAR -
Estando en https://github.com/ - https://github.com/freeCodeCamp/freeCodeCamp (Opodemos buscar “freecodecamp”,

enseguida Clic en freecodecamp/freecodecamp.
Página 116 de 125

Una a una se deben de buscar las URL para cada red social, en resumen los enlaces a usar en las 5 redes sociales serán:
https://twitter.com/freecodecampES
https://github.com/freeCodeCamp/freeCodeCamp
https://www.linkedin.com/
https://www.instagram.com/freecodecamp/
mailto:[email protected]
REEMPLAZANDO LA IMAGEN INICIAL DE LA SECCION FOOTER, tenemos:
Página 117 de 125

ASIGNANDO 6 ESTILOS CSS a los iconos de redes sociales – Creamos nuevo LETRERO CSS ANTES DEL MEDIA QUERY –
Página 118 de 125

PARA LAS NUEVAS FUENTES, se buscan en Google fonts (tratando de que se haga referencia a todas las utilizadas
En el HEAD SE REEMPLAZA
En vista previa con pantalla grande o chica se ve así.
Página 119 de 125

12.- CREAR EL TEXTO DEL DERECHO DE AUTOR
Estando ANTES del cierre de </footer> - Crear <div class=”derechos-de-autor”> Creado por Jane Doe © </div> -
LUEGO – Se crea el estilo en CSS
En vista previa
Página 120 de 125

Hasta aquí finalizan las diferentes secciones
13.- CREAR ENLACES INTERNOS (Las que están en la BARRA D ENAVEGACIÓN) hacia estas secciones (ANCLAS)
13.1.- Estando o teniendo TODAS las secciones contraídas, podemos ver rápidamente cada parte de la página web
A cada sección de CREAMOS UN ID para identificarlas en la página web – LUEGO, vamos a la BARRA DE NAVEGACIÓn y
EXACTAMENTE seleccionamos la parte dónde dice que nos mandará a esa sección (…href=” # ”…) – Y dentro del
HREF ESCRIBIMOS el nombre del ID –
Página 121 de 125

Debemos hacer los demás ID y asignarlos a cada parte dónde le corresponde en la Barra de Navegación.
Se verifica que los enlaces funcionan en pantalla grande como pantalla chica
Página 122 de 125

Página 123 de 125
Página 124 de 125
Página 125 de 125

Bootstrap

Cargado por

Copyright:

Formatos disponibles

Bootstrap

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Bootstrap

Cargado por

Copyright:

Formatos disponibles

1.

1.1 HACER ENLACE CON BOOTSTRAP

Ya pegado dentro de <head>

1.2 CREAR UN CONTENEDOR CLASS=”CONTAINER”

1.3 2do TIPO DE CONTENEDOR CLASS=”CONTAINER-FLUID”

FINALMENTE, dentro de estos contenedores CREAREMOS LA CUADRÍCULA y usaremos FLEXBOX

2.- CREAR ESTRUCTURA GRID O CUADRÍCULA

Una GRID es un conjunto de filas y columnas

2.1 CADA FILA TIENE 12 COLUMNAS

Los elementos de una FILA pueden ocupar varias COLUMNAS

Se puede generar CUALQUIER TIPO DE COMBINACIONES, como la siguiente

3 LOS COMPONENTES DE BOOTSTRAP

3.1 ACCEDER A LOS COMPONENTES

EJEMPLO 3 CAMBIANDO LOS ELEMENTOS DEL ACCORDION

Localizamos el elemento a cambiar y lo sustituimos por nuestro contenido

3.- ICONOS DE BOOTSTRAP

3.1 INSERTANDO ALGUNOS ICONOS EN NUESTRA PÁGINA WEB

<style> i { Font-size: 25px; Color: rgb(8, 212, 8); } </style>

4.1 Se pueden usar con Flexbox o con Bootstrap

4.2 PROPIEDADES y MODELO DE LA ESTRUCTURA DE FLEXBOX

4.2.1 PROPIEDAD FLEX-DIRECTION

4.2.2 PROPIEDAD JUSTIFY-CONTENT (Justificar)

FLEX-START.- los elementos se sitúan al principio de la dirección principal, es decir, el espacio

Justify-content-START.- los elementos se sitúan al principio de la

Justify-content-CENTER.- Centra los elementos

Define cómo se distribuyen los elementos en el EJE PERPENDICULAR al EJE PRINCIPAL.

Align-items-baseline.- Para alinear un ítem

Align-items-Stretch (estirar).- Estira los elementos para que

-Hace la redistribución a la inversa

-Hace la redistribución a la inversa

5.- PROYECTO (sitio web de portafolio)

5.1 AÑADIR BOOTSTRAP AL PROYECTO

5.1.1 OTRA FORMA DE HACER ENLACE A BOOTSTRAP

5.2.1 CREAR LA HOJA DE ESTILO

5.2.2 ENLAZAR ese archivo STYLE.CSS al documento HTML

<meta charset=”utf-8”> para caracteres especiales.

<meta name=”descrption” content=”Portafolio de desarrollo web de Jane Doe”>.

<meta name=”viewport” content=”width=device-width, initial-scale=1”>. Permite que se ajuste el tamaño de la ventana

<meta charset=”utf-8”> para caracteres especiales.

Por ejemplo para personalizar el título hacemos

<title> Jane Doe | Desarrollo Web Front – End </title>

Y para personalizar el icono hacemos

<link rel="icon" type="image/x-icon" href="images/router.png">

6.1.1 PERSONALIZANDO LA NAVBAR

Partiendo del código original podemos identificar que en la línea de código

<nav class="navbar navbar-expand-lg bg-light">

De data-bs-target=”#navbarTogglerDemo01” se cambia por data-bs-target=”#navbar-toggler”

De id=”navbarTogglerDemo01”> lo cambiamos por id=”navbar-toggler”> y debe ser igual al elemento de la línea 24

Y al probar tenemos los cambios

En el código se identifica la parte a eliminar y SUPRIMIMOS

6.1.2 PERSONAR A TRAVÉS DE ARCHIVO CSS y BARRA DE NAVEGACIÓN RESPONSIVA

Si se verifica en INSPECCIONAR, se pueden comprobar que es responsivo al cambiar el tamaño de la pantalla

6.2.1 OCULTA ETIQUETAS HEAD Y BARRA DE NAVEGACIÓN

6.2.2.1 PERSONALIZAR TÍTULO Y SUBTÍTULO

Personalizando H1 CON GOOGLE FONTS

7.1 SECCIÓN ABOUT ME

En la vista previa lo vemos así

7.1.1 SECCIÓN ABOUT ME (Específicamente a la SECCIÓN-OSCURA)

7.1.2 SECCIÓN ABOUT ME (Específicamente a la Sección SOBRE-MI)

7.1.2 SECCIÓN ABOUT ME (Específicamente a la Sección SECCION-TITULO)