CÓMO

Inicio

Menús

Barra de iconos Icono de menú Acordeón Pestañas Pestañas verticales Encabezados de pestaña Pestañas de página completa Pestañas flotantes Navegación superior Topnav receptivo Barra de navegación con iconos Menú de búsqueda Barra de búsqueda Barra lateral fija Navegación de página Barra lateral responsiva Navegación a pantalla completa Menú fuera del lienzo Botones de navegación lateral flotante Barra lateral con iconos Menú de desplazamiento horizontal Menú vertical Navegación inferior Navegación inferior receptiva Enlaces de navegación del borde inferior Enlaces de menú alineados a la derecha Enlace de menú centrado Enlaces de menú de igual ancho Menú fijo Deslizar la barra hacia abajo en el desplazamiento Ocultar barra de navegación en desplazamiento Reducir barra de navegación en desplazamiento Barra de navegación fija Barra de navegación en la imagen Menús desplegables flotantes Haga clic en menús desplegables Menú desplegable en cascada Menú desplegable en Topnav Desplegable en Sidenav Desplegable de la barra de navegación de resp. Menú de subnavegación Caer hasta Menú Mega Menú móvil Menú Cortina Barra lateral contraída Panel lateral contraído Paginación Migas de pan Grupo de botones Grupo de botones verticales Barra social pegajosa Navegación de píldoras Encabezado receptivo

Imágenes

Diapositivas Galería de diapositivas Imágenes modales Caja ligera Cuadrícula de imagen receptiva Cuadrícula de imagen Pestaña Galería Desvanecimiento de superposición de imagen Diapositiva de superposición de imagen Zoom de superposición de imagen Título de superposición de imagen Icono de superposición de imagen Efectos de imagen Imagen en blanco y negro Imagen Texto Bloques de texto de imagen Texto de imagen transparente Imagen de página completa Formulario en imagen Imagen de héroe Imagen de fondo desenfocada Cambiar Bg en desplazamiento Imágenes de lado a lado Imágenes redondeadas Imágenes de avatares Imágenes receptivas Centro de imágenes Miniaturas Borde alrededor de la imagen Conocer al equipo Imagen pegajosa Voltear una imagen Sacudir una imagen Galeria de Portafolio Portafolio con Filtrado Zoom de imagen Vidrio de la lupa de la imagen Control deslizante de comparación de imágenes icono de favoritos

Botones

Botones de alerta Botones de contorno Botones divididos Botones animados Botones de desvanecimiento Botón en la imagen Botones de redes sociales Leer más Leer menos Botones de carga Botones de descarga Botones de pastillas Botón de notificación Botones de iconos Botones siguiente/anterior Más botón en Nav Botones de bloque Botones de texto Botones redondos Desplazarse al botón superior

formularios

Formulario de inicio de sesión Formulario de registro Formulario de pago Formulario de contacto Formulario de inicio de sesión social Formulario de registro Formulario con iconos Boletin informativo Formulario apilado Formulario receptivo Formulario emergente Formulario en línea Borrar campo de entrada Ocultar flechas numéricas Copiar texto al portapapeles Búsqueda animada Botón de búsqueda Búsqueda a pantalla completa Campo de entrada en la barra de navegación Formulario de inicio de sesión en la barra de navegación Casilla de verificación personalizada/Radio Selección personalizada Interruptor de palanca Marque la casilla de verificación Detectar bloqueo de mayúsculas Botón de disparo al entrar Validación de contraseña Alternar visibilidad de contraseña Formulario de varios pasos Autocompletar Desactivar autocompletar Desactivar el corrector ortográfico Botón de carga de archivos Validación de entrada vacía

filtros

Lista de filtros Tabla de filtros Elementos de filtro Filtro desplegable Lista Ordenada Tabla de hechizos

Mesas

Mesa Rayas Cebra Mesas de Centro Mesa de ancho completo Mesas una al lado de la otra Tablas receptivas Tabla de comparación

Más

Vídeo a pantalla completa Cajas Modales Eliminar modal Cronología Indicador de desplazamiento Barras de progreso Barra de habilidades Controles deslizantes de rango Información sobre herramientas Desplazamiento del elemento de visualización ventanas emergentes Plegable Calendario HTML incluye Lista de quehaceres Cargadores Clasificación de estrellas Opiniones de los usuarios Efecto de superposición Fichas de contacto Tarjetas Carta invertida Tarjeta de perfil Tarjeta de producto Alertas Gritar notas Etiquetas Círculos Estilo HR Cupón Grupo de lista Lista sin viñetas Texto receptivo Texto recortado Texto brillante Pie de página fijo Elemento pegajoso Altura igual Clearfix Flotadores receptivos snack bar Ventana de pantalla completa Dibujo de desplazamiento Desplazamiento suave Desplazamiento de fondo degradado Encabezado fijo Reducir encabezado en desplazamiento Tabla de Precios Paralaje Relación de aspecto Iframes adaptables Alternar Me gusta/No me gusta Alternar ocultar/mostrar Alternar modo oscuro Alternar texto Alternar clase Agregar clase Quitar clase Clase activa Vista de árbol Eliminar propiedad Detección fuera de línea Encuentra elemento oculto Redirigir página web Zoom flotante Caja abatible Centrar verticalmente Botón central en DIV Transición al pasar el mouse flechas formas Enlace de descarga Elemento de altura completa Ventana del navegador Barra de desplazamiento personalizada Ocultar barra de desplazamiento Mostrar/forzar barra de desplazamiento Aspecto del dispositivo Borde editable Color de marcador de posición Color de selección de texto Color de viñeta Linea vertical Divisores Iconos animados Contador regresivo Máquina de escribir Próximamente página Mensajes de chat Ventana de chat emergente Pantalla dividida Testimonios Contador de secciones Cotizaciones Presentación de diapositivas Elementos de la lista que se pueden cerrar Puntos de interrupción típicos del dispositivo Elemento HTML arrastrable Consultas de medios JS Resaltador de sintaxis Animaciones JS Longitud de cadena JS Exponenciación JS Parámetros predeterminados de JS Obtener URL actual Obtener tamaño de pantalla actual Obtener elementos de marco flotante

Sitio web

Crear un sitio web gratuito hacer un sitio web hacer un sitio web estático Crear un sitio web (W3.CSS) Hacer un sitio web (BS3) Hacer un sitio web (BS4) Hacer un sitio web (BS5) Crear y ver un sitio web Crear un sitio web de árbol de enlaces Crear una cartera Crear un currículum hacer un sitio web de restaurante hacer un sitio web de negocios hacer un libro web Sitio web del centro Sección de contacto Acerca de la página Encabezado grande Ejemplo de sitio web

Red

Diseño de 2 columnas Diseño de 3 columnas Diseño de 4 columnas Cuadrícula en expansión Vista de cuadrícula de lista Diseño de columna mixto Tarjetas de columna Diseño en zigzag Diseño del blog

Google

Gráficos de Google Fuentes de Google Emparejamientos de fuentes de Google Google configurar análisis

Convertidores

Convertir Peso Convertir temperatura Convertir Longitud Convertir velocidad

Blog

Consigue un trabajo de desarrollador Conviértase en un desarrollador front-end.

Cómo - Crear un sitio web gratuito


Cree y aloje su sitio web con W3Schools Spaces.

Comience con su sitio web gratuito con unos pocos clics.

Todo lo que necesitas directamente en el navegador.

Es fácil de usar, ¡pruébalo!

Comience gratis »

Crea tu primer sitio web con W3Schools Spaces

W3Schools Spaces es un lugar personal donde puede crear y experimentar con código y alojar su propio sitio web.

Con W3Schools Spaces puedes construir con HTML, CSS y JavaScript.

Edite el código directamente en su navegador.

Cargue y aloje sus archivos e imágenes.

¡Comience a hacer crecer su presencia en línea hoy!


¿Por qué construir con W3Schools Spaces?

Spaces está hecho por desarrolladores web para desarrolladores web.

  1. La interfaz es simple y fácil de usar.
  2. Aloja y edita tus archivos directamente en el navegador.
  3. Plantillas gratuitas.

Es gratis para comenzar y no tiene que ingresar su tarjeta de crédito.


Editar y obtener una vista previa del código

El editor es fácil de usar, lo que te ayuda a concentrarte en las cosas más importantes.

Comprueba la capacidad de respuesta de tu sitio con las diferentes alternativas de vista previa.

Obtenga una vista previa de los cambios en su sitio, ¡en vivo!


Construya desde cualquier lugar

Aloja tus archivos e imágenes en la nube.

Manténgase organizado creando una estructura con carpetas.

Todo lo que necesitas directamente en el navegador.


Plantillas Gratis

Explore y use nuestras plantillas de sitios web adaptables.

Modifíquelos, guárdelos, compártalos y utilícelos en sus proyectos.

The templates are powered by W3.CSS


What Do I Need to Know to Get Started?

HTML, CSS and JavaScript are the foundational languages to build a website.

  1. Create the structure with HTML. The first thing you have to learn, is HTML, which is the standard markup language for creating web pages.
  2. Learn HTML »
  3. Style with CSS. The next step is to learn CSS, to set the layout of your web page with beautiful colors, fonts, and much more.
  4. Learn CSS »
  5. Make it interactive with JavaScript. After studying HTML and CSS, you should learn JavaScript to create dynamic and interactive web pages for your users.
  6. Learn JavaScript »

Do not worry if you do not know how to code. The most important thing is to get hands on, early on. Learning how to code is best done with getting practical. Start to build something today!


Lets Get Started in a Few Steps

Do you already have a W3Schools Account? If so, skip the first step


Step One: Sign Up For an Account

To be able to use Spaces you need to sign up and get your account.

Lets get you set up!

Go to - Click "Sign up" and enter your email and password, then click the "Sign up for free" button.

Remember to validate your account in your email. Check the spam filter if you cannot find the validation email in your inbox.

Get more information about how to sign up in our article - How to sign up


Step Two: Start with a template or HTML skeleton

Go to

Select one of the options and click the "Continue" button.

Do not worry too much about this decision. You can reset your Space and start over again whenever you want.


Step Three: Give your space a name

Personalize your Space by giving it an amazing name.

You can not use special letters in the name, such as (#, ! or :). The only exception is dash ( - )

The name will be the link that you share with others to see your site. For example: yourname.w3spaces.com


Step Four: Enter your space

Great job! you made it to the dashboard.

In the dashboard you get an overview of your spaces and usage.

Enter your space and its File Overview by clicking somewhere on the space's row or click the button with the three dots to the right inside the row.

You can only have one space with the free plan. However, you can always upgrade to get more spaces.


Step Five: Edit code or upload files

This is where the magic happens!

Start to edit code or upload files

  • Edit code by clicking on the "Pen icon" to the right of the file that you want to edit.
  • Create new files by clicking on the "New file" button.
  • Upload files by clicking on the "Upload files" button.

Step Six: Publish your site and share it with someone

This is the start of building your online presence.

Learn, test, build, and go live with your space.

Create your website and share it with others.

Note: Your space name with the .w3spaces.com extension is your shareable link. Read more about how to share your space in this article How can I share my space?


W3Schools Spaces

Espacios W3Schools

Build your own website with W3Schools Spaces.

Get Started for Free