Diseña un Landing Page con HTML5, CSS3, Bootstrap y Parallax

Crea un increíble Landing Page con CSS3, HTML5 y JS desde cero con este curso, además conversión de HTML5 a WordPress!
4.6 (66 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
321 students enrolled
$35
Take This Course
  • Lectures 64
  • Contents Video: 5 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2014 Spanish

Course Description

ACTUALIZADO SEPTIEMBRE 2016:

21 NUEVOS VIDEOS, APRENDE COMO TRANSFORMAR ESTE LANDING PAGE A WORDPRESS PARA CREAR UN SITIO 100% DINAMICO!

En este curso crearemos un INCREIBLE y FUNCIONAL landing page con muchas funcionalidades como ser Mobile Friendly (con Bootstrap) Animaciones de CSS3 con AnimateCSS, efectos al hacer scroll con JavaScript, Formularios en HTML5 y PHP, iconos con Font Awesome y mucho más!

Crear landing pages con Bootstrap es un tema muy popular hoy en día!! y en este curso aprenderás todo lo necesario para crearlos.

Comenzaremos con un poco de HTML, después agregaremos Twitter Bootstrap, el Framework Front end más popular del mundo para crear sitios web responsive.

Después nos moveremos a CSS, para cambiar el diseño radicalmente de Bootstrap.

Si no tienes experiencia con JavaScript no te preocupes, explicaremos todo y el código será creado en la pantalla, NADA DE CÓDIGO MÁGICO QUE SOLO APARECE EN PANTALLA!

Si ya has escrito algo de HTML y CSS y estas listo para dar el siguiente paso, ESTE CURSO ES PARA TI!.

Si eres de las personas que aprenden más creando PROYECTOS DEL MUNDO REAL, este curso es para ti!

What are the requirements?

  • Un editor de Texto (se utilizará Sublime Text), algunas imágenes si no deseas utilizar las del curso y muchas ganas de aprender

What am I going to get from this course?

  • Aprenderás a integrar HTML5 Boilerplate
  • Integrar Librerias como Font Awesome, Bootstrap, AnimateCSS
  • Crear un formulario con PHP y jQuery
  • Integrar librerías Javascript como Smooth Scrool y WaypointJS
  • Al Finalizar el curso tendrás un diseño completamente funcional para promover tu producto o servicio

What is the target audience?

  • Iniciaremos todo el proyecto desde 0, si no tienes experiencia con seguir los videos podrás culminar con el mismo diseño que se muestra
  • Diseñadores y programadores con experiencia, podrán integrar nuevas librerías a sus proyectos.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción
00:34

En este video veremos los archivos para el curso, puedes descargarlos aquí mismo

03:50

En este video veremos las herramientas con las que trabajaremos en este curso

Section 2: Trabajando con el HTML
03:30

En este video veremos como agregar las librerias de JavaScript y CSS a nuestro proyecto

04:12

En este video escribiremos el HTML para los contenedores principales de nuestro diseño

03:20

En este video escribiremos el HTML para la primera parte

05:28

En este video agregaremos la segunda parte del HTML

02:11

En este video agregaremos la tercera parte del HTML

06:28

En este video agregaremos el HTML de la cuarta parte

Section 3: Integrando Bootstrap a nuestro proyecto
03:04

En este video comenzaremos a trabajar con bootstrap

06:54

En este video continuaremos trabajando con las classes de Bootstrap

05:38

En este video comenzaremos a trabajar con las pantallas Modal de Bootstrap

03:44

En este video escribiremos el Javascript para nuestras pantallas modal

04:21

En este video continuaremos agregando las clases de Bootstrap

05:08

En este video agregaremos Bootstrap a nuestro fromulario de contacto

Section 4: Cambiando la apariencia de Bootstrap con CSS
10:09

Bootstrap es un gran Framework, adaptarlo a nuestras necesidades es fácil y aquí te enseñaré como.

08:55

En este video continuaremos adaptando Bootstrap a nuestras necesidades de Diseño.

04:47

En este video creamos el efecto Parallax

10:43

En este video continuaremos cambiando la apariencia de Bootstrap para adaptarlo a nuestras necesidades.

07:58

En este video adaptaremos los estilos de Bootstrap en nuestro formulario

05:01

Hacer imágenes responsivas con Bootstrap es muy fácil, aquí te mostraré como.

Section 5: Construyendo la navegación
05:45

En este video aprenderás a crear un menu con Bootstrap

04:00

En este video editaremos el CSS para que nuestro diseño se vea como deseamos.

Section 6: Ajustes para dispositivos móviles
04:54

Haremos algunos ajustes para que nuestro diseño se vea muy bien en cualquier dispositivo móvil

07:13

Agregaremos unos MediaQueries para poder ajustar nuestro diseño a dispositivos móviles

Section 7: Implementando transiciones CSS3 a la navegación
03:58

En este video escribiremos el JavaScript para detectar cuando un usuario hace Scrolling en nuestra página

02:59

En este video animaremos el menú con CSS3

Section 8: Integrando otras librerías a nuestro proyecto
03:42

En este video agregaremos las funciones de SmoothScrollJS a nuestro proyecto

07:43

En este video veremos como integrar FontAwesome a tu proyecto

04:14

En este video editaremos el CSS de nuestros iconos de FontAwesome

08:53

En este video aprenderás a animar un elemento cuando el navegador lo detecta con WaypointsJS y AnimateCSS

Ajustando Animaciones con CSS3
04:01
Agregando Javascript para reiniciar el menu
03:50
Section 9: Validación del formulario de contacto
01:38

En este video veremos las validaciones de HTML5

04:59

En este video agregaremos los atributos necesarios para poder mandar correos mediante PHP y AJAX

08:04

En este video agregaremos BootstrapValidator, para validar cada campo con JavaScript

07:50

En este video ajustaremos las hojas de estilo de BootstrapValidator

05:00

En este video crearemos el archivo PHP que se encargará de enviar los e-mails

01:37

Nuestro diseño esta listo, es hora de probar que funcione correctamente

Section 10: Agregando Carousel a nuestro diseño
05:09

En este ideo aprenderás a integrar Carousel de Bootstrap a nuestro proyecto.

Creando un Carousel Parte 2 CSS
01:42
Section 11: Convirtiendo Nuestro Landing Page a WordPress
03:19

En este video instalaremos WordPress localmente, en mi caso estaré utilizando MAMP, pero hay otras opciones como WAMP, XAMPP y Bitnami

04:33

WordPress necesita al menos 2 archivos para crear y activar un theme, veamos como hacerlo

04:02

Otro archivo importante es el functions.php, veamos como crearlo y cargar nuestras hojas de estilos

04:44

Vamos a cargar nuestras otras hojas de estilos como animate css, bootstrap, etc.

05:12

En este video cargaremos todos nuestros archivos JavaScript

03:10

Vamos a cargar 3  entradas en WordPress que utilizaremos para nuestro Slider

04:39

Veamos como crear consultas a la base de Datos en WordPress para mostrar nuestro Slider

04:29

Vamos a darle los últimos ajustes a nuestro código para que funcione de forma correcta

02:04

En el proceso de la creación de este Landing Page hay 2 plugins que nos harán la vida más sencilla, Better Font Awesome y Advanced Custom Fields, vamos a instalarlos.

04:17

Vamos a realizar una consulta para imprimir las caracteristicas principales de nuestro App

07:44

Vamos a finalizar esta sección imprimiendo los campos que nos hacen falta.

06:40

Vamos a crear todas las caracteristicas de nuestra app que van en la sección intermedia

08:20

Veamos como realizar consultas en WordPress y pasarle otros parametros que te harán dominar este tema :)

02:46

Veamos como agregar algunos campos para la sección de pantallas con Advanced Custom Fields

03:32

Vamos a realizar una consulta donde imprimiremos las pantallas que se muestran en el Modal

03:41

Veamos como hacer dinamica la imagen y el texto de la sección de Parallax

03:10

En la sección de descargas tenemos varios campos, veamos como crearla en este video

04:34

Una vez creada la sección de descargas, veamos como imprimir los campos

05:33

Vamos a utilizar un Plugin que nos permitirá de forma sencilla crear un formulario de Contacto

03:59

Veamos algunos ajustes que podemos realizar a nuestro Formulario de Contacto para que sea parecido a nuestro diseño original

05:24

Veamos como crear un menú dínamico con WordPress

03:25

En este video imprimiremos nuestro Menú y agregaremos algunos atributos para que se vea como el diseño original

02:38

Veamos como incorporar la funcionalidad de Smooth Scroll a nuestro Menú

02:56

Antes de finalizar, veamos una caracteristica muy especial que tiene el plugin de Advanced Custom Fields 

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Juan Pablo De la torre Valdez, Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.

----------------------------------------------------------------------------------------

Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.

Ready to start learning?
Take This Course