Day 39 of #100DaysChallenge
Good morning, everyone ☀️ Today’s project is another exciting one.

Project Name: Social Media Dashboard

This project provides a comprehensive dashboard to monitor social media metrics like followers, likes, and page views across different platforms. It's clean, simple, and effective, with a dark mode toggle for user preference.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
The HTML file sets up the layout with sections for displaying follower counts, likes, and page views for various social media platforms. It includes elements for a dark mode toggle switch and individual cards for each social media account.

CSS Styling
Font Import: Used Google Fonts to import the "Inter" font for a modern and clean look.

Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family for consistency.

Layout: Utilizes Flexbox and Grid for a structured and responsive design. The layout includes a clean background, dimensions, padding, border-radius, and dark mode support.

Interactive Styles: Adds hover effects and active states for a more engaging user experience.

JavaScript Functionality
Dark Mode Toggle: Implements a toggle switch to enable and disable dark mode.

Dynamic Content: Utilizes JavaScript to dynamically update the dashboard based on user interaction.

GitHub Repository:- https://github.com/roobiwebdev/Day-39-Social-Media-Dashboard

Live Demo:- https://roobiwebdev.github.io/Day-39-Social-Media-Dashboard/

Feeling pumped on Day 39 of 100—let's keep this energy going! 🚀

-Enjoyed every moment coding this!😎

-Completed 39 out of 100 challenges so far—keeping up the momentum!🔥

Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

Feedback is always welcome—would love to hear what you think—drop your thoughts, guys! Let’s grow together!

#100DaysOfChallenge #CodingJourney #projects@DevNerd0 #SocialMediaDashboard ✊✊✊💪

Full source code

AND

Yesterday, I created a special project for my friend's birthday.
a personalized birthday page with some cool features! It includes interactive gradient text, a birthday song, and colorful fireworks. 🎉🎂

Check out the project and feel free to share your thoughts. 😊🎁 https://roobiwebdev.github.io/Happy-Birthday-Text-animation/

#projects@DevNerd0

if you want to see my code, repo link:- https://github.com/roobiwebdev/Happy-Birthday-Text-animation/

#Day40
Good morning, everyone! ☀️
Today’s project is another exciting one. and  We’ve got some new members joining us from a big channel welcome aboard! 🎉

Project Name: Newsletter Sign-Up Form with Success Message

This project is all about creating an engaging and user-friendly newsletter sign-up form with a success message feature. It’s sleek, interactive, and perfect for gathering subscribers! Plus, it has error state handling to guide users when they enter invalid email addresses.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
The HTML file sets up a clean layout with a form for users to sign up for a newsletter. It includes fields for email input and a success message section.

CSS Styling
Font Import: Used Google Fonts to import the "Roboto" font for a clean and modern look.

Global Styles: Sets default padding and margin, box-sizing, and specifies the font-family for consistency.

Layout: Utilizes Flexbox for a centered and responsive design. The layout includes a vibrant background, intuitive form fields, and a polished success message.

Interactive Styles: Adds hover effects and responsive states to enhance user experience.

JavaScript Functionality
Email Validation: Ensures users enter a valid email address.

Interactive Feedback: Displays a success message upon successful email submission.

Error State Handling: Provides feedback for invalid email entries, guiding users to enter correct information.

User-Friendly: Allows users to dismiss the success message and reset the form easily.


GitHub Repository:- https://github.com/roobiwebdev/Day-40-Newsletter-sign-up-form

Live Demo:- https://roobiwebdev.github.io/Day-40-Newsletter-sign-up-form/


- Enjoyed every moment coding this!

- Completed 40 out of 100 challenges so far—keeping up the momentum!

- Feedback is always welcome—would love to hear what you think—drop your thoughts, guys! Let’s grow together!

#100DaysOfChallenge #CodingJourney #projects@DevNerd0 #NewsletterSignUp✊✊✊😁

Day 41 of #100DaysChallenge

Good morning, everyone! ☀️ Today’s project is another exciting one.

Project Name: Modern Publishing Platform

This project is a sleek, multi-page website for a modern publishing platform.

Technologies Used
#HTML

#CSS

#JavaScript

HTML Structure
Header: Navigation with collapsible lists for "Product", "Company", and "Contact".

Main Content: Sections on the editor, content management, and infrastructure.

Sections: Visually rich highlights on infrastructure.

Article: Details on features like free access and powerful tooling.

Footer: Links to Product, Company, and Contact.

Styling and Functionality
CSS: Modern fonts, responsive design, vibrant backgrounds, hover effects, smooth transitions.

JavaScript: Toggle menus, hide/show features, rotating icons for visual feedback.

GitHub Repository:- https://github.com/roobiwebdev/Day-41-Modern-Publishing-Platform

Live Link:- https://roobiwebdev.github.io/Day-41-Modern-Publishing-Platform/

-Feeling pumped on Day 41 of 100 let's keep this energy going! 🚀

Feedback is always welcome would love to hear what you think drop your thoughts, guys!

Let’s grow together! ✊✊✊

#100DaysOfChallenge #CodingJourney #PublishingPlatform #projects@DevNerd0

Be aware of this

🫥#Day-42 - Loopstudios Landing Page

Hey everyone! Apologies for the late post today. Excited to share with you my latest project.🎁

😄Overview: A polished landing page for Loopstudios, showcasing immersive VR experiences and world-class virtual reality projects.

😄Technologies Used:

📌#HTML

📌#CSS

🔘HTML Structure:
Header: Hero images for desktop and mobile

Navigation with logo and menu items (About, Careers, Events, Products, Support)

🔘Header text: "IMMERSIVE EXPERIENCES THAT DELIVER"

🔘Main Section:
Interactive VR section with images and content about Loopstudios' leadership in VR

Denoscriptive text on the company's founding and impact

🔘Article:
Section noscriptd "OUR CREATIONS" with a button to "SEE ALL"

Grid layout showcasing various VR projects (Deep Earth, Night Arcade, Soccer Team VR, etc.)

🔘Footer:
Social media icons

Navigation links repeated

Copyright notice

🔘Styling and Functionality:
🔘CSS:
Responsive design elements for desktop and mobile

Hover effects for interactivity

Modern font usage and vibrant imagery

🔘GitHub Repository:- https://github.com/roobiwebdev/Day-42-Loopstudios-landing-page/tree/master

🔘Live Link: Loopstudios Landing Page

Thanks for your patience! Let’s keep the momentum going! ☄️😀😀

 

#projects@DevNerd0