Curso de HTML5, CSS y JavaScript
En este curso dominarás tres de los lenguajes más utilizados para la creación de sitios web: HTML5, CSS y JavaScript. Aprenderás a crear sitios web dinámicos e interactivos.
Metodología
Aprendizaje a través de la práctica
Adquiere conocimientos practicando ejercicios que se usan en proyectos reales.
Construye un portafolio
Aprenderás con el desarrollo de proyectos que prepararás junto a los profesores para tu portafolio.
Experiencia a medida y seguimiento personalizado
Tendrás asignado un mentor desde el comienzo del curso para que te ayude en todo lo que necesites.
Profesores expertos de verdad
Cada profe es expertos en su área de especialización, para que aprendas las mejores técnicas, flujos de trabajo y trucos de cada uno de ellos.
¿A quién va dirigido?
Aspirantes a Frontend
Si quieres dar un giro completo a tu carrera y trabajar en el sector digital como Web Designer o Front-end Developer.
Desarrollo profesional
Si ya trabajas como Frontend, Backend o product designer.
Emprendedores
Si tienes un proyecto personal de producto digital y quieres llevarlo a la realidad pasándolo a código.
Qué aprenderás en este curso
Adquiere las habilidades necesarias para desarrollar una aplicación web desde cero con HTML5, CSS y JavaScript
Equipos de desarrollo
Aprenderás a comunicarte con el equipo de desarrollo y a como debemos recibir/entregar los diseños.
Figma
Aprenderá a como interpretar los diseños en Figma.
Estructurando nuestra aplicación web
Descubre las maneras más eficientes de cómo estructurar una aplicación web desde cero con HTML5.
CSS3
Con CSS3 aprenderemos a seleccionar etiquetas de nuestro HTML5 y le diremos como deberán verse en nuestro navegador.
JavaScript
Con JavaScript haremos que nuestro sitio web sea dinámico.
Nomenclatura BEM
Aprenderás una de las nomenclaturas más utilizadas en el desarrollo web: BEM (Block Element Modifier)
Flexbox y Grid CSS
Aprenderás crear layout de forma eficiente utilizando Flexbox y Grid CSS
Animaciones con CSS3
Aprenderás a crear animaciones web con CSS3
SASS
Aprenderás uno de los preprocesadores más utilizados hoy en día en el desarrollo web, que nos permitirá ahorrar tiempo y reutilizar reglas CSS
Responsive Web Design
Aprenderás a que el diseño se adapte a todos los dispositivos (Desktop, tablet y Mobile)
Aprende todo lo que demandan las empresas
- 1.
¿Qué es HTML?
- 2.
DOM ¿Qué es?
- 3.
Etiquetas
- 4.
Atributos
- 5.
Semántica
- 6.
Semántica del contenido
- 7.
Enlaces y Rutas
- 9.
Formularios
- 1.
¿Qué es CSS?
- 2.
3 formas de agregar CSS
- 3.
Reglas CSS
- 4.
Selectores
- 5.
User Agent Styles ¿Qué es?
- 6.
Cascada, Especificidad y Herencia
- 7.
Tipos de Display
- 8.
Valores y Unidades
- 9.
Pseudo Clases y estilo de texto
- 10.
Variables en CSS
- 11.
Carga de fuentes personalizas
- 12.
Carga de fuentes de Goolges Fonts
- 13.
Backgrounds
- 14.
Pseudo Elementos
- 15.
Modelo de caja
- Margin
- Padding
- Border
- Posiciones
- Box-sizing
- 16.
Propiedades y valores lógicos
- 16.
Depurar CSS
- 16.
Flex-box
- 16.
Grid CSS
- 18.
Buenas prácticas
- 1.
¿Qué es responsive web design?
- 2.
Media queries:
- ¿Que és?
- Estructura
- Formas de incluir media-queries
- Medidas standars (breakpoints)
- 1.
¿Qué es SASS?
- 2.
Instalación de SASS
- 3.
Sintaxis de SASS
- 4.
Manejo de variables con SASS
- 1.
Conociendo JavaScript:
- Un poco de historia
- ECMAScript (ES)
- ¿Qué versión de ECMAScript uso?
- 2.
Chrome y Consola: tus aliados para debuggear
- Console de JavaScript
- ¿Estilos en la consola?
- ¿Podemos obviar console.log()?
- Chrome Dev Tools: características importantes
- Elements (elementos)
- 3.
Agregando JavaScript en HTML:
- JavaScript en línea
- JavaScript en archivo externo
- Importancia de colocar etiqueta script
- Analizando etiqueta script
- ¿Cómo se descargan nuestros scripts?
- Carga de módulos JavaScript
- 4.
Variables:
- ¿Qué es una variable?
- VAR
- LET
- CONST
- 5.
Buenas prácticas nombrando identificadores
- Consejos en el nombrando de identificadores
- Convención estilos de escritura
- 6.
Tipos de datos
- Tipo dinámico
- Datos tipo primitivo (String, Number, BigInt, Boolean , undefined, null, Symbol)
- Datos tipo objeto (Objetos, Arrays, Funciones)
- 7.
Comentarios en el código
- Consejos para comentar código
- Comentarios en línea
- Comentarios multilínea o en bloque
- 8.
Operadores
- Operadores aritméticos
- Operadores de asignación
- Operadores comparacion
- Operadores lógicos
- Operadores type
- Operadores unarios
- Operadores binarios
- Operadores de bits
- 9.
Coerción: la cosa se pone interesante
- Coerción implícita o explícita
- Tipos de conversión
- Coerción en cadenas
- Coerción booleana
- Coerción numérica
- NaN y Batman
- Coerción en objetos
- Sitios de interés sobre coerción
- 10.
Modo estricto
- 11.
¿Qué es el scope?
- Scope global
- Scope local
- Scope de función
- Scope de bloque
- 12.
¿Qué diablos es el hoisting?:
- Fase de creación
- Pila de ejecución
- Pila de ejecución de forma visual
- 13.
Estructuras de control
- Estructuras condicionales (if, if/else, if/else if, Operador condicional ternario, switch, object literals)
- Estructuras de repetición (for, while, do...while, for...in, for..of, forEach)
- Estructuras de control de errores (throw, try...catch...finally)
- 14.
Strings
- Acceder a carácteres
- Comparar strings
- Longitud de un string
- Métodos de String
- 15.
RegExp
- Creando una expresión regular
- Flags
- Clases básicas
- Conjunto de carácteres o alternativas
- Rangos
- Anchors
- Cuantificadores
- Métodos con RegExp
- Métodos con String
- Sitios de interés
- 16.
Fechas
- Date
- Tiempo UNIX
- Obtener información fechas
- Modificar fechas
- Representación fechas
- UTC y zonas horarias
- 17.
Números
- toString()
- toExponential()
- toFixed()
- toPrecision()
- valueOf
- Transformando variables a números
- Number()
- parseInt()
- parseFloat()
- Propiedades de números
- Números aleatorios
- 18.
Arrays
- Inicializar un array
- Acceder a los elementos
- Añadir o eliminar elementos
- Creación de arrays
- Búsqueda y comprobación
- Modificación de arrays
- Ordenaciones
- Métodos array functions (forEach(), every, some, map, filter, filterIndex, find, reduce, reduceRight)
- 19.
Objetos
- Inicialización y asignación
- Objetos anidados
- Objetos con funciones
- Métodos de objetos
- 20.
Funciones
- Declarar y ejecutar
- Parámetros
- Parámetros por defecto
- Devolución de valores
- Funciones anónimas
- Funciones autoejecutables o IIFE
- ¿Qué es un callback?
- Callback hell
- Arrow functions
- Arrow functions y this
- 21.
Clases
- ¿Qué es una clase?
- Declarando una clase
- Cuerpo de la clase y métodos
- Constructor
- Métodos
- Métodos estáticos
- Ampliar clase
- 22.
This es la diferencia
- ¿Qué es this?
- Sin estructura
- Accediendo desde un objeto
- This en arrow function
- Reglas del this
- 23.
JSON
- ¿Qué es un JSON?
- Estructura de un JSON
- Acceso a los valores de un JSON
- Reglas de uso
- Conversiones
- 24.
DOM
- ¿Qué es DOM?
- Object document
- Modificando con JavaScript
- Crear elementos en el DOM
- Atributos elementos HTML
- Métodos para atributos
- Insertar elementos en el DOM
- Reemplazar contenido en el DOM
- Insertar elementos
- Eliminar elementos
- Seleccionar elementos del DOM
- Métodos modernos
- Manipular clases CSS
- Añadir o eliminar clases CSS
- Conmutar o alternar clases CSS
- Otros métodos de clases
- Navegar por elementos del DOM
- Navegar a través de nodos
- 25.
Eventos
- ¿Qué es un evento?
- ¿Cómo se transmite un evento?
- Listado de eventos
- Cómo realizar acciones con eventos
- Eventos mediante atributos HTML
- Eventos mediante propiedades
- Eventos mediante listeners
- Borrar listeners
- Object event
- Opciones de addEventListener
- 26.
Asincronía
- ¿Qué es la asincronía?
- ¿Cómo la gestionamos?
- Promesas
- Consumir una promesa
- Async/await
- Crear una promesa
- Promesas en grupo
- setTimeout
- Recursos sobre asincronía
- 27.
Consumiendo API REST
- ¿Qué es una API REST?
- Métodos de petición HTTP
- Peticiones HTTP con fetch
- Respuesta de la petición HTTP
- Procesamiento de la respuesta
- Fetch con async/await
- Códigos de respuesta HTTP
- CORS
- 28.
Técnicas importantes de JavaScript
- Destructuring
- Spread Operator
- Optional Chaining
¿Necesitas financiación?
Financia tu curso.
Ponte en contacto con NorthCamp para conocer nuestras opciones de financiación.
ContáctanosSolicita información
¿Te interesa este curso? Envíanos una solicitud de información y nos pondremos en contacto contigo para poder orientarte. También puedes ponerte en contacto con NorthCamp llamándonos al 609 326 553