Logo Código Escuela
  • Inicio
  • Cursos
    • Desarrollo Web Nivel 1
    • Desarrollo Web Nivel 2
    • Desarrollo Web Nivel 3
  • Ubicación
  • Regístrate
  • Contáctenos
Iniciar Sesión

Desarrollo Web Nivel 2: Aprende CSS a fondo

En este curso aprenderás:

  • Cómo Utilizar CSS para Crear Diseños Complejos
  • Cuáles son las Mejores Prácticas para Crear Hojas de Estilo
  • Entendimiento Más Profundo de CSS
  • Cómo Crear Diseños Multi Columnas
  • Cuáles es la Diferencia entre Elementos de Bloque y Elementos en Línea
  • Cómo Posicionar Elementos en el Documento (Relativo, Absoluto o Fijo)
  • Cómo Elegir Elementos Específicos con Selectores Avanzados de CSS
  • Cómo Crear animaciones, transiciones y transformaciones utilizando CSS
  • Cómo Crear efectos Parallax por Desplazamiento Utilizando CSS Sólamente
  • Cómo Hacer Páginas Web Responsivas con Media Queries

Fechas y Horarios

11

Julio

14

Mayo

Lunes a Viernes de 6pm a 9pm
Sábado de 9am a 2pm

Duración de Curso: 20 horas

Precio

$180.00

$360.00

Inscríbete

Cursos Prescenciales

Los cursos se dicatarán en salones equipados con computadoras de escritorio con las aplicaciones necesarias para empezar tu aprendizaje de manera eficaz. Adicionalmente contarás con la participación de un instructor experimentado a tu entera disposición.

Libro de Guía

los cursos incluye un libro para ser utilizado como guía. Estos libros constan de la descripción de los conceptos básicos tocados durante el curso, al igual que una gran variedad de ejemplos, los cuales te servirán de base para tus primeros proyectos.

Acceso a Materiales vía Web

Se te proporcionarán credenciales personalizadas para que accedas a la plataforma Web para así obtengas las presentaciónes y los libros de cada curso actualizado con las últimas tendencias de la materia.

Temas del Curso:

Sección 1

Blog Minimalista: El Modelo de Cuadro
  • Utilizar normalize.css
  • Establecer Valores Predeterminados para la Página
  • Reducir Escala de Imágenes de Alta Resolución para que Quepan el Ancho del Navegador
  • Restringir el Ancho del Contenido
  • El Modelo de Cuadro: Añadir Relleno, Margen y Bordes
  • Visualizar el Modelo de Cuadro en el DevTools de Chrome
  • Arreglar problemas de Espaciado Alrededor de Las Imágenes
Blog Minimalista: CSS Optimizado
  • Establecer el Espaciado del Texto por defecto Utilizando una Relación
  • Agrupar Selectores Separando con Coma
  • Font-Weight Numérico: Más allá de las Negritas
  • Añadir Imagen de Fondo a los Títulos h1
  • Utilizar Abreviado con Tres Valores
Creando Columnas con Float
  • Crear un Diseño de 2-Columnas con Float
  • Solución #1: Utilizar la Propiedad Clear
  • Añadir Borde entre Columnas
  • Solución #2: Establecer Propiedad Overflow a Hidden
Introducción a las Media Queries
  • Encontrar un Punto de Quiebre Apropiado
  • Anatomía de un Media Query
  • Utilizar la Media Query para Crear un Diseño Alternativo
  • Ancho Máximo con Max-Width Media Queries
  • Achicar Títulos en Pantallas Más Pequeñas

Sección 2

La Propiedad Display: Inmersión Profunda
  • Tipos de Display: Block, Inline e Inline-Block
  • Dar Estilo al Encabezado y el Pie de Página de Manera DRY
  • Cambiar la Propiedad Display para Incrementar Área de Toque
  • Desplegar la Navegación Lado a Lado en Pantallas Anchas
  • Utilizar Inline-Block Como Alternativa a Float
La Propiedad Posición: La Clave para Diseños Complejos
  • El Valor Static y el Flujo Normal del Documento
  • Un Vagabundo Nostálgico: El Valor Relative
  • El Valor Absolute
  • El Dúo Dinámico: Un Padre Relativo, Un Hijo Absoluto
  • El Valor Fixed
Crear un Encabezado Fijo
  • Mover el Ítem Contáctenos al Fondo a la Derecha de la Barra de Navegación
  • Crear un Encabezado Fijo Para Pantallas Anchas
  • Colocar una Imagen de Fondo para la Sección de Preguntas y Respuestas
Reemplazar con Imágenes
  • Reemplazar Texto HTML con Imágenes de Fondo
  • Quitar Texto Utilizando un Valor Negativo de Text-Indent
  • Utilizar Overflow: Hidden
  • Quitar Texto con Height: Zero
  • Crear un Contenedor de Imágenes Fluidas Utilizando Relleno Proporcional Superior

Sección 3

CSS Sprite
  • ¿Que es un Sprite?
  • Crear un Sprite
  • Reemplazar Imágenes
Gradientes de Fondo y Colores Transparentes
  • Specificar Colores RGB
  • Añadir Transparencia (Alpha) a Colores de Fondo con RGBA
  • Gradiente de Fondo con CSS
Diseño Multi Columna
  • Diseño de 3 Columnas Utilizando Inline-Block
  • Selectores CSS Anidado
Selectores CSS
  • Adyacente
  • first-of-type
  • first-child
  • last-child
  • last-of-child
  • nth-child
  • Selector child
  • :before y :after

Sección 4

Selectores de Atributo
  • Sintaxis de Selectores de Atributo
  • Operador Sombrero (^)
  • Operador Dollar ($)
  • Operador Asterisco (*)
Estilizar Formulario
  • Utilizar un Selector de Atributo para Elegir Campos de Entrada (Inputs)
  • Anular Estilos por Defecto
Crear Flotadores
  • La Clase clearfix de CSS
Dimensionar Tipografía
  • Trabajar con REM
  • REM vs EM

Sección 5

Sombras con CSS3
  • Sombra para los Cuadros con Box-Shadow
  • Sombra para el Texto con Text-Shadow
  • Z-Index
Mostrar y Ocultar Elementos
  • Display: None
  • Visibilidad
  • Opacidad
Transiciones CSS
  • La Propiedad Transition
  • La Propiedad Duración
  • Abreviatura para Transición y El Apilado Transición
Transformaciones CSS
  • Transformar la Escala
  • Transformar la Rotación
  • Transición de Transformaciones

Sección 6

Indicadores Estás Aquí
  • Marcadores de Página en la Navegación
  • Formas CSS
Técnicas de Desplazamiento (Scrolling) Responsivo con CSS Parte 1
  • Estilo Inicial de la Página
Técnicas de Desplazamiento (Scrolling) Responsivo con CSS Parte 2
  • Crear una animación CSS para un Video de YouTube
Técnicas de Desplazamiento (Scrolling) Responsivo con CSS Parte 3
  • Animar el Panorama
  • Hacer el Diseño Responsivo

Código Escuela

Código Escuela es un sitio para aprender a crear páginas web ubicada en la ciudad de Panamá.

Contáctenos

  • cursos@codigoescuela.com
  • +(507)395-2802

Ubicación

  • Calle 77, San Francisco,
  • Edificio #29
  • Ciudad de Panamá,
  • Ver en Mapa

Suscríbete al Boletín

Gracias por suscribirte, Por favor verifica tu correo para completar la suscripción y está pendiente por nuevos cursos y promociones.

Código Escuela © 2014 - 2021. Todos los derechos Reservados.