Home Tags Posts tagged with "css"
Tag

css

web grupal vleg

Ya han transcurrido 3 semanas desde que comencé el programa de formación de Desarrollo en Front-end de Adalab. Durante este tiempo, tuvimos como como primer objetivo; la creación de una web grupal. Este proyecto denominado Sprint 1  Hello World, nos permitiría poner en practica los conceptos relacionados a HTML y CSS.

Estructura Sprint 1 Hello World

HTML

HTML es un lenguaje de marcado que nos permite codificar un documento a través de la incorporación de etiquetas que contienen información como textos, imágenes, enlaces, etc.

Para comenzar a codificar una página web lo hacemos indicando que es una página HTML utilizando la etiqueta <html>. Dentro de esta incluiremos otras etiquetas como la cabecera o <head>, donde se especifican aspectos relativos al contenido, como el título de la web. También se incluye el cuerpo o <body>, donde irá todo el contenido de nuestra página.

Así se ve el código básico de una una página HTML con su cabecera y cuerpo.

estructura código básico html

CSS

Las hojas de Estilo en Cascada (Cascade Style Sheet) es un lenguaje de estilo que se usa para describir la presentación y el aspecto de una web.

A través del CSS utilizamos una serie de reglas para dar estilo a los elementos del HTML, siguiendo una sintaxis específica.

Cada regla consta de un selector, seguido de una declaración que va entre corchetes y la cual contiene una propiedad o atributo y un valor asociado.

Regla CSS para dar estilo a la página:

estructura código de css básico

Bonus: Flexbox

Un apartado interesante que hemos tocado durante el desarrollo del Sprint 1 ha sido la propiedad flexible o “Flexbox” la cual permite colocar elementos en la página de modo que puedan ajustarse a cualquier tipo de pantalla o dispositivo.

Flexbox aporta una mejora a la hora de posicionar elementos ya que no utiliza la propiedad float, ni hace que los márgenes del contenedor con la propiedad flexible interfieran con los márgenes de lo que hay en su contenido.

cajas con flexbox

Para saber mucho mas sobre Flexbox, no dudes en echarle un vistazo a la guía de CSS-TRICKS (in English) o de Soy Frontend (en español)

El resultado final

Tras 3 semanas de alta motivación y mucho aprendizaje, finalmente conseguimos cumplir con el objetivo del Sprint 1 Hello World; crear una web grupal donde implementáramos todo lo aprendido durante este corto pero intenso periodo. Si quieres ver el resultado final , AQUI lo tienes.

web grupal vleg

 

noviembre 30, 2017 0 comment
0 Facebook Twitter Google + Pinterest