Curso de maquetación web con CSS

¿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.