About the Challenge

Welcome to the HTML and CSS Web Development Hackathon – where innovation meets design! Get ready to embark on a digital journey that celebrates the core building blocks of the web. In this thrilling coding adventure, participants will delve deep into the world of HTML and CSS to create visually stunning and highly functional web applications.

 

Challenge Highlights:

    1.  Unleash Your Creativity: This hackathon is all about letting your imagination run wild. Use HTML and CSS to transform your visions into dynamic and responsive web designs. Whether you're a seasoned developer or a newcomer to the world of web design, this challenge is open to all skill levels.

     2. Real-world Skills: Develop real-world skills as you build web pages and applications that can be used on various devices, from desktops to smartphones. Gain hands-on experience in creating web content that adheres to industry standards and best practices.

    3. Collaboration and Learning: Hackathons are more than just coding competitions; they're opportunities to collaborate, learn, and network. Work in teams or as an individual to tackle web development challenges and exchange knowledge with fellow participants.

    4.Expert Guidance: Experienced mentors will be on hand to provide guidance, answer questions, and offer tips to help you overcome any obstacles. Whether you're grappling with responsive design or CSS animations, our mentors are here to assist you.

  5.Showcase Your Skills: At the end of the hackathon, present your projects to a panel of  judges. Show off your coding prowess, your creativity, and your ability to create stunning web experiences. Prizes will be awarded to the most impressive and innovative projects.

  6.Networking Opportunities: Connect with like-minded individuals, expand your professional network, and exchange ideas with fellow web development enthusiasts.

Join us at the HTML and CSS Web Development Hackathon for an exciting two days of coding, creativity, and skill development. Let's transform your web development dreams into reality and build the digital future together!

 

Are you up for the challenge? Register now and be a part of this immersive web development experience.

Get started

Are you ready to embark on a journey of web development innovation? To begin your exciting adventure in the HTML and CSS Web Development Hackathon, follow these simple steps to get started:

1. Register: The first step is to register for the hackathon. Fill out the registration form to secure your spot in this thrilling competition. Whether you're a seasoned web developer or just starting out, everyone is welcome!

2. Join a Team (Optional): You can choose to participate as an individual or team up with fellow web enthusiasts. Teamwork fosters collaboration, creativity, and a sense of community. Form your dream team or embark on a solo quest—it's up to you!

3. Familiarize Yourself: Take some time to familiarize yourself with the hackathon's rules, guidelines, and judging criteria. Understanding what's expected will help you plan and execute your project effectively.

4. Access Resources: We provide a range of resources and tools to aid you in your web development journey. From HTML and CSS tutorials to code samples and documentation, we've got you covered. These resources can help both beginners and experts hone their skills.

5. Connect with Mentors: During the hackathon, you'll have access to experienced mentors who are there to assist you. If you have questions, run into roadblocks, or need guidance, don't hesitate to reach out to our mentors for help.

6. Start Coding: Now it's time to dive into coding! Work on your web development project, whether it's a personal portfolio site, an interactive web application, or an experimental design concept. Use HTML and CSS to bring your ideas to life.

7. Collaborate and Learn: Throughout the hackathon, connect with other participants, exchange ideas, and learn from each other. Collaboration is a key aspect of hackathons, so don't hesitate to reach out to your fellow coders for support and inspiration.

8. Submit Your Project: When you're satisfied with your project, submit it for evaluation by the judging panel. Make sure to meet the submission deadline and include all required materials, such as project documentation and any additional assets.

9. Present Your Project: Get ready to showcase your work! Prepare a presentation to highlight the features, functionality, and innovations in your project. The judges will be eager to see your web development skills in action.

10. Celebrate and Learn: After the hackathon concludes, we'll announce the winners, celebrate your achievements, and provide feedback from the judges. No matter the outcome, you'll leave with new skills and experiences that will propel your web development journey forward.

So, what are you waiting for? Get started on your HTML and CSS web development project, and let's create some web wonders together! This hackathon is your chance to shine, learn, and connect with a community of passionate developers. Don't miss out—register now and take the first step toward an exciting coding adventure.

Requirements

What to Build

You are given some challenges, you have to pick one among them and you have to work on that challenge.

Challenges:

Challenge 1. Develop a webpage that includes interactive image map that allows to explore various aspects of ancient Egypt by clicking on different regions or objects within an ancient Egyptian landscape.

i. Display an image of an ancient Egyptian landscape or historical scene (e.g., pyramids, Nile River, temples, hieroglyphics).

ii. Apply CSS to style the map, such as setting the image width, margins, and any additional styling for the list of pyramids.

iii.    For each clickable area, create or gather educational resources.

Use CSS hover effects to make the hotspots change appearance when the user hovers the cursor over them.

Challenge 2. Develop a webpage that includes interactive image map that allows to explore various aspects of ancient Egypt by clicking on different regions or objects within an ancient Egyptian landscape.

i.       Display an image of an ancient Egyptian landscape or historical scene (e.g., pyramids, Nile River, temples, hieroglyphics).

ii.     Apply CSS to style the map, such as setting the image width, margins, and any additional styling for the list of pyramids.

iii.    For each clickable area, create or gather educational resources.

Use CSS hover effects to make the hotspots change appearance when the user hovers the cursor over them.

Challenge 3. Design a webpage that contains details about a restaurant menu

i.     When clicked on any item the webpage should show an alert dialog with description about the item

ii.    When any item is double clicked the item should be erased

iii.   When the page is resized remove all the content in the page and display a message on the page saying "Please reload to view the menu"

iv.   Use a proper background image (local image) for the restaurant and only allow the image to get repeated in the horizontal direction and set the background image size to 100px.

Challenge 4.    Build a Simple Form:

              * Design a contact or signup form using HTML form elements.

              * Apply CSS for form styling, including input fields, labels, and buttons.

   Challenge 5.  Create an Image Gallery:

          * Develop an image gallery using HTML to display a grid of images.

          * Use CSS to create hover effects and make the gallery visually engaging.

 

What to Submit

1. Github repositories of the Source Codes of the challenge you have developed.

2. Output Images of the challenge you have developed.

Hackathon Sponsors

Prizes

1 non-cash prize
Certificate of Appreciation
1 winner

Devpost Achievements

Submitting to this hackathon could earn you:

Judges

P . Yogendra Prasad
Judge

M . Ramu

M . Ramu
Judge

Judging Criteria

  • Code Quality (25 points)
    This criteria assesses the overall quality of your HTML and CSS code. Judges will look for well-structured, clean, and semantically meaningful code. Proper indentation, commenting, and organization will be essential.
  • Design and User Experience (25 points)
    This category focuses on the aesthetic appeal and user-friendliness of your web project. Judges will consider factors such as layout, color schemes, typography, and responsive design. A well-designed and visually engaging project will score higher.
  • Functionality and Interactivity (20 points)
    This criterion assesses the functionality and interactivity of your web application. Judges will look for features like responsive navigation, interactive elements(e.g.,buttons,forms)and any JavaScript or CSS animations that enhance the user experience.
  • Responsiveness (15 points)
    This category evaluates how well your project adapts to different screen sizes and devices. Judges will consider whether your design is mobile-friendly, how elements scale, and if there are any issues with responsiveness.
  • Creativity and Innovation (15 points)
    This criterion rewards innovative and creative elements in your project. Judges will look for unique design concepts, creative use of HTML and CSS, and any special features that set your project apart from the rest.
  • Compliance with Standards (10 points)
    Judges will assess whether your project adheres to web development standards and best practices. This includes valid HTML and CSS, proper use of tags, and efficient code.
  • Performance (10 points)
    Judges will assess the performance of your project. This includes loading times, page speed, and overall optimization. A faster, more efficient project will receive a higher score.
  • Overall Presentation and Communication (15 points)
    This category considers how effectively you present and communicate your project to the judges. This includes the clarity of your project demonstration, the completeness of your presentation, and your ability to explain design and coding choices.

Questions? Email the hackathon manager

Tell your friends

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.