Curso de CSS desde cero [completo]

Ver el curso en GitHub

¿Quieres el libro del curso?

1.1 - Introducción a CSS

1.3 - Selectores

1.4 - Añadir CSS al HTML

1.6 - Backgrounds

2.1 - Introducción al responsive design

4.1 - Proyecto con flotantes

4.2 - Estructura del proyecto

4.3 - Estructura básica de HTML y CSS

4.4 - Fuentes personalizadas

4.5 - HTML del Header

4.6 - CSS del Header

4.7 - HTML del menú principal

4.8 - CSS del menú principal

4.9 - HTML del aside

4.10 - CSS del aside

4.11 - HTML del contenido

4.12 - CSS del contenido

4.13 - HTML del footer

4.14 - CSS del footer

4.15 - BONUS - Crear diferentes temas

5.1 - Proyecto responsive

5.2 - Estructura del proyecto

5.3 - Estructura básica de HTML y CSS

5.4 - Estilos generales

5.5 - Montamos el grid

5.6 - Estructura de menu, contenido y aside

5.7 - HTML del menu

5.8 - CSS del menu

5.9 - HTML de los productos

5.10 - CSS de los productos

5.11 - HTML del aside

5.12 - CSS del aside

5.13 - HTML del footer

5.14 - CSS del footer

5.15 - BONUS - Efectos sobre las imágenes

6.1 - Introducción a Flexbox

6.2 - Flex container

6.3 - Flex items

6.4 - Media queries con Flexbox

6.5 - Galería de imágenes con Flexbox

6.6 - Layout con Flexbox

6.7 - Jugamos a Flexbox Froggy

6.8 - Jugamos a Flexbox Defense

7.1 - Navegación con flexbox

7.2 - Tarjetas con flexbox

7.3 - Objetos multimedia con flexbox

7.4 - Flexbox en formularios

8.1 - Proyecto con flexbox

8.2 - Estructura del proyecto

8.3 - Header HTML y CSS

8.4 - Barra de navegación HTML y CSS

8.5 - Estructura del aside y el contenido

8.6 - Aside HTML y CSS

8.7 - Contenido HTML y CSS

8.8 - Footer HTML y CSS

8.9 - BONUS - Flip Card

9.1 - Introducción a Grid Layout

9.2 - Grid container

9.4 - Grid items

9.5 - Media queries con Grid Layout

9.6 - Layout responsive con Grid Layout sin media queries

9.7 - Jugamos a Grid Garden

10.1 - Proyecto con CSS Grid Layout

10.2 - Estructura del proyecto

10.3 - HTML del calendario

10.4 - CSS del container

10.5 - Preparamos el grid

10.6 - CSS de las tareas

10.7 - BONUS - Detalles de las tareas en hover

11.1 - Presentación y recursos

11.2 - Estructura del proyecto

11.3 - HTML de los menús

11.4 - Montamos el CSS Grid Layout

11.5 - CSS del header

11.6 - CSS del sidebar

11.7 - Añadimos el Footer

11.8 - JavaScript para añadir las imágenes

11.9 - Flex para organizar las imágenes

11.10 - BONUS - Las imágenes en columnas CSS

Artículos relacionados:

Cómo crear una página web con HTML y CSS desde cero usando flotantes float

Aprende LESS en 15 MINUTOS

Aprende Tailwind CSS en MENOS de 15 MINUTOS

Aprende SASS en menos de 15 minutos

Respondo a un hater creando el slider perfecto

Cómo centrar un DIV con Flexbox

Cómo poner la PRIMERA LETRA más GRANDE en CSS

Margin VS Padding en CSS - ¿Cúando usar cada uno?

Aprende CSS en menos de 15 minutos

Aprende CSS Grid Layout en menos de 15 Minutos

Centrar en CSS Vertical y Horizontal en sólo 1 LINEA de CÓDIGO

Aprende CSS Flexbox en MENOS de 15 MINUTOS

Cómo hacer un slider en HTML y CSS [Código para copiar]

Cómo hacer una Calabaza de Halloween con CSS

¿Qué son los FLEX ITEMS en Flexbox CSS?

< Clase anterior

Siguiente clase >

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

Elementos hijos

Automáticamente todos los elementos hijos del flex container se convierten en elementos flexibles.

Estos elementos tienen estas propiedades:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

Especifica el orden de los elementos.

See the Pen CSS | Flexbox - 27 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-grow

Determina cuánto “crece” un elemento relativo al resto de elementos.

See the Pen CSS | Flexbox - 28 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-shrink

Determina cuánto se puede “encoger” un elemento respecto al resto de elementos.

See the Pen CSS | Flexbox - 29 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex-basis

Determina la longitud inicial del elemento

See the Pen CSS | Flexbox - 30 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

flex

Es una manera más corta de usar las propiedades flex-grow, flex-shrink y flex-basis

See the Pen CSS | Flexbox - 31 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

align-self

Es una manera más corta de usar las propiedades flex-grow, flex-shrink y flex-basis

See the Pen CSS | Flexbox - 32 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

SÍGUEME:

NEWSLETTER:

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares

View this post on Instagram

A post shared by Memes de Kiko Palomares (@memes_kikopalomares)

Koding Beats