Que necesito para empezar en el Desarrollo Web

Que necesito para empezar en el Desarrollo Web

Publicado hace 3 meses

@Cristhian

Muchas personas que están empezando en el mundo del desarrollo web específicamente, no tienen idea de que necesitan aprender, qué ruta seguir para que sea lo más óptimo en su aprendizaje, como saber si van por el buen camino. Bueno, en este artículo daré algunos puntos y consejos que aprendí desde mi propia experiencia, hoy me doy cuenta de los errores que cometí y las cosas que pude haber hecho mejor.

Te puedes considerar que ya estás en el mundo del desarrollo web, en el momento de que ya sabes HTML y CSS. Pero esto no significa que ya eres un ingeniero en sistemas, a pesar de que sé algunas cosas, siento que me falta mucho por aprender.

Primero quiero ser honesto contigo, aunque lo mínimo que se necesita para desarrollar un sitio web es HTML, CSS y JS esto no te garantiza que consigas un trabajo en alguna agencia o empresa grande, puede que incluso no consigas trabajo con estas tres cosas en el mundo del desarrollo web. Mi consejo inicial, si tu objetivo principal es ganar dinero, ya estás empezando mal.

Si realmente necesitas dinero te recomiendo encontrar un trabajo que te pague lo suficiente para pagar tus cuentas y dediques las horas libres a estudiar, esto lo hice yo por un buen tiempo. A mi no me costó mucho porque soy de las personas que no salen de su casa, y desde siempre me gusto desarrollar y estar en la PC. 🤓 

Más adelante diré algunas cosas para que sepas cuándo estarás listo para buscar tu primer trabajo y en cuanto tiempo aproximadamente puedes empezar.

Aquí te explicaré lo que necesitas en HTML, CSS y JS para empezar en este mundo, además, de algunas habilidades que necesitarás para complementar tu perfil inicial.

Tabla de Contenido

¿Qué necesito aprender de HTML5?

HTML es un lenguaje de marcado, esto es lo que define la estructura inicial del sitio web y le da información al navegador sobre qué datos procesar. Voy a tratar de resumir mucho cada uno de los puntos, mi intención es darte las herramientas y los tips más concretos. ✌

Este es un sitio web muy bueno para encontrar información más completa sobre desarrollo web https://www.w3schools.com/html/ con HTML debes siempre mantener una estructura semántica que quieres decir esto, si ya tienes algo de experiencia con las etiquetas HTML conocerás la etiqueta <div></div> estos sirven para contener componentes de nuestros sitio, por ejemplo el header, un card donde mostramos un post, un contenido, una lista. Bueno, lo importante es empezar a utilizar las etiquetas que te ofrece HTML5 para cada propósito, si quieres hacer un header utiliza la etiqueta <header></header> si necesitas una navegación usa la etiqueta <nav></nav> y así puedes encontrar como el <section></section> <article></article> <main></main> <footer></footer>. Encuentra más información sobre HTML semántico.

También algo importante son las etiquetas del Head, estas son las que le da información al navegador de que procesar como el título de la página, la descripción, los enlaces de estilos y otras cosas importantes.

Por último la accesibilidad en un sitio web, para mi es sumamente importante para todo sitio web y es algo que desde tu inicios ya debes manejar, lo ideal es que cualquier persona aunque tenga alguna discapacidad pueda estar en tu sitio web sin problemas. Hay atributos que se pueden agregar a la etiquetas HTML para darle información a lectores de pantallas para personas con problemas visuales.

Entonces lo más importante para mi que debes conocer para tener una buena estructura HTML es:

  • Crear una estructura semántica con las nuevas etiquetas HTML5.
  • Utilizar las etiquetas metas y las importantes que van dentro del <head></head>.
  • Mantener tu sitio web accesible a todo el público.

Los puntos más importantes para empezar con CSS3

Ok, ya tenemos nuestras estructura HTML, está correcta, cumple con todo lo que nos piden para que sea una estructura óptima, pero se ve horrible 😥, aquí es donde entra CSS según MDN Web Docs~CSS (Hojas de Estilo en Cascada) es el código que usas para dar estilo a tu página web. CSS Básico te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?~

Hay personas que se especializan solamente en CSS, el mundo de crear estilos es bastante grande y te permite un montón de posibilidades en la web. Pero para empezar te recomendaría dominar lo siguientes puntos:

  • Custom Properties. Son las variables en CSS, si no sabes que es una variable es un lugar donde te permite almacenar un valor y utilizarlos en varias partes, y si necesitas cambiar el valor solo lo hace en la variable base y este se replicará en todo donde lo hayas escrito.
  • Selectores de CSS. Hay varias técnicas que te ayudan a mantener un orden al momento de crear tus estilos, te recomendaría la técnica BEM, una vez que ya entiendas lo básico de CSS puede investigar sobre BEM notarás los beneficios.
  • Modelo de Caja. Aprende sobre cómo se comportan los elementos, los margins, los paddings.
  • Posicionamiento.
  • Flexbox y Grid
  • Diseño responsive. Actualmente la mayoría de las visitas se hacen a través del teléfono, entonces mantener un diseño que se adapte a los dispositivos es sumamente importante, te recomiendo siempre empezar por mobile first, esto significa que empiezas a crear los estilos de tu página desde la vista de teléfono, esto te da muchos beneficios donde el principal es que luego para adaptarlo a vista de escritorio será mucho más fácil.

Siempre te recomendare al menos tu primer año, utilizar todo desde 0 y crearlo por tu cuenta, para que te adaptes a como se llama cada cosa, como se escribe como funciona y de ahí empezar con algún framework de estilos como Bootstrap y Tailwind CSS que te hará la vida más fácil al momento de hacer estilos.

También existen los preprocesadores como SASS que realmente te dan varias herramientas para escribir código CSS más óptimo. Pero una vez te recomiendo revisar esto último, una vez hayas entendido lo básico de CSS.

Ahora toca JavaScript

Javascript, seguramente será lo más complicado que tengas por dominar cuando estés empezando. En la actualidad JavaScript se puede utilizar para crear muchas cosas. Sitios web, aplicaciones web, aplicaciones móviles, aplicaciones de escritorio, incluso juegos. Pero bueno como estás empezando te explicaré un poco lo que necesitas aprender cuando estés empezando JavaScript para tu primer sitio web.

Antes de darte los puntos con Javascript puedes hacer tu sitio más interactivo con el usuario, esto mejorará mucho la experiencia que es un factor esencial en el desarrollo web. A nadie le gusta estar escribiendo un formulario y que este no de ninguna información sobre si estamos llenando bien los campos o no, si hay algún error y el sitio web no nos informa. Javascript hace esto posible, te permite interactuar con cualquier elemento en su sitio web, desde que un usuario da clic en un botón, hasta obtener información de la ubicación actual del usuario y mostrar información referente a su país o ciudad. Esto es lo que hace un sitio web tan genial y poderoso.

Para empezar a utilizar Javascript te recomiendo empezar con lo siguiente y si es posible dominar cada punto hasta tener un buen dominio de cada uno:

  • Fundamentos de la programación. Parece algo complicado, pero esto te ayudará a entender muchas cosas de cómo funcionan los software y cómo funciona en general el internet. Entenderás cosas como que es una variable, una condición, un ciclo (loop), consumo de datos, entre otras cosas importantes.
  • Manejo del DOM. En términos sencillos el DOM es cada elemento que conforma un sitio web, botones, enlaces, contenedores. Acceder a los elementos del DOM te permitirá poder utilizarlo y crear cosas con ellos: Mostrar un mensaje de error, eliminar un elemento de la página en alguna situación en particular y muchas cosas.
  • Evento en Javascript. Los eventos podrían decir cuales son las acciones que quieres que haga cada elemento o en qué momento debe hacerlo. Hay eventos como el del Click que ejecuta una acción al pulsar un botón, o el evento de Submit que le indica a un formulario cuando debe mandar la información o validar los datos del formulario, hay muchos más, para ver cuando se pulsa X tecla o cuando se doble clic.
  • JSON (JavaScript Object Notation). Se trata de un formato para guardar e intercambiar información que cualquier persona pueda leer. Los archivos json contienen solo texto y usan la extensión .json.

Hay elementos más avanzados como las peticiones HTTP asíncronas (AJAX) con XMLHttpRequest (XHR), aunque actualmente es más usado Fetch. Entonces en términos simples te permiten hacer solicitudes a un servidor a través de un enlace y este te devuelve un JSON con los datos solicitados.

Consejos

Puede parecer poco al principio pero creeme, empezar con pequeñas cosas te ayudará a mantener un ritmo constante e ir mejorando poco a poco, esto simplemente son algunos consejos de como empezar con tu primera web. Puedes obtener más en los siguientes enlaces:

Lo que te puedo decir que tiene más valor y es algo que sentí también cuando empecé. Es que no sientas vergüenza de buscar en Google o cualquier buscador de tu preferencia, sobre algo que no sepas como hacer. Ten en cuenta que hay cosas que ya hubo gente que se rompió la cabeza haciéndolo y ya está ahí listo para que tú lo uses, aunque no hagas lo típico de copiar y pegar, trata de entender el código que lo hace funcionar y adáptalo a tu necesidad, esto te ayudará a aprender adaptar las cosas en el mundo real y mejorar tu lógica, cualquier requerimiento puede tener muchas formas de resolverlos.

Puedes utilizar búsquedas como “Como hacer…”, “Que necesito para…”, “Como formatear fecha con js” y cosas así puedes intentar en inglés o incluso copiar el error en el buscador y te darán muchos resultados, usa todas las herramientas que tengas a la mano para hacer tu trabajo más eficiente.

Ya sé lo básico, ¿Ahora que hago?

Practicar, practicar mucho puedes crear sitios web sencillos donde pongas en prácticas los puntos hablados aquí. Lo que yo suelo hacer es entrar en estos sitios webs de diseño y empezar a maquetarlo según lo que veo, esto te ayudará mucho a trabajar el pixel perfect que en el mundo real es algo que piden muchas agencias, por lo general que enviaran un archivo en Photoshop o Figma y te pedirán pasarlo a código. Respeta las medidas del diseño, si un botón tiene un ancho de 100px hazlo con 100px. 

Puedes usar Pinterest o Behance para buscar diseños fáciles y practicar, luego ir creando diseños más complejos. Practica mucho y te recomiendo al menos 1 hora al día. También existen muchas páginas para practicar tu código Javascript, creando pequeños programas con especificaciones sencillas.

Te dejaré una lista de donde encontrar buenos ejercicios para practicar.

  • FrontendMentor.io hay muchos ejercicios de todos los niveles, algunos gratis y otros de pago.
  • En Lapa Ninja puedes encontrar muchos ejemplos de diseños donde puedes aplicar tus conocimientos de HTML5 y CSS3. Siempre guarda todo lo que hagas, ya te contare por que.
  • Dribbble igual que Lapa Ninja puedes conseguir muchos diseños interesantes.
  • En HakerRank puedes encontrar múltiples ejercicios de programación, esto es importante para mejorar tu lógica. También existe CodeWars.com para hacer ejercicios de programación.

También hay pequeños juegos como Grid Garden que te ayudan a mejorar tus habilidades de CSS, también Flexbox Froggy para mejorar tus habilidades de Flex box y Grid. Existen infinidades de plataformas y aplicaciones para practicar.

Ya practique bastante. Ahora, ¿Dónde están los billetes?

Te recomendaría mínimo estar 1 año practicando estas tres tecnologías HTML, CSS y JS. Aunque tengo malas noticias, con esto es poco probable que te contraten en alguna agencia, suelen pedir mucho más para poder contratar, muchos te piden mínimo manejar algún framework o librería, los más populares para JS son ReactJS, Angular y Vue.

Como te mencione arriba, si necesitas dinero te aconsejo tener un trabajo que te pague y puedas pagar tus deudas y al menos los primeros años invertir tu tiempo en aprender. Luego que sepas HTML, CSS y JS más un Framework de CSS como Bootstrap o Tailwind, además, un Framework de JS como ReactJS, Angular o Vue ahi puedes empezar a postular a empresas.

Pero espera! puedes hacer dinero con estos conocimientos que ya tienes. Hay muchas personas que están interesadas en tener un sitio donde mostrar la información de su empresa, puedes cobrar desde 150$ por un página web estática, ejemplo 1 sola página con toda la información de la empresa y con el contenido que no se pueda editar. 

¿Adivina que? todos los diseños que ya has hecho anteriormente durante tu práctica puedes utilizarlos ! 🤩 por esto es importante que guardes y le dediques un buen trabajo a estas prácticas más adelante te pueden servir como plantillas para algún cliente, solo modificas los colores y los texto y listo, una página web profesional.

Extra: si sabes desarrollar temas de wordpress o puedes aprenderlo después de aprender estas tres tecnologías y simplemente adaptar estas plantillas a wordpress para que se puedan administrar, y así puedes aumentar el valor de tu trabajo y puedes cobrar más por un sitio administrable. Desde 350$ dependiendo de tu país.

También existen plataformas para Freelance, pero la verdad no puedo decir mucho sobre esto. No he tenido mucha suerte 😥 la única plataforma que puedo recomendar si eres de Perú es Faunders.pe. Igual tu puedes intentarlo no tienes que tener la misma suerte que yo, éxitos! 💪🏼

Últimos consejos que te doy

Bueno realmente siento que en este mundo, nunca dejaras de aprender, así que desde una sacate de la cabeza de que llegaras a un tope. Siempre práctica y mantente aprendiendo sobre tu tecnología.

Lo mínimo que te recomiendo que debes estar es 1 año practicando practicando todo lo que te he contado aquí, y ahí intentar postular a trabajos.

Algo que si o si debes aprender durante tu proceso de aprendizaje es GIT, realmente no quiero explicarlo mucho aquí porque es bastante extenso. Pero te permite administrar tus proyectos de manera sencilla y trabajar en conjunto con otros programadores. Esto te lo pedirán casi el 100% de las veces a la hora de buscar un trabajo.

Aprender a subir tus proyectos a servidores gratis, hay muchos que te dan límite de uso de manera gratuita y son perfectos para subir los proyectos y mostrarselo a la gente. Yo uso mucho para mostrar las demos a mis posibles clientes.

Algunos que te recomiendo que he usado son Repl.it y Netlify.

Hay otros servidores de pago donde puedes subir tu sitio web personal y así te verás más profesional, muchos de estos servicios tienen servicio de afiliado, que quiere decir esto que con tu enlace de afiliado si alguien compra un servicio ganarás dinero. Que suelo hacer yo cuando tengo un cliente como no ofrezco servicio de Hosting o Dominio, les envío mi enlace de afiliado y les explico que servicio contratar que se adapte a lo que necesita y cómo hacerlo y ahí también ganó dinero extra. Los servicios que yo utilizo son Hostinger y SiteGround si quieres apoyarme y necesitas un hosting bueno usa cualquiera de mis enlaces. 👀

Realmente no soy un creador de contenido, intentare mejorar este artículo e ir creando más que puedan ayudar. Si tienes alguna consulta puedes escribirme sin problemas en mis redes sociales Instagram o Twitter si esta en mis posibilidades y conocimiento te ayudare con todo gusto.

Happy Coding~ 😎