DISEÑO CON CSS

Descripción
Brochure

Descripción

CSS es un lenguaje de diseño gráfico el cual permite dominar los elementos de una página como los documentos, añadiendo colores, formas, márgenes entre otros.

Brochure

S/850.00

S/390.00

Este curso incluye:

Acceso en dispositivos móviles
Certificado de Finalización

Categoría: diplomado

Contenido del Curso

Expandir todo

CSS

INTRODUCCIÓN 6 Temas

Expandir

Contenido de la Lección

0% Completado 0/6 pasos

¿Qué necesito para tomar el curso?

Conectar HMTL y CSS

Sintaxis de CSS

SELECTORES 13 Temas

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

Estilos computados por el navegador

MODELO DE CAJA 7 Temas

Expandir

Contenido de la Lección

0% Completado 0/7 pasos

Elementos en línea y en bloque

BORDES Y SOMBRAS 2 Temas

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

PSEUDOCLASES 1 Tema | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

Pseudoclases Hover – Active – Visited

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Background-color background-image background-repeat

Background-size

Background-attachment

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Color hexadecimal

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

¿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

FLEX ITEMS 7 Temas

Expandir

Contenido de la Lección

0% Completado 0/7 pasos

Propiedad flex-grow

Propiedad flex-shrink

Propiedad flex-basis

Propiedad align-self

Propiedad order

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

ALINEACIÓN CON CSS GRID 2 Temas | 1 Cuestionario

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

Alineación de items

Alineación de tracks

EVALUACIÓN FINAL

CSS AVANZADO

INTRODUCCIÓN 3 Temas

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 sticky

Propiedad z-index

Ejercicio práctico – Ventana Modal

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

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

Propiedad overflow

Texto en vertical – Propiedad writing-mode

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

Recorte rectángular

Recorte circular

Recorte elíptico

Recorte poligonal

FILTROS 5 Temas

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

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

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

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

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

¿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

ANIDACIONES 1 Tema

Expandir

Contenido de la Lección

0% Completado 0/1 pasos

TIPOS DE DATOS E IMPORTAR 2 Temas

Expandir

Contenido de la Lección

0% Completado 0/2 pasos

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

CONDICIONALES Y CICLOS 3 Temas

Expandir

Contenido de la Lección

0% Completado 0/3 pasos

Condicional @if

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