{"id":3202,"date":"2021-07-26T16:53:08","date_gmt":"2021-07-26T21:53:08","guid":{"rendered":"https:\/\/giovanirodriguez.dev\/?p=3202"},"modified":"2022-05-20T14:50:04","modified_gmt":"2022-05-20T19:50:04","slug":"como-aprender-desarrollo-web","status":"publish","type":"post","link":"https:\/\/giovanirodriguez.dev\/es\/como-aprender-desarrollo-web\/","title":{"rendered":"\u00bfC\u00f3mo Aprender Desarrollo Web?"},"content":{"rendered":"\n<p>Con el Internet es posible aprender cualquier cosa. Hay p\u00e1ginas enteras dedicadas a vender cursos o que incluso los ofrecen gratis. Cualquier tema lo puedes aprender y cualquier habilidad la puedes desarrollar con ayuda del internet. S\u00f3lo hace falta que le dediques tiempo y tengas las herramientas adecuadas. Aprender desarrollo web no es la excepci\u00f3n. Hay muchas herramientas y cursos en l\u00ednea que te pueden ayudar. Aqu\u00ed te dar\u00e9 una gu\u00eda para que sepas por d\u00f3nde comenzar, comiences a familiarizarte con algunos aspectos y conozcas algunas herramientas y cursos para principiantes. Tambi\u00e9n, si ya tienes algo de tiempo aprendiendo, voy a recomendarte p\u00e1ginas para que practiques tus habilidades en programaci\u00f3n.<\/p>\n\n\n\n<p>Sin m\u00e1s, pasemos al primer punto.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">1. Entender qu\u00e9 es el desarrollo web<\/h2>\n\n\n\n<p>A algunos podr\u00eda parecerles innecesario detenerse aqu\u00ed, pero este es el verdadero punto de partida. Cuando pensamos en desarrollo web pensamos en crear sitios de internet y no estamos equivocados. Sin embargo, esto no lo dice todo sobre los procesos que esto implica. Por otra parte, hay un mont\u00f3n de vocabulario que vas a necesitar manejar para entender tutoriales y manuales. Por eso es importante detenernos aqu\u00ed y aclarar qu\u00e9 se estudia al aprender dise\u00f1o web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/kevin-ku-w7ZyuGYNpRQ-unsplash-1024x768.jpg\" alt=\"Lentes frente a laptop con c\u00f3digo de programaci\u00f3n en la pantalla\" class=\"wp-image-3216 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/768;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/kevin-ku-w7ZyuGYNpRQ-unsplash-1024x768.jpg\" alt=\"Lentes frente a laptop con c\u00f3digo de programaci\u00f3n en la pantalla\" class=\"wp-image-3216\"\/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 es el desarrollo web?<\/h3>\n\n\n\n<p>El desarrollo web es el trabajo de construir y mantener sitios web. Los sitios web, en su forma m\u00e1s b\u00e1sica, son un conjunto de archivos guardados en un servidor. Las personas acceden a ellos por medio de un navegador, descargan la informaci\u00f3n del sitio y a la vez cargan informaci\u00f3n nueva al servidor. Este flujo circular es el principio b\u00e1sico del internet.<\/p>\n\n\n\n<p>Los desarrolladores web son los que echan a andar los sitos. Mientras una persona lee un blog, hace una compra en l\u00ednea o mira un video, detr\u00e1s hay c\u00f3digos y v\u00edas de comunicaci\u00f3n con el servidor que lo hacen posible. Esta ingenier\u00eda que se encuentra detr\u00e1s es obra de los desarrolladores web.<\/p>\n\n\n\n<p>Quiz\u00e1s en alg\u00fan momento de tu formaci\u00f3n escolar (dependiendo de qu\u00e9 edad tengas) tuviste clases de computaci\u00f3n y te ense\u00f1aron un poco de c\u00f3digo HTML. Hab\u00eda que escribir un mont\u00f3n de instrucciones para que una p\u00e1gina web tuviera un t\u00edtulo, un p\u00e1rrafo, una imagen, un fondo... Adem\u00e1s de que las opciones eran muy b\u00e1sicas y la p\u00e1gina no se sub\u00eda a ning\u00fan servidor, era s\u00f3lo un archivo de computadora que se abr\u00eda con el navegador.<\/p>\n\n\n\n<p>El desarrollo web s\u00ed tiene qu\u00e9 ver con esa experiencia de clases de computaci\u00f3n y a la vez no. El asunto es que la tecnolog\u00eda avanza cada vez m\u00e1s r\u00e1pido y hay muchos procesos que se simplifican con algunas herramientas. Aunque tambi\u00e9n, lo que uno aprendi\u00f3 en clase de computaci\u00f3n no fue la informaci\u00f3n m\u00e1s completa.<\/p>\n\n\n\n<p>En el desarrollo web hay dos \u00e1reas a cubrir: lo que ve el usuario y lo que no se ve pero hace que el sitio funcione. Me refiero al desarrollo web front-end y back-end respectivamente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfFront-end, back-end o full stack?<\/h3>\n\n\n\n<p>Entonces, el desarrollo web tiene dos partes. El primero se trata de lo que se carga en el sitio, lo que ve el cliente en la p\u00e1gina, este es el front-end. Mientras que el back-end est\u00e1 relacionado con el servidor y son procesos que no est\u00e1n a la vista. Podemos imaginar una p\u00e1gina web como un restaurante en el que el front-end es la fachada, la decoraci\u00f3n del comedor, las sillas, los platos y c\u00f3mo se ve la comida. Mientras que el back-end es lo que ocurre detr\u00e1s, las entregas de insumos y como tal cocinar la comida.<\/p>\n\n\n\n<p>Un desarrollador puede dedicarse solamente a programar lo que sostiene la p\u00e1gina web o a programar lo que ve el cliente cuando entra en el sitio. Ninguno es mejor que el otro o m\u00e1s dif\u00edcil que el otro. Es una cuesti\u00f3n de preferencias, hay a quienes les apasiona el dise\u00f1o y cuidar la experiencia del usuario. A otros lo que m\u00e1s les gusta es cuidar de la comunicaci\u00f3n entre el servidor y la p\u00e1gina, las bases de datos y la ingenier\u00eda interna de la p\u00e1gina. Ambas perspectivas son v\u00e1lidas.<\/p>\n\n\n\n<p>Hay una tercera opci\u00f3n, que es dedicarse a ambas cosas, ser full-stack. En cualquier caso, s\u00ed te recomiendo que aprendas aunque sea un poco de los dos para que decidas qu\u00e9 te gusta m\u00e1s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Educarte<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Cursos para aprender desarrollo web desde cero<\/h3>\n\n\n\n<p>La parte m\u00e1s dif\u00edcil siempre es comenzar. Cuando no se tiene un conocimiento o experiencia previa, puedes sentirte perdido. Tambi\u00e9n, puede ser intimidante intentar aprender a base de prueba y error. M\u00e1s all\u00e1 del temor, puede ser un camino que te lleve a la frustraci\u00f3n. Un curso que cubra contenidos b\u00e1sicos sobre desarrollo web es un buen lugar para empezar.<\/p>\n\n\n\n<p>Hay muchos cursos en l\u00ednea que cubren las bases del desarrollo web. Lo mejor es que hay para todos los presupuestos, desde los muy caros, hasta lo que son completamente gratis. Aqu\u00ed te dejo algunas opciones.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Treehouse<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-144919-1024x426-1.jpg\" alt=\"Treehouse p\u00e1gina principal\" class=\"wp-image-3204 lazyload\" width=\"635\" height=\"264\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 635px; --smush-placeholder-aspect-ratio: 635\/264;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-144919-1024x426-1.jpg\" alt=\"Treehouse p\u00e1gina principal\" class=\"wp-image-3204\" width=\"635\" height=\"264\"\/><\/noscript><\/figure>\n\n\n\n<p>Por veinticinco d\u00f3lares al mes puedes aprender a programar. Treehouse ofrece cursos en video hechos por expertos en el tema. Adem\u00e1s, hay sesiones pr\u00e1cticas interactivas. Si lo deseas puedes inscribirte en programas que te dar\u00e1n un grado oficial. Tambi\u00e9n puedes probarlo gratis por siete d\u00edas. Si te interesa, da clic <a href=\"https:\/\/teamtreehouse.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">LinkedIn Learning con Lynda.com<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-1024x476.png\" alt=\"LinkedIn y Lynda.com p\u00e1gina principal\" class=\"wp-image-3205 lazyload\" width=\"616\" height=\"286\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-1024x476.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-300x139.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-768x357.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326.png 1342w\" data-sizes=\"auto, (max-width: 616px) 100vw, 616px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 616px; --smush-placeholder-aspect-ratio: 616\/286;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-1024x476.png\" alt=\"LinkedIn y Lynda.com p\u00e1gina principal\" class=\"wp-image-3205\" width=\"616\" height=\"286\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-1024x476.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-300x139.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326-768x357.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145326.png 1342w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/noscript><\/figure>\n\n\n\n<p>LinkedIn se combin\u00f3 con Lynda.com para ofrecer los mejores cursos para crecer y mejorar tu curr\u00edculum. Es destacable las opciones que tienen para desarrollo web, hay m\u00e1s de 200 cursos. Puedes aprender por tan solo veintinueve d\u00f3lares al mes. Si quieres conocer m\u00e1s, haz clic <a href=\"https:\/\/www.linkedin.com\/learning\/subscription\/topics?trk=sem_ldctest2lillp_learning&amp;isFromLynda=true&amp;&amp;src=go-pa&amp;veh=sem_src.go-pa_c.LLS-C_NAMER_All_ROR_Search_Google-Brand_DR-PRS_Broad_LDC-All-Gamma_All_English_Core_pcrid_346673690155_pkw_lynda_pmt_e_g.CjwKCAjwuvmHBhAxEiwAWAYj-BcJ-oxNiv6FAvsM7X2-UVaANcaV-0-8TsUrpHNovxwFhu81Qf-VWBoC4QAQAvD_BwE_learning&amp;trk=sem_ldctest2lillp_c.LLS-C_NAMER_All_ROR_Search_Google-Brand_DR-PRS_Broad_LDC-All-Gamma_All_English_Core_pkw.lynda_pcrid.346673690155_g.CjwKCAjwuvmHBhAxEiwAWAYj-BcJ-oxNiv6FAvsM7X2-UVaANcaV-0-8TsUrpHNovxwFhu81Qf-VWBoC4QAQAvD_BwE_learning&amp;lpk35=9137&amp;gclid=CjwKCAjwuvmHBhAxEiwAWAYj-BcJ-oxNiv6FAvsM7X2-UVaANcaV-0-8TsUrpHNovxwFhu81Qf-VWBoC4QAQAvD_BwE&amp;gclsrc=aw.ds\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Udemy<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-1024x464.png\" alt=\"Udemy cursos, filtrar por precio gratis\" class=\"wp-image-3206 lazyload\" width=\"708\" height=\"320\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-1024x464.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-768x348.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804.png 1341w\" data-sizes=\"auto, (max-width: 708px) 100vw, 708px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 708px; --smush-placeholder-aspect-ratio: 708\/320;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-1024x464.png\" alt=\"Udemy cursos, filtrar por precio gratis\" class=\"wp-image-3206\" width=\"708\" height=\"320\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-1024x464.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804-768x348.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-145804.png 1341w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" \/><\/noscript><\/figure>\n\n\n\n<p>Udemy ofrece cursos sobre todo lo que te puedas imaginar. No hay una suscripci\u00f3n mensual, s\u00f3lo pagas los cursos que quieras tomar. Lo interesante es que puedes filtrar los resultados por precio y uno de esos filtros te muestra s\u00f3lo las opciones gratis. (Como en la imagen de arriba). Pru\u00e9balo <a href=\"https:\/\/www.udemy.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Code Academy<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-151514-1024x479-1.jpg\" alt=\"Code Academy p\u00e1gina principal\" class=\"wp-image-3207 lazyload\" width=\"667\" height=\"311\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 667px; --smush-placeholder-aspect-ratio: 667\/311;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-151514-1024x479-1.jpg\" alt=\"Code Academy p\u00e1gina principal\" class=\"wp-image-3207\" width=\"667\" height=\"311\"\/><\/noscript><\/figure>\n\n\n\n<p>Aprende desarrollo web gratis. Con Code Academy ir\u00e1s avanzando de lo b\u00e1sico a lo complejo, con ejercicios aplicados cuando ya hayas ganado algo de experiencia. Inscr\u00edbete <a href=\"https:\/\/www.codecademy.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Practicar<\/h2>\n\n\n\n<p>Una vez que sabes las bases, nada debe detenerte. El desarrollo web es una de esas habilidades que necesitas poner en pr\u00e1ctica constantemente, como tocar un instrumento. Lo mejor es que dediques tiempo a desarrollar proyectos y a probar cosas nuevas. Aqu\u00ed te doy algunos sitios que te pueden ayudar a mejorar o a ayudarte a pensar fuera de la caja.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mejorar tus habilidades<\/h3>\n\n\n\n<p>Si lo que quieres es afinar tus habilidades, puedes recurrir a cursos especializados. Podr\u00e1s saltarte lo b\u00e1sico e ir directamente a lo que quieres aprender para completar tus conocimientos.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Plural Sight<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-155917-1024x459-1.jpg\" alt=\"Plural Sight p\u00e1gina principal\" class=\"wp-image-3208 lazyload\" width=\"658\" height=\"294\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 658px; --smush-placeholder-aspect-ratio: 658\/294;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-155917-1024x459-1.jpg\" alt=\"Plural Sight p\u00e1gina principal\" class=\"wp-image-3208\" width=\"658\" height=\"294\"\/><\/noscript><\/figure>\n\n\n\n<p>En este sitio puedes hacer un test para identificar huecos en tus conocimientos. As\u00ed puedes concentrarte espec\u00edficamente en lo que te falta por aprender. Comienza <a href=\"https:\/\/www.pluralsight.com\/product\/skills?utm_term=&amp;pslp=product-skills&amp;aid=701j0000002BGheAAG&amp;promo=&amp;utm_source=branded&amp;utm_medium=digital_paid_search_google&amp;utm_campaign=NASA_MEX_Brand_E&amp;utm_content=&amp;cq_cmp=230435358&amp;gclid=CjwKCAjwuvmHBhAxEiwAWAYj-JWuboZKtuQBcBi2dHmiaboncIMPs2zsg1ZW-tHUslmdTnSsNtT_phoC0ToQAvD_BwE\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exercism<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-1024x469.png\" alt=\"Exercism p\u00e1gina principal\" class=\"wp-image-3209 lazyload\" width=\"628\" height=\"287\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-1024x469.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-300x137.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-768x352.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014.png 1347w\" data-sizes=\"auto, (max-width: 628px) 100vw, 628px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 628px; --smush-placeholder-aspect-ratio: 628\/287;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-1024x469.png\" alt=\"Exercism p\u00e1gina principal\" class=\"wp-image-3209\" width=\"628\" height=\"287\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-1024x469.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-300x137.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014-768x352.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160014.png 1347w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/noscript><\/figure>\n\n\n\n<p>Para practicar programaci\u00f3n, no hay como Exercism. Este es un recurso abierto hecho por desarrolladores para desarrolladores. Trabaja por proyecto y recibe tutor\u00edas gratuitas. Comienza <a href=\"https:\/\/exercism.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">MDN Web Codes<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-1024x457.png\" alt=\"MDN web codes p\u00e1gina principal\" class=\"wp-image-3210 lazyload\" width=\"690\" height=\"307\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-1024x457.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-300x134.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-768x343.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226.png 1342w\" data-sizes=\"auto, (max-width: 690px) 100vw, 690px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 690px; --smush-placeholder-aspect-ratio: 690\/307;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-1024x457.png\" alt=\"MDN web codes p\u00e1gina principal\" class=\"wp-image-3210\" width=\"690\" height=\"307\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-1024x457.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-300x134.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226-768x343.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160226.png 1342w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/noscript><\/figure>\n\n\n\n<p>Creada por una comunidad abierta de desarrolladores web, MDN Web Codes es perfecta para mejorar en lo espec\u00edfico. Puedes buscar s\u00f3lo lo que necesitas saber, aprender o consultar. Se mantiene bien actualizada entonces siempre estar\u00e1s al d\u00eda. Adem\u00e1s puedes obtener explicaciones pragm\u00e1ticas de profesionales. Pru\u00e9bala <a href=\"https:\/\/developer.mozilla.org\/es\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Retar tus habilidades<\/h3>\n\n\n\n<p>Hay un momento en el aprendizaje de cualquier cosa en el que sientes que lo sabes todo. Cuando alcances ese punto en desarrollo web, es momento de tomar retos. Estas p\u00e1ginas ofrecen retos que te ayudar\u00e1n a pensar fuera de la caja y a aprender de otros desarrolladores.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code Wars<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160824-1024x459.jpg\" alt=\"Code Wars p\u00e1gina principal\" class=\"wp-image-3211 lazyload\" width=\"635\" height=\"284\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 635px; --smush-placeholder-aspect-ratio: 635\/284;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-160824-1024x459.jpg\" alt=\"Code Wars p\u00e1gina principal\" class=\"wp-image-3211\" width=\"635\" height=\"284\"\/><\/noscript><\/figure>\n\n\n\n<p>Este es un sitio de retos de programaci\u00f3n. El lema es: Logra maestr\u00eda a trav\u00e9s de retos. Puedes elegir el programa y lenguaje de programaci\u00f3n que desees, as\u00ed siempre mejorar\u00e1s en lo que te interesa. Una vez que completas el reto puedes comparar tu soluci\u00f3n con la del resto de la comunidad. Te ayuda a aprender desarrollo web a trav\u00e9s de la experiencia. Comienza <a href=\"https:\/\/www.codewars.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Free Code Camp<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-1024x464.png\" alt=\"Free code camp\" class=\"wp-image-3212 lazyload\" width=\"620\" height=\"280\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-1024x464.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-768x348.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013.png 1341w\" data-sizes=\"auto, (max-width: 620px) 100vw, 620px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 620px; --smush-placeholder-aspect-ratio: 620\/280;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-1024x464.png\" alt=\"Free code camp\" class=\"wp-image-3212\" width=\"620\" height=\"280\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-1024x464.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-300x136.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013-768x348.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-161013.png 1341w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/noscript><\/figure>\n\n\n\n<p>La programaci\u00f3n nunca ha sido tan accesible como lo es gracias a Free Code Camp. Como su nombre lo indica es gratuita y adem\u00e1s est\u00e1 conformada de una gran comunidad. La idea es aprender a trav\u00e9s de retos HTML5 y CSS3. Una s\u00faper p\u00e1gina para aprender desarrollo web. Comienza <a href=\"https:\/\/www.freecodecamp.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Tener Herramientas a la mano<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Code Editor<\/h3>\n\n\n\n<p>As\u00ed como existen los procesadores de texto, existen los editores de c\u00f3digo. Un editor de c\u00f3digo te permite escribir y marcar el c\u00f3digo que har\u00e1 realidad tu sitio web. Familiarizarte con ellos es importante si vas iniciando como desarrollador.<\/p>\n\n\n\n<p>Pueden tratarse de aplicaciones individuales o una caracter\u00edstica incluida de un IDE (Entorno de Desarrollo Integrado). En cualquier caso, es el espacio en el que escribir\u00e1s el c\u00f3digo.<\/p>\n\n\n\n<p>Una opci\u00f3n para empezar es Visual Studio Code. Es una opci\u00f3n gratuita, de c\u00f3digo abierto, que adem\u00e1s es compatible con Windows, Linux y macOS. Est\u00e1n especializados en el dise\u00f1o de sitios modernos y en optimizar al proceso de creaci\u00f3n as\u00ed como de depuraci\u00f3n de sitios web. Pru\u00e9balo <a href=\"https:\/\/www.google.com\/search?q=VS+code&amp;oq=VS+code&amp;aqs=chrome..69i57.2799j0j9&amp;sourceid=chrome&amp;ie=UTF-8\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-1024x471.png\" alt=\"VS Code p\u00e1gina principal\" class=\"wp-image-3213 lazyload\" data-srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-1024x471.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-300x138.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-768x353.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206.png 1332w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/471;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-1024x471.png\" alt=\"VS Code p\u00e1gina principal\" class=\"wp-image-3213\" srcset=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-1024x471.png 1024w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-300x138.png 300w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206-768x353.png 768w, https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163206.png 1332w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Package Managers<\/h3>\n\n\n\n<p>Escribir c\u00f3digo puede ser muy cansado. Pero existen muchas herramientas que lo hacen m\u00e1s f\u00e1cil. Debes recordar que no eres la primera persona en programar, ya existen c\u00f3digos escritos para ciertas cosas. Puedes brincarte el pasar por procesos largos de prueba de error si conoces recursos que ya han compilado l\u00edneas de c\u00f3digo usuales.<\/p>\n\n\n\n<p>Una de estas herramientas son los Package Managers (Sistemas de Gesti\u00f3n de Paquetes). Estos sirven para automatizar los procesos de instalaci\u00f3n o actualizaci\u00f3n de software. Permiten a los desarrolladores instalar f\u00e1cilmente paquetes en el proyecto en el que est\u00e9n trabajando.<\/p>\n\n\n\n<p>El Package Manager m\u00e1s utilizado es npm. Es gratis y de c\u00f3digo abierto. Es una muy buena opci\u00f3n si est\u00e1s empezando para familiarizarte con esta herramienta. Pru\u00e9bala <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163253-1024x448.jpg\" alt=\"npm p\u00e1gina principal\" class=\"wp-image-3214 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/448;\" \/><noscript><img decoding=\"async\" src=\"https:\/\/giovanirodriguez.dev\/wp-content\/uploads\/2021\/07\/Captura-de-pantalla-2021-07-26-163253-1024x448.jpg\" alt=\"npm p\u00e1gina principal\" class=\"wp-image-3214\"\/><\/noscript><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Herramientas y Extensiones<\/h3>\n\n\n\n<p>En posts anteriores ya habl\u00e9 de algunas herramientas para desarrolladores. Hay herramientas para depurar, para editar, para copiar y pegar pedazos de c\u00f3digo... Con\u00f3celas en el top <a href=\"https:\/\/giovanirodriguez.dev\/es\/10-increibles-herramientas-para-desarrolladores-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">10 Incre\u00edbles Herramientas para Desarrolladores Web<\/a>. Tambi\u00e9n hay extensiones del navegador Google Chrome que son la mano derecha de muchos programadores. Ent\u00e9rate en: <a href=\"https:\/\/giovanirodriguez.dev\/es\/extensiones-utiles-de-google-chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Extensiones \u00datiles de Google Chrome<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Un \u00faltimo consejo para principiantes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Vocabulario para aprender desarrollo web<\/h3>\n\n\n\n<p>M\u00e1s all\u00e1 de saber programar y entender lenguajes de programaci\u00f3n, el mundo del desarrollo web tiene su propio idioma. \u00bfQu\u00e9 quiere decir HTML? \u00bfO AWS? \u00bfSabes qu\u00e9 es CSS? \u00bfO si quiera HTTP o WWW? Bueno, quiz\u00e1s esa \u00faltima s\u00ed. Pero a veces, en los tutoriales sobre programaci\u00f3n web se aluden a muchas siglas o palabras que s\u00f3lo hacen sentido en el contexto de la programaci\u00f3n. Si tienes duda de alguna, puedes consultar este <a href=\"https:\/\/disenowebakus.net\/glosario-diseno-web.php\" target=\"_blank\" rel=\"noreferrer noopener\">glosario<\/a>. Con el tiempo te acostumbrar\u00e1s a todas las abreviaturas y siglas y no lo necesitar\u00e1s m\u00e1s.<\/p>\n\n\n\n<p>Por otra parte, no est\u00e1 dem\u00e1s aprender ingl\u00e9s. Hay muchos m\u00e1s recursos, tutoriales y videos en ingl\u00e9s. Adem\u00e1s de que muchos de los t\u00e9rminos con los que te topar\u00e1s estar\u00e1n en ingl\u00e9s. Te sugiero que inviertas algo de tiempo en ello. En mi art\u00edculo <a href=\"https:\/\/giovanirodriguez.dev\/es\/tips-para-freelancers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tips para Freelancers<\/a> ya hablaba un poco de las ventajas de saber este idioma y recomiendo apps para aprender o practicar ingl\u00e9s.<\/p>\n\n\n\n<p>Hay mucho por aprender cuando se trata de desarrollo web. Sin embargo, no es imposible. Espero que esta gu\u00eda te haya dado una buena orientaci\u00f3n para empezar y que los cursos y herramientas te sean muy \u00fatiles.<\/p>\n\n\n\n<p>Si quieres seguir aprendiendo m\u00e1s, te invito a leer:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/giovanirodriguez.dev\/es\/como-hacer-un-sitio-web-para-mi-negocio\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u00bfC\u00f3mo hacer un sitio web para mi negocio?<\/a><\/li><li><a href=\"https:\/\/giovanirodriguez.dev\/es\/como-mejorar-el-seo-de-tu-pagina-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u00bfC\u00f3mo mejorar el SEO de tu p\u00e1gina web?<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Aprender desarrollo web puede ser intimidante pero no imposible. Conoce lo b\u00e1sico para empezar adem\u00e1s de cursos y sitios en l\u00ednea de ayuda. <\/p>\n","protected":false},"author":6,"featured_media":3238,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[339],"tags":[356,366],"class_list":["post-3202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-como-hacerlo","tag-aprender","tag-desarrollo-web"],"_links":{"self":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/3202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/comments?post=3202"}],"version-history":[{"count":1,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/3202\/revisions"}],"predecessor-version":[{"id":6699,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/3202\/revisions\/6699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media\/3238"}],"wp:attachment":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media?parent=3202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/categories?post=3202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/tags?post=3202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}