Summary  
This chapter covers how to implement code that filters displayed elements by attaching click handlers to buttons and using data attributes with DOM manipulation to show or hide items based on the selected category.

General domain of usage  
Blog websites

## Objetivo
Por último, pero no menos importante, el paso final es añadir la funcionalidad para filtrar los artículos por tema, la cual se implementará utilizando JavaScript.

## Posible indicación
¿Puedes implementar la funcionalidad de filtrar artículos por tema utilizando botones HTML y JavaScript?

## Resultado
**Archivo index.html**
- Se añade un bloque `nav` al `header` donde se colocarán los botones de filtrado;
- Se proporciona a cada artículo el atributo `data-category` y el valor correspondiente al tema;
- Se agrega el enlace al archivo `index.js` antes de la etiqueta de cierre `body`.

**Archivo index.css**<br>
Se añaden algunos estilos para mejorar la apariencia de los botones de filtrado.

**Archivo index.js**<br>
Se inserta el script que implementa la lógica de filtrado.


Todo esto fue lo que ChatGPT nos indicó hacer. Seguimos sus instrucciones.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+V2VsY29tZSB0byBNeSBCbG9nPC9oMT4KICAgICAgPG5hdj4KICAgICAgICA8YnV0dG9uIG9uY2xpY2s9ImZpbHRlckFydGljbGVzKCdhbGwnKSI+QWxsPC9idXR0b24+CiAgICAgICAgPGJ1dHRvbiBvbmNsaWNrPSJmaWx0ZXJBcnRpY2xlcygnRW52aXJvbm1lbnQnKSI+RW52aXJvbm1lbnQ8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uIG9uY2xpY2s9ImZpbHRlckFydGljbGVzKCdIZWFsdGgnKSI+SGVhbHRoPC9idXR0b24+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CgogICAgPG1haW4+CiAgICAgIDxhcnRpY2xlIGRhdGEtY2F0ZWdvcnk9IkhlYWx0aCI+CiAgICAgICAgPGgyPlVubG9ja2luZyB0aGUgUG93ZXIgb2YgRGFpbHkgSGFiaXRzIGZvciBPcHRpbWFsIEhlYWx0aDwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBNYWludGFpbmluZyBvcHRpbWFsIGhlYWx0aCBpcyBhIG11bHRpZmFjZXRlZCBlbmRlYXZvciwgb2Z0ZW4gYWNoaWV2ZWQgdGhyb3VnaCB0aGUKICAgICAgICAgIGNvbnNpc3RlbnQgcHJhY3RpY2Ugb2YgaGVhbHRoeSBoYWJpdHMuIE51dHJpdGlvbiBwbGF5cyBhIHBpdm90YWwgcm9sZSBpbiBvdXIgb3ZlcmFsbAogICAgICAgICAgd2VsbC1iZWluZywgc2VydmluZyBhcyB0aGUgZm91bmRhdGlvbiBmb3Igdml0YWxpdHkgYW5kIGRpc2Vhc2UgcHJldmVudGlvbi4gRW1icmFjaW5nIGEKICAgICAgICAgIGJhbGFuY2VkIGRpZXQgcmljaCBpbiBmcnVpdHMsIHZlZ2V0YWJsZXMsIGxlYW4gcHJvdGVpbnMsIGFuZCB3aG9sZSBncmFpbnMgZnVlbHMgb3VyIGJvZGllcwogICAgICAgICAgd2l0aCBlc3NlbnRpYWwgbnV0cmllbnRzIHdoaWxlIGZvcnRpZnlpbmcgb3VyIGltbXVuZSBzeXN0ZW1zLiBNb3Jlb3ZlciwgcHJpb3JpdGl6aW5nCiAgICAgICAgICBoeWRyYXRpb24gZW5zdXJlcyBwcm9wZXIgYm9kaWx5IGZ1bmN0aW9ucyBhbmQgc3VwcG9ydHMgY29nbml0aXZlIHBlcmZvcm1hbmNlLiBCeQogICAgICAgICAgaW50ZWdyYXRpbmcgbWluZGZ1bCBlYXRpbmcgcHJhY3RpY2VzIGFuZCBzdGF5aW5nIGh5ZHJhdGVkLCBpbmRpdmlkdWFscyBjYW4gZW5oYW5jZSB0aGVpcgogICAgICAgICAgZW5lcmd5IGxldmVscywgcHJvbW90ZSB3ZWlnaHQgbWFuYWdlbWVudCwgYW5kIHJlZHVjZSB0aGUgcmlzayBvZiBjaHJvbmljIGNvbmRpdGlvbnMgc3VjaAogICAgICAgICAgYXMgaGVhcnQgZGlzZWFzZSBhbmQgZGlhYmV0ZXMuCiAgICAgICAgPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE0NzczMzI1NTI5NDYtY2ZiMzg0YWVhZjFjP3E9ODAmdz0yOTQwJmF1dG89Zm9ybWF0JmZpdD1jcm9wJml4bGliPXJiLTQuMC4zJml4aWQ9TTN3eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDhmQSUzRCUzRCIKICAgICAgICAgIGFsdD0iVW5sb2NraW5nIHRoZSBQb3dlciBvZiBEYWlseSBIYWJpdHMgZm9yIE9wdGltYWwgSGVhbHRoIgogICAgICAgICAgd2lkdGg9IjM2MCIKICAgICAgICAvPgogICAgICAgIDxwPgogICAgICAgICAgSW4gYWRkaXRpb24gdG8gbnV0cml0aW9uLCByZWd1bGFyIHBoeXNpY2FsIGFjdGl2aXR5IGlzIHBhcmFtb3VudCBmb3IgbWFpbnRhaW5pbmcgb3B0aW1hbAogICAgICAgICAgaGVhbHRoLiBFbmdhZ2luZyBpbiBtb2RlcmF0ZSBleGVyY2lzZSBmb3IgYXQgbGVhc3QgMzAgbWludXRlcyBtb3N0IGRheXMgb2YgdGhlIHdlZWsgb2ZmZXJzCiAgICAgICAgICBhIG15cmlhZCBvZiBiZW5lZml0cywgaW5jbHVkaW5nIGltcHJvdmVkIGNhcmRpb3Zhc2N1bGFyIGhlYWx0aCwgc3RyZW5ndGhlbmVkIG11c2NsZXMgYW5kCiAgICAgICAgICBib25lcywgYW5kIGVuaGFuY2VkIG1vb2QuIEZ1cnRoZXJtb3JlLCBjb25zaXN0ZW50IGV4ZXJjaXNlIGhlbHBzIG1hbmFnZSBzdHJlc3MgbGV2ZWxzIGFuZAogICAgICAgICAgcHJvbW90ZXMgYmV0dGVyIHNsZWVwIHF1YWxpdHksIGNydWNpYWwgY29tcG9uZW50cyBvZiBvdmVyYWxsIHdlbGwtYmVpbmcuIEJ5IGluY29ycG9yYXRpbmcKICAgICAgICAgIGVuam95YWJsZSBwaHlzaWNhbCBhY3Rpdml0aWVzIGludG8gZGFpbHkgcm91dGluZXMsIGluZGl2aWR1YWxzIGNhbiBjdWx0aXZhdGUgc3VzdGFpbmFibGUKICAgICAgICAgIGhhYml0cyB0aGF0IGNvbnRyaWJ1dGUgdG8gYSBoZWFsdGhpZXIsIG1vcmUgZnVsZmlsbGluZyBsaWZlLiBUaHJvdWdoIHRoZSBzeW5lcmd5IG9mCiAgICAgICAgICBudXRyaXRpb3VzIGVhdGluZyBhbmQgcmVndWxhciBleGVyY2lzZSwgaW5kaXZpZHVhbHMgY2FuIHVubG9jayB0aGUgcG93ZXIgb2YgZGFpbHkgaGFiaXRzCiAgICAgICAgICB0byBvcHRpbWl6ZSB0aGVpciBoZWFsdGggYW5kIHZpdGFsaXR5LgogICAgICAgIDwvcD4KICAgICAgICA8cD5DYXRlZ29yeTogPHN0cm9uZz5IZWFsdGg8L3N0cm9uZz48L3A+CiAgICAgIDwvYXJ0aWNsZT4KCiAgICAgIDxhcnRpY2xlIGRhdGEtY2F0ZWdvcnk9IkVudmlyb25tZW50Ij4KICAgICAgICA8aDI+VGhlIENydWNpYWwgUm9sZSBvZiBEYWlseSBBY3Rpb25zIGluIEVudmlyb25tZW50YWwgUHJlc2VydmF0aW9uPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIEVudmlyb25tZW50YWwgcHJlc2VydmF0aW9uIGlzIGEgY29sbGVjdGl2ZSByZXNwb25zaWJpbGl0eSB0aGF0IGhpbmdlcyBvbiB0aGUgZGFpbHkgYWN0aW9ucwogICAgICAgICAgb2YgaW5kaXZpZHVhbHMuIFNpbXBsZSB5ZXQgaW1wYWN0ZnVsIGhhYml0cyBjYW4gc2lnbmlmaWNhbnRseSBjb250cmlidXRlIHRvIHRoZSBoZWFsdGggb2YKICAgICAgICAgIG91ciBwbGFuZXQuIE9uZSBzdWNoIHByYWN0aWNlIGlzIHJlZHVjaW5nIHdhc3RlIHRocm91Z2ggbWluZGZ1bCBjb25zdW1wdGlvbiBhbmQgcmVjeWNsaW5nLgogICAgICAgICAgQnkgY2hvb3NpbmcgcmV1c2FibGUgcHJvZHVjdHMsIG1pbmltaXppbmcgc2luZ2xlLXVzZSBwbGFzdGljcywgYW5kIHByb3Blcmx5IHNvcnRpbmcKICAgICAgICAgIHJlY3ljbGFibGVzLCBpbmRpdmlkdWFscyBjYW4gZGVjcmVhc2UgdGhlIGFtb3VudCBvZiB3YXN0ZSB0aGF0IGVuZHMgdXAgaW4gbGFuZGZpbGxzIGFuZAogICAgICAgICAgb2NlYW5zLiBUaGlzLCBpbiB0dXJuLCBoZWxwcyBwcm90ZWN0IHdpbGRsaWZlIGFuZCByZWR1Y2VzIHBvbGx1dGlvbi4gTW9yZW92ZXIsIHN1cHBvcnRpbmcKICAgICAgICAgIHN1c3RhaW5hYmxlIHByb2R1Y3RzIGFuZCBwcmFjdGljZXMsIHN1Y2ggYXMgcHVyY2hhc2luZyBsb2NhbGx5LXNvdXJjZWQgYW5kIGVjby1mcmllbmRseQogICAgICAgICAgZ29vZHMsIGNhbiBmdXJ0aGVyIGRpbWluaXNoIG91ciBlbnZpcm9ubWVudGFsIGZvb3RwcmludC4KICAgICAgICA8L3A+CiAgICAgICAgPGltZwogICAgICAgICAgc3JjPSJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTUzNTkxNDI1NDk4MS1iNTAxMmVlYmJkMTU/cT04MCZ3PTI5NDAmYXV0bz1mb3JtYXQmZml0PWNyb3AmaXhsaWI9cmItNC4wLjMmaXhpZD1NM3d4TWpBM2ZEQjhNSHh3YUc5MGJ5MXdZV2RsZkh4OGZHVnVmREI4Zkh4OGZBJTNEJTNEIgogICAgICAgICAgYWx0PSJUaGUgQ3J1Y2lhbCBSb2xlIG9mIERhaWx5IEFjdGlvbnMgaW4gRW52aXJvbm1lbnRhbCBQcmVzZXJ2YXRpb24iCiAgICAgICAgICB3aWR0aD0iMzYwIgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBBbm90aGVyIGNyaXRpY2FsIGFzcGVjdCBvZiBlbnZpcm9ubWVudGFsIHByZXNlcnZhdGlvbiBpcyBlbmVyZ3kgY29uc2VydmF0aW9uLiBTbWFsbAogICAgICAgICAgY2hhbmdlcyBpbiBvdXIgZGFpbHkgcm91dGluZXMgY2FuIGxlYWQgdG8gc3Vic3RhbnRpYWwgZW5lcmd5IHNhdmluZ3MuIEZvciBpbnN0YW5jZSwKICAgICAgICAgIHR1cm5pbmcgb2ZmIGxpZ2h0cyB3aGVuIG5vdCBpbiB1c2UsIHVucGx1Z2dpbmcgZWxlY3Ryb25pYyBkZXZpY2VzLCBhbmQgdXRpbGl6aW5nCiAgICAgICAgICBlbmVyZ3ktZWZmaWNpZW50IGFwcGxpYW5jZXMgY2FuIHNpZ25pZmljYW50bHkgcmVkdWNlIGhvdXNlaG9sZCBlbmVyZ3kgY29uc3VtcHRpb24uCiAgICAgICAgICBBZGRpdGlvbmFsbHksIG9wdGluZyBmb3IgcHVibGljIHRyYW5zcG9ydGF0aW9uLCBjYXJwb29saW5nLCBvciB1c2luZyBhbHRlcm5hdGl2ZSBtb2RlcyBvZgogICAgICAgICAgdHJhbnNwb3J0IGxpa2UgY3ljbGluZyBvciB3YWxraW5nIGNhbiBkZWNyZWFzZSBncmVlbmhvdXNlIGdhcyBlbWlzc2lvbnMuIFRoZXNlIHByYWN0aWNlcwogICAgICAgICAgbm90IG9ubHkgaGVscCBtaXRpZ2F0ZSBjbGltYXRlIGNoYW5nZSBidXQgYWxzbyBwcm9tb3RlIGNsZWFuZXIgYWlyIGFuZCBoZWFsdGhpZXIKICAgICAgICAgIGNvbW11bml0aWVzLiBCeSBpbnRlZ3JhdGluZyB0aGVzZSBlbnZpcm9ubWVudGFsbHkgY29uc2Npb3VzIGhhYml0cyBpbnRvIG91ciBkYWlseSBsaXZlcywKICAgICAgICAgIHdlIGNhbiBjb2xsZWN0aXZlbHkgbWFrZSBhIHNpZ25pZmljYW50IGltcGFjdCBvbiBwcmVzZXJ2aW5nIHRoZSBwbGFuZXQgZm9yIGZ1dHVyZQogICAgICAgICAgZ2VuZXJhdGlvbnMuCiAgICAgICAgPC9wPgogICAgICAgIDxwPkNhdGVnb3J5OiA8c3Ryb25nPkVudmlyb25tZW50PC9zdHJvbmc+PC9wPgogICAgICA8L2FydGljbGU+CgogICAgICA8YXJ0aWNsZSBkYXRhLWNhdGVnb3J5PSJIZWFsdGgiPgogICAgICAgIDxoMj5UaGUgSW1wb3J0YW5jZSBvZiBNZW50YWwgSGVhbHRoIGluIE92ZXJhbGwgV2VsbC1CZWluZzwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBNZW50YWwgaGVhbHRoIGlzIGFuIGludGVncmFsIGNvbXBvbmVudCBvZiBvdmVyYWxsIHdlbGwtYmVpbmcsIGluZmx1ZW5jaW5nIGhvdyB3ZSB0aGluaywKICAgICAgICAgIGZlZWwsIGFuZCBhY3QgaW4gb3VyIGRhaWx5IGxpdmVzLiBJdCBwbGF5cyBhIGNydWNpYWwgcm9sZSBpbiBkZXRlcm1pbmluZyBob3cgd2UgaGFuZGxlCiAgICAgICAgICBzdHJlc3MsIHJlbGF0ZSB0byBvdGhlcnMsIGFuZCBtYWtlIGNob2ljZXMuIFByb21vdGluZyBtZW50YWwgaGVhbHRoIHN0YXJ0cyB3aXRoCiAgICAgICAgICByZWNvZ25pemluZyBhbmQgYWRkcmVzc2luZyB0aGUgc2lnbnMgb2YgbWVudGFsIGhlYWx0aCBpc3N1ZXMsIHN1Y2ggYXMgcHJvbG9uZ2VkIHN0cmVzcywKICAgICAgICAgIGFueGlldHksIGFuZCBkZXByZXNzaW9uLiBSZWd1bGFyIG1lbnRhbCBoZWFsdGggY2hlY2staW5zLCB3aGV0aGVyIHRocm91Z2ggc2VsZi1yZWZsZWN0aW9uCiAgICAgICAgICBvciBwcm9mZXNzaW9uYWwgY291bnNlbGluZywgY2FuIGhlbHAgaW5kaXZpZHVhbHMgbWFuYWdlIHRoZWlyIGVtb3Rpb25zIGFuZCBtYWludGFpbiBhCiAgICAgICAgICBiYWxhbmNlZCBvdXRsb29rIG9uIGxpZmUuIFByaW9yaXRpemluZyBtZW50YWwgaGVhbHRoIGNhbiBsZWFkIHRvIGltcHJvdmVkIHJlbGF0aW9uc2hpcHMsCiAgICAgICAgICBwcm9kdWN0aXZpdHksIGFuZCBhIGJldHRlciBxdWFsaXR5IG9mIGxpZmUuCiAgICAgICAgPC9wPgogICAgICAgIDxpbWcKICAgICAgICAgIHNyYz0iaHR0cHM6Ly9pbWFnZXMudW5zcGxhc2guY29tL3Bob3RvLTE1MDYxMjY2MTM0MDgtZWNhMDdjZTY4NzczP3E9ODAmdz0yMjAyJmF1dG89Zm9ybWF0JmZpdD1jcm9wJml4bGliPXJiLTQuMC4zJml4aWQ9TTN3eE1qQTNmREI4TUh4d2FHOTBieTF3WVdkbGZIeDhmR1Z1ZkRCOGZIeDhmQSUzRCUzRCIKICAgICAgICAgIGFsdD0iVGhlIEltcG9ydGFuY2Ugb2YgTWVudGFsIEhlYWx0aCBpbiBPdmVyYWxsIFdlbGwtQmVpbmciCiAgICAgICAgICB3aWR0aD0iMzYwIgogICAgICAgIC8+CiAgICAgICAgPHA+CiAgICAgICAgICBJbmNvcnBvcmF0aW5nIG1lbnRhbCBoZWFsdGggcHJhY3RpY2VzIGludG8gZGFpbHkgcm91dGluZXMgaXMgZXNzZW50aWFsIGZvciBzdXN0YWluaW5nCiAgICAgICAgICBtZW50YWwgd2VsbC1iZWluZy4gVGVjaG5pcXVlcyBzdWNoIGFzIG1pbmRmdWxuZXNzLCBtZWRpdGF0aW9uLCBhbmQgcmVndWxhciBwaHlzaWNhbAogICAgICAgICAgYWN0aXZpdHkgY2FuIHJlZHVjZSBzdHJlc3MgYW5kIGVuaGFuY2UgbW9vZC4gTWluZGZ1bG5lc3MgZW5jb3VyYWdlcyBwcmVzZW50LW1vbWVudAogICAgICAgICAgYXdhcmVuZXNzLCBoZWxwaW5nIGluZGl2aWR1YWxzIG1hbmFnZSBvdmVyd2hlbG1pbmcgdGhvdWdodHMgYW5kIGVtb3Rpb25zLiBTaW1pbGFybHksCiAgICAgICAgICBtZWRpdGF0aW9uIHByb21vdGVzIHJlbGF4YXRpb24gYW5kIG1lbnRhbCBjbGFyaXR5LCB3aGlsZSBwaHlzaWNhbCBhY3Rpdml0eSByZWxlYXNlcwogICAgICAgICAgZW5kb3JwaGlucywgd2hpY2ggYXJlIG5hdHVyYWwgbW9vZCBsaWZ0ZXJzLiBFbnN1cmluZyBhZGVxdWF0ZSBzbGVlcCwgbWFpbnRhaW5pbmcgYSBoZWFsdGh5CiAgICAgICAgICBkaWV0LCBhbmQgZm9zdGVyaW5nIHNvY2lhbCBjb25uZWN0aW9ucyBhbHNvIGNvbnRyaWJ1dGUgdG8gbWVudGFsIHJlc2lsaWVuY2UuIEJ5IGVtYmVkZGluZwogICAgICAgICAgdGhlc2UgcHJhY3RpY2VzIGludG8gZGFpbHkgbGlmZSwgaW5kaXZpZHVhbHMgY2FuIHN1cHBvcnQgdGhlaXIgbWVudGFsIGhlYWx0aCwgbGVhZGluZyB0byBhCiAgICAgICAgICBtb3JlIGJhbGFuY2VkIGFuZCBmdWxmaWxsaW5nIGxpZmUuCiAgICAgICAgPC9wPgogICAgICAgIDxwPkNhdGVnb3J5OiA8c3Ryb25nPkhlYWx0aDwvc3Ryb25nPjwvcD4KICAgICAgPC9hcnRpY2xlPgogICAgPC9tYWluPgoKICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyAyMDI0IE15IEJsb2cuIEFsbCByaWdodHMgcmVzZXJ2ZWQuPC9wPgogICAgPC9mb290ZXI+CgogICAgPHNjcmlwdCBzcmM9ImluZGV4LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

LyogUmVzZXQgZGVmYXVsdCBtYXJnaW4gYW5kIHBhZGRpbmcgKi8KYm9keSwKaDEsCmgyLApwLAppbWcgewogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgovKiBBcHBseSBmb250IGFuZCBiYWNrZ3JvdW5kIGNvbG9ycyAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UyZGZkMDsKICBjb2xvcjogIzMyMDEyZjsKfQoKLyogSGVhZGVyIHN0eWxpbmcgKi8KaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgovKiBOYXZpZ2F0aW9uIHN0eWxpbmcgKi8KbmF2IHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbWFyZ2luOiAyMHB4IDA7Cn0KCm5hdiBidXR0b24gewogIGJhY2tncm91bmQtY29sb3I6ICNmOTczMDA7CiAgYm9yZGVyOiBub25lOwogIGNvbG9yOiB3aGl0ZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgbWFyZ2luOiAwIDEwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIGZvbnQtc2l6ZTogMTZweDsKICBib3JkZXItcmFkaXVzOiA1cHg7Cn0KCm5hdiBidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMzMjAxMmY7Cn0KCi8qIE1haW4gY29udGVudCBzdHlsaW5nICovCm1haW4gewogIHBhZGRpbmc6IDIwcHg7Cn0KCi8qIEFydGljbGUgc3R5bGluZyAqLwphcnRpY2xlIHsKICBtYXJnaW4tYm90dG9tOiAzMHB4Owp9CgovKiBBcnRpY2xlIHRpdGxlIHN0eWxpbmcgKi8KYXJ0aWNsZSBoMiB7CiAgY29sb3I6ICMzMjAxMmY7CiAgZm9udC1zaXplOiAyNHB4OwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCi8qIEFydGljbGUgcGFyYWdyYXBoIHN0eWxpbmcgKi8KYXJ0aWNsZSBwIHsKICBsaW5lLWhlaWdodDogMS42OwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCi8qIEltYWdlIHN0eWxpbmcgKi8KYXJ0aWNsZSBpbWcgewogIGRpc3BsYXk6IGJsb2NrOwogIG1heC13aWR0aDogMTAwJTsKICBoZWlnaHQ6IGF1dG87CiAgbWFyZ2luLWJvdHRvbTogMTVweDsKfQoKLyogQ2F0ZWdvcnkgc3R5bGluZyAqLwphcnRpY2xlIHA6bGFzdC1jaGlsZCB7CiAgZm9udC1zdHlsZTogaXRhbGljOwogIGNvbG9yOiAjZjk3MzAwOwp9CgovKiBGb290ZXIgc3R5bGluZyAqLwpmb290ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICM1MjRjNDI7CiAgY29sb3I6ICNlMmRmZDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHBhZGRpbmc6IDEwcHg7Cn0=

ZnVuY3Rpb24gZmlsdGVyQXJ0aWNsZXMoY2F0ZWdvcnkpIHsKICBjb25zdCBhcnRpY2xlcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoIm1haW4gYXJ0aWNsZSIpOwoKICBhcnRpY2xlcy5mb3JFYWNoKGFydGljbGUgPT4gewogICAgaWYgKGNhdGVnb3J5ID09PSAiYWxsIiB8fCBhcnRpY2xlLmdldEF0dHJpYnV0ZSgiZGF0YS1jYXRlZ29yeSIpID09PSBjYXRlZ29yeSkgewogICAgICBhcnRpY2xlLnN0eWxlLmRpc3BsYXkgPSAiIjsKICAgIH0gZWxzZSB7CiAgICAgIGFydGljbGUuc3R5bGUuZGlzcGxheSA9ICJub25lIjsKICAgIH0KICB9KTsKfQ==

Aquí tienes. Lo lograste. **Este es tu sitio web completo y totalmente funcional.** ¡Excelente trabajo!

¿Por qué agregamos un atributo `data-category` (como `data-category="Health"`) a cada elemento `<article>`?

Aprende los fundamentos del desarrollo web aprovechando el poder de herramientas de IA como ChatGPT. Comprende los roles de HTML, CSS y JavaScript en la creación de sitios web y cómo la IA puede mejorar la velocidad y creatividad en la programación. Practica la elaboración de prompts efectivos y la generación de código con ChatGPT. Construye un sitio web de blog completo desde cero utilizando desarrollo asistido por IA, adquiriendo habilidades prácticas para tus proyectos web.

Introducción a los conceptos y tecnologías clave en el desarrollo web, incluyendo el papel de la IA en la programación moderna. Esta sección establece la base para tu aprendizaje, abarcando los fundamentos del desarrollo web y cómo la IA mejora la productividad, la creatividad y la eficiencia en la programación.

Aprenda las tecnologías esenciales del desarrollo web. Profundice en los fundamentos de HTML, CSS y JavaScript, desentrañando sus funcionalidades individuales y su papel conjunto en la configuración del entorno digital.

Descubra el potencial de ChatGPT al explorar sus capacidades y aprender a utilizarlo de manera eficaz.
Obtención de conocimientos sobre la elaboración de prompts y el trabajo con código mediante ChatGPT.
Conclusión con recomendaciones prácticas para aprovechar ChatGPT en diversas aplicaciones.

Construcción del sitio web del blog. Creación de un sitio web de blog completo y funcional desde cero, incorporando diversas técnicas de desarrollo web utilizando ChatGPT.

Implementación de la Funcionalidad de Filtrado

Objetivo

Posible indicación

Resultado

Estado del sitio web