Hola, les comparto mi repositorio de una página que hice para este proyecto, la puedan usar con la práctica! https://github.com/mancillajonathan
Si quieren diseñar sus propias páginas les recomiendo el Curso de Diseño de Interfaces
Introducción y bienvenida al curso
Aviso importante: este curso se dará de baja dentro de un mes
Lo que aprenderás para crear Router para SPA
La lógica detrás de nuestro enrutador
Conceptos de SPA Routing y nuestro primer servidor
Desglose del proyecto del curso y explicación del SPA Routing
Implementando routing del lado del cliente
Creando una aplicación sencilla en html
Creando el servidor de nuestra app
Creando nuestro archivo de rutas
Lógica de nuestro ruteador
Creación de la función loadInitialRoute
Haciendo match entre la URL y una ruta
Creando la función load routes
Actualizando nuestro index.html para agregar la nueva funcionalidad de routing
Cierre del curso y conclusiones
Cierre del curso y conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
16 Días
3 Hrs
4 Min
58 Seg
Creando una aplicación sencilla en html
6/13Recursos
Aportes 19
Preguntas 1
Ordenar por:
Aquí les deje un menu para le que lo quiera usar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Curso SPA</title>
</head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
.menu--item {
cursor: pointer;
}
.menu--item:hover {
color: limegreen;
text-decoration: underline;
}
</style>
<body>
<header class="menu">
<div class="menu--item" onclick="">
<p>Home</p>
</div>
<div class="menu--item" onclick="">
<p>Contact</p>
</div>
<div class="menu--item" onclick="">
<p>About me</p>
</div>
</header>
</body>
</html>
![](
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cliente para nuestro SPA Router</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
</head>
<body>
<header>
<ul class="nav-list">
<li class="nav-list-item"><button>Home</button></li>
<li class="nav-list-item"><button>Contacto</button></li>
<li class="nav-list-item"><button>About me</button></li>
</ul>
</header>
<div class="container-data">
<img src="img/persona.png" alt="">
</div>
<footer class="footer">
<div class="footer-container">
By: Darynka Tapia
</div>
</footer>
</body>
</html>
estilos.css
/*https://colorhunt.co/palette/174976*/
*{
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.nav-list{
padding: 20px 0;
background-color: #424874;
display: flex;
align-items: center;
justify-content: space-around;
height: 10vh;
}
.nav-list button{
font-family: 'Patrick Hand', cursive;
font-size: 40px;
color: #f4eeff;
border: none;
background: transparent;
}
.nav-list-item{
border-bottom: solid 2px #a6b1e1 ;
}
.container-data{
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
padding: 37px 0;
}
.container-data img{
height: 65vh;
object-fit: contain;
}
.footer{
position: absolute;
background-color: #a6b1e1;
bottom: 0;
width: 100%;
height: 50px;
}
.footer-container{
display: flex;
justify-content: center;
align-items: center;
height: inherit;
font-family: 'Patrick Hand', cursive;
font-size: 20px;
}
“Te lo advierto, va a estar feo” jajaja
mi proyecto de google
Aún no es responsive, les dejo mi repositorio donde podrán ver la estructura.
Repositorio: https://github.com/RLCHuncp/BurgerLu-router-js
Para aquellos que deseen este codigo base para practicar, aqui esta: Repositorio del codigo, aqui!
Jajaja… Va a estar feo.
“Va a estar feo, te lo advierto de una vez” jajaja
Un header y un section básico. Contiene una animación de transform scale por cada elemento del menú.
OJO: Los links no tienen un valor de href y tiene un atributo onclick sin usar para futuras clases.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Router for SPA with JS Vanilla</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.menu-list {
height: 100px;
background-color: #162447;
color: white;
display: flex;
align-items: center;
justify-content: space-around;
}
.links {
color: white;
text-decoration: none;
transition: 100ms;
}
.links:active {
transform: scale(0.9);
}
.list-item {
list-style: none;
}
.content {
margin-top: 50px;
text-align: center;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="menu-list">
<a href="" class="links" onclick="">
<li class="list-item">
<h3>HOME</h3>
</li>
</a>
<a href="" class="links" onclick="">
<li class="list-item">
<h3>CONTACT</h3>
</li>
</a>
<a href="" class="links" onclick="">
<li class="list-item">
<h3>ABOUT</h3>
</li>
</a>
</ul>
</nav>
</header>
<section>
<div class="content">
<h1>Welcome to the SPA Router Course at JavaScript Vanilla</h1>
</div>
</section>
</body>
</html>
"Te lo advierto, va a estar feo"
Al menos es sensato 😅
Que bien, yo estoy trabajando en mi portafolio y en proyectos para añadir a este. Esto me viene super bien 😃
Bien
Hice una plantilla sencilla:
Si alguno la quiere usar dejo el repositorio:
https://github.com/JuanesGalvis/Router-SPA
Increíble
Recurden siempre usar HTML semantico, asi quedaria la estructura.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Router SPA</title>
</head>
<body>
<header>
<ul>
<li><button>Home</button></li>
<li><button>Contacto</button></li>
<li><button>About Me</button></li>
</ul>
</header>
<main>
<h1>Hola Estudiante! Estas en el Home.</h1>
</main>
</body>
</html>
Mi implementación, algo corto y sencillo.
Después de llevar ya un tiempo con profes que trabajan en Linux y Mac ver un curso con Ricardo en Windows se me hace raro jejejeje
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?