Diseño y Estilo de Páginas Web con HTML y CSS

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:27

Diseño y Estilo de Páginas Web con HTML y CSS

Curso Gratis de Programación Básica 2022

Clase 36 de 84

Clase 36 / 84

Recursos

¿Cómo diseñar tu primera página web?

El emocionante viaje de crear nuestra primera página web puede parecer un desafío al principio, pero con planificación y creatividad, cualquiera puede lograrlo. El primer paso esencial es esbozar tu idea en un diseño. Esto no necesita ser extenso; un simple boceto a lápiz y papel que muestre dónde posicionarás tus elementos y cómo integrarlos puede ser suficiente. Aquí te mencionaré cómo estructurarlo de manera básica:

Cabecera: Comienza con un título principal.
Subtítulo: Sigue con un subtítulo que indique la acción a realizar, como "Selecciona un mokepon".
Tarjetas: Crea tarjetas que se apilan horizontalmente.
Botón de acción: Finaliza con un botón que permita avanzar a la siguiente pantalla.

¿Dónde encontrar inspiración para el diseño?

Para aquellos que no somos expertos diseñadores o para los que están comenzando, Pinterest es una herramienta increíble. La vasta galería de proyectos puede inspirarte con ideas frescas y creativas. No olvides buscar específicamente términos como "diseño de aplicaciones" o "diseño web" para ver ejemplos relevantes.

¿Cómo seleccionar las combinaciones de colores?

Uno de los elementos fundamentales en un diseño es la elección de colores. Estos deben combinar armoniosamente para proporcionar una experiencia visual atractiva. Cuando no estemos seguros de qué colores usar, explorar paletas online puede ser de gran ayuda. Personalmente, me encanta el azul, así que una paleta con tonos oscuros puede ser una elección sofisticada.

Para aquellos interesados, herramientas de diseño en línea permiten visualizar diferentes paletas de colores combinables. Particularmente, el color oscuro puede añadir un toque de elegancia a tu diseño.

¿Qué herramientas utilizar para elegir fuentes?

Las fuentes son otra pieza crucial en el diseño y Google Fonts es una herramienta fantástica para explorar y seleccionar la tipografía que mejor se adapte al tono de tu página. Dependiendo del contenido y audiencia, puedes optar por fuentes "display" que son generalmente más decorativas y visualmente llamativas.

Aquí te muestro cómo implementarlo en tu código:

<style>
  @import url('https://fonts.googleapis.com/css2?family=NombreDeLaFuente:wght@400;700&display=swap');
  body {
    font-family: 'NombreDeLaFuente', sans-serif;
  }
</style>

Implementación de Flexbox para mejorar el diseño

Flexbox es una herramienta poderosa para mantener tus diseños ordenados y responsivos. Al aplicar display: flex, puedes alinear elementos fácilmente de manera horizontal o vertical. Aquí tienes un ejemplo aplicado a tarjetas en una página web:

.tarjetas {
  display: flex;
  gap: 10px;
}

La propiedad gap introduce un espacio entre cada tarjeta, mejorando visualmente el diseño. Es sencillo pero extremadamente efectivo para mantener orden en tus elementos.

¿Cómo dar vida a las tarjetas de mokepon?

Para las tarjetas, un diseño atractivo es fundamental. Aquí hay un ejemplo de cómo podrías estructurarlas con HTML y CSS:

<div class="tarjeta-de-mokepon">
  <label>
    <p>Nombre del Mokepon</p>
    <img src="ruta/de/la/imagen.png" alt="Nombre del Mokepon">
  </label>
</div>

.tarjeta-de-mokepon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: aqua;
}

Este fragmento utiliza display: flex para alinear los elementos en la tarjeta, y border-radius para añadir esquinas redondeadas, ambos atributos aportan una sensación moderna y delimitada.

Consejos para asegurar un diseño armónico

Planificación del diseño: Antes de codificar, visualiza tu página y ten claros los elementos y su ubicación.
Prueba y error: Ajusta tu CSS mientras observas los cambios en tiempo real para afinar detalles como colores y tamaños.
Coherencia visual: Usa una paleta limitada de colores y tipos de fuente para mantener una apariencia profesional y atractiva.

No te olvides de jugar con el tamaño de fuentes y estilizar elementos como botones para mantener la coherencia. ¡Sigue estas pautas y estarás listo para crear primeras páginas webs impactantes!

Irving Caamal

Hace 4 años

Aquí hubo un pequeño corte y apareció la regla box-sizing: content-box; de la nada.
Y tienes que tener en cuenta que el valor de border-box en el box-sizing hace que el padding y el border pasen a formar parte del cálculo del width de la caja y no lo suman posteriormente.
de manera que el width total del elemento con la clase .tarjeta-de-mokepon sin esa regla sería 200 (180 de width + 20 de margin) pero con esa regla implementada no importa cuanto agregues de margin o padding el valor máximo será 180
Parece una tontería pero es algo que te puede ahorrar muchos problemas a largo plazo, te dejo el ejemplo de este caso en particular
Elemento .tarjeta-de-mokepon con la regla box-sizing: border-box;:

Elemento .tarjeta-de-mokepon sin la regla box-sizing: border-box; (que en realidad es equivalente a box-sizing: content-box; siendo este su valor por default):

Juan Castro

Profesor

Hace 4 años

Ya mismo le aviso al equipo para que nos ayuden a revisar la clase

Irving Caamal

Hace 4 años

A ti @juandc ! son los mejores 💚

Comentarios (918)918 comentarios

Kami Otaku

Alan Jaques

Estefany Aguilar

Usuario anónimo

User

Krisna Damodara Fuenmayor Adames

Anyela Paola Gil

Andres Pardo Llanos

Ignacio Farías

Alejandro Pizzorno Pelaez

NICOLAS RUBIO

Miguel Alejandro Camacho Sánchez

Junior Alonso Guerra Corpas

Eduardo Luis Morales Diaz

Victor David Jiménez Fernández

Teo Zavala

Rogger Estalin Román Alvarado

Anyilo José Rangel Arias

Michelle Duque De La Rosa

Ramón Antonio Cardona Trujillo

Hace 3 años

Jose Bernabe Rios Nuñez

Roger Mauricio Gomez Peñaranda

Julian Sosa

Daniel Felipe Matallana

al mn

Noah Davis

Julian Maestre

Bryan Andres Vera Garcia

Santiago Cruz

antonio cordova

Aaron Santiago Loyo Zabala

William Camilo Lozano Castañeda

Lucas Martin Custodio

Janet Guadalupe Torres Ménera

José Angel Martínez Olivero

Bianca Pelcastre

Christian Velázquez

Alex Chipre

Alexis Torres

Adonay Lizardo

Kevin Daniel Hincapie Lumbaque

Alonso Miranda Pacheco

Hace 2 años

Marissa Vargas

Julian Gomez

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero