CSS desde cero: Desarrollo Web/HTML/CSS3 para profesionales

Desarrolla y maqueta ¡sitios hermosos y optimizados! utilizando CSS3, HTML5, retículas, diálogos, mega menús, SVG y más.
4.9 (115 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.
825 students enrolled
$80
Take This Course
  • Lectures 76
  • Contents Video: 12.5 hours
    Other: 0 mins
  • Skill Level All Levels
  • 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 11/2014 Spanish

Course Description

Este no es un tutorial, es el único curso bien estructurado y planeado para que aprendas CSS de inicio a fin para que generes interfaces gráficas sin dolor. ¿Te interesa el desarrollo Web en serio?

Maquetarás 5 sitios Web reales y con diseños profesionales usando HTML5 y CSS3, ¡nada de diseños antiestéticos! Aprende a crear mega menús, sistemas de retícula, crear diálogos y ventanas, usar imágenes SVG, incrustar y crear fuentes especiales y cientos de tips geniales.

Trabajaremos de una manera progresiva, bien guiada ¡y en español!, para que tu aprendizaje fluya correctamente. Crearás proyectos desde HTML hasta la maquetación gráfica con CSS; para esto, he desarrollado un programa con los siguientes tipos de contenidos:

  1. Presentaciones en que mostraré y discutiremos los fundamentos teóricos y prácticos que requerirás.
  2. Demostraciones en video en las cuales tomaremos un editor en la nube y nos pondremos a programar.
  3. Proyectos: Demostraciones especiales en las que desarrollaremos sitios Web de diferentes estilos y formas.
  4. Ejercicios en los que trabajarás en solitario para conseguir objetivos específicos y pongas tus conocimientos en práctica.
  5. Exámenes: Uno de diagnóstico y 3 de seguimiento, para que verifiques que los conceptos hayan sido captados.
  6. Descargas: Tendrás acceso a aproximadamente 136 archivos comprimidos ZIP con los archivos y código fuente de los proyectos, 13 archivos PDF con las presentaciones mostradas en las clases y 73 archivos de audio con la pista de cada uno de los vídeos.

Sé que apreciarás el trabajo y empeño para la creación del programa de trabajo, porque está creado para ti, para que cuando crees un sitio Web lo puedas hacer fácilmente y sin dolor.

What are the requirements?

  • ¡Entusiasmo :D!
  • Conocimientos generales de HTML.
  • (Recomendado/opcional) Conocimientos generales de Adobe Illustrator y Adobe Photoshop

What am I going to get from this course?

  • Tendrás la capacidad de utilizar CSS para maquetar entornos gráficos.
  • Podrás maquetar a partir de archivos fuente en formato de imagen (PSD, AI, JPG, PNG, etc) y convertirlos en sitios vivos.
  • Aprenderás los fundamentos de CSS, su forma de uso y sintaxis.
  • Comprenderás y aplicarás todo tipo de selectores y propiedades conscientemente.
  • Podrás realizar transiciones y animaciones con CSS.
  • Entenderás e integrarás fuentes especiales en tus proyectos.
  • Comprenderás el uso de los sistemas de retícula y tendrás la capacidad de utilizar 960gs o crear retículas personalizadas.
  • Entenderás las ventajas y desventajas del uso de imágenes SVG como formato de imagen para tus proyectos y podrás integrarlas en éstos.
  • Entenderás la manera en que se maquetan los diálogos y ventanas para el entorno del sitio.
  • Tendrás la capacidad de crear menús y mega menús a través de CSS.

What is the target audience?

  • Cualquier persona interesada en aprender CSS que busque utilizarlo profesionalmente.
  • Emprendedores, freelancers, profesionales, diseñadores gráficos y desarrolladores.
  • Personas con o sin conocimiento previo de CSS, incluso desarrolladores Front-End que busquen mejorar sus habilidades.

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: Bienvenida y aspectos básicos
Bienvenida
Preview
00:37
12 questions

Estas son sólo algunas de las cosas que aprenderás, contesta el test sin preocupaciones, una vez que acabes el curso podrás volver y contestarlas con seguridad :D

Si acabas de iniciar y contestaste todas las preguntas correctamente, no te preocupes, las preguntas hechas no son de todo el contenido ni tampoco lo más complejo; recuerda que es un diagnóstico :)

Introducción y Box Model
18:20
Section 2: Primeros pasos con CSS
La propiedad position
10:23
Float, Clear y Overflow
05:54
La propiedad display
06:42
Más propiedades para la caja
03:04
El borde
03:46
Cómo usar color
Preview
06:54
Un editor en la nube: Codio ACTUALIZADO (06/FEB/15)
15:24
Inclusión del archivo CSS
05:32
Las herramientas de inspección en navegadores
Preview
08:20
Principales selectores
13:37
Formato de texto
07:55
Modificando el fondo
05:44
Demostración: ¡Manos a la obra! Probemos cómo funciona
16:07
Demostración: Experimentando con el texto
14:11
Demostración: Aplicando pseudoclases y modificando las imágenes
06:28
Demostración: Experimentando con position y display
17:35
Demostración: Estilo para formularios
17:47
EXTRA: Generando las imágenes desde AI y PS
11:00
Proyecto: Maquetemos un sitio real
14:30
Proyecto: Creando el menú principal
11:27
Proyecto: Agregando la marquesina con imagen
06:20
Proyecto: Ahora el panel de noticias con desplazamiento
Preview
14:50
Proyecto: Columnas para el contenido de la sección
13:44
Proyecto: Finalizando el pie y la sección completa
15:50
Article

En las descargas encontrarás los archivos para que puedas crear las 2 secciones restantes del sitio Web de Origami.

Aspectos básicos de CSS
10 questions
Section 3: Propiedades CSS 3
Aplicación de efectos
05:56
Creación de transiciones
03:08
Creación de animaciones
03:39
Demostración: Efectos, transiciones y animaciones
16:30
Proyecto: Agregando transiciones a Origami
Preview
04:11
Section 4: Uso de fuentes especiales en tu sitio
Demostración: Integrando fuentes especiales
10:08
Demostración: Integrando fuentes especiales offline
11:06
Section 5: Sistemas de retícula
Introducción a los sistemas de retícula
08:53
Proyecto: Un sitio con retícula personalizada
08:54
Proyecto: Composición general del sitio
12:03
Proyecto: El menú principal y encabezado, ¡Listos!
15:34
Proyecto: Elaboración del sidebar izquierdo
17:01
Proyecto: Creando las entradas del portafolios
10:29
Proyecto: Terminando la página principal
15:27
Ejercicio: Finaliza SETTE Consultores
01:53
Demostración: Introducción a 960gs
13:44
Proyecto: Maquetando con 960gs
16:25
Proyecto: Búsqueda y espacio del perfil
19:13
Proyecto: Menú para el perfil
08:42
Proyecto: Creando el menú principal
08:33
Proyecto: Columnas y contenido principal
17:19
Proyecto: Barra lateral
15:44
Proyecto: Agenda de eventos
14:13
Proyecto: El pie y detalles finales de la página
12:10
Ejercicio/Proyecto: Maqueta el sitio GreenTrip con 960gs
Article
CSS3, Fuentes especiales y Retículas
6 questions
Section 6: Mega menús
Introducción a mega menús
09:00
Proyecto: Creando un mega menú para Acero Real
13:49
Proyecto: Detalles finales para nuestro menú
09:25
Section 7: Diálogos y ventanas emergentes
Introducción a diálogos y ventanas emergentes
04:41
Demostración: Creando un diálogo con estilo Windows 8
09:54
Demostración: Un diálogo estilo Material Design
10:21
Section 8: Utilizando imágenes SVG
Introducción a SVG
09:58
Demostración: Exportando archivos SVG con Adobe Illustrator
07:57
Demostración: Cómo incorporar imágenes SVG con CSS
07:45
Imágenes SVG con la etiqueta IMG
Preview
03:25
SVG en HTML y ¡con animación!
05:36
Mega menús, diálogos y SVG
5 questions
Section 9: Proyecto integrador
Proyecto: Maquetemos un sitio Web con todo incluido
14:45
Proyecto: Creando el menú superior y preparando el mega menú
09:05
Proyecto: Mega menú para los precios
14:39
Proyecto: Finalizando el mega menú de precios
05:46
Proyecto: Creando el encabezado con foto
12:20
Proyecto: El área de featurettes
05:31
Proyecto: La división para descarga de app
07:57
Proyecto: Elaborando la sección de diseño más simple
07:34
Proyecto: Testimonios
13:28
Proyecto: Formulario para el boletín
09:25
Proyecto: El pie de la página
Preview
03:04
Proyecto: Creando el diálogo del boletín
10:42
Section 10: Ha sido un gran viaje
Despedida
00:18

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Josué E. Pizano, Senior UX Designer / Web Developer / University Teacher

Cuento con más de 12 años de experiencia en desarrollo Web. Hace 8 años fundé la empresa de desarrollo multimedia Catarsis, en México, en la cuál he realizado más de 130 proyectos exitosos para empresas de talla regional, nacional e internacional.

Tengo al rededor de 9 años de experiencia en la docencia formal a nivel profesional, y he contribuido en la formación universitaria de cientos estudiantes de ingeniería en desarrollo de software y licenciados en diseño gráfico; además de haber creado varios programas educativos con temáticas de diseño y desarrollo web en los cuales abordo temáticas exhaustivas desde principiante hasta avanzado. También he sido instructor de programas académicos a la medida para decenas de empresas.

Cuento con amplia experiencia, docente y profesional, en las siguientes áreas: Desarrollo front end y back end, diseño de experiencia de usuario (UX) y usabilidad, diseño y desarrollo responsivo (responsive web design), jQuery, AngularJS, SASS, CSS3, HTML5, PHP, MySQL, CodeIgniter, Wordpress, JavaScript, Java, C++, C, Perl, ActionScript, animación y diseño de interacción, diseño emotivo, edición y composición de vídeo, diseño y desarrollo de aplicaciones móviles, actividades docentes y diseño de material educativo, Adobe Illustrator, Adobe Photoshop, Adobe Flash, Adobe Dreamweaver, Adobe After Effects y Adobe Premiere, 3DSMAX, entre otros.

Ready to start learning?
Take This Course