Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yashi-singh-1/hit-the-target-challenge

Created a visually appealing target using HTML and CSS. This challenge focuses on designing concentric circles with CSS gradients and animations, providing a hands-on opportunity to enhance your web development skills.
https://github.com/yashi-singh-1/hit-the-target-challenge

challenge css css3 front-end front-end-challenge frontend frontend-challnege frontend-development frontendchallanges hit-the-target-challenge html html5

Last synced: 4 days ago
JSON representation

Created a visually appealing target using HTML and CSS. This challenge focuses on designing concentric circles with CSS gradients and animations, providing a hands-on opportunity to enhance your web development skills.

Awesome Lists containing this project

README 

        
Hit The Target Challenge



Challenge Description


Create a visually engaging target using HTML and CSS. This challenge focuses on using absolute positioning and animations to form concentric circles that mimic a target. Experiment with colors, sizes, and animations to make the target come to life. This is a great opportunity to practice CSS gradients, positioning, and animations.



Table of Content



    

        
  1. Challenge Description
    2. 

        
  2. Introduction
    3. 

        
  3. Purpose
    4. 

        
  4. Features
    5. 

        
  5. Pre Requisites
    6. 

        
  6. File Structure
    7. 

        
  7. Tools
    8. 

        
  8. Preview
    9. 

        
  9. Contributing
    10. 




Introduction


Welcome to the 'Hit the Target' challenge! In this task, you'll be creating a visually appealing target using HTML and CSS. This challenge focuses on building concentric circles with engaging animations, helping you enhance your skills in CSS positioning, animations, and gradients.



Purpose


The purpose of the 'Hit the Target' challenge is to practice creating visually appealing targets using HTML and CSS. By focusing on building concentric circles with animations, participants can strengthen their skills in CSS positioning, animations, and gradients. This challenge encourages creativity while providing a hands-on opportunity to refine web development techniques.



Features


    

        
  1.     Concentric Circles: Build a target-like design using nested HTML elements styled with CSS.    
    2. 

        
  2.     CSS Gradients:   Utilize CSS gradients to create visually appealing color transitions within the circles.    
    3. 

        
  3.     Animations: Implement animations to create a pulsating effect or other dynamic behaviors using CSS keyframes.    
    4. 

        
  4.     Skill Enhancement: Practice CSS positioning, animations, and gradients while fostering creativity in web design.    
    5. 




Pre Requisites


    

        
  1. Basic HTML and CSS Knowledge
    2. 

        
  2. Understanding of CSS Gradients
    3. 

        
  3. Animation Fundamentals
    4. 




File Structure



    Hit-The-Target-Challenge/

    │

    ├── index.html

    ├── styles.css

    └── README.md




Tools


    

        
  1. Code Editor (e.g., VS Code, Sublime, Atom, etc.)
    2. 

        
  2. Web Browser (e.g., Google Chrome, Mozilla Firefox, or Safari, etc.)
    3. 

        
  3. Version Control (Optional)(e.g., Git, Github or any other platform).
    4. 




Preview



You can also watch the live demo on my CodePen: Hit the Target Demo



Below is the Screenshot of the the this challenge 



![Preview](Preview.png)



Contributing



Thank you for considering contributing to the Hit the Target challenge! Contributions are welcome and encouraged. To contribute, please follow these guidelines:



How to Contribute



    

        
  1.     Fork the Repository: Start by forking the repository to your own GitHub account.   
    2. 

        
  2.     Clone the Repository: Clone the forked repository to your local machine using Git.

                

                    git clone https://github.com/Yashi-Singh-1/Hit-The-Target.git

                
    

                

                    cd Hit-The-Target

                
    

           
    3. 

        
  3.     Make Changes: Implement your changes and improvements to the HTML (index.html) or CSS (styles.css) files. Ensure your code follows best practices and is well-commented.   
    4. 

        
  4.     Test Your Changes: Verify that your modifications work as intended by testing them in different browsers and screen sizes.   
    5. 

        
  5.     Commit Your Changes: Commit your changes with a clear and descriptive commit message.

                

                    git add .

                
    

                

                    git commit -m "Add feature: [brief description of your changes]"

                
        

           
    6. 

        
  6.     Push to Your Fork: Push your changes to your forked repository on GitHub.  

                    

                    git push origin main

                
    

         
    7. 

        
  7.     Submit a Pull Request: Go to your forked repository on GitHub and submit a pull request to the main repository. Provide a detailed description of your changes and why they are beneficial.   
    8.