HTML, CSS y ECMA

Información

929 Estudiantes Ultima actualización: 21 noviembre 2024

Empieza y termina a tu tiempo

Lleva el curso cuantas veces quieras

Curso de nivel básico

74 clases

Certifícate al terminar el curso

07 horas de videoclases online

Acerca del Curso

En este curso aprenderás todas las bases necesarias que requiere un desarrollador web frontend para comenzar a construir sitios web modernos y profesionales. Al termino de este curso habremos construido una pagina web moderna donde puedas mostrar tu portafolio de proyectos , utilizando buenas prácticas en nuestras hojas de estilo y para el posicionamiento en buscadores (SEO). Partiremos desde explicar acerca de las etiquetas HTML más utilizadas, las propiedades de CSS3 que están dando la hora, estaremos dando animaciones a nuestro portafolio utilizando JavaScript(ES6) y finalizaremos publicando nuestro sitio web en github pages.

Acerca del profesor

Luis Melgarejo Desarrollador Web en EMILIMA

Ingeniero de Sistemas e informática con más de 4 años de experiencia laborando como Analista y Programador fullstack en tecnologías modernas como vuejs, react, angular y nodejs, para industrias del gobierno, industrias hoteleras, startups y más de 50 proyectos como freelance en el mundo del desarrollo web.

Certificación

Introducción
- Introducción al curso (Presentación del profesor y objetivo del curso)
  
  Vista previa gratuita
- Bienvenida y contenido del curso (explicación de secciones)
  
  Vista previa gratuita
- ¿Qué es HTML y qué es CSS?
  
  Vista previa gratuita
- ¿Por qué la importancia de HTML y CSS en el desarrollo frontend?
  
  Vista previa gratuita
Preparando nuestro entorno de trabajo
- Instalación de nuestro editor de código "Visual Studio Code"
- Instalación de plugins para autocompletar y trabajar en tiempo real
  
  Vista previa gratuita
- Instalación de Git y registro en Github
Introducción a HTML
- Hola Mundo con HTML
- ¿Qué son las etiquetas HTML?
- Conociendo las partes más importantes de nuestro documento HTML (Body, head)
- ¿Qué es el Doctype y por qué se utiliza?
- Conociendo el inspeccionador de elementos
- Código Fuente - Introducción
Elementos HTML Parte 1
- Tipos de elementos HTML
- Etiquetas para títulos (h1, h2 h3, h4, h5)
- Etiquetas para párrafos, textos y saltos de línea(p, pre, br, span, strong, small)
- Etiquetas para listas (ul, ol, li)
- Etiqueta para enlaces y botones (a, button)
- Secciones y contenedores 1 (header, section, nav, footer)
- Secciones y contenedores 2 (div)
- Imágenes, videos, iframes y embeds
- Tablas
Elementos HTML Parte 2
- Formularios parte 1
  
  Vista previa gratuita
- Formularios parte 2
CSS3 Parte 1
- Formas de agregar CSS a nuestro HTML
- Tipos de selectores Parte I
- Tipos de selectores Parte II
- Medidas y tamaños y fuentes
- Colores, backgrounds y fuentes
- Márgenes y paddings
- Posicionamientos
- Pseudoelementos y pseudoclases - PARTE I
- Pseudoelementos y pseudoclases - PARTE II
CSS3 Parte 2
- Tipos de display
- Display Flex
- CSS Grid
CSS3 Parte 3 - Animaciones
- Sombras, Transformaciones y animaciones
- Keyframes
CSS3 Parte 4 - Responsive
- Media queries 1
- Media queries 2
JavaScript (EcmaScript) para Manipular el DOM
- ¿Qué es EcmaScript y que tiene que ver con JavaScript?
- ¿Qué es el DOM?
- Tipos de datos
- Operadores lógicos, de concatenación y condicionales
- Ciclos
- Métodos especiales para manejar colecciones y strings PARTE 1
- Métodos especiales para manejar colecciones y strings PARTE 2
- Localizando elementos del DOM (uso de selectores)
- ¿Qué son los Nodos?
- Alterando estilos mediante clases y la etiqueta style
- Creando Elementos HTML desde JS
- Eventos del DOM Parte I
- Eventos del DOM Parte II
Inicio del Proyecto "Mi Portafolio"
- Código Fuente - Portafolio
- Descripción de lo que construiremos
- Creación del proyecto y adición de librerías para fuentes e iconos
- Maquetando el header y navbar
- Maquetando la portada (cover page)
- Estilizando el layout de nuestro sitio
- Creando las variables para el estilo dark y light
- Estilizando el header y nav
- Estilizando el cover page
- Maquetando y estilizando la sección about
- Maquetando la sección mis habilidades
- Estilizando la sección mis habilidades
- Creando y estilizando la sección mis proyectos
- Creando y estilizando la sección mis enlaces de contacto
- Creando el switch para los temas dark y light
- Agregando responsive design PARTE I
- Agregando responsive design PARTE II
- Agregando responsive design PARTE III
- Agregando la funcionalidad de los temas (dark y light) y el menú responsivo
- ¿Creando nuestro repositorio en github?
- Subiendo nuestro repositorio a github y habilitando github pages
- Usando Meta etiquetas para las redes sociales y para optimizar el SEO
- Despedida del curso

Acerca del profesor

Luis Melgarejo Desarrollador Web en EMILIMA