DISEÑO CON CSS – Cámara Latinoamericana de Comercio

Contenido del Diplomado

Contenido del Curso

Expandir todo

CSS

INTRODUCCIÓN 6 Temas

Expandir

Contenido de la Lección

0% Completado 0/6 pasos

SILABO CSS

¿Qué es CSS?

¿Qué necesito para tomar el curso?

Expandir

Contenido de la Lección

0% Completado 0/13 pasos

Selectores de etiqueta

Selectores de clase

Selectores de ID

Selector universal

Selector case senstitive y case insensitive

Selectores agrupados

Selectores Descendientes

Selector Hijo directo

Selector hermano siguiente

Selector hermanos siguientes

Selector de atributo

Selector de atributo comienza con y termina con

Selector de atributo que contiene

LOS PILARES DE CSS 4 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Especificidad

Cascada

Estilos computados por el navegador

Herencia

EVALUACIÓN #1

MODELO DE CAJA 7 Temas

Expandir

Contenido de la Lección

0% Completado 0/7 pasos

Layout

Elementos en línea y en bloque

BORDES Y SOMBRAS 2 Temas

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

Border radius

Box shadow

PSEUDOCLASES 1 Tema | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Pseudoclases Hover – Active – Visited

EVALUACIÓN #2

FONDOS 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Background-color background-image background-repeat

Background-size

Background-attachment

COLOR 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Color Keyword

Color hexadecimal

Color RGB

TEXTOS 4 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Unidades de medida

Propiedad para texto

Propiedad Font-family

Propiedad Text-shadow

EVALUACIÓN FINAL

FLEXBOX

INTRODUCCIÓN 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

SILABO FLEXBOX

¿Qué es Flexbox?

Soporte de los navegadores de Flexbox

FLEX CONTAINER 3 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Main axis y cross axis

Flujo de Flexbox

Alineación en Flexbox

EVALUACIÓN #1

FLEX ITEMS 7 Temas

Expandir

Contenido de la Lección

0% Completado 0/7 pasos

Flex items

Propiedad flex-grow

Propiedad flex-shrink

CASOS PRÁCTICOS USANDO FLEXBOX 5 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/5 pasos

Centrado absoluto

Creación de un Menú Responsive – Parte 1

Creación de un Menú Responsive – Parte 2

Creación de un Menú Responsive – Parte 3

Banner de tipo acordeón

EVALUACIÓN FINAL

CSS GRID

INTRODUCCIÓN 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

SILABO CSS GRID

Conceptos generales

Terminología y Elementos

GRID CONTAINER 4 Temas

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Inspeccionar elementos de CSS Grid

Definir Tracks (Filas y columnas)

Propiedad grid-gap y unidad fr

Posicionar grid-items – grid-column – grid-row – Función repeat ()

GRID ITEMS 5 Temas

Expandir

Contenido de la Lección

0% Completado 0/5 pasos

Tracks flexibles con fr

Tracks flexibles on min-content, max-content y fit-content

Tracks flexibles con minmax()

Tracks flexibles auto-fit y auto-fill

Grid areas

ALINEACIÓN CON CSS GRID 2 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

CSS AVANZADO

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

SILABO CSS AVANZADO

MATERIAL UTILIZADO EN CLASE

Introducción al curso

POSITION I 5 Temas

Expandir

Contenido de la Lección

0% Completado 0/5 pasos

Propiedades Offset (Top, Right, Bottom, Left)

Position relative

Position absolute

Ejercicio Práctico – Banner Parte 1

Ejercicio Práctico – Banner Parte 2

POSITION II 4 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Position fixed

Position sticky

Propiedad z-index

Ejercicio práctico – Ventana Modal

EVALUACIÓN #1

PSEUDO ELEMENTOS 6 Temas

Expandir

Contenido de la Lección

0% Completado 0/6 pasos

Pseudo elementos ::before y ::after Parte 1

Pseudo elementos ::before y ::after Parte 2

Pseudo elemento ::selection

Pseudo elemento ::first-line

Pseudo elemento ::first-letter

Pseudo elemento ::marker

LISTAS 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Propiedad list-style-type

Propiedad list-style-image

Propiedad list-style-position

TEXTOS 4 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Fuentes para la Web

@font-face

Propiedad overflow

Texto en vertical – Propiedad writing-mode

EVALUACIÓN #2

TABLA 1 Tema

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Diseño de una Tabla Responsive

FORMULARIO 2 Temas

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

Diseño de un Formulario de contacto Parte 1

Diseño de un Formulario de contacto Parte 2

RECORTES 4 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Expandir

Contenido de la Lección

0% Completado 0/5 pasos

Filter blur() y grayscale()

Filter brightness() y contrast()

Filter hue-rotate() e invert()

Filter opacity() y satúrate()

Filter sepia()

MODOS DE FUSIÓN – BLENDING MODE 3 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Modo de fusión darken

Modo de fusión color | color-dodge | color-burn

Más modos de fusión

EVALUACIÓN FINAL

VARIABLES CSS

VARIABLES CSS 6 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/6 pasos

SILABO VARIABLE CSS

¿Qué son las variables CSS?

Variables a nivel Scope

Variables CSS vs Variables SASS

Variables CSS en Responsive Web Design

Obtener y manipular Variables CSS con JavaScript

EVALUACIÓN FINAL

RESPONSIVE WEB DESIGN

INTRODUCCIÓN 5 Temas

Expandir

Contenido de la Lección

0% Completado 0/5 pasos

SILABO RESPONSIVE WEB DESIGN

RESPONSIVE WEB DESIGN 6 Temas

Expandir

Contenido de la Lección

0% Completado 0/6 pasos

Unidades relativas

Unidades de viewport

Responsive Web Design con Flexbox

Responsive Web Design con Grid

Breakpoints – Parte 1

Breakpoints – Parte 2

IMÁGENES Y VIDEOS RESPONSIVE 3 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Imágenes responsive

Videos responsive

Videos responsive con Grid

EVALUACIÓN FINAL

ANIMACIONES CON CSS

INTRODUCCIÓN 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

SILABO ANIMACIONES CON CSS

COFICICACIÓN USADA EN CLASE

Introducción

Conceptos generales 2 Temas

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

Propiedades CSS que pueden ser animadas

Estado inicial de las propiedades CSS

Transiciones 3 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Introducción a las Animaciones y Transiciones

– Transiciones: – transition-property – transition-duration – transition-delay

Propiedad transition-timing-function

EVALUACIÓN #1

Transformaciones 7 Temas

Expandir

Contenido de la Lección

0% Completado 0/7 pasos

Transformaciones: – Translate() – Scale() – Rotate() – Skew()

Ejercicio Práctico #1 – Menú Animado

Ejercicio Práctico #2 – Botones Animados – Parte 1

Ejercicio Práctico #2 – Botones Animados – Parte 2

Ejercicio Práctico #2 – Botones Animados – Parte 3

Ejercicio Práctico #2 – Botones Animados – Parte 4

Ejercicio Práctico #2 – Botones Animados – Parte 5

Animaciones 4 Temas

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Animation-name | animation-duration | animation-iteration count | @keyframes

Animation-play-state | animation-delay | animation-timing function |

animation-direction

animation-fill-mode

Cubic Bezier 1 Tema | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Cubic Bezier()

EVALUACIÓN #2

Eventos de Transición en JavaScript 1 Tema

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Transitionrun | transitionstart | transitioncancel | transitionend

Ejercicio Práctico #3– Flip Card 3D 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Flip Card 3D – Parte 1

Flip Card 3D – Parte 2

Flip Card 3D – Parte 3

Ejercicio Práctico #4 – Animaciones Hover 3 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Animaciones Hover – Parte 1

Animaciones Hover – Parte 2

Animaciones Hover – Parte 3

EVALUACIÓN FINAL

SASS

INTRODUCCIÓN 7 Temas

Expandir

Contenido de la Lección

0% Completado 0/7 pasos

SILABO SASS

¿Qué es un Preprocesador?

¿Qué es Sass?

Compilar Sass con Prepros

Compilar Sass con SassMeister y CodePen

Compilar Sass con Live Sass Compiler

Compilar Sass línea de comando (Terminal)

VARIABLES 1 Tema

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Variables

ANIDACIONES 1 Tema

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Anidaciones

TIPOS DE DATOS E IMPORTAR 2 Temas

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

Tipos de datos

@import

ESTRUCTURA DE CARPETAS DE UN PROYECTO SASS 2 Temas

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

Estructura de carpetas de un Proyecto Sass – Parte 1

Estructura de carpetas de un Proyecto Sass – Parte 2

DIRECTIVA @EXTEND 1 Tema | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Directiva @extend

EVALUACIÓN #1

CONDICIONALES Y CICLOS 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Expandir

Contenido de la Lección

0% Completado 0/5 pasos

Definición de @mixin

@mixin con Selectores

Llamando a un @mixin fuera de un Selector o Regla

@mixin con Argumentos

@mixin con Argumentos con valores por defecto

FUNCIONES 4 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/4 pasos

Definición de funciones – Funciones propias

Funciones de Color

Función de número Percentage()

Función de lista nth()

EVALUACIÓN FINAL

Contenido del Diplomado

Contenido del Curso

Teléfono:

E-Mail:

Dirección: