Los 5 mejores proyectos para practicar tus habilidades de HTML y CSS

Aprender a programar siempre es emocionante y divertido, pero mayoría de las personas que comienzan no tienen idea de cómo practicar HTML y CSS. Intenta a realizar alguno de estos 5 proyectos y disfruta creando algo por ti mismo.
Compartir:
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Telegram
Reddit

Para la mayoría de los que comienzan con HTML y CSS, puede ser difícil encontrar ideas de proyectos en los que poner a prueba lo aprendido. ¿Cómo practicar HTML y CSS sin morir de aburrimiento en el intento?

Lo ideal es realizar algún proyectos que demande el uso de los conocimientos aprendidos a la vez que sentimos satisfacción por creando algo por nosotros mismos.

Aprender a programar siempre es emocionante y divertido

Imagínate tener 14 años y ser el único adolescente que sabe programar en tu escuela. Bueno ese fue mi caso, hace más de 30 años (antes del internet), sentía que tenía super-poderes, podía hacer cosas que solo algunos adultos eran capaces de hacer.

Programar siempre será emocionante y divertido, si tienes un objetivo claro, de lo contrario puede ser muy aburrido y monótono.  Es por ello que la mejor manera de empezar es con proyectos propios, y en este artículo te voy a hablar de 5 proyectos que de seguro te motivaran.

Mi Propio Proyecto de…

En el diseño Web, todos comenzamos con lo más fácil HTML y CSS. El programador principiante inicia con estas dos herramientas de construcción básicas. Al inicio aprendemos a crear enlaces, agregando imágenes, diagramando el texto, luego le ponemos el diseño con CSS.

Aunque tu conocimiento actual se limite a HTML y CSS, pase lo que pase, y sin importar los lenguajes de programación que aprendas, en algún momento te darás de cuenta lo importante que fué desarrollar estas habilidades, imprescindibles para cualquier proyecto web.

Así que sin más acá van las mejores sugerencias de proyectos para practicar HTML y CSS:

1. Página web con un formulario de Contacto (Imprescindible)

Cualquier sitio web que acepte el registro o tengan login de usuarios, va a necesitar un formulario. El formulario es la manera en la que los sitios o  aplicaciones obtienen datos de los usuarios. Saber hacer bien formularios puede ser un plus a la hora de conseguir trabajo ya que lograr la acción de llenarlos por parte de los usuarios sólo puede lograrse a través de 2 situaciones:

  • Necesidad: Al usuario no le queda de otra que llenar el formulario si o si para conseguir algo que necesita.
  • Motivación: El usuario quiere lograr algo, y siente que el formulario es el medio disponible para ello, además es muy fácil de llenar.

A nadie le gusta llenar formularios, en el primer caso no queda de otra pero en el segundo sólo si nos sentimos cómodos lo haremos, un formulario que ofrece una mala experiencia, que es engorroso, confuso o es visualmente atractivo puede hacer desistir de su uso.

Cuando comiences a hacer formularios, lo ideal es centrarse de primera medida en lo funcional y luego en lo estético.  Es raro no ver una página con un formulario hoy en día por lo que desarrollar este conocimiento te será de mucha utilidad.

Los sitios webs de trámites notariales, migratorios, tributarios y casi cualquier ente gubernamental, están llenos de formularios. La habilidad de quien los realice, determinará en gran medida el éxito o el fracaso de los usuarios en el sitio web.

Estos de aquí están diseñados con CSS3 y HTML5 y tienen un aspecto muy bonitos y elegante:

Es una buena práctica probar muy bien nuestros formularios antes de entregar cualquier proyecto que los incluya, ya que de ellos depende en gran medida el éxito de comunicación de los usuarios con el sitio web.

2. Landing Page o página de aterrizaje (Lo que te va pagar los estudios)

Una página de destino es otro buen proyecto que puede realizar utilizando HTML y CSS, pero requiere un conocimiento sólido de estos dos bloques de construcción. Utilizará mucha creatividad al crear una página de destino. Practicará cómo agregar pie de página y encabezado, crear columnas, alinear elementos, dividir las secciones y muchas cosas. Deberá utilizar CSS con cuidado teniendo en cuenta que los diferentes elementos no se superponen entre sí. También te encargarás de las combinaciones de colores, el relleno, los márgenes, el espacio entre secciones, párrafos y recuadros. Las combinaciones de colores deben ir bien entre sí para diferentes secciones o fondos. Puede obtener ayuda del enlace que se proporciona a continuación.

3. Documentación Técnica (Útil en proyectos grandes)

Aunque solo se necesita conocimientos de HTML y CSS, es posible que un poco de JavaScript sirva para lograr una mejor navegación. Lo interesante es que podamos crear un documento legible y bien estructurado utilizando HTML.

Divide la página web en dos secciones. En el lado izquierdo crea la tabla de contenidos con todos los temas enumerados de arriba a abajo.  En el lado derecho, debes mencionar la documentación o descripción de los temas.

La idea es que una vez que al hacer clic en uno de los temas de la sección izquierda, debería cargase el contenido de la derecha. Para hacer clic, puedes utilizar la opción de marcador JavaScript o CSS. No es necesario que lo hagas demasiado elegante, un aspecto simple y legible será suficiente, que se vea bien para documentación técnica.

Puedes ver algunos ejemplos de documentación técnica aquí:

4. Portafolio personal (para encontrar clientes)

Con conocimientos de HTML5 y CSS3, también puede crear su cartera. Muestre sus muestras de trabajo y habilidades en su portafolio con su nombre e imágenes. También puede agregar su CV allí y alojar su portafolio completo en la cuenta de GitHub .

En su sección de encabezado mencione algunos menús como acerca de, contacto, trabajo o servicios. En la parte superior agrega una de tus imágenes y preséntate allí. Debajo de eso, agregue algunas muestras de trabajo y, por último (pie de página), agregue información de contacto o cuenta de redes sociales. Puede recibir ayuda de la carpeta personal .

5. Sitio web con Parallax (para los más Creativos)

El parallax scrolling, es un principio de diseño propio de la animación, que se beneficia de la percepción humana de objetos en movimiento con el fin de crear una ilusión de profundidad espacial, en un medio bidimensional. Si, lo sé, suena como algo medio alocado, pero es bastante sencillo.

Aunque no lo creas, con conocimientos básicos de HTML y CSS, se puede crear un efecto de parallax en un sitio web. Su uso es muy popular en diseño web y le da una apariencia muy original a las páginas web.

¿Cómo funciona el efecto Parallax?

Cuando mueves la cabeza de derecha a izquierda puedes ver como cambia la posición relativa de los objetos en tu campo de visión. Los objetos más cercanos se mueven más que los objetos más alejados y los ocultan, y mientras parece que los objetos se mueven en un primer plano relativamente rápido, apenas se percibe un movimiento en los objetos más alejados.

Este efecto se aprecia especialmente si viajas en automóvil, bus o en tren. Al mirar por la ventana te das cuenta que los árboles se mueven mucho más rápido que las casas y las montañas al fondo, mientras que el sol casi parece inmóvil en el horizonte.

Podrás entender mejor lo anterior viendo este video:

En psicología de la percepción, se denomina a esta «diferencia de velocidades» como desplazamiento diferencial o de paralaje. Como el efecto solo se produce cuando el observador se mueve en paralelo al objeto que observa, se habla de una ilusión de profundidad inducida por el movimiento.

¿Cómo se logra el efecto parallax en el diseño web?

Desde finales de la década de los 2.000 se comenzó a utilizar el desplazamiento de paralaje en el diseño de páginas web. La página de Nike nikebetterworld.com (offline actualmente) obtuvo una enorme exposición mundial con su efecto parallax en 2011. La página no esta online pero puedes ver como era en este video:

Con esta campaña, nike inició una tendencia de diseño web que utiliza el efecto parallax scrolling para crear una impresión de profundidad, utilizando un medio bidimensional como es la web.

Las páginas web con efecto parallax se basan en el método multiplano: partiendo de una página única (one page web), sus elementos visuales se ordenan en diferentes capas que se mueven independientemente unas de las otras en sentido vertical u horizontal.

La ilusión de profundidad se desencadena cuando el usuario se desplaza por la web, siendo él quien controla tanto el movimiento como la velocidad de la imagen por medio del ratón o la barra de desplazamiento vertical.

En este desplazamiento los elementos de la primera capa, se mueven más rápidamente que los elementos en las últimas capas, con lo que se origina una ilusión espacial en tres dimensiones.

En el siguiente videotutorial puedes ver cómo animar capas móviles sobre un fondo permanente con HTML5 y CSS3:

Para crear una página con efecto Parallax puedes ir desde la forma más simple hasta la más compleja. A continuación te dejo varios ejemplos de páginas con Parallax en diferentes niveles de dificultad que te servirán de inspiración.

Nota Final

HTML y CSS son la base de las páginas web, se utiliza para el desarrollo de páginas web y aplicaciones web. Si quieres vivir de crear páginas web así sea usando solo WordPress, es necesario dominar HTML y CSS ya que siempre habrá situaciones en las que la solución dependerá mucho de estos conocimientos.

Compartir:
Publicado por:
Facebook
Twitter
LinkedIn
WhatsApp
Pinterest
Telegram
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept