La idea base de este curso es poder construir una página de manera práctica, por ejemplo la página de Google. HTML es un lenguaje de etiquetas que permite estructurara la página, mientras CSS apartir de sus distintos selectores permite estilar, ubicar y dimensionar el contenido de la página.
Para lograr construir el clon de Google primero debemos analizar la página y seccionarla por partes: Desde el header con los botones de navegación, como la sección principal y el buscador, hasta el footer con otras opciones.
Tras hacernos a una idea de los elementos de la página se debe crear un Setup del proyecto, es decir, un entorno donde trabajar.
El entorno implica ordenar la jerarquía de carpetas del proyecto. En este caso se incluye un archivo
index.html, una carpeta CSS y dentro un archivostyle.cssprincipal
Dentro del index se inicializa el documento de HTML con la estructura básica.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="CSS/style.css" />
<title>Document</title>
</head>
<body>
</body>
</html>
Significado de las etiquetas:
<aside> 🛠 Es importante que como desarrolladores contemos con herramientas para poder corregir y manejar nuestra trabajo. Es recomendable usar un navegador con edición de Developer como el Firefox Developer o usar extensiones como las Chrome Dev Tools
</aside>
Las Chrome Dev Tools permiten depurar todo el código dentro del desarrollo web, desde la manipulación del HTML y del CSS en tiempo real y la verificación y debbuging paso a paso de código JS.
Para abrir las herramientas de desarrollador se usa la combinación Ctrl + Shift + I o Click derecho → Inspeccionar.
Allí podremos visualizar los distintos elementos de la página, las configuraciones y estilos CSS y una consola para la ejecución de comandos y funciones de JS