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

Cómo es la Sintaxis en 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

Sintaxis CSS

Un conjunto de reglas CSS consta de un selector y un bloque de declaración

El selector apunta al elemento HTML que desea diseñar.
El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Una declaración CSS siempre termina con un punto y coma, y los bloques de declaración están rodeados por llaves.

Sintaxis CSS

En este ejemplo todos los elementos <p> serán de color rojo y estarán centrados.

See the Pen CSS | 1.2 - Sintaxis - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Comentarios en CSS

Los comentarios se utilizan para explicar el código y pueden ser útiles cuando se edite el código en el futuro.

Los comentarios son ignorados por los navegadores.

See the Pen CSS | 1.2 - Sintaxis 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