Los proyectos de creación son muy importantes para aprender a programar. Cuando creas un proyecto, expandes tu portafolio y aprendes a aplicar tus habilidades a nuevas situaciones.

Acabamos de publicar un curso de 2 horas en el canal de YouTube freeCodeCamp.org en español que te guiará paso a paso a través de la creación de 3 proyectos con HTML, CSS y JavaScript. Practicarás tus habilidades construyendo una barra de navegación responsive con menús desplegables, un slider y una página de destino con un modal personalizado.

Si tienes amigos que hablan español, estás invitado a compartir la versión en español de este artículo con ellos.

Jordan Alexander Cruz García imparte este curso. Es un desarrollador web que ama compartir su conocimiento y enseñar a otros sobre el increíble mundo de CSS.

💡 Cualquier cosa: Tenga en cuenta que el curso se centra en HTML y CSS, pero también requiere conocimientos básicos de JavaScript para implementar la interactividad.

HTML, CSS y JavaScript

HTML significa HyperText Markup Language y CSS significa Cascading Style Sheets. Mientras que HTML proporciona la estructura y el contenido de una página web, CSS decide cómo se muestra el contenido. Controla los aspectos visuales de la página web, como las fuentes, colores, diseños, espaciado y animaciones.

Con CSS, puedes crear fácilmente diferentes estilos y diseños para diferentes tamaños de pantalla, haciendo que tu sitio web se vea impresionante en computadoras de escritorio, tabletas y dispositivos móviles.

💡 Cualquier sitio web que se adapte a diferentes tamaños de pantalla se conoce como “sitio web adaptativo” o “responsive”.

Normalmente escribimos CSS en un archivo externo que referimos como un “archivo de estilos”. Luego, vinculamos este archivo de estilos al archivo HTML, aplicando todos los estilos a los elementos HTML correspondientes basándonos en los selectores y propiedades de CSS.

Separar el contenido del sitio web de su presentación resulta muy útil. Esto conduce a una estructura de proyecto más mantenible y un proceso de renderizado más eficiente porque los navegadores pueden renderizar la estructura más rápido mientras descargan los estilos de CSS en el fondo.

Básicamente, CSS es una herramienta fundamental para crear los sitios web bonitos, visuales y amigables con el usuario que vemos hoy.

JavaScript añade interactividad al sitio web. Convierte elementos planos en elementos interactivos para crear experiencias de usuario emocionantes.

Proyectos de HTML, CSS y JavaScript en español

Impresionante. Ahora que sabes más sobre HTML, CSS y JavaScript, vamos a echar un vistazo a los proyectos que construirás durante el curso.

Proyecto 1: Barra de Navegación

Empezarás construyendo una barra de navegación con menús desplegables. Esta barra de navegación será adaptativa, así que se expandirá o encogerá para ajustarse al tamaño de la pantalla. Si la pantalla es demasiado pequeña, automáticamente se transformará en una barra lateral.

💡 Conejo: Las opciones principales siempre estarán visible. Cuando el usuario hace clic en “Acerca de” o “Proyectos”, se mostrará un menú desplegable con opciones adicionales.

Versión de escritorio

Aquí puede ver la versión de escritorio.

Versión móvil

Esta es la versión móvil que verá en dispositivos pequeños.

💡 Conejo: Esta técnica de ocultar y alternar la barra de navegación se utiliza muy a menudo para optimizar el espacio del contenido en la medida de lo posible.

Proyecto 2: Slider

A continuación, creará un slider con tres posiciones que cambiarán al hacer clic el usuario en las flechas izquierda o derecha. Cada posición tendrá un título, un párrafo corto y una imagen circular.

💡Conejo: Los sliders son útiles para compartir comentarios de usuario, citas y reseñas.

Proyecto 3: Página de destino

Finalmente, creará una página de destino paso a paso con CSS Grid.

Cuando el usuario hace clic en el botón “Únase con nosotros!”, se mostrará un modal personalizado. Implementará este modal con HTML, CSS y JavaScript paso a paso.

Si está listo para comenzar a practicar sus habilidades en HTML, CSS y JavaScript, revise el curso en el canal de YouTube freeCodeCamp.org en español:

✍️ Curso creado por Jordan Alexander Cruz García (AlexCG).