The latest articles on Forem by Rajat Jain (@rajat_jain). https://forem.com/rajat_jain https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1855385%2F5595f5fa-da27-463e-9186-0ec818dd24a3.jpg https://forem.com/rajat_jain en Rajat Jain Thu, 01 Aug 2024 12:26:12 +0000 https://forem.com/rajat_jain/glamup-cricket-website-3cg2 https://forem.com/rajat_jain/glamup-cricket-website-3cg2 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-07-24">Frontend Challenge v24.07.24</a>, Glam Up My Markup: Recreation</em></p> <p>Hello Everyone!!</p> <h2> What I Built </h2> <p>I built a cool loading animation all with HTML, CSS and a little bit jQuery and a basic structured layout for the NYRLC! This site gains the attention of the user when it loads and keep the user wondering what's coming next.<br> Also provided structure to the website using banner image and formatting content in card view to provide information concisely and visually appealing. </p> <h2> Demo </h2> <p><iframe src="https://codesandbox.io/embed/7r589x"> </iframe> </p> <h2> Journey </h2> <p>As I play cricket regularly in my life both the challenges pushed me to build something toward that, but considering the GlamUp challenge abolished me to add any HTML from file, that made me feel a little challenged. So I chose that one and thought about how I can better structure the website with just CSS and JS, that's when I first thought of showing the process of registering using interactive cards, in reality they can be clickable and take the user to next action of filling the form. Even after completing the structure and making it visually appealing, I still felt that it lacked a cricket element, that's when it hit me, I should probably add some loading animation. At first, I thought of adding a ball quitely bouncing on the bat vertically, then I thought that it would be a little bit inactive/boring.<br> Strangest thing happened, I was watching the highlights for India vs SA T20 World Cup Final, and that is when I felt, that I felt the most excited when I saw Jasprit Bumrah cleaning up Marco Jansen in that innings, that's when I finalised that I want the loading animation to be the stumps getting thrashed. So then I went on creating and did not stop at all. Finally was satisfied with the idea. Still had some ideas in mind such as a Cricket ball being the "scroll to top" button with some animation. But that's where I drew the line and chose to submit the entry as is.<br> I hope you will like it. </p> devchallenge frontendchallenge css javascript