Skip to content

ElderNuel/Web-Development-Week-2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

Nigerian Music Showcase

A comprehensive HTML web page showcasing the rich diversity of Nigerian music, featuring organized content with semantic HTML5 elements and a fully functional survey form with built-in validation.

Features

  • Semantic HTML5 Structure: Proper use of semantic elements for accessibility and SEO
  • Organized Content: Well-structured information about Nigerian music using lists and tables
  • Media Integration: Audio and video elements showcasing Nigerian music
  • HTML5 Form: Comprehensive survey form with various input types and validation
  • No CSS/JavaScript: Pure HTML implementation without external styling or scripting

Content Sections

  1. Introduction: Overview of Nigerian music and its historical evolution
  2. Music Genres: Traditional and modern Nigerian music genres with descriptions
  3. Notable Artists: Table of influential Nigerian musicians and their contributions
  4. Media Showcase: Audio and video examples of Nigerian music
  5. Music Survey: Interactive form to collect user preferences about Nigerian music

Form Features

The survey form includes:

  • Text Inputs: Name, email, country with validation
  • Number Input: Age with min/max constraints
  • Select Menus: Dropdowns for music genre and discovery method
  • Radio Buttons: Frequency of listening to Nigerian music
  • Checkboxes: Favorite artists selection
  • Textarea: Open-ended comments
  • Validation: Required fields, email format, number range
  • Datalist: Country suggestions

Technical Implementation

  • Semantic HTML5: Proper use of <header>, <nav>, <main>, <section>, <footer>
  • Form Validation: Native HTML5 validation using required, type, min, max attributes
  • Media Elements: <audio> and <video> tags with controls
  • Accessibility: Proper labeling, fieldset groupings, and semantic structure
  • Table Structure: Organized data presentation with <table>, <thead>, <tbody>

Browser Compatibility

This page uses standard HTML5 features that are supported in all modern browsers:

  • Chrome (version 60+)
  • Firefox (version 55+)
  • Safari (version 10.1+)
  • Edge (version 79+)

Usage

  1. Download the enhanced-form.html file
  2. Open it in any modern web browser
  3. Navigate through the content sections using the navigation menu
  4. Complete the survey form at the bottom of the page
  5. Submit the form to see validation in action

Form Validation Notes

  • Required fields are marked with asterisks (*)
  • Email field validates proper email format
  • Age field accepts only numbers between 13-120
  • Country field offers suggestions but accepts any text input
  • Terms and conditions must be accepted before submission

Project Structure

enhanced-form.html
├── Header with navigation
├── Introduction section
├── Music genres section (with lists)
├── Notable artists section (with table)
├── Media showcase section (audio/video)
├── Survey form section
│   ├── Personal information fieldset
│   ├── Music preferences fieldset
│   └── Additional information

About

Assignment

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages