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
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
How to start building your website with HTML?
In the amazing world of web development, starting from scratch can sound overwhelming. However, building your own website doesn't have to be a herculean task, even if you're just playing around with simple HTML. In this article, we'll take you step-by-step through the creation of your first HTML file, a staple on the front-end. Let's set the stage for you to start developing your own web solutions.
What file structure do we need?
Starting a web development project requires some file organization. So, the first thing to do is to create a new folder on your desktop. In this specific project, we will call it cursoSPA. We will use this directory to store all our HTML files. Working with a comprehensive and efficient code editor, such as Visual Studio Code, is highly recommended, although you can choose the one you like best.
To begin, follow these simple steps:
- Create a new folder: Give it a meaningful name like
cursoSPA. - Open Visual Studio Code and select your new folder by going to
Open folder. - Create a new file: Name it
index.html, since this will be the entry point of our web service.
How to structure a basic HTML file?
The next step is to populate our index.html with the basic HTML structure. Let's define the minimum skeleton necessary for your browser to be able to read and display your content correctly.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clientede nuestro SPArouter</title>
</head>
<body>
<header>
<ul>
<li><button>Inicio</button></li>
<li><button>Contacto</button></li> <li><button>Add user</button></button></li></li></ul> </header></header> <main> <h1>Hellostudent, you are in the right place</h1> </main></body></html></html>.What are the important elements in this HTML?
Let's analyze each essential part of the code. The first block is the head, which includes the page title: Client of our SPA router. This name will appear in the browser tab.
-
Header and Navigation Buttons: Here we have created a header with an HTML list
(ul) containing buttons(button) inside list items(li). These buttons will hypothetically allow us to navigate between different pages of the site:- Home
- Contact
- Add user
-
Main Content: Inside the main, we create a header
(h1) that greets the user with a welcoming message.
Why is it important to start with a simple template?
Using a simple template will allow you to focus on the functionality and navigation of your website before venturing into a complex design. Plus, it will save you time and motivate you to see quick results.
This is just the beginning. Although the initial design is simple, it represents a solid foundation with which you can experiment and expand your knowledge of web technologies. Remember to review these code blocks in the files section, download them or use them as a reference to build your personal portfolio. Keep exploring and experimenting!
Contributions 19
Questions 1
Sort by:
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
Want to see more contributions, questions and answers from the community?