MyCodingChallenges

Simple Landing Page - Day 1 Challenge 🚀 This project is a basic landing page with a header (logo + navigation) and a hero section (headline + call-to-action button). It is designed to be responsive and mobile-friendly, making it a great starting point for web development practice.

📌 Features ✅ Clean and structured HTML5 markup ✅ Styled with CSS3 for modern design ✅ Responsive layout for mobile and desktop screens ✅ Simple and easy-to-understand code ✅ Includes a call-to-action button in the hero section

📂 Folder Structure graphql Copy Edit 📦 landing-page/ ┣ 📂 css/ ┃ ┗ 📄 style.css # Stylesheet for the page
┣ 📂 images/ # Stores images used in the project
┗ 📄 index.html # Main HTML file

📖 How to Use Clone this repository: bash Copy Edit git clone https://github.com/your-username/landing-page.git Open index.html in a browser. live demo: https://chathurahasanga.github.io/MyCodingChallenges/index.html

✅ Day 2: Contact Form (HTML & CSS) Contact Form (HTML & CSS) 📌 Overview This is a simple and responsive Contact Form built using HTML & CSS. Currently, it does not have a backend, but it is styled for a clean and modern look. The form includes:

Name (Text Input)

Email (Email Input)

Subject (Text Input)

Message (Textarea)

Submit Button

🎨 Features ✅ Modern and clean design with soft colors ✅ Smooth hover and focus effects ✅ Mobile-friendly using Flexbox/Grid ✅ Responsive design with media queries ✅ Accessibility improvements (good contrast & clear labels)

📂 File Structure 📁 contact-form │── 📄 index.html # Main HTML file │── 📄 styles.css # CSS file for styling │── 📄 README.md # Project documentation 🚀 Getting Started Clone the repository:

git clone https://github.com/your-username/contact-form.git Open the index.html file in your browser.

🛠️ Built With HTML5

CSS3 (Flexbox & Grid for responsiveness)

📢 Feel free to contribute and improve this project! 🤝

✅ Day 3: Responsive Navigation Bar (Hamburger Menu) This project focuses on creating a responsive navigation bar that adapts to different screen sizes using HTML, CSS, and JavaScript.

📌 Features Fixed Navbar: Stays at the top for easy access.

Hamburger Menu: Appears on smaller screens. Click to Close: Closes menu when clicking a link. Active Link Indicator: Highlights the current page.

🛠️ Technologies Used HTML for structure

CSS for styling and responsiveness

JavaScript for interactivity

📂 Project Structure 📁 project-folder ┣ 📂 assets ┃ ┣ 📄 styles.css ┃ ┣ 📄 script.js ┣ 📄 index.html 🔨 Steps to Build 1️⃣ Structure Your Navbar (HTML) Create a header section with:

A logo (text or image)

A nav menu with links (Home, About, Services, Contact)

A hamburger menu button (three-line icon)

2️⃣ Style the Navbar (CSS) Fix the navbar at the top.

Use flexbox to align items.

Hide the menu on small screens and show the hamburger icon.

3️⃣ Add Interactivity (JavaScript) Toggle the menu visibility when clicking the hamburger button. Close the menu when a link is clicked.

🎨 Bonus Enhancements ✅ Highlight the active menu link.

🚀 Live Demo

💡 How to Use Clone the repository:

git clone https://github.com/yourusername/responsive-navbar.git Open index.html in your browser.

📜 License This project is open-source and free to use.

📢 Feel free to contribute and improve the project!

Day 4: Pricing Table (CSS Flexbox or Grid) Challenge 🚀 Challenge Overview Create a modern, responsive Pricing Table using CSS Flexbox or Grid. This helps to improve my layout skills and enhance my understanding of responsive web design.

🎯 Goals Design a clean and structured pricing table

Use Flexbox or CSS Grid for layout

Ensure responsiveness across devices

Implement hover effects and buttons

📌 What You’ll Learn CSS Flexbox vs. Grid for layout

Creating visually appealing pricing tables

Improving responsiveness with media queries

Styling buttons, typography, and colors

🛠️ Tools & Technologies HTML5 CSS3 (Flexbox/Grid)

📜 Instructions Set up the HTML structure for the pricing table.

Use Flexbox or Grid to create a well-aligned layout.

Style the design with colors, borders, and shadows.

Make it responsive using media queries.

Enhance interactivity with hover effects.

📷 Screenshots

Demo: https://chathurahasanga.w3spaces.com/Day4/index4.html

🚀 How to Run Clone the repository:

git clone https://github.com/yourusername/pricing-table-challenge.git Open index.html in your browser.

#CSS #Flexbox #Grid #FrontendChallenge

✅ Day 5: Blog Card UI (Title, Image, Description) A sleek and responsive Blog Card UI that showcases blog posts with hover effects. When hovered, hidden content slides up smoothly, displaying more details about the blog post.

🚀 Features Beautiful Card Design: Modern UI with smooth animations.

Hover Effects: Hidden content slides up on hover and disappears when the cursor leaves.

Responsive Layout: Works seamlessly across devices.

Animated Scaling: Image enlarges on hover for a dynamic effect.

Interactive Buttons: “Read Article” button for better user engagement.

📸 Preview

Demo: https://chathurahasanga.w3spaces.com/Day5/index5.html

🛠 Technologies Used HTML for structure

CSS for styling and animations

Font Awesome for icons

🏗 How to Use Clone this repository:

git clone https://github.com/yourusername/blog-card-ui.git Navigate to the project directory:

cd blog-card-ui Open index.html in your browser.

⭐ If you like this project, consider giving it a star on GitHub!

✅ Day 6: Testimonial Slider

Testimonial Slider with Background Video

This project demonstrates a testimonial slider with a background video using HTML, CSS, and JavaScript.

Features

Autoplaying and muted YouTube video as the background
Testimonial slider with navigation arrows
Responsive design

Demo

Preview

Installation

Clone the repository:

git clone https://github.com/your-username/testimonial-slider.git

✅ Day 7: Footer with Social Media Icons

This project demonstrates a responsive footer with Font Awesome icons, useful links, and a subscription form.

Features

Responsive design
Font Awesome icons
Useful links section
Subscription form

Preview

Installation

Clone the repository:

git clone https://github.com/your-username/day7-footer.git

✅ Day 8: FAQ Section (Expandable with CSS)

This project demonstrates a responsive FAQ accordion with toggle functionality. Clicking on a question reveals the answer and toggles the arrow icon between up and down.

Features

Responsive design
FAQ accordion with toggle functionality
Smooth arrow rotation effect
Hover effects for better user experience

Preview

Installation

Clone the repository:

git clone https://github.com/your-username/day8-faq-accordion.git

✅ Day 9: Simple Portfolio Page Welcome to my personal portfolio website! This site showcases my skills, projects, and experience in web development. Feel free to explore and reach out! 🎉

🌐 Demo

📌 Features

Responsive Design 📱💻
Contact Form 📩

🛠️ Tech Stack

HTML5 & CSS3 🎨
Boostrap 🛠️

Day 10: Personal Bio Website

This is a personal portfolio website designed to showcase the skills, projects, and contact information of Chathura Hasanga, a software engineering undergraduate. The website is built using HTML, CSS with additional libraries like Font Awesome and Boxicons for icons.

Features

About Section: Provides an introduction and highlights skills.
Projects Section: Displays detailed descriptions of projects with hover effects.
Contact Section: Includes a contact form for visitors to reach out.
Footer: Displays copyright information and a thank-you message.

Demo

Day 11: Form Validation with JavaScript

This project demonstrates a simple form validation using JavaScript. The form includes fields for first name, last name, username, email, password, phone number, and date of birth. Validation is performed on each field to ensure proper input before submission.

Features

Real-Time Validation: Displays error messages for invalid inputs.
Custom Error Messages: Provides user-friendly feedback for each field.
Animations: Includes subtle animations for the form header.

Demo

This project demonstrates a responsive image gallery with a lightbox effect. Users can click on images to view them in a modal with navigation controls to move between images.

Features

Responsive Design: The gallery adjusts to different screen sizes.
Lightbox Effect: Clicking on an image opens it in a modal with a larger view.
Navigation Controls: Includes “Next” and “Previous” buttons to navigate through images.
Thumbnails: Displays clickable thumbnails for quick navigation.
Caption Support: Shows captions for each image in the lightbox.

Demo

Day 13: To-Do List with Local Storage

This project is a simple To-Do List application that allows users to add, mark as completed, and delete tasks. The application uses Local Storage to persist tasks even after the page is refreshed.

Features

Add Tasks: Users can add new tasks to the list.
Mark as Completed: Users can mark tasks as completed using checkboxes.
Delete Tasks: Users can delete tasks from the list.
Task Counter: Displays the total number of tasks and the number of completed tasks.
Local Storage: Tasks are saved in the browser’s local storage, so they persist across page reloads.

Demo

Day 14: JS Calculator

A simple calculator web app built with HTML, CSS, and JavaScript. This calculator supports basic arithmetic operations and provides a clean, responsive interface.

Features

Basic arithmetic operations: addition, subtraction, multiplication, division
Responsive and clean UI
Clear display functionality

Demo

Day 15: Weather App

A simple weather application that allows users to search for the current weather in any city using the OpenWeatherMap API. The app displays the city name, temperature, and weather description with a visually appealing background.

Features

Search weather by city name
Displays city, temperature (°C), and weather description
Responsive and clean UI

Demo

A basic login page built with HTML, CSS, and JavaScript. This project demonstrates a simple user authentication interface with username and password validation.

Features

Clean and responsive login form
Username and password input fields
Login button with hover effects
Basic form validation
Styled with CSS for a professional appearance

Demo

Day 17: User Registration Form with JavaScript Validation

A comprehensive registration form with client-side validation using JavaScript. This project demonstrates various form input types and validation techniques for user registration.

Features

User ID Validation: Checks for proper user ID format
Password Validation: Ensures password meets security requirements
Email Validation: Validates email format using regex
Required Field Validation: Ensures all mandatory fields are filled
Country Selection: Dropdown menu for country selection
Gender Selection: Radio buttons for gender input
Language Preferences: Checkbox options for language selection
ZIP Code Validation: Validates postal code format
Textarea Support: Multi-line text input for user description

Demo

Day 18: Contact Form with PHP Backend (Form Submission)

A secure and responsive contact form built with PHP, featuring form validation, spam protection, and email functionality.

🚀 Features

Responsive Design: Mobile-friendly contact form with modern CSS styling
Form Validation: Server-side validation for all input fields
Spam Protection: Honeypot field to prevent automated spam submissions
Email Functionality: Sends emails using PHP’s built-in mail function
Error Handling: Comprehensive error messages and user feedback
Session Management: Proper handling of form data and error states

📋 Form Fields

Name: Required field for sender’s full name
Email: Required field with email format validation
Subject: Required field for email subject
Message: Required field for the main message content
Honeypot: Hidden field for spam protection (invisible to users)

🛡️ Security Features

Form Validation

Server-side validation for all required fields
Input sanitization with htmlspecialchars() and trim()

Spam Protection

Honeypot field that bots typically fill out
Returns 405 Method Not Allowed for suspicious submissions

Security Headers

Proper email headers to prevent header injection
CSRF protection through form submission handling

🎨 Styling Features

CSS Custom Properties: Theme-aware color variables
Responsive Layout: Flexbox-based centering and layout
Modern Typography: System font stack for optimal readability
Form Styling: Consistent input styling with focus states
Alert Components: Styled success and error message displays
Accessibility: Proper labeling and hidden honeypot field

Demo

This site is open source. Improve this page.

MyCodingChallenges

Testimonial Slider with Background Video

Features

Demo

Installation

Features

Preview

Installation

✅ Day 8: FAQ Section (Expandable with CSS)

Features

Preview

Installation

🌐 Demo

📌 Features

🛠️ Tech Stack

Day 10: Personal Bio Website

Features

Demo

Day 11: Form Validation with JavaScript

Features

Demo

Day 12: Lightbox Image Gallery

Features

Demo

Day 13: To-Do List with Local Storage

Features

Demo

Day 14: JS Calculator

Features

Demo

Day 15: Weather App

Features

Demo

Day 16: Simple Login Page

Features

Demo

Day 17: User Registration Form with JavaScript Validation

Features

Demo

Day 18: Contact Form with PHP Backend (Form Submission)

🚀 Features

📋 Form Fields

🛡️ Security Features

Form Validation

Spam Protection

Security Headers

🎨 Styling Features

Demo