Dev Nerd

Be aware of this

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

#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✊✊✊😁

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

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

AND

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 ✊✊✊💪

Day 38 of #100DaysChallenge Good morning, everyone ☀️ Today’s project is another exciting one. Project Name: Tip Calculator App This app allows users to quickly calculate the tip amount and the total bill per person by entering the bill amount, choosing a tip percentage, and specifying the number of people. It's clean, simple, and effective, with dynamic updates as inputs change. Technologies Used #HTML #CSS #JavaScript HTML Structure The HTML file sets up the layout with sections for entering the bill amount, selecting the tip percentage, and specifying the number of people. It also includes a display section for showing the calculated tip and total amount per person. CSS Styling Font Import: I've used Google Fonts to import the "Space Mono" 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 to center the container and align items. The design includes a clean background, dimensions, padding, border-radius, and a responsive layout. Interactive Styles: Adds hover effects and active states for a more engaging user experience. JavaScript Functionality Input Validation: Validates user inputs for the bill amount, tip percentage, and number of people. Dynamic Calculations: Calculates and displays the tip amount and total bill per person in real-time as inputs change. Reset Functionality: Resets all inputs and calculations when the reset button is clicked. GitHub Repository:- https://github.com/roobiwebdev/Day-38-Tip-Calculator-App-/tree/master Live Demo:- https://roobiwebdev.github.io/Day-38-Tip-Calculator-App-/ - Feeling pumped on Day 38 of 100—let's keep this energy going! 💪🚀 - Completed 38 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! 🚀 #projects@DevNerd0 #100DaysOfChllenge #100DaysOfChllenge, #100DaysOfChllenge,✊✊✊💪😁

Day 37 of #100DaysChallenge Good morning, everyone ☀️ Today’s project is an exciting. Project Name: Time Tracking Dashboard This dashboard helps users keep track of time spent on various activities like work, play, study, exercise, social, and self-care. Users can toggle between daily, weekly, and monthly views to see how their time is distributed. Technologies Used #HTML #CSS #JavaScript HTML Structure The HTML file sets up the layout with different sections for profile info, activity cards, and time toggles. Semantic elements like <div>, <img>, <h1>, and <ul> are used for structure and presentation. CSS Styling Font Import: I've Used Google Fonts to import the "Rubik" font for a modern and consistent look. Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family for consistency. Layout: Uses CSS Grid for the card layout and Flexbox for centering elements. The design includes a clean and vibrant color palette, rounded corners, and a responsive layout. Interactive Styles: Adds hover effects and active states for a more engaging user experience. Hover Effects: Enhances user interaction by changing styles on hover. JavaScript Functionality Period Toggle: Adds event listeners to toggle between daily, weekly, and monthly views. Dynamic Data Display: Updates the time displayed for each activity based on the selected period. like Daily, Weekly and Monthly. GitHub Repository:- https://github.com/roobiwebdev/Day-37-Time-tracking-dashboard/tree/master Live Demo:- https://roobiwebdev.github.io/Day-37-Time-tracking-dashboard/ -Enjoyed every moment coding this!😎 -Completed 35 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! 🌱 #projects@DevNerd0