Frontend Clubfrontend-club.hashnode.dev·Oct 3, 2024Fixed SidebarAprenda a crear un menú de navegación lateral fijo con CSS. https://codepen.io/frontend-club/pen/jOgWazJ Crea un sidebar Paso 1) Marcado HTML <!-- Barra lateral (sidebar) --> <div class="sidenav"> <a href="#nosotros">Nosotros</a> <a href="...Mini projects#fixedsidebar
Frontend Clubfrontend-club.hashnode.dev·Oct 2, 2024Search BarAprende cómo añadir un cuadro de búsqueda dentro de un menú de navegación responsive. https://codepen.io/frontend-club/pen/vYoNZVj Crea una barra de búsqueda Paso 1) Marcado HTML <div class="topnav"> <a class="active" href="#home">Home</a> <...Mini projectssearch bar
Frontend Clubfrontend-club.hashnode.dev·Sep 30, 2024Search MenuCrearemos un menú con cuadro de búsqueda para filtrar enlaces con JavaScript. Crear menú de búsqueda <input type="text" id="buscar" onkeyup="funcionBuscar()" placeholder="Buscar..."/> <ul id="menu"> <li><a href="#">HTML</a></li> <li><a href=...1 likeMini projects#search-menu
Frontend Clubfrontend-club.hashnode.dev·Jun 25, 2024Navbar with IconsCrea una barra de navegación responsive con íconos, usando CSS. Ejemplo: https://codepen.io/frontend-club/pen/rNgKmze Referencias El contenido de este artículo es inspiración y traducción de: How TO - Navbar with Icons "La mejor manera de apren...Mini projectsnavbar-with-icons
Frontend Clubfrontend-club.hashnode.dev·Jun 21, 2024Split NavigationAprende a crear una barra de "navegación dividida" usando CSS. Ejemplo: https://codepen.io/frontend-club/pen/bGyaymq Referencias El contenido de este artículo es inspiración y traducción de: How TO - Split Navigation "La mejor manera de aprende...30 readsMini projectssplit-navigation
Frontend Clubfrontend-club.hashnode.dev·Jun 20, 2024Responsive TopnavAprende a crear un menú de navegación superior responsive, usando CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/MWdrdBQ Referencias El contenido de este artículo es inspiración y traducción de: How TO - Responsive Top Navigation ...Mini projectsresponsive-topnav
Frontend Clubfrontend-club.hashnode.dev·Jun 18, 2024Hover TabsCrea pestañas mostrando contenido, con el selector ::hover, usando HTML, CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/mdYqeJM Referencias El contenido de este artículo es inspiración y traducción de: How TO - Hover Tabs "La me...Mini projectshover-tabs
Frontend Clubfrontend-club.hashnode.dev·Jun 17, 2024Full Page TabsCrea pestañas de contenido completo, usando HTML, CSS y JavaScript. Descarga el código fuente y personaliza según tus necesidades. Ejemplo: https://codepen.io/frontend-club/pen/BaemNJZ Referencias El contenido de este artículo es inspiración y trad...Mini projectsfull-page-tabs
Frontend Clubfrontend-club.hashnode.dev·Jun 14, 2024Tab HeadersCrea pestañas con encabezados, usando HTML, CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/BaewoVE Marcado HTML <div id="Lima" class="tabcontent"> <h1>Lima</h1> <p>Lima es la ciudad capital de Perú.</p> </div> <div id="Car...Mini projectstab-headers
Frontend Clubfrontend-club.hashnode.dev·Jun 13, 2024Vertical TabsCrea una pestaña vertical paso a paso, usando HTML, CSS y JavaScript. Ejemplo: https://codepen.io/frontend-club/pen/mdYBeRL Marcado HTML <h2>Pestañas verticales</h2> <p>Haz clic en los botones dentro de la pestaña del menú:</p> <div class="tab"> ...Mini projectsvertical-tabs
