Máster en Front-End: Crea Temas para WordPress, PHP, Angular
4.8 (252 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,553 students enrolled

Máster en Front-End: Crea Temas para WordPress, PHP, Angular

Aprende Bootstrap 4, Flexbox, CSS Grid y construye magníficas plantillas adaptándolas para WordPress, PHP y Angular
4.8 (252 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,553 students enrolled
Last updated 3/2020
Spanish
Spanish [Auto-generated]
Current price: $129.99 Original price: $199.99 Discount: 35% off
12 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 31 hours on-demand video
  • 2 articles
  • 7 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Aprenderás a tener una comprensión clara de los principios del diseño responsivo.
  • Aprenderás a construir sitios web usando el framework Bootstrap en su versión 4.
  • Aprenderás a aplicar interacciones, efectos y animaciones a tus plantillas web con la ayuda de Javascript y jQuery.
  • Aprenderás a transformar un diseño estático a los lenguajes de la arquitectura Front-End con tres proyectos que crearemos juntos: Un Blog personal para un viajero, una página de reservas para un hotel, un sitio de ventas por suscripción.
  • Aprenderás a transformar una plantilla creada por ti para ser usada en WordPress.
  • Aprenderás a transformar una plantilla creada por ti para ser usada con el patrón Modelo-Vista-Controlador en PHP.
  • Aprenderás a transformar una plantilla creada por ti para ser usada en el framework Angular.
Course content
Expand all 141 lectures 30:59:37
+ Introducción
9 lectures 01:29:38

En esta clase hablaremos del alcance del curso, te mostraré todo lo que vamos a aprender.

Preview 03:11

En esta clase te explicaré cómo descargar el material de apoyo de este curso y qué debes hacer en caso de que tengas alguna inquietud.

Material de apoyo e inquietudes
05:18
Contáctame
00:12

En esta clase te explicaré cuál será el editor de código que utilizaré durante el curso y cómo instalar algunas extensiones para tener un flujo de trabajo mucho más ágil.

Preview 16:30

EN esta clase te explico el concepto del "Desarrollo FRONT-END" que abarca y cuáles son los lenguajes más importantes para llevar a cabo esta disciplina.

Preview 08:31

En esta clase hablamos de los fundamentos del lenguaje de marcado HTML5.

Fundamentos de HTML5
13:32

En esta clase hablamos de los fundamentos del lenguaje de estilo CSS3.

Fundamentos de CSS3
12:03

En esta clase hablamos de los fundamentos del lenguaje de programación Javascript.

Fundamentos de Javascript
18:08

En esta clase te muestro la diferencia de trabajar con javascript puro y utilizar jQuery para agilizar en la escritura de código.

Fundamentos de jQuery
12:13
+ Bootstrap 4
6 lectures 01:13:49

En esta clase hablaremos del Framework Bootstrap en su versión 4 y cuáles son las diferencias con la versión 3.

¿Qué es Bootstrap?
07:20

En esta clase te explico cómo instalamos Bootstrap 4.

Instalación de Bootstrap 4
11:26

En esta clase hablaremos del sistema de filas y columnas de Bootstrap 4, también conocido como el Grid System.

Preview 19:05

En esta clase te mostraré las clases más importantes que utilizaremos de Bootstrap 4.

Las Clases CSS de Bootstrap 4 - Parte 1
18:43

En esta clase continuaremos hablando de las clases más importantes que utilizaremos de Bootstrap 4 en este curso.

Las Clases CSS de Bootstrap 4 - Parte 2
13:50
Diviértete con Bootstrap 4
03:25

En este examen repasaremos los conceptos aprendidos en esta sección acerca de Bootstrap 4.

Aterrizando conceptos de Bootstrap 4
12 questions
+ Arquitectura Front-End para el sitio web - Blog del viajero
32 lectures 08:10:19

En esta clase comenzaremos a organizar nuestro primer proyecto web: "Blog del viajero", te explicaré cuáles son los primeros pasos que debes tener en cuenta a la hora de comenzar esta fase de desarrollo Front-End.

Preview 17:38

En esta clase te mostraré cómo vincular Bootstrap 4 al proyecto "Blog del viajero"

Vinculando Bootstrap 4 al proyecto
16:38

En esta clase te enseñaré un proceso que muchas personas pasan por alto y es el de la optimización de imágenes que harán parte del sitio web.

Optimizando las imágenes del proyecto
07:43

En esta clase agregaremos las fuentes del proyecto desde Google Fonts.

Agregando las fuentes
06:14

En las próximas 3 clases comenzaremos a maquetar el encabezado de nuestro sitio web.

Maquetando la cabecera - Parte 1
17:33
Maquetando la cabecera - Parte 2
20:27
Maquetando la cabecera - Parte 3
09:01

En las próximas 2 clases comenzaremos a ajustar nuestro sitio web a las diversas pantallas y dispositivos.

Aplicando ajustes responsivos al cabezote - Parte 1
13:18
Aplicando ajustes responsivos al cabezote - Parte 2
10:42

En esta clase comenzaremos a maquetar el banner del sitio.

Maquetando el Banner
17:53

En esta clase aplicaremos algunos efectos que se pueden realizar con el movimiento del scroll, también conocidos como efectos parallax.

Aplicando efectos Parallax al Banner
16:32

En esta clase organizaremos el menú del sitio web.

Maquetando el Menú
18:07

En esta clase crearemos una cuadrícula interactiva para mostrar las categorías del blog.

Maquetando el "Grid" de Categorías
16:41
Ajuste responsivo al "Grid" de Categorías
20:32
Animando el "Grid" de Categorías
06:08

En esta clase comenzaremos a maquetar el resto de la página de inicio del blog.

Maquetando los artículos del inicio - Parte 1
21:08
Maquetando los artículos del inicio - Parte 2
18:46

En esta clase aprenderemos a usar un plugin que nos ayudará a crear una paginación dinámica.

Agregando la paginación a los artículos titulares
16:52

En las próximas dos clases realizaremos la maquetación del footer.

Maquetando el footer - Parte 1
16:10
Maquetando el footer - Parte 2
10:15

En esta clase agregaremos el buscador a nuestro sitio.

Agregando el buscador
07:02

En esta clase aprenderemos a agregar un plugin para realizar efectos parallax con el scroll de una manera muco más amigable.

Agregando efectos con el scroll
16:40

EN las próximas clases te enseñaré a crear un "preload" o cargador para cualquier sitio web en el que lo quieras aplicar.

Agregando el preload - Parte 1
16:20
Agregando el preload - Parte 2
19:21
Ajuste al preload
06:06

En esta clase modificaremos el banner del sitio para la sección de categorías.

Banner para la página de Categorías
19:51

En esta clase aprenderemos a crear un BreadCrumb, o también conocidos como "Miga de pan" para cualquier sitio web.

Agregando el BreadCrumb
20:55

En las próximas dos clases haremos la maquetación para la página de artículos del sitio web.

Maquetando la página de Artículos - Parte 1
19:12
Maquetando la página de Artículos - Parte 2
21:00
Deslizador de artículos relacionados
14:37

En esta clase agregaremos el formulario para realizar opiniones acerca de los artículos del blog.

Agregando el formulario de opiniones
19:57

En esta clase aprenderemos a comprimir nuestros códigos de javascript, css y html para protegerlos en cualquier navegador.

Comprimiendo los archivos CSS y JS
11:00
+ Adaptar plantillas HTML para Wordpress
35 lectures 08:30:09
¿Qué es WordPress?
08:56
Servidor local
07:38
Instalando WordPress
12:24
Conociendo la interfaz de WordPress
09:31
Configurando los primeros ajustes de WordPress
11:43
Migrando nuestra plantilla a WordPress
14:27
Estructura de una plantilla para WordPress
10:45
Modularizando nuestra plantilla - parte 1
16:49
Modularizando nuestra plantilla - parte 2
09:22
Vinculando archivos externos CSS y Javascript
21:54
Agregando el menú dinámico
21:21
Agregando artículos al Blog
14:24
El loop de WordPress
14:46
Configurando la paginación y el breadcrumb
25:36
Configurando botones de compartir en redes
12:03
Configurando el deslizador de artículos
20:45
Configurando la sección de comentarios - parte 1
19:26
Configurando la sección de comentarios - parte 2
10:58
Configurando la sección de comentarios - parte 3
19:46
Agregando Widgets - parte 1
13:20
Agregando Widgets - parte 2
13:17
Agregando posts al Sidebar
17:45
Creando páginas internas en WordPress
06:33
Logotipo dinámico
08:25
Redes sociales dinámicas
20:13
Configurando el buscador del sitio - parte 1
14:47
Configurando el buscador del sitio - parte 2
06:16
Banner dinámico - parte 1
15:02
Banner dinámico - parte 2
14:18
Grid de categorías dinámico - parte 1
18:04
Grid de categorías dinámico - parte 2
17:03
Cargar más artículos con el scroll en móviles
17:32
Registro de usuarios para el newletter
14:53
Subir la página a un hosting
13:36
+ Arquitectura Front-End para el sitio web - Reservas de Hotel
29 lectures 06:26:42
Organizando el proyecto - Reservas de Hotel
07:25
Optimizando las imágenes del proyecto
04:10
Agregando las fuentes del proyecto
03:40
Vinculando Bootstrap 4 al proyecto
03:57
Aplicando CSS GRID al proyecto - parte 1
18:51
Aplicando CSS GRID al proyecto - parte 2
22:59
Finalizando el bloque "Header"
16:58
Plugin Data Picker
17:54
Modal de ingreso y registro
15:13
Efecto Toggle Botón Idiomas
03:57
Maquetando el Menú
16:43
Scroll UP y Efectos Easing
05:21
Bloque "Header" para pantallas pequeñas
18:59
Creando el Slide
11:16
Finalizando el módulo de Planes
19:35
Finalizando el módulo de Planes para pantallas pequeñas
17:03
Finalizando el módulo de Habitaciones
14:42
Finalizando el módulo de "Recorrido por el pueblo"
10:06
Finalizando el módulo de Restaurante - parte 1
14:06
Finalizando el módulo de Restaurante - parte 2
13:54
FInalizando el módulo "Footer"
11:22
Página de Habitaciones - parte 1
17:10
Página de Habitaciones - parte 2
16:00
Página de Habitaciones - parte 3
14:23
Página de Reservas - parte 1
19:21
Página de Reservas - parte 2
09:09
Página de Perfil - parte 1
15:11
Página de Perfil - parte 2
07:54
+ Adaptar plantillas HTML para PHP con el patrón Modelo-Vista-Controlador
8 lectures 01:34:01
Fundamentos de PHP
07:30
¿Qué es el patrón MVC?
05:44
Módulo Apache y MySQL
14:34
Adaptando la plantilla al patrón MVC
10:13
Modularizando la plantilla - parte 1
16:49
Modularizando la plantilla - parte 2
11:11
Variables GET
18:46
Url's Amigables
09:14
+ Arquitectura Front-End para el sitio web - Ventas por suscripción
13 lectures 02:06:59
Organizando el proyecto - Ventas por suscripción
11:36
Construyendo el Header
19:47
Hero Image - Cinemagraph
16:13
Construyendo la sección de Cursos
13:41
Construyendo la sección de Nosotros
02:13
Construyendo la sección de Testimonios
02:30
Construyendo la sección de Planes
04:07
Construyendo la sección FAQ
08:14
Construyendo el Footer
04:50
Configurando animación al Scroll
06:31
Plugin Preloader
10:37
Construyendo la página de Ingreso
11:08
Construyendo la página de Registro
15:32
+ Adaptar plantilla HTML para ANGULAR
9 lectures 01:27:59
¿Qué es Angular?
04:30
Recursos para trabajar con Angular
08:34
Creando nuestra aplicación de Angular
10:19
Adaptando la plantilla a Angular
07:45
Instalando los componentes para los bloques
17:26
Instalando los componentes para las páginas
09:17
Creación de rutas
22:15
Despedida
05:42
Clase Extra
02:11
Requirements
  • ¡Para este curso no necesitas conocimientos previos, lo que necesitas es una buena disposición para aprender!
Description

Este curso le enseñará todo lo que necesita saber sobre Front-End, incluido los lenguajes de maquetación, estilo e interacción. Y aprenderás desde cero, por lo que no importa cuánta experiencia tengas cuando comiences.

Estarás expuesto a principios y estrategias, pero, lo que es más importante, aprenderás cómo aplicar realmente estas técnicas de desarrollo creando tres sitios web diferentes para tres audiencias distintas.

Cree sus plantillas con el mejor Framework para diseño web responsivo:

  • Aprenderás a usar Bootstrap en su versión 4.

  • Comprenderás el proceso paso a paso de cómo se construye un sitio web.

  • Incluirás animaciones, efectos e interacciones a los sitios web.

  • Aplicarás las tendencias de diseño web en el desarrollo de los sitios.

  • Aprenderás a usar Flexbox.

  • Aprenderás a usar CSS Grid.

Este curso lo ayudará a sobresalir como desarrollador Front-End, y le enseñará a aplicar estrategias de maquetación web que harán que cada sitio que construya lo haga de manera ágil y precisa.

También obtendrá experiencia práctica elaborando tres tipos diferentes de plantillas web. Esto le dará la confianza para realizar proyectos similares si ya es un desarrollador Front-End, si desea acceder a esta disciplina o si desea mejorar sus habilidades como desarrollador.

Contenido y visión general:

Incluso si eres un principiante completo, este curso te mostrará cómo construir un sitio web paso a paso. Lo guiará a través de todo los pasos necesarios para adquirir la destreza y habilidad de construir cualquier sitio desde la maquetación, hojas de estilo e interacción con javascript.

Comenzará por definir los fundamentos del Desarrollo Front-End, luego una introducción muy completa sobre el framework Bootstrap 4, luego de manera práctica construiremos tres plantillas web diferentes para tres tipos de audiencias distintas.

Finalmente llevaremos estas tres plantillas a tres plataformas diferentes para ser trabajadas posteriormente por un desarrollador Back-End, convertiremos una plantilla a WordPress, prepararemos otra plantilla al Patrón Modelo - Vista -Controlador para ser trabajada con PHP y finalmente aprenderás a transformar una plantilla para el entorno de Angular.

Al final de este curso, tendrá una comprensión profunda del desarrollo Front-End y su proceso de construcción, sabrá por qué es tan importante para usuarios y empresas, qué lenguajes se necesitan dominar, qué proceso es el adecuado para elaborar plantillas responsivas y cómo transformar una plantilla para las herramientas más utilizas en el mercado del desarrollo web: WordPress, PHP y Angular.

Who this course is for:
  • Principiantes que quieren aprender a construir sitios web profesionales desde cero.
  • Diseñadores de sitios web que deseen adquirir conocimientos en el desarrollo Front-End.
  • Desarrolladores Front-End que deseen mejorar sus habilidades.
  • Programadores Back-End que deseen adquirir habilidades en Front-End y convertirse en desarrolladores Full-Stack.