All solutions

What are you most proud of, and what would you do differently next time?

hello front end mentor Members this is my newbie Challenge Interactive rating component Project Succesfully completed 🌟

About Project : 🎐

• In this project, you were likely tasked with creating a rating component that allows users to interactively rate something, such as a product or service, using a set of stars or another rating system. This often involves creating a visually appealing interface where users can hover over or click on stars to indicate their rating, with the interface updating dynamically to reflect their selection.

• the rating component work as intended Can users interact with it easily by hovering over or clicking on the stars to indicate their rating.

• the rating component responsive across different devices and screen sizes Does it maintain its functionality and visual appeal on both desktop and mobile devices.

• that ensured that your rating component is accessible to all users, including those who rely on screen readers or keyboard navigation Consider using semantic HTML and providing appropriate ARIA attributes to enhance accessibility.

• the rating component is full and fully smooth animations

Built With : ⚔️

HTML : For creating the structure of the web page.

CSS: For styling the dashboard and making it visually appealing.

JavaScript: For interacting with the DOM, handling user interactions, and manipulating data.

All feedback are wellcome 🤩

What specific areas of your project would you like help with?

• mobile width (400px to 300px)
• tablet width (500px to 1500px)

What are you most proud of, and what would you do differently next time?

hello front end mentor community members and this is my time traking dashboard using html and css then js and this is my first json data using project then building have a lot of fun and nice design layouts ✨

Project Overview :

• The goal of this project is to create a web-based time tracking dashboard where users can log their activities and view their time usage in a visually appealing way.

Technologies Used: ⚔️

• HTML : For creating the structure of the web page.

• CSS: For styling the dashboard and making it visually appealing.

• JavaScript: For interacting with the DOM, handling user interactions, and manipulating data.

• JSON: For storing time tracking data in a structured format.

Key concept are used: 🖲️

• this layout build with grid

• using json data

• using addeventlistener()

• using doument object model()

• using animation @keyframes

Thank you and all feedback are wellcome 🚀

Advice Generator App 🎲

Description: 📃

• The Advice Generator App provides users with random pieces of advice or quotes to inspire, motivate, or provide guidance. The app is built using HTML, CSS, and JavaScript.

Features: 🪁

• Random Advice Generation: The app fetches random advice or quotes from an external API and displays them on the web page. User Interface: The app has a simple and intuitive user interface designed using HTML and styled with CSS to enhance the user experience. Button Interaction: Users can click a button to generate a new random advice or quote, which is dynamically updated on the page without requiring a page refresh. Responsive Design: The app is designed to be responsive, ensuring a consistent and optimal user experience across various devices and screen sizes.

API: 🧭

• The app utilizes an external API to fetch random advice or quotes. The API endpoint is integrated into the JavaScript code to retrieve data dynamically.

Technologies Used: 🛠️

• HTML: Used to structure the web page and define the layout.

• CSS: Used to style the HTML elements and enhance the visual presentation of the app.

• JavaScript: Used to handle user interactions, fetch data from the API, and update the DOM dynamically.

• External API: Integrated to fetch random advice or quotes for display on the app.

This is newbie challenge Social Links Profile sucessfully completed

tools Are Used⚙️

• Html 📂
• Css 🎨 🖌️
• visual code editor ⌨️
• google browser 🔖

After long time i submit the newbie solution blog preview card its new project and successfully completed and in this project its most responsive Upto 200px😀

• Tools are used ⚙️
• Html 📄
• Css Grid 🎨 🖌️
• Data Aos for animation 💫
• Visual code editor 📇
• Google Browser 🔖

Hi Front End mentor members i just try the profile card with The Legent (MUHAMMAD ALI VERSION)

• would you like the profile card please comment on this project : - )

hey there After long time is finshed in this project and make so many hard and many time taken

About my Project..

- Every 100px Responsive
- Clean Code
- Aesthetic UI
- Understandable Code
- Css Animation
- Css Flex

Peace Be Upon And Allah Mercy And Love...!