Skip to content

TODO.MD

Latest commit

 

History

History
88 lines (59 loc) · 2.79 KB

TODO.MD

File metadata and controls

88 lines (59 loc) · 2.79 KB

📝 TODO.md — Frontend Development Website

📌 Project Goal

Build a Frontend Development Showcase Website with sections for HTML, CSS, and JavaScript. Each section should be styled differently, include an image, a heading, and a paragraph describing the language. The website must feel modular, stylish, and professional.

✅ Main Requirements

  1. 🌐 Website Title

    • Use an <h1> tag at the top:

      • Text: Frontend Development Website
      • Apply a unique style (color, font-family, alignment, background, etc.).

  2. 📦 Divisions for Each Language

    • Use separate <div> containers for each language (HTML, CSS, JavaScript).

    • Inside each div:

      • <h3> for the language title (different styles/colors).
      • <img> for the logo (e.g., html.jpeg, css.png, js.png).
      • <p> paragraph describing the language.

  3. 🎨 Styling Requirements

    • Apply at least 15 CSS properties overall (spread across body, headings, divs, paragraphs, images).

    • Examples of properties to use:

      • color, background-color, font-family, font-size,
      • margin, padding, border, border-radius,
      • box-shadow, text-align, letter-spacing,
      • display, flex/justify-content/align-items,
      • hover effects, transform, transition.

  4. 🖼️ Images for Languages

    • Use local images:

      • html.jpeg → For HTML section
      • css.png → For CSS section
      • js.png → For JavaScript section

    • Add styles: rounded corners, borders, shadows.

  5. 📝 Paragraphs (Content Writing)

    • Each div should include a small descriptive paragraph about the language:

      • HTML → The structure of web pages.
      • CSS → Styling and design for web pages.
      • JavaScript → Adding interactivity and logic.

  6. 🖌️ Modular & Aesthetic Layout

    • Use Flexbox or Grid to organize divs.
    • Consistent spacing, alignment, and font scaling.
    • Different background colors for each language section.
    • Add hover effects for better interactivity.

🏗️ Suggested Structure

project-folder/
│── index.html        # Main HTML file
│── style.css         # External CSS file
│── assets/
│    ├── html.jpeg
│    ├── css.png
│    └── js.png
│── TODO.md           # This file

🚀 Final Touches

  • Use emojis in headings for a friendly look (e.g., HTML 🧱, CSS 🎨, JavaScript ⚡).
  • Keep the design modular & modern (card-style divs).
  • Test responsiveness on desktop & mobile.
  • Validate HTML & CSS for clean code.

👉 Once this TODO is completed, you’ll have a polished showcase website highlighting frontend languages with proper modularity, colors, images, and styling.