Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
Projects in Awesome Lists by Yashi-Singh-1
A curated list of projects in awesome lists by Yashi-Singh-1 .
https://github.com/yashi-singh-1/social-links-profile
This challenge is a simple yet stylish Social Link Sharing Profile, perfect for showcasing and sharing all your social media profiles. The design focuses on usability, ensuring a great user experience with interactive elements.
css css3 front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development frontendchallenge frontenddevelopment html html5 interactive-design interactivedesign responsive responsive-design social-links-profile sociallinksprofile web-developement webdevelopement
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-10-animated-css-button
🚀 A collection of unique and trendy animated CSS buttons to enhance user experience and add visual appeal to your web projects. Each button showcases a different animation effect.
css css3 flip-button front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development glow-button html html5 pulse-button ripple-button rotate-button wave-button
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/colored-markers
Colored Markers is a small project showcasing CSS techniques to create visually appealing marker elements. It features three marker designs in red, green, and blue colors, demonstrating gradients, shadows, and borders.
css css3 front-end front-end-developemnt frontend html html5 styling-techniques visual-techniques web-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/profile-card-component
Build a responsive profile card displaying user information using HTML and CSS. Ideal for frontend beginners looking to practice Flexbox layouts.
css css3 flexbox front-end front-end-development front-end-web-development frontend html html5 mobile-responsive responsive-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/city-skyline
City Skyline is a sleek web project featuring a minimalist cityscape created using HTML and CSS. It offers a simple yet visually striking depiction of buildings and windows against a radiant sky. With its responsive design and customizable color options, City Skyline is an ideal choice for adding a touch of urban charm to web pages and projects.
cityscape cityscapes css css3 freecodecamp freecodecamp-project front-end front-end-development frontend html html5 minimalist minimalistic responsive-design responsive-web-design urban visual-design web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/share-content-card-component
Hey there! Ready for a frontend challenge? How about creating a Share Content Card Component? It's a great way to practice CSS and JavaScript skills. Let's dive in!
css css3 front-end front-end-challenge front-end-development frontend frontenddevelopment html html5 javascript
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-04-loading
Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.
animation css css-animation css3 front-end front-end-challenge front-end-development frontend frontend-challenge html html5 loading-animations
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-03-the-pyramide
The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
animation css css3 front-end front-end-challenge frontend frontend-challenge frontend-development html html5 keyframes
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/telephone-number-validator
This project validates US phone numbers in formats such as 555-555-5555 and (555) 555-5555. It ensures the area code is present and, if a country code is included, it must be '1'.
css css3 freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project html html-css html-css-javascript html5 javascript phone-number phone-number-validation telephone-number-validation telephone-numbers
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/palindrome-checker
A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case and spacing. This project is assigned by freeCodeCamp.
css css3 freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project frontend frontend-development html html-css html-css-javascript html5 javascript javascript-project javascript-projects palindrome palindrome-checker web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/newsletter-card-component
In this frontend challenge, you'll build a Newsletter Card Component. This challenge is perfect for you if you've been learning HTML and CSS and are looking to practice what you've learned by building something new and beginner-friendly.
beginner css css3 elements form front-end front-end-development frontend frontend-challenge html html5 layout newsletter-card-component practice responsive-design styling ui-components web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/fcc-forum-leaderboard
Built a dynamic leaderboard displaying the latest topics from the freeCodeCamp forum. This project uses asynchronous JavaScript to fetch and display data, including topic titles, user avatars, and activity metrics.
api async async-fetch async-programming asynchronous-programming dom dom-manipulation fetch freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project frontend javascript js web-developement
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/to-do-app
A To-Do application that allows users to add, edit, and delete tasks with a title, date, and description. The app features a simple and responsive design for efficient task management.
css css3 free-code-camp freecodecamp freecodecamp-challenge freecodecamp-project front-end frontend hmtl-css-javascript html html-css html5 htmlcss javascript to-do-app to-do-app-using-html-css-javascript todo-app-using-html-css-javascript todoapp vanilla-javascript
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/fcc-authors-page
This project is a solution to the freeCodeCamp fCC Author's Page. It involves creating a web page that displays a list of authors, fetching data from an API and allowing users to load more authors by clicking a button. The page showcase author's names, images, and short bios, with a basic error handling.
api api-integration css data-fetching fetch-api freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project frontend html html-css html-css-javascript javascript web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/spreadsheet
This project creates a simple spreadsheet application that evaluates formulas and performs calculations using JavaScript. Users can input formulas to compute values and use built-in functions like sum, average, and median in a grid-based interface.
css css3 freecodecamp freecodecamp-challenge freecodecamp-frontend freecodecamp-project html html-css-javascript html-css-javascript-project html5 javascript javascript-project vanilla-javascript web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-1-css-challenge
This project is a part of the 100 Days CSS Challenge. It focuses on creating a visually appealing, centered display of the number "100" using HTML and CSS. The design includes a gradient background and carefully positioned elements to form the digits.
100daysofcss css css-challenge css3 front-end front-end-development frontend html html5 ui ui-design web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/product-preview-card-component
This project showcases a responsive product preview card component. It adapts seamlessly to various screen sizes and provides an intuitive user experience.
css css3 front-end front-end-mentor-challenge frontend frontend-mentor frontend-mentor-challenge frontendmentor html html-css html5 htmlcss prodcut-preview-card product-card product-preview responsivedesign resposive-design web-design webdesign
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/recipe-page
Welcome to the Simple Omelette Recipe Page Challenge! This repository contains the solution to a frontend development challenge that focuses on creating a recipe page for a classic omelette. The goal of this challenge is to practice and demonstrate skills in writing semantic HTML and creating a responsive design.
beginner-friendly coding-challenge css css3 front-end front-end-development front-end-mentor-challenge frontend frontend-development frontend-mentor frontenddevelopment frontendmentor-challenge html html5 recipe-page responsive responsive-design semantic-html
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/blog-preview-card
Challenge to build a responsive blog preview card using HTML and CSS, inspired by Frontend Mentor designs.
challenge css css3 front-end front-end-challenge front-end-developemnt front-end-mentor frontend frontend-challenge frontend-development frontend-mentor frontend-mentor-challenge frontendchallenge html html-css-challenge html5 htmlcss-challenge htmlcsschallenge mobile-responsive mobileresponsive
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/music-player-app
This code creates a Music Player app with controls for play, pause, skip, and shuffle. It displays album art, song title, and artist name, and allows users to interact with a playlist.
css css3 free-code-camp free-code-camp-challenges freecodecamp freecodecamp-project frontend html html-css html-css-javascript html5 html5-css3 htmlcss htmlcssjavascript javascript music-player musicplayer vanilla-javascript vanillajavascript
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/qr-code-component
This repository showcases a responsive QR code component designed to enhance front-end skills through practical implementation. The project emphasizes clean, semantic HTML5 markup, modern CSS techniques, and mobile-first design principles.
css css3 frontend frontend-mentor frontend-mentor-challenge html html-css html5 html5-css3 html5css3 htmlcss qr-code-component qrcodecomponent
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-45-lightbulb
The Light-Bulb component is an interactive web element built using HTML, SVG & CSS. It's features a light bulb graphic that changes appearance on hover, providing a visual effect of the bulb turning off.
css css-transitions csstransition html html-css htmlcss interactive-design interactivedesign svg svg-css svg-design svgcss svgdesign ui-component ui-components uicomponent web-elements webelements
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/dragon-repeller-role-playing-game
Dragon Repeller is a text-based role-playing game (RPG) built using HTML, CSS, and JavaScript. In this interactive game, players navigate various locations, manage resources like health, gold, and experience points, and engage in battles with monsters, culminating in a final confrontation with a dragon.
css game-development gamedevelopment html html-css html-css-javascript htmlcss htmlcssjavascript indie-game indie-games indiegame javascript rpg text-based-game textbasedgame web-game web-games webgame webgames
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-43-css-gradient-transition
A recurring trend, gradients have often been pronounced dead and yet appear new.
css css-animation css-animations css-gradient css-gradient-transition css-gradients css-variables cssanimation cssanimations cssgradient cssgradienttransition front-end-development frontend-development frontenddevelopment gradient gradients html html-css htmlcss keyframes
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-41-error-modal
The Error Modal challenge requires creating an error message modal with HTML, CSS and JavaScript. This task focuses on building an interactive and styles UI Component.
animation animations css css-animation css-animations error-message frontend-development html html-css html-css-javascript html-css-js htmlcss htmlcssjs javascript vanilla-javascript vanillajavascript web-developement webdevelopement
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-09-we-work-co-working-spaces-menu
This repository contains HTML and CSS files that collectively create a menu interface for a co-working space.
css css3 frontend html html5 resposnsive
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-42-smooth-mouse-follower
The essence of the task, which involves creating a smooth and visually appealing effects where a graphical element follows the mouse cursor with a gentle, easing motion.
css front-end-developement frontend frontend-development html html-css html-css-javascript htmlcss htmlcssjavascript javascript mouse-follower mousefollower smooth-animation smooth-animations smoothanimation smoothanimations web-animation webanimation
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/maintenance-modal
Create a button that opens a modal window with text content. Includes a button to hide the modal.
css-design fronend-development front-end-development frontenddevelopement javascript javascriptdevelopment modal-dialog modal-dialogs modal-pop-up modaldialog modalpopup responsive-design responsivedesign user-interface userinterface web-design web-ui webdesign webui
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-38-change-background-color-on-click
A simple Web Page with buttons to change the background color of the body, a container, or both. each button click applies a randomly selected gradient, enhancing the visual experience using JavaScript and CSS.
coding-challenge css css3 eventlistener front-end frontend html html-css html-css-javascript html-css-js html5 htmlcss htmlcssjs interactive-ui javascript random-colors vanilla-javascript vanillajavascript web-developement webdevelopement
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/contact-form
Create a responsive contact form using HTML/CSS with JavaScript validation. Include email format verification and error messaging. Ensure seamless user experience with clear feedback and adaptability across devices for optimal usability.
challenge contact-form contactform css css3 css3-flexbox front-end front-end-development front-end-development-challenge frontend frontenddevelopment html html5 javascript responsive responsive-design vanilla-javascript
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-36-image-carousel
This challenge showcases an elegant image carousel using HTML and CSS animations. The carousel features a smooth transition effect between four images, creating a dynamic and visually appealing presentation.
100daysofcode 100daysofcss css css-carousel css-challenge css3 csscarousel csschallenge html html-css html5 html5-css3 htmlcss
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/results-summary-component
Build a results summary component using only HTML and CSS. Ensure the interface adapts seamlessly to different screen sizes and provides clear hover states for interactive elements.
css css3 flexbox flexbox-css fronetenddevelopement frontend-development frontend-mentor html html5 html5css3 htmlcss responsive-design responsivedesign semantic-html semantichtml web-design web-development webdesign webdevelopemnt
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-35-loading-circle
Is that a dark circle with a white stripe or the other way around?
100-days-css 100-days-css-challenge 100days 100dayscss 100dayscsschallenge css css-challenge css3 csschallenge html html-css html-css-challenge html5 html5-css3 html5css3 html5css3challenge htmlcss htmlcsschallenge
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-33-sunny-day
What else could be visible on this sunny day? Some birds, plains or even superman?
100-days-css 100-days-of-code 100-dayscss 100days 100dayscss 100daysofcode challenge-of-the-day challengeofday css css-challenge css3 html html-css html5 html5-css3 html5css3 html5css3challenge htmlcss sunny-day
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-32-counter
I wonder how high or low is the maximum you can count here? The transitions are pure CSS, but I used some JS for the counting.
100-days-css 100-dayscss 100dayscss css css-challenge css3 csschallenge html html-css html-css-challenge html5 html5-css3 html5css3 htmlcss htmlcsschallenge javascript vanilla-javascript vanilla-js vanillajavascript vanillajs
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-11-custom-scrollbar-design
Created a customization scrollbar that changes color dynamically based on scroll position. Users can select background and scrollbar colors using intuitive color pickers for a personalized browsing experience.
css css3 front-end front-end-development front-enddevelopment frontend frontend-development frontenddevelopment html html5 javascript
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/yellow-slats
This challenge involves creating a visually appealing layout using HTML and CSS, with a focus on positioning and styling elements to form a specific design. The primary task is to understand and implement the following:
css css-battle css-battle-dev css-battledev css-challenge css3 cssbattle cssbattle-dev cssbattledev html html-css html5 html5-css3-challenge html5-csss3 html5css3 html5css3challenge htmlcss
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/a-cat-photo-app
Cat Photo App: Simple HTML page showcasing cat photos, lists, and a submission form. Features responsive design and basic interactivity. No copyright. Created with freeCodeCamp.org resources.
basic-web-development cat-photo-app cat-photos freecodecamp freecodecamp-project front-end front-end-development frontend html html-page html5 interactivity lists responsive-design styling-techniques submission-form web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-07-notifications-search-and-menu
The three cornerstones of any application? Brought together in the smallest possible space.
css css3 front-end front-end-challenge front-end-development frontend frontenddevelopment html html5 javascript
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-06-profile
Profile: Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself.
animation challenege css css3 frontend frontend-challenges frontenddevelopment html html5 profile-card
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-31-pendulum-wave
If you are not yet fascinated by mathematics, you should be now at the latest. Wonderful what a small calculations brings forth. this description was provided.
100-days-css 100-dayscss 100days-css 100dayscss css css-animation css-animations-challenge css-challenge css3 cssanimation cssanimationchallenge cssanimations html html-css-challenge html5 html5-css3 html5css3 htmlcss htmlcsschallenge
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-30-random-line
What can I say, it is a line. A line that moves and circles something. What should it be? That's for you to decide.
100-days-css 100-days-css-challenge 100dayscss css-challenge css3 csschallenge html-css html5 htmlcss web-design webdesgn
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/prismatic-shift
Prismatic Shift is a CSS project that demonstrates how to create a dynamic prismatic effect using CSS transforms and positioning.
css css-battle css-challenge css-transform css3 cssbattle csschallnege html html-css html5 htmlcss transformation translation
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/geometric-stripes
This repository contains an HTML and CSS challenge focused on creating a visually appealing layout using geometric shapes.
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/simple-composition
This challenge involves creating a visually appealing composition using basic HTML and CSS techniques.
css css-battle css-battle-dev css3 cssbattle cssbattledev html html-css-challenge html5 html5-css3 html5css3 htmlcsschallnege web-art web-deisgn webart webdesign
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/interlocking-circles
The challenge is to create an interlocking circles design using HTML and CSS. It involves a main container with a square and two circular shapes. The square has two overlapping circles using pseudo-elements, and additional semi-circle and circle elements are positioned to complete the interlocking effect.
css css-battle css-battle-dev css-battle-solutions css3 cssbattledev html html5
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-29-search-field
You won't find anything unless you start looking. So go ahead, write something in the search box.
100-days-css 100-days-css-challenge 100dayscss css css3 hmtl-css-challenge html html-css-jaavscript-challenge html-css-javascript html5 htmlcss htmlcsschallenge javascript
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-27-checklist
What's the great thing about working through your to-do list? That's right, the relieving feeling when you can check off the tasks.
100-days-css 100-dayscss 100days 100dayscss css-challenge css-challnege csschallenge html html-css html-css-challenge html5-css3 html5css3 htmlcss
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/two-waning-crescent-moon
In this challenge, participants are tasked with creating a visual representation of two waning crescent moons using HTML and CSS. The goal is to achieve a balanced and aesthetically pleasing composition against a backdrop of a specific shade of blue.
challenge css csschallenge html htmlcss
Last synced: 10 Nov 2024
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.
challenge css css3 front-end front-end-challenge frontend frontend-challnege frontend-development frontendchallanges hit-the-target-challenge html html5
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/squiggle-challenge
The Squiggle Challenge utilizes HTML and CSS to construct a visually engaging design. It incorporates semicircles and circular dots arranged within a centered container. Using absolute positioning and various styling properties such as border-radius, box-shadow, and background-color, it achieves a distinctive and dynamic appearance.
css css-battle css-battle-dev css3 cssbattle cssbattledev html html-css html-css-challenge html5 html5-css3 html5-css3-challenge html5css3 htmlcss web-art web-design webart webdesign
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/interlocking-dashes
Welcome to the Interlocking Dashes challenge! In this challenge, you will create a visually appealing design featuring two overlapping elements with dashed borders. The design emphasizes the interplay between the borders of the elements to create an interlocking effect.
css css-battle css3 cssbattle cssbattle-solutions front-end front-endchallenge frontend frontend-challenge html html-css html-css-challenge html-csschallenge html5 htmlcss htmlcss-challenge htmlcsschallenge
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/vertical-circle-cascade
Create a vertically aligned, overlapping circle design within a container using HTML and CSS. Ensure circles extending beyond the container are clipped for a clean, polished look.
css css3 front-end front-end-challenge frontend frontend-challenge frontend-challenges html html-css html-css-challenge html5 htmlcss htmlcsschallenge
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-20-expandable-floating-action-button-menu-challenge
This challenge involves creating an interactive Floating Action Button (FAB) menu using HTML, CSS, and JavaScript. The FAB menu expands in a circular pattern when clicked, offering a visually appealing way to access multiple actions. A stylish linear gradient background enhances the interface's overall aesthetic.
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/image-hover-zoom-challenge
Create a responsive grid of images with engaging hover effects using HTML and CSS.
css css-hover css-hover-effects css-hovereffects css3 csshover csshover-effects front-end front-end-challenge frontend frontend-challenge hover-effects hovereffects html html-css html-css-challenge html5 htmlcss htmlcss-challenge htmlcsschallenge
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/da-19-slider-with-radio-buttons
Why use JavaScript when you can use CSS? This challenge demonstrates how to create an interactive slider using only CSS selectors, showcasing the versatility and power of CSS.
coding-challenge codingchallenge css css-slider cssslider day-19 front-end front-end-challenge frontend frontend-challenge frontendchallanges html html5 radio-buttons
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-14-byciclopter
Byciclopter: Which side of the card do you want to use? Either drive or fly to work in the morning?
css css-animations css3 front-end front-end-development front-enddevelopment frontend frontend-development frontenddevelopment html html5 web-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-18-elastic
Achieved a visually captivating elastic animation effect with simple CSS transformations and key-frames. The solution turned out to be easier than expected.
animation css css-animation css3 cssanimation elastic-effect elasticeffect front-end front-end-challenge frontend frontend-challenge frontendchallenge html html5 web-animation web-design webanimation webdesign
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-17-illusion-forge
Illusion Forge: Explore the art of crafting mesmerizing illusions using CSS.
animations css css-animations css3 cssanimations front-end front-end-developement-challenge front-end-development frontend frontend-development frontend-development-challenge frontenddevelopemnt html html5
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-16-css-shapes-animation
Explore CSS Shapes Animation challenge featuring dynamic animations for circles, squares, and triangles. Enhance your CSS skills with keyframes.
css css-animations css-keyframes css3 cssanimations csskeyframes front-end front-end-challenge front-end-development front-enddevelopment frontend frontend-challenge frontend-development frontendchallenge frontenddevelopment html html5
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-15-upload
Yes, you can actually drag and drop a file in there. But don't worry, the upload process is faked.
100daysofcss css css3 front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development frontenddevelopemnt html html5 javascript javascript-vanilla
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/segmented-progress-bar
The code provided sets up a segmented progress bar using HTML and CSS.
animation css css-animation css3 front-end front-end-challenge front-end-development frontend frontend-development html html5
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-08-metaballs
At first glance impossible to implement with CSS, but filters make this possible too.
css css-effect css-effects css-filters css3 csseffect front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development frontenddevelopment html html5 image-processing visual-effects web-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/blog-card-component
In this Front-end Challenge, I have build a Blog Card Component. This challenge is perfect for you if you've been learning CSS and want to take your CSS skills to the next level by building something new and beginner-friendly.
beginner-friendly blog-component css css-flexbox css3 front-end front-end-challenge front-endchallenge frontend frontend-challenge frontendchallanges html html5 htmlcss web-design web-development webdesign
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-13-barber-pole-progress-bar
This challenge demonstrates how to create an animated barber pole progress bar using HTML and CSS. The barber pole progress bar features a classic rotating striped effect that can be used to indicate progress in a visually engaging manner.
challenge css css3 front-end front-end-development frontend frontenddevelopment html html5
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-12-tooltip
Tooltip Challenge: I'm quite sure, you already know what obsession means. But you can look it up anyways.
challenge css css3 front-end front-end-development front-end-web-development front-enddevelopment frontend frontend-development html html5 obsession tool-tip tooltip web-design webdesign
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/product-card
This challenge is a simple yet elegant fashion product card that showcases a dress with an auto-sliding image carousel, size selection options, and the ability to flip the card to reveal more details.
animation animation-css challenege css css3 front-end front-end-challenge front-end-development front-end-web-development frontend frontend-challenge frontend-development html html5 javascript product-card
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-05-css-flip-card
The CSS Flip Card challenge involves creating an interactive flip card using HTML and CSS. This project demonstrates proficiency in CSS styling to create an engaging user interface with a flip animation that reveals additional information on hover.
challenege css css3 flip-card flipcard front-end front-end-challenge frontend frontend-challenge html html5
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/circular-progress-indicator
This project involves creating a visually appealing circular progress indicator using only HTML and CSS. This README provides a detailed guide on setting up, customizing, and using the circular progress indicator in your projects.
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/rotating-square-loader
Welcome to the Rotating Square Loader project! This project showcases a simple yet elegant loading animation featuring a rotating square. It serves as a great example of using HTML and CSS to create visually appealing loading indicators for your web applications.
animation challenege css css3 front-end front-end-challenge front-end-development frontend frontend-challenge frontend-development frontenddevelopment html html5 keyword
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/day-02-menu-icon
Menu Icon: Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher
animation css css3 html html5 javascript responsive-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/nurition-label
The project consists of an HTML file (index.html) and a CSS file (styles.css). The HTML file contains the structure of the nutrition label, while the CSS file provides the styling to make it visually appealing.
css css3 front-end front-end-development frontend html html5 nutrition-label project-structure styling visual-appeal web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/a-photo-gallery
This project, "A Photo Gallery," is a responsive photo gallery created with HTML and CSS Flexbox. It features a collection of images in an organized layout, designed to be customizable and user-friendly. Ideal for web developers, this gallery offers a stylish and efficient way to display images on any website.
css css3 flexbox front-end front-end-development frontend html html5 responsive-design styling-techniques web-design web-developers web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/survey-form
A simple yet effective survey form built using HTML and CSS. It collects user feedback on various aspects such as name, email, age, role, service recommendation, desired features, and comments or suggestions.
css css3 freecodecamp freecodecamp-project front-end front-end-technologies frontend html html5 styling-technqiues web-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/registration_form_by_html_and_css
A simple HTML and CSS registration form that collects basic user information such as name, email, password, account type, age, and more.
css css3 front-end front-end-development frontend hmtl5 html styling-techniques
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/cafe-menu
Welcome to Camper Cafe! Enjoy our selection of freshly brewed coffees, including favorites like French Vanilla, Caramel Macchiato, and Hazelnut. Treat yourself to delicious desserts such as Donuts, Cherry Pie, and Cheesecake. Our cozy atmosphere and friendly service make every visit special.
css css3 front-end front-end-development frontend html html5 styling-techniques web-design web-developement
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/rothko-painting
This HTML and CSS code creates a webpage mimicking a Rothko painting, with colorful rectangular shapes arranged on a canvas within a frame.
css css3 freecodecamp freecodecamp-projects front-end front-end-development frontend html html5 web-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/feedback-modal-component
In this frontend challenge, you'll build a Feedback Modal Component. This challenge is perfect for you if you've been learning HTML and CSS and are looking to practice what you've learned by building something new and beginner-friendly.
beginner-friendly challenge coding-challenge css css-flexbox css3 feedback-modal front-end frontend frontend-challenge html html5 responsive responsive-design ui-components web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/magazine
A responsive web application showcasing articles and content with a focus on project-based learning. Utilizes HTML and CSS for layout and design.
code-project codeproject css css3 freecodecamp freecodecamp-project front-end front-end-development front-end-project frontend html html-css-project html5 project project-based-learning resposive-design
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/happy-flappy-penguin
"Happy Flappy Penguin" is a fun project developed in collaboration with Free Code Camp. Using HTML and CSS transforms, this project allows you to create an adorable penguin character with engaging animations. Dive into the world of web design and animation as one learn's to position and resize elements to crafts captivating visuals.
animation beginner-friendly creative-coding css css3 css3-animations freecodecamp front-end-development frontend frontend-development html html5 resposive-design web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/pulsing-dot
This project demonstrates a simple animation of pulsing dots using HTML and CSS. Each dot pulses with a different color and is centered within a container, which itself is centered on the page.
animation css css3 front-end front-end-challenge front-end-development frontend frontendchallanges frontenddevelopment html html5 keyword
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/cat-painting-using-html-and-css
Create a digital cat painting using HTML and CSS. The design features the cat's head, ears, eyes, nose, mouth, and whiskers, all built with divs and styled using CSS positioning, borders, and gradients. This project showcases the power of CSS for intricate designs and enhances web development skills through a creative, hands-on approach.
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/balance-sheet-using-html-css
The project titled "Balance Sheet" is a simple yet effective web page created using HTML and CSS, with guidance and resources from FreeCodeCamp. It displays the financial status of AcmeWidgetCorp for the years 2019, 2020, and 2021, focusing on readability, accessibility, and responsiveness.
2019-financial-data 2020-financial-data 2021-financial-data accessibility acme-widget-corp balance-sheet css css3 financial-status freecodecamp front-end front-end-development frontend html html5 readability responsive-design styling-techniques web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/tribute-page
A FreeCodeCamp-assisted project showcasing basic HTML/CSS skills. Tribute page honors a chosen figure or topic. Ideal for beginners learning web development.
css css3 freecodecamp freecodecamp-project html html-css-project html5 project tribute-page
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/html-css-quiz
An interactive HTML/CSS Quiz project designed to reinforce key concepts in web development. Enhance your understanding of HTML and CSS while practicing accessibility best practices. Made with freeCodeCamp's Accessibility module.
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/piano-using-html-and-css
a responsive piano interface using HTML and CSS, exploring media queries and pseudo selectors for screen size adaptability. Dive into responsive web development fundamentals while building an engaging project!
css css3 front-end frontend frontend-development github html html-css html5 media-queries open-source pseudo-selectors pseudocode responsive-design responsive-web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/ferris-wheel-using-html-and-css
This project, inspired by the FreeCodeCamp curriculum, showcases the implementation of CSS animations to create an engaging Ferris wheel effect on a webpage. By leveraging CSS animation techniques, elements are transformed and animated to draw attention to specific sections, enhancing the overall user experience.
css-animation css-animations css-transforms css3 ferris-wheel freecodecamp freecodecamp-project front-end front-end-development frontend html-css-project html5 interactive-web open-source tutorial user-engagement web-design web-development
Last synced: 10 Nov 2024
https://github.com/yashi-singh-1/technical-documentation-page
Technical Documentation Page is a user-friendly platform for creating and managing clear, organized technical documentation. Perfect for developers and technical writers, it simplifies documenting software, APIs, and processes.
css css3 documenting html html5 technical-documentation technical-documentation-page technical-writers
Last synced: 10 Nov 2024