{"id":52348,"date":"2019-11-06T00:00:00","date_gmt":"2019-11-05T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva"},"modified":"2020-02-18T14:00:02","modified_gmt":"2020-02-18T11:00:02","slug":"eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","status":"publish","type":"post","link":"https:\/\/prohoster.info\/es\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","title":{"rendered":"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/05c3246e5ca620b5ea66c0542b53f08a.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Introducci\u00f3n<\/h3>\n<p>\nYa sea que seas un principiante en programaci\u00f3n o un desarrollador experimentado, en esta industria es fundamental aprender nuevos conceptos y lenguajes\/frameworks para mantenerte al d\u00eda con las tendencias.<\/p>\n<p>Tomemos, por ejemplo, React, cuyo c\u00f3digo fue liberado por Facebook hace solo cuatro a\u00f1os; ya se ha convertido en la opci\u00f3n n\u00famero uno para los desarrolladores de JavaScript en todo el mundo.<\/p>\n<p>Vue y Angular, por supuesto, tambi\u00e9n tienen su base leg\u00edtima de seguidores. Y luego est\u00e1n Svelte y otros frameworks universales, como Next.js o Nuxt.js. Gatsby, Gridsome, Quasar\u2026 y muchos m\u00e1s.<\/p>\n<p>Si deseas destacarte como un desarrollador experimentado de JavaScript, debes tener al menos algo de experiencia trabajando con diferentes frameworks y bibliotecas, adem\u00e1s de ejecutar trabajos con el buen viejo JS.<\/p>\n<p>Para ayudarte a convertirte en un maestro del frontend en 2020, he recopilado nueve proyectos diferentes, cada uno dedicado a diferentes frameworks y bibliotecas de JavaScript como stack t\u00e9cnico, que puedes crear y a\u00f1adir a tu portafolio. Recuerda, nada te ayuda m\u00e1s que crear cosas en la pr\u00e1ctica, as\u00ed que adelante, activa tu mente y hazlo posible.<br \/>\n<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<blockquote><p><noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/\" title=\"EDISON Software - desarrollo web\"><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/4f292db7c47eaa9d6e764f5a595d0edf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><\/a><\/noindex><br clear=\"right\"><br \/>\nEste art\u00edculo fue traducido con el apoyo de EDISON Software, que <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/virtualnaya-primerochnaya\">crea probadores virtuales para tiendas multimarcas<\/a><\/noindex>, as\u00ed como <noindex><a rel=\"nofollow\" href=\"https:\/\/www.edsd.ru\/ru\/uslugi\/testirovanie_po\">prueba de software<\/a><\/noindex>.<\/p><\/blockquote>\n<p><\/p>\n<h3>Aplicaci\u00f3n de b\u00fasqueda de pel\u00edculas con React (con hooks)<\/h3>\n<p>\nLo primero que podr\u00edas hacer es crear una aplicaci\u00f3n de b\u00fasqueda de pel\u00edculas con React. A continuaci\u00f3n, se muestra una imagen de c\u00f3mo se ver\u00e1 la aplicaci\u00f3n final:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/de9873700abc86e1ec63e92704f80dcf.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><br \/>\nAl crear esta aplicaci\u00f3n, mejorar\u00e1s tus habilidades en React utilizando el relativamente nuevo API de Hooks. El ejemplo del proyecto utiliza componentes de React, m\u00faltiples hooks, una API externa y, por supuesto, algunos estilos CSS.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>React con hooks<\/li>\n<li>create-react-app<\/li>\n<li>JSX<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nSin usar ninguna clase, estos proyectos te ofrecen un punto de entrada perfecto al React funcional y definitivamente te ayudar\u00e1n en 2020. Puedes encontrar <noindex><a rel=\"nofollow\" href=\"https:\/\/www.freecodecamp.org\/news\/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7\/\">un ejemplo de proyecto aqu\u00ed<\/a><\/noindex>. Sigue las instrucciones o hazlo a tu manera.<\/p>\n<h3>Aplicaci\u00f3n de chat con Vue<\/h3>\n<p>\nOtro gran proyecto para ti es crear una aplicaci\u00f3n de chat utilizando mi biblioteca de JavaScript favorita: VueJS. La aplicaci\u00f3n se ver\u00e1 algo as\u00ed:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/3c55136bcf260168f951e923983dc3a0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><br \/>\nEn esta gu\u00eda aprender\u00e1s a crear una aplicaci\u00f3n Vue desde cero: crear componentes, gestionar estados, configurar rutas, conectarte a servicios externos e incluso manejar autenticaci\u00f3n.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Vue<\/li>\n<li>Vuex<\/li>\n<li>Vue Router<\/li>\n<li>Vue CLI<\/li>\n<li>Pusher<\/li>\n<li>CSS<\/li>\n<\/ul>\n<p>\nEste es un gran proyecto para comenzar a trabajar con Vue o para mejorar tus habilidades existentes en desarrollo en 2020. Puedes encontrar <noindex><a rel=\"nofollow\" href=\"https:\/\/www.sitepoint.com\/pusher-vue-real-time-chat-app\/\">tutorial aqu\u00ed<\/a><\/noindex>.<\/p>\n<h3>Una hermosa aplicaci\u00f3n para ver el clima con Angular 8<\/h3>\n<p>\nEste ejemplo te ayudar\u00e1 a crear una hermosa aplicaci\u00f3n para ver el clima usando Angular 8:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/93575fb69c667f04a00c58bfeb8b9699.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><br \/>\nEste proyecto te ense\u00f1ar\u00e1 habilidades valiosas al construir aplicaciones desde cero, desde el dise\u00f1o hasta el desarrollo, hasta una aplicaci\u00f3n lista para desplegar.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Angular 8<\/li>\n<li>Firebase<\/li>\n<li>Renderizado del lado del servidor<\/li>\n<li>CSS con Grid y Flexbox<\/li>\n<li>Amigable para m\u00f3viles y responsividad<\/li>\n<li>Modo oscuro<\/li>\n<li>Interfaz atractiva<\/li>\n<\/ul>\n<p>\nLo que realmente me gusta de este proyecto integral es que no aprendes cosas de manera aislada. En cambio, aprendes todo el proceso de desarrollo, desde el dise\u00f1o hasta el despliegue final.<\/p>\n<h3>Aplicaci\u00f3n To-Do con Svelte<\/h3>\n<p>\nSvelte es como el nuevo chico en el enfoque de componentes, al menos similar a React, Vue y Angular. Y es una de las novedades m\u00e1s destacadas en 2020.<\/p>\n<p>Las aplicaciones To-Do no son necesariamente el tema m\u00e1s candente, pero realmente te ayudar\u00e1n a perfeccionar tus habilidades en Svelte. Se ver\u00e1 as\u00ed:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/1d2d414f5acbb3cfd0df5bf7ff29befd.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><br \/>\nEn este tutorial aprender\u00e1s a crear una aplicaci\u00f3n usando Svelte 3, de principio a fin. Utilizar\u00e1s componentes, estilizaci\u00f3n y controladores de eventos.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Svelte 3<\/li>\n<li>Componentes<\/li>\n<li>Estilizaci\u00f3n con CSS<\/li>\n<li>Sintaxis ES 6<\/li>\n<\/ul>\n<p>\nNo hay muchos buenos proyectos iniciales para Svelte, as\u00ed que encontr\u00e9 <noindex><a rel=\"nofollow\" href=\"https:\/\/medium.com\/codingthesmartway-com-blog\/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6\">esta buena opci\u00f3n para comenzar<\/a><\/noindex>.<\/p>\n<h3>\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u0440\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Next.js<\/h3>\n<p>\nNext.js es el framework m\u00e1s popular para construir aplicaciones React que soportan renderizado del lado del servidor de manera nativa.<\/p>\n<p>Este proyecto te mostrar\u00e1 c\u00f3mo crear una aplicaci\u00f3n de comercio electr\u00f3nico que se vea as\u00ed:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/a848293ad9952a3c52bf8d059bf55ab9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><br \/>\nEn este proyecto aprender\u00e1s a desarrollar usando Next.js: crear nuevas p\u00e1ginas y componentes, extraer datos y estilizar y desplegar la aplicaci\u00f3n Next.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Next.js<\/li>\n<li>Componentes y p\u00e1ginas<\/li>\n<li>Muestreo de datos<\/li>\n<li>Estilizaci\u00f3n<\/li>\n<li>Despliegue del proyecto<\/li>\n<li>SSR y SPA<\/li>\n<\/ul>\n<p>\nSiempre es genial tener un ejemplo real, como una aplicaci\u00f3n de comercio electr\u00f3nico, para aprender algo nuevo. Puedes <noindex><a rel=\"nofollow\" href=\"https:\/\/snipcart.com\/blog\/next-js-ecommerce-tutorial\">encontrar el tutorial aqu\u00ed<\/a><\/noindex>.<\/p>\n<h3>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043c\u0443\u043b\u044c\u0442\u0438\u044f\u0437\u044b\u0447\u043d\u044b\u0439 \u0431\u043b\u043e\u0433 \u0441 Nuxt.js<\/h3>\n<p>\nNuxt.js para Vue es como Next.js para React: un excelente framework que combina el potencial del renderizado en el servidor con aplicaciones de una sola p\u00e1gina.<br \/>\nLa \u00faltima aplicaci\u00f3n que puedes crear se ver\u00e1 as\u00ed:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/ba05c24c81705c454c32d363e9a74fe5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><\/p>\n<p>En este proyecto aprender\u00e1s a construir un sitio web completo usando Nuxt.js, desde la configuraci\u00f3n inicial hasta el despliegue final.<\/p>\n<p>Utiliza muchas caracter\u00edsticas interesantes que Nuxt puede ofrecer, como p\u00e1ginas y componentes, as\u00ed como estilos con SCSS.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Nuxt.js<\/li>\n<li>Componentes y p\u00e1ginas<\/li>\n<li>M\u00f3dulo de Storyblock<\/li>\n<li>Mixins<\/li>\n<li>Vuex para el manejo de estado<\/li>\n<li>SCSS para estilos<\/li>\n<li>Middleware de Nuxt<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.storyblok.com\/tp\/nuxt-js-multilanguage-website-tutorial\">Este es un proyecto realmente genial<\/a><\/noindex>, que incluye muchas caracter\u00edsticas destacadas de Nuxt.js. Personalmente, me encanta trabajar con Nuxt, as\u00ed que deber\u00edas probarlo, ya que tambi\u00e9n te convertir\u00e1 en un gran desarrollador de Vue.<\/p>\n<h3>Blog con Gatsby<\/h3>\n<p>\nGatsby es un excelente generador de sitios est\u00e1ticos que utiliza React y GraphQL. Este es el resultado del proyecto:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/4a51e59e1983da87d2110f8b06e29e33.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><\/p>\n<p>En esta gu\u00eda aprender\u00e1s a usar Gatsby para crear un blog que podr\u00e1s utilizar para escribir tus propios art\u00edculos, usando React y GraphQL.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Gatsby<\/li>\n<li>React<\/li>\n<li>GraphQL<\/li>\n<li>Plugins y temas<\/li>\n<li>MDX\/Markdown<\/li>\n<li>Bootstrap CSS<\/li>\n<li>Plantillas<\/li>\n<\/ul>\n<p>\nSi alguna vez has querido tener un blog, <noindex><a rel=\"nofollow\" href=\"https:\/\/blog.bitsrc.io\/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc\">este es un gran ejemplo<\/a><\/noindex> de c\u00f3mo hacerlo usando React y GraphQL.<\/p>\n<p>No estoy diciendo que WordPress sea una mala opci\u00f3n, pero con Gatsby puedes crear sitios de alto rendimiento utilizando React, lo cual es una combinaci\u00f3n asombrosa.<\/p>\n<h3>Blog con Gridsome<\/h3>\n<p>\nGridsome para Vue\u2026 Bien, ya hemos hablado de esto con Next\/Nuxt.<br \/>\nPero lo mismo es cierto para Gridsome y Gatsby. Ambos utilizan GraphQL como capa de datos, pero Gridsome usa VueJS. Tambi\u00e9n es un generador de sitios est\u00e1ticos impresionante que te ayudar\u00e1 a crear grandes blogs:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/3d0162d6aeba8481056f4dee9f25808d.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><\/p>\n<p>Este proyecto te ense\u00f1ar\u00e1 a crear un blog simple para comenzar a trabajar con Gridsome, GraphQL y Markdown. Tambi\u00e9n se explica c\u00f3mo desplegar la aplicaci\u00f3n a trav\u00e9s de Netlify.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Gridsome<\/li>\n<li>Vue<\/li>\n<li>GraphQL<\/li>\n<li>Markdown<\/li>\n<li>Netlify<\/li>\n<\/ul>\n<p>\nEste no es, por supuesto, el tutorial m\u00e1s completo, pero cubre los conceptos b\u00e1sicos de Gridsome y <noindex><a rel=\"nofollow\" href=\"https:\/\/www.telerik.com\/blogs\/building-a-blog-with-vue-and-markdown-using-gridsome\">Markdown y puede ser un buen punto de partida.<\/a><\/noindex>.<\/p>\n<h3>Reproductor de audio similar a SoundCloud, usando Quasar.<\/h3>\n<p>\nQuasar es otro marco de Vue que se puede utilizar para crear aplicaciones m\u00f3viles. En este proyecto, crear\u00e1s una aplicaci\u00f3n de reproductor de audio, por ejemplo:<\/p>\n<p><img decoding=\"async\" alt=\"9 proyectos m\u00e1s para perfeccionar tus habilidades en Front-End\" src=\"\/wp-content\/uploads\/2019\/11\/e7acef4f60608d581533c038c61a0752.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>Qu\u00e9 aprender\u00e1s<\/b><\/p>\n<p>Mientras que otros proyectos se centran principalmente en aplicaciones web, este te mostrar\u00e1 c\u00f3mo crear una aplicaci\u00f3n m\u00f3vil utilizando Vue y el marco Quasar.<br \/>\nYa deber\u00edas tener Cordova funcionando con Android Studio\/Xcode configurado. Si no, hay un enlace en la gu\u00eda al sitio web de Quasar donde muestran c\u00f3mo configurarlo todo.<\/p>\n<p><b>Stack t\u00e9cnico y caracter\u00edsticas<\/b><\/p>\n<ul>\n<li>Quasar<\/li>\n<li>Vue<\/li>\n<li>Cordova<\/li>\n<li>WaveSurfer<\/li>\n<li>Componentes de UI<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/www.learningsomethingnew.com\/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer\">Un peque\u00f1o proyecto<\/a><\/noindex>, demostrando las capacidades de Quasar para crear aplicaciones m\u00f3viles.<br \/>\n<br \/>Fuente: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/edison\/blog\/474230\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u044f\u0432\u043b\u044f\u0435\u0442\u0435\u0441\u044c \u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u043c \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043b\u0438 \u0443\u0436\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u0432 \u044d\u0442\u043e\u0439 \u043e\u0442\u0440\u0430\u0441\u043b\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u0438 \u044f\u0437\u044b\u043a\u043e\u0432\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u043f\u0435\u0432\u0430\u0442\u044c \u0437\u0430 \u0442\u0440\u0435\u043d\u0434\u0430\u043c\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, React \u2014 \u043a\u043e\u0434 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, Facebook \u043e\u0442\u043a\u0440\u044b\u043b \u0432\u0441\u0435\u0433\u043e \u0447\u0435\u0442\u044b\u0440\u0435 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434, \u043e\u043d \u0443\u0436\u0435 \u0441\u0442\u0430\u043b \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u043d\u043e\u043c\u0435\u0440 \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 JavaScript \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443. Vue \u0438 [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-52348","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/es\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u0415\u0449\u0451 9 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u0442\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f Front-End \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/es\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-11-05T21:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-02-18T11:00:02+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Otros 9 proyectos para perfeccionar habilidades de Front-End | ProHoster","description":"Introducci\u00f3n independientemente de.","canonical_url":"https:\/\/prohoster.info\/es\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"es_ES","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0415\u0449\u0451 9 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u0442\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f Front-End \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u0442\u0432\u0430 | ProHoster","og:description":"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442.","og:url":"https:\/\/prohoster.info\/es\/blog\/news\/eshhyo-9-proektov-dlya-ottachivaniya-front-end-masterstva","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-11-05T21:00:00+00:00","article:modified_time":"2020-02-18T11:00:02+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"52348","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 03:19:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 14:23:14","updated":"2026-01-24 03:19:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/52348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/comments?post=52348"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/52348\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/media?parent=52348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/categories?post=52348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/tags?post=52348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}