← Back to Projects
MkViewer - SpanishVocab [Read-Only]
Initializing MkViewer...
README.md

🎨 Spanish Vocabulary – Colors (Project 43)

This project is a simple educational webpage designed to teach basic Spanish color vocabulary while practicing CSS styling. It focuses on separating structure (HTML) from design (CSS).


πŸ“„ Project Description

The webpage displays:

  • A title and subtitle introducing Spanish colors
  • Spanish color names as headings
  • Matching images for each color
  • Unique styling applied using CSS selectors, classes, and IDs

This project marks the introduction of CSS as the styling system for web development.


πŸ› οΈ Technologies Used

  • HTML5 – Page structure and content
  • CSS3 – Styling and visual presentation

πŸ“‚ File Structure

/project-folder │── index.html │── style.css └── /assets └── /images β”œβ”€β”€ red.png β”œβ”€β”€ blue.png β”œβ”€β”€ orange.png β”œβ”€β”€ green.png └── yellow.png


▢️ How to Run

  1. Download or clone the project files.
  2. Ensure the style.css file is in the same directory as index.html.
  3. Make sure the images are located in the correct assets/images folder.
  4. Open index.html in any web browser.

πŸŽ“ What This Project Teaches

  • Linking an external CSS file
  • Using classes and IDs for styling
  • Applying styles to text and images
  • Organizing assets in folders
  • Understanding the role of CSS in web development

πŸ“ Notes

  • Each color heading is styled individually using CSS IDs.
  • This project focuses on learning styling fundamentals, not advanced layouts or responsiveness.

If you want, I can:

  • Make this README shorter for school submission
  • Add a β€œWhat I Learned” reflection section
  • Rewrite it to fit a GitHub portfolio style

Just tell me πŸ‘