Desarrollo Web

Curso de maquetación web con CSS

Aprende maquetación Web con CSS para que mediante el uso de hojas estilos puedas definir claramente la estructura de todos los elementos de tu Web como un profesional.
4.4 (591 valoraciones)
2 horas y 10 minutos · Curso
Maquetación web con CSS

Lo que aprenderás en este curso:

  • Aprenderás a crear de manera clara y eficaz la estructura de tu Web colocando los elementos donde tú deseas.
  • Conocerás el funcionamiento a nivel de maquetación de los distintos tipos de etiquetas.
  • Comprenderás cómo funciona el flujo de una Web
  • Aprenderás cómo el flujo de elementos Web se adapta a los distintos tamaño de pantallas y navegadores.
  • Crearás la maquetación de una página web compleja.

Requisitos del curso

Para poder realizar este curso con soltura debes de tener una base sólida de HTML y de CSS, si quieres obtenerlos tienes disponible el curso de HTML5 y CSS3 desde cero, ideal para introducirte en el desarrollo Web.

Valoraciones de estudiantes:

  • 5
  • 4
  • 3
  • 2
  • 1
4.4
591 valoraciones

Contenido del curso:

    • 1m
    • ¿Qué es la maquetación web?
      3m
    • Entorno de trabajo y referencias
      4m
    • Estructura del resto del curso
      2m
    • Presentación del proyecto practico
      2m
    • Recomendaciones para maquetar correctamente
      8m
    • 2m
    • Propiedad Display
      10m
    • Tipos de layouts
      8m
    • Box-sizing
      6m
    • Centrado del layout
      11m
    • Propiedad Position: Posicionando elementos
      13m
    • PRÁCTICA: Propiedad Position
      10m
    • Columnas
      5m
    • Elementos flotantes
      13m
    • PRÁCTICA: Elementos flotantes
      11m
    • PROYECTO PRÁCTICO: Maquetar una pagina web
      13m
También te puede interesar

Te dejamos una selección de cursos, carreras y artículos

Tecnología Desarrollo Web

Los cambios de HTML y HTML5 y su evolución

20 Enero 2019 Juan Diego Pérez Jiménez
Tecnología Diseño Web

Cambios entre CSS y CSS3

22 Enero 2019 Juan Diego Pérez Jiménez

Dudas frecuentes

1

¿Cuándo comienza la formación?

En OpenWebinars las formaciones no tienen fecha de inicio y de final.

Cada curso tiene una fecha de publicación y desde ese día estarán 100% disponible todos los contenidos del curso para los usuarios suscritos a alguno de nuestros planes.

2

¿Cuál es el precio?

En OpenWebinars no vendemos formaciones.

Tenemos diferentes tipos de suscripciones, que te dará acceso completo a todas las formaciones de la plataforma y a las nuevas que vamos lanzando, siempre y cuando tu suscripción esté activa (como Spotify con la música o Netflix con las películas y series).

¿Eres una empresa? Tenemos planes especiales para ti. Consúltanos aquí.

3

¿Obtengo un diploma de certificación?

En todos los cursos existe un examen final para evaluar tus conocimientos adquiridos. Si superas este examen con más de un 80% de preguntas correctas obtendrás el diploma de certificación. Puedes realizar un intento cada 24 horas.

Este diploma es un certificado privado emitido por OpenWebinars, y valorado en el mundo empresarial, ya que tenemos grandes compañías clientes que se forman con nosotros y valoran nuestras certificaciones.

No olvides poner tu certificación en tu perfil Linkedin y en tu currículum.

¿Quieres convertirte en desarrollador web profesional? Este curso de maquetación web es fundamental para comenzar a dominar las hojas de estilo CSS y sus aplicaciones, para que seas capaz de crear todo tipo de páginas web.

Si no tienes conocimientos previos sobre cómo maquetar una página web, este curso te resultará una forma muy interesante para comenzar desde cero, ya que el desarrollo de este curso de CSS se ha planteado de una forma tanto teórica como práctica, para que adquieras los fundamentos del lenguaje CSS de una forma aplicada.

Lo primero que te proponemos, si te animas a realizar el curso, es una introducción general del curso y al profesor que lo imparte. También hemos preparado uno resumen en el que te hablaremos de qué es la maquetación web, cómo se realiza, algunos consejos previos y unos ejemplos de diferentes tipos de maquetación.

Una vez introducidos ya en la maquetación CSS, conocerás el entorno de trabajo que se utilizará para el desarrollo del mismo y las herramientas que se recomiendan utilizar para desarrollar la maquetación web, como los navegadores Chrome o Firefox, el editor Visual Studio y algunas de sus extensiones, GitHub para el control de versiones.

Tras ver todo lo anterior ya podrías entrar de lleno en el curso propiamente dicho, que se va a desarrollar en diferentes lecciones que podrás ir realizando a medida que vayas superando las anteriores y tu tiempo te lo permita.

En este bloque durante el que irás aprendiendo a maquetar una web, comenzaremos proponiendo una serie de reglas o consejos fundamentales para realizar una maquetación correcta, lo que permitirá agilizar el proceso y todo el trabajo posterior que se quiera desarrollar sobre una maquetación previa.

En la siguiente lección irás conociendo el flujo de los elementos de una web cuando se abre con un navegador, cómo va a tratar las diferentes etiquetas y marcas de la misma. Aquí recordaremos algunos conceptos muy básicos de HTML para entrar poder entender bien los temas tratados.

Seguidamente introduciremos la propiedad display, su funcionamiento, sus valores más habituales y cómo influye en la visualización de nuestra página web. Verás la aplicación de esta propiedad en los diferentes elementos de una web, primero en su parte teórica y después en su parte aplicada.

Una vez acabada esta lección puedes continuar tu formación aprendiendo qué es el layout y los diferentes tipos que existen, sobre todo centrados en los tipos fixed, elastic, fluid y con min/max sizing, que son los más básicos y fundamentales.

El siguiente concepto que va a desarrollar el profesor será el del box-sizing, un concepto realmente importante a la hora de maquetar. Verás qué significa, cómo se aplica y las diferentes posibilidades que ofrece, como siempre combinando la teoría con la práctica.

Después se trata el tema del centrado de elementos, que también resulta uno de los más importantes dentro de los que aprenderás durante este curso. Conocerás los diferentes tipos de centrados que existen, tanto horizontales como verticales, cómo aplicarlos y cómo afectan a la maquetación de la web.

Complementando lo visto anteriormente, la siguiente lección trata sobre la propiedad position, que permite posicionar elementos sin tener en cuenta el flujo normal, lo que resulta de gran importancia a la hora de hacer una maquetación de la web más precisa.

Para ayudarte a comprender mejor el funcionamiento de position, podrás ver los ejemplos visuales que el profesor realiza con la misma, y además te proponemos un ejercicio totalmente práctico para que compruebes si realmente dominas su uso. Una vez termines de hacer este ejercicio, podrás acceder a su solución para verificar si lo has hecho correctamente.

Las dos últimas lecciones del curso te permitirán conocer dos nuevos conceptos, como son las columnas y los elementos flotantes, además de las propiedades de las mismas, sus posibles usos para maquetar una web y su aplicación práctica. Además, sobre los elementos flotantes te proponemos otro ejercicio para que puedas practicar con ellos y afianzar mejor el concepto y su empleo.

Para cerrar el curso, una vez vista toda la teoría, llegarás a la propuesta de realización de un proyecto práctico. Este proyecto consiste en la maquetación completa de una página web utilizando todos los conceptos vistos previamente. Es una forma muy interesante de completar la formación y comprobar si realmente has comprendido bien la teoría y has sabido aplicarla correctamente.

Artículos
Ver todos