4.66 de 5
4.66
586 valoraciones en Udemy

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.
Profesor:
Josué E. Pizano
2.329 Estudiantes apuntados
Spanish [Auto-generated]
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.

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.

Bienvenida y aspectos básicos

1
Diagnóstico: ¿Qué tanto sé?

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 :)

2
Introducción y Box Model

Primeros pasos con CSS

1
La propiedad position
2
Float, Clear y Overflow
3
La propiedad display
4
Más propiedades para la caja
5
El borde
6
Cómo usar color
7
Un editor en la nube: Codio ACTUALIZADO (06/FEB/15)
8
Inclusión del archivo CSS
9
Las herramientas de inspección en navegadores
10
Principales selectores
11
Formato de texto
12
Modificando el fondo
13
Demostración: ¡Manos a la obra! Probemos cómo funciona
14
Demostración: Experimentando con el texto
15
Demostración: Aplicando pseudoclases y modificando las imágenes
16
Demostración: Experimentando con position y display
17
Demostración: Estilo para formularios
18
EXTRA: Generando las imágenes desde AI y PS
19
Proyecto: Maquetemos un sitio real
20
Proyecto: Creando el menú principal
21
Proyecto: Agregando la marquesina con imagen
22
Proyecto: Ahora el panel de noticias con desplazamiento
23
Proyecto: Columnas para el contenido de la sección
24
Proyecto: Finalizando el pie y la sección completa
25
Ejercicio/Proyecto: Ahora te toca a ti

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

26
Aspectos básicos de CSS

Propiedades CSS 3

1
Aplicación de efectos
2
Creación de transiciones
3
Creación de animaciones
4
Demostración: Efectos, transiciones y animaciones
5
Proyecto: Agregando transiciones a Origami

Uso de fuentes especiales en tu sitio

1
Demostración: Integrando fuentes especiales
2
Demostración: Integrando fuentes especiales offline

Sistemas de retícula

1
Introducción a los sistemas de retícula
2
Proyecto: Un sitio con retícula personalizada
3
Proyecto: Composición general del sitio
4
Proyecto: El menú principal y encabezado, ¡Listos!
5
Proyecto: Elaboración del sidebar izquierdo
6
Proyecto: Creando las entradas del portafolios
7
Proyecto: Terminando la página principal
8
Ejercicio: Finaliza SETTE Consultores
9
Demostración: Introducción a 960gs
10
Proyecto: Maquetando con 960gs
11
Proyecto: Búsqueda y espacio del perfil
12
Proyecto: Menú para el perfil
13
Proyecto: Creando el menú principal
14
Proyecto: Columnas y contenido principal
15
Proyecto: Barra lateral
16
Proyecto: Agenda de eventos
17
Proyecto: El pie y detalles finales de la página
18
Ejercicio/Proyecto: Maqueta el sitio GreenTrip con 960gs
19
CSS3, Fuentes especiales y Retículas

Mega menús

1
Introducción a mega menús
2
Proyecto: Creando un mega menú para Acero Real
3
Proyecto: Detalles finales para nuestro menú

Diálogos y ventanas emergentes

1
Introducción a diálogos y ventanas emergentes
2
Demostración: Creando un diálogo con estilo Windows 8
3
Demostración: Un diálogo estilo Material Design

Utilizando imágenes SVG

1
Introducción a SVG
2
Demostración: Exportando archivos SVG con Adobe Illustrator
3
Demostración: Cómo incorporar imágenes SVG con CSS
4
Imágenes SVG con la etiqueta IMG
5
SVG en HTML y ¡con animación!
6
Mega menús, diálogos y SVG

Proyecto integrador

1
Proyecto: Maquetemos un sitio Web con todo incluido
2
Proyecto: Creando el menú superior y preparando el mega menú
3
Proyecto: Mega menú para los precios
4
Proyecto: Finalizando el mega menú de precios
5
Proyecto: Creando el encabezado con foto
6
Proyecto: El área de featurettes
7
Proyecto: La división para descarga de app
8
Proyecto: Elaborando la sección de diseño más simple
9
Proyecto: Testimonios
10
Proyecto: Formulario para el boletín
11
Proyecto: El pie de la página
12
Proyecto: Creando el diálogo del boletín

Ha sido un gran viaje

1
Despedida
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.7
4.7 de 5
Calificaciones 586

Calificación Detallada

5 estrellas
387
4 estrellas
141
3 estrellas
47
2 estrellas
5
1 estrellas
6
d7bc7d7822d048d51cfd7c1a2e369c73
DEBES ESTAR REGISTRADO PARA ACCEDER AL CURSO

Contenido

12 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