eme

Two tickets available for Post Malone in Barcelona, September 12 – Standing area. €60 each
secure.ticketmaster.es/rs/188473565...

Sneak peek of what’s going on 👀

#design #UXDesign #WebDesign #buildinpublic

I had no idea creative paralysis was a thing until my brain got overloaded with colors, fonts, margins and paddings.
Now I get it - less is more.🙌
#design

At first, I thought the design process would be much easier and more linear. Now I realize that design only moves forward and backward. Good ideas are seeds waiting to germinate and they only grow when you keep working and pushing boundaries.🌻

#design #designer

Trying different navbars. Which one do you like the most?
#buildinpublic #design #figma

Morning design with coffee is my fave.
#design #figma

I’ve been playing around with CSS animations and just added this cute little dot cursor effect. What do you think? Would love to hear your thoughts! ❤️
#WebDesign #FrontEnd #design

This image explains a new project about design a brand of handmae organic products.

A color palette inspired by earth tones, desert sand, cracked soil textures, and natural linen.

Logo sketches

Logo with the words ‘Terra Nuda’ in uppercase, enclosed within a square outline.

#branding #brandindesing #casestudy

The first of many projects in @webflow !
#webdesign #webflow #portfoliotemplate #design #ux #ui #portfolio #webtemplate

Se puede ver la charla en algún lado?🫶🏼

Love my pal @figma.com

Se viene otro proyectito 👾
#HTML #CSS #JavaScript

Por las mañanas trabajando en el proximo diseño y por las tardes sufriendo con la recursividad en JS. No se hacer una sola cosa 😂

Código de JavaScript que usa appendChild.

Finalmente, una vez que tengo todos los elementos creados, los uno utilizando appendChild para que la estructura HTML tenga sentido y todo encaje correctamente.
#WebDev #JavaScript #FrontEnd

Código de JavaScript que agrega información a un elemento.

El contenido de cada card lo agrego accediendo a las propiedades del array de posts (usando el nombre de la propiedad como clave) y lo añado con textContent.
#WebDev #JavaScript #FrontEnd

Código de JavaScript de un bucle forEach.

Con un bucle forEach recorro los posts y genero los elementos necesarios. Con createElement creo los elementos (como div, article, p) y les añado clases con classList.add para aplicar estilos. Además, no olvido incluir los atributos aria necesarios usando setAttribute.
#WebDev #JavaScript #FrontEnd

Imágen de un blog con 3 entradas a diferentes posts.

Generar cards de posts de forma dinámica con JavaScript es fácil. Solo necesitas un array de objetos y un bucle para crear el HTML.

#WebDev #JavaScript #FrontEnd

Y esto es lo que hice para poder filtrar los posts, otro día cuento como cree las cards dinámicamente.
Ahora me voy a tomar un café y a rezar para que no se rompa nada🥲

Código JavaScript para filtrar los post por categorías.

Con URLSearchParams, leo el parámetro de la URL y filtro los posts para mostrar solo los que coincidan con la categoría seleccionada.
#FrontEndDeveloper #WebDevelopment #JavaScript

Código de JS que filtra post por categoría.

Al hacer clic en un filtro, la URL se actualiza para incluir el parámetro category correspondiente, permitiendo que la página se filtre dinámicamente según la categoría seleccionada.
#FrontEndDeveloper #WebDevelopment #javascript

Código JS de un botón

Código JS de un botón

Llamo a todos los botones en el script y les paso una función que itera por cada uno de ellos para que aplique el atributo aria-pressed en true o false según sea su estado.
#FrontEndDeveloper #WebDevelopment #JavaScript

Para permitir que los usuarios filtren los posts por categoría, utilicé botones con data-category que representan cada categoría. Además cada botón activa un filtro visual y de accesibilidad utilizando aria-pressed para indicar qué categoría está seleccionada.
#FrontEndDeveloper

Codigo en JavaScript de un array con objetos.

Para gestionar los artículos del blog, utilizo un array de objetos en JS. Así se ve 👇
#FrontEndDeveloper #JavaScript #WebDevelopment

Iré contando poco a poco que he hecho y cómo así de paso refresco la memoría y me sirve de repaso. Hoy voy con los filtros por categoría.
#FrontEnd #JavaScript #Webdevelopment

Y por fin está listo!! Un blog hecho full JavaScript, totalmente responsive y con las siguientes funcionalidades:

🔸Filtros por categoría

🔸Paginación

🔸Posts creados dinámicamente

🔸Comentarios

🔸Modo claro/oscuro

Aquí está el bebito 👇
thisismyfirstprojectblog.netlify.app
#FrontEnd #JavaScript

Por qué de un día para otro se rompe el código? Si lo dejé funcionando y perfecto 😭

Socorro

Siendo sincera, no es nada fácil sacarlo adelante con tan poco tiempo libre, pero a pasito de hormiguita también se consiguen cosas😃
Si algo estoy aprendiendo de esto es que un poquito por muy poquito que sea, es mejor que nada🚀
#codingjourney #palante

He comenzado por móvil y de ahí he ido ajustando a dispositivos más grandes. Sigo trabajando en el diseño y en los próximos días empezaré con las funcionalidades, así aprovecho y le pego un buen repaso a JS.
Si todo va bien espero tenerlo listo para dentro de una semana 💪

Código HTML del pie de página de un proyecto web.

🔸Footer con un formulario de suscripción, enlaces a cada una de las categorías y a redes sociales.
#WebDevelopment #HTML #Accessibility #FrontEnd

Código HTML del contenido principal de un proyecto web.

🔸Contenido principal con <main>
🔸Título con <h1>
🔸Contenedor de filtros con etiquetas <button> y aria-pressed="false" que indican que no están pulsados
🔸Sección de articulos con <section> y <article> cada unos con sus respectivos <time>, <h2>, <p> y <a>
#HTML #Accessibility