Estructura Inicial de Proyecto Web con HTML y CSS

Clase 7 de 17 • Curso de Materialize

Clase anteriorSiguiente clase

Resumen

¿Cómo preparar el entorno de trabajo para iniciar un proyecto web?

Empezar un nuevo proyecto web puede ser emocionante, pero también requiere preparar el entorno de trabajo de manera adecuada. Esta clase te guiará en la creación de las carpetas y archivos necesarios para estructurar tu proyecto. Un entorno bien configurado es esencial para un desarrollo eficiente y ordenado. Te mostraremos cómo gestionar tus archivos HTML, CSS y otras dependencias clave, utilizando herramientas como Visual Studio Code.

¿Qué archivos y carpetas crear al empezar un proyecto?

La estructura básica de un proyecto web suele comenzar con la creación de varias carpetas y archivos fundamentales.

  1. Archivos HTML: Necesitarás un archivo HTML para cada vista de tu proyecto. En este caso, se crearán los siguientes:
    • index.html: Será el archivo inicial.
    • Otros archivos HTML: Serán generados según las necesidades del proyecto.
  2. Carpeta y archivo CSS: Es esencial para los estilos de tu web.
    • Carpeta css: Almacena los archivos de estilos.
    • main.css: Este archivo contendrá los estilos básicos que aplicarás a tus páginas.

¿Qué herramientas utilizar para el desarrollo web?

Para el desarrollo de tu sitio web, el uso de un editor de texto es crucial. Visual Studio Code es una opción popular y potente entre los desarrolladores.

  • Visual Studio Code: Este editor permite gestionar los archivos del proyecto de manera eficiente y es compatible con múltiples extensiones que facilitan el desarrollo web.

¿Cómo integrar las dependencias necesarias?

Las dependencias externas son fundamentales para enriquecer la funcionalidad y el diseño de un sitio web. A continuación, te mostramos cómo integrar algunas necesarias utilizando CDN:

  1. Materialize CSS: Es un framework CSS que proporciona estilos modernos y elegantes.

    • Visita git-scm.com para obtener las dependencias.
    • Utiliza el CDN sugerido para integrar estilos y JavaScript, asegurándote de colocarlos correctamente en tu HTML.

  2. Fuentes de Google: Mejoran el aspecto visual de tu sitio web con una tipografía atractiva.

    • Puedes buscar y seleccionar las fuentes necesarias a través de Google Fonts.
    • Incluye los enlaces de las fuentes antes de tu archivo CSS en el <head> de tu HTML.
<!-- Ejemplo de cómo incluir Materialize CSS y Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=YourChosenFont:400,700" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- Añade también este Script para Materialize, al final del body -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

¿Qué más considerar antes de comenzar a codificar?

  • Preprocesadores CSS (SASS/SCSS): Considera su instalación para facilitar la gestión avanzada de estilos.
  • Node Package Manager (NPM): Instala y gestiona dependencias como SASS mediante NPM si decides utilizarlas.
# Instalación de SASS mediante NPM
npm install -g sass

Configurando adecuadamente estas bases, estarás listo para comenzar la siguiente etapa del desarrollo, donde la maquetación y el código cobrarán vida. Siempre recuerda que una buena preparación es clave para un desarrollo fluido y exitoso. ¡Adelante!