4.79 de 5
4.79
221 valoraciones en Udemy

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
Profesor:
Juan Fernando Urrego
1.449 Estudiantes apuntados
Spanish [Auto-generated]
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.

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.

Introducción

1
Bienvenida

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

2
Material de apoyo e inquietudes

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.

3
Contáctame
4
Editor de código y plugins

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.

5
¿Qués es el desarrollo Front-End?

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.

6
Fundamentos de HTML5

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

7
Fundamentos de CSS3

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

8
Fundamentos de Javascript

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

9
Fundamentos de jQuery

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

Bootstrap 4

1
¿Qué es Bootstrap?

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

2
Instalación de Bootstrap 4

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

3
Sistema de Rejillas

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

4
Las Clases CSS de Bootstrap 4 - Parte 1

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

5
Las Clases CSS de Bootstrap 4 - Parte 2

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

6
Diviértete con Bootstrap 4
7
Aterrizando conceptos de Bootstrap 4

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

Arquitectura Front-End para el sitio web - Blog del viajero

1
Organizando el proyecto

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.

2
Vinculando Bootstrap 4 al proyecto

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

3
Optimizando las imágenes del proyecto

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.

4
Agregando las fuentes

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

5
Maquetando la cabecera - Parte 1

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

6
Maquetando la cabecera - Parte 2
7
Maquetando la cabecera - Parte 3
8
Aplicando ajustes responsivos al cabezote - Parte 1

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

9
Aplicando ajustes responsivos al cabezote - Parte 2
10
Maquetando el Banner

En esta clase comenzaremos a maquetar el banner del sitio.

11
Aplicando efectos Parallax al Banner

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

12
Maquetando el Menú

En esta clase organizaremos el menú del sitio web.

13
Maquetando el "Grid" de Categorías

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

14
Ajuste responsivo al "Grid" de Categorías
15
Animando el "Grid" de Categorías
16
Maquetando los artículos del inicio - Parte 1

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

17
Maquetando los artículos del inicio - Parte 2
18
Agregando la paginación a los artículos titulares

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

19
Maquetando el footer - Parte 1

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

20
Maquetando el footer - Parte 2
21
Agregando el buscador

En esta clase agregaremos el buscador a nuestro sitio.

22
Agregando efectos con el scroll

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

23
Agregando el preload - Parte 1

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

24
Agregando el preload - Parte 2
25
Ajuste al preload
26
Banner para la página de Categorías

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

27
Agregando el BreadCrumb

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

28
Maquetando la página de Artículos - Parte 1

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

29
Maquetando la página de Artículos - Parte 2
30
Deslizador de artículos relacionados
31
Agregando el formulario de opiniones

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

32
Comprimiendo los archivos CSS y JS

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

Adaptar plantillas HTML para Wordpress

1
Sitio estático vs sitio dinámico
2
¿Qué es WordPress?
3
Servidor local
4
Instalando WordPress
5
Conociendo la interfaz de WordPress
6
Configurando los primeros ajustes de WordPress
7
Migrando nuestra plantilla a WordPress
8
Estructura de una plantilla para WordPress
9
Modularizando nuestra plantilla - parte 1
10
Modularizando nuestra plantilla - parte 2
11
Vinculando archivos externos CSS y Javascript
12
Agregando el menú dinámico
13
Agregando artículos al Blog
14
El loop de WordPress
15
Configurando la paginación y el breadcrumb
16
Configurando botones de compartir en redes
17
Configurando el deslizador de artículos
18
Configurando la sección de comentarios - parte 1
19
Configurando la sección de comentarios - parte 2
20
Configurando la sección de comentarios - parte 3
21
Agregando Widgets - parte 1
22
Agregando Widgets - parte 2
23
Agregando posts al Sidebar
24
Creando páginas internas en WordPress
25
Logotipo dinámico
26
Redes sociales dinámicas
27
Configurando el buscador del sitio - parte 1
28
Configurando el buscador del sitio - parte 2
29
Banner dinámico - parte 1
30
Banner dinámico - parte 2
31
Grid de categorías dinámico - parte 1
32
Grid de categorías dinámico - parte 2
33
Cargar más artículos con el scroll en móviles
34
Registro de usuarios para el newletter
35
Subir la página a un hosting

Arquitectura Front-End para el sitio web - Reservas de Hotel

1
Organizando el proyecto - Reservas de Hotel
2
Optimizando las imágenes del proyecto
3
Agregando las fuentes del proyecto
4
Vinculando Bootstrap 4 al proyecto
5
CSS GRID
6
Aplicando CSS GRID al proyecto - parte 1
7
Aplicando CSS GRID al proyecto - parte 2
8
Finalizando el bloque "Header"
9
Plugin Data Picker
10
Modal de ingreso y registro
11
Efecto Toggle Botón Idiomas
12
Maquetando el Menú
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.8
4.8 de 5
Calificaciones 221

Calificación Detallada

5 estrellas
136
4 estrellas
66
3 estrellas
13
2 estrellas
1
1 estrellas
5
f6da418f602fb8ecabdf9cec858a9aa9
DEBES ESTAR REGISTRADO PARA ACCEDER AL CURSO

Contenido

31 horas de video online
2 Articulos
Acceso sin limites
Acceso desde Móvil y Smart TV
Certificado de finalización

Newsletter

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad