Grid Layout

Grid Layout

Temario

Curso de HTML

1.

¿Qué es HTML?

2.

Herramientas de desarrollo

3.

Ejercicio: mi primera página web

4.

Estructura de una página web

5.

Comentarios en HTML

6.

Carga de imágenes con HTML

7.

Encabezados y párrafos

8.

Enlaces en HTML

9.

Video y audio

10.

Listas en HTML

11.

Ejercicio etiquetas básicas de HTML

12.

Tablas en HTML

13.

Hacer una newsletter con HTML

14.

Estilos en línea

15.

Padding y width

16.

Cómo incrustar iFrames en nuestra página HTML

17.

Cargar un favicon en una página HTML

18.

Margin Collapse

19.

img vs background

20.

Ejercicio margin collapse

21.

Ejercicio de maquetación vertical con HTML

22.

display:block, inline, inline-block

23.

float:left en CSS

24.

Ejercicio 3 columnas

25.

Ejercicio ventana - display:inline-block y float:left

26.

Ejercicio sencillo de html

27.

Ejercicio panteón

28.

Hojas de estilos

29.

Tipos de selectores

30.

Ejercicios de etiquetas y selectores en CSS

31.

display: flex o flexbox

32.

Estilo CSS background para las imágenes de fondo

33.

Motores de navegación

34.

text-shadow

35.

border-radius, box-shadow

36.

Cargar fuentes (letras) con CSS

37.

border-image

38.

Estilo CSS para definir columnas en una página web

39.

Animaciones con Transition

40.

Como usar el estilo transform de CSS

41.

text-overflow

42.

Hacer una newsletter responsive sin media queries

43.

Reseteadores de estilos

44.

Ejercicio CSS

45.

Tips de CSS

46.

Estilos position en CSS

47.

Modificación de la opacidad (opacity) de un elemento con CSS

48.

Popups con CSS

49.

Ejercicio - Galería de fotos

50.

Menú desplegable con HTML

51.

Animaciones con keyframes

52.

Estilo !important de CSS

53.

Maquetar una web

54.

Grid Layout

55.

Hacer página Grassy Green

56.

Cómo hacer el efecto Parallax sólo con HTML y CSS

57.

Novedades de HTML5

58.

divs semánticos

59.

Carga de imágenes en formato svg en una página web

60.

Formularios en HTML

61.

Selectores avanzados de CSS

62.

Responsive Design con media queries

63.

Más ejercicios de html

64.

Proyecto final

65.

Enlaces de interés

66.

Extras de HTML

Contactar con el profesor

Cuando queremos controlar los anchos de las columnas de nuestra regilla, display:grid suele ser una solución más cómoda que display:flex.

display:grid básico

Usando grid-column y grid-row

Usando grid-area

Ejercicio Grid Layout

Utilizando el estilos display:grid, realiza la maquetación del enlace.

Grid Layout 1 — Descarga la imagen superior para hacer el ejercicio

Ejercicio Grid Layout 2

Resolver este ejercicio modificando sólo el código CSS del ejercicio propuesto. No modificaremos su código HTML.