Todo lo que necesitas aprender sobre frontend desde cero


El frontend es el arte de crear páginas webs, en concreto de la parte visual de la web. La parte de la base de datos y de la lógica interna de negocio se hace en el
Backend
.
Para empezar, si nunca has hecho una web, te recomiendo que eches un vistazo a Introducción al desarrollo web en el qué cuento un poco con más detalle qué es esto de frontend y backend y sobre todo qué partes existen a la hora de crear una web.
Lo siguiente es preparar el Entorno de desarrollo para frontend, es decir, instalar todas las herramientas que necesitas en tu ordenador para desarrollar páginas webs.
Lo siguiente es ponerte a aprender los 3 lenguajes principales que existen para crear páginas webs:
-
HTML
- Con el que se crea el contenido de las páginas web (textos, imágenes, estructura, elementos…)
-
CSS
- Este lenguaje sirve para aplicar estilos (colores, tamaños, sombras, colocación de los elementos, etc)
- Javascript - Javascript sirve para que las webs tengan elementos interactivos (qué ocurre al hacer click, cargar datos, arrastrar, formularios y más cosas)
Si ya sabes usar estos elementos te recomiendo que mires los artículos de Git. Git sirve para poder tener un control de versiones (poder volver atrás en caso de que algo no funcione) y también sirve para integrar y sincronizar cambios entre tus compañeros o compañeras.
En el artículo de Acrónimos y tecnicismos del desarrollo web recopilo una serie de definiciones que te van a a venir muy bien para tu aprendizaje.
Otro elemento muy importante en el mundo Frontend es el del gestor NPM. Con NPM vas a poder descargar librerías y utilidades creadas por otros usuarios para que no tengas que crear todo desde 0.
Lo siguiente es aprender una de las librerías más usadas en el sector. Te recomiendo empezar con VueJS por su simplicidad, pero si quieres hacer una web muy grande y compleja puedes mirar también Angular, que usa como lenguaje
Typescript
, una extensión del lenguaje de Javascript que añade tipos a las variables.
También puedes echar un ojo a estos artículos, que no son tan importates pero te puedes ayudar también:
Otros artículos
Artículos avanzados
- Introducción a ThreeJS - Librería para crear elementos y entornos 3D.
Artículos que mencionan a este:
Roadmap para aprender VueJS desde 0 y en español
VueJS es un framework para Javascript para crear páginas webs completas. Al estilo React pero mucho más sencillo de usar
Roadmap completo para aprender Angular desde 0 en español
En esta guía aprenderás todo lo que necesitas para aprender Angular desde 0. Recopilación de todos los conceptos necesarios para convertirte en desarrollador profesional con Angular
Introducción al desarrollo web para principiantes
Artículo para gente que está empezando en el desarrollo web y quiere saber las partes que lo componen y algunos lenguajes muy usados
Entorno de desarrollo para frontend
Con esta guía vas a aprender a configurar tu propio entorno de desarrollo diseñado para poder crear páginas webs con comodidad
Acrónimos y tecnicismos del desarrollo web que deberías conocer
Guía con definiciones sobre acrónimos y palabras tećnicas (muchas en inglés) que se usan en mundo del desarrollo web y que deberías conocer
¿Qué es Javascript? ¿Para qué sirve?
Apredemos qué es y para que nos puede servir aprender Javascript, además resolvemos el misterio de por qué lo llamaron Javascript.
Cómo crear tu primer código en Javascript. Hello world!
Aprende a crear un hola mundo (hello world) en Javascript para iniciarte en este lenguaje para programar páginas web