Dev Nerd
Photo
#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✊✊✊😁
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✊✊✊😁
GitHub
GitHub - roobiwebdev/Day-40-Newsletter-sign-up-form
Contribute to roobiwebdev/Day-40-Newsletter-sign-up-form development by creating an account on GitHub.
⚡3🔥2
Dev Nerd
Photo
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
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
GitHub
GitHub - roobiwebdev/Day-41-Modern-Publishing-Platform
Contribute to roobiwebdev/Day-41-Modern-Publishing-Platform development by creating an account on GitHub.
⚡3🔥1👏1
Dev Nerd
Photo
🫥#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
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
🔥3👍2💯1
Dev Nerd
Photo
✅#Day-43 of #100DaysChallenge
🌞 Good Morning, everyone!
🔸 Diving deep into something truly exciting today—a digital clock with a dark theme toggle. Here’s the rundown of my adventure:
💜 Clock Creation: Designed a sleek, dual-display clock combining both analog and digital elements. Every tick makes it feel alive!
🌱 Dark Theme Toggle: Implemented a smooth, stylish toggle switch to flip between light and dark themes. coz coders don’t love a light mode😁
🌱 JavaScript Magic: Used setInterval to keep our clocks ticking in real-time. It's so satisfying to see everything move seamlessly!
🌱 CSS Styling: Leveraged CSS to create modern, clean designs with beautiful transitions. The shadows add just the right depth!
✅It’s been an incredible journey, and I’m loving every second of it!
🔴GitHub Repository: Digital Clock Project
😀 Live Link: Live Digital Clock
#projects@DevNerd0
🌞 Good Morning, everyone!
🔸 Diving deep into something truly exciting today—a digital clock with a dark theme toggle. Here’s the rundown of my adventure:
💜 Clock Creation: Designed a sleek, dual-display clock combining both analog and digital elements. Every tick makes it feel alive!
🌱 Dark Theme Toggle: Implemented a smooth, stylish toggle switch to flip between light and dark themes. coz coders don’t love a light mode😁
🌱 JavaScript Magic: Used setInterval to keep our clocks ticking in real-time. It's so satisfying to see everything move seamlessly!
🌱 CSS Styling: Leveraged CSS to create modern, clean designs with beautiful transitions. The shadows add just the right depth!
✅It’s been an incredible journey, and I’m loving every second of it!
🔴GitHub Repository: Digital Clock Project
😀 Live Link: Live Digital Clock
#projects@DevNerd0
GitHub
GitHub - roobiwebdev/Day-43-Digital-Clock
Contribute to roobiwebdev/Day-43-Digital-Clock development by creating an account on GitHub.
🔥3⚡1
🗓 #Day44 of #100DaysChallenge
Hey everyone!
Today, I whipped up a Random Password Generator. It was pretty simple, but super satisfying❗️
✅Technologies Used:
✅#HTML
✅#CSS
✅#JavaScript
⚙️Here’s what I tackled:
✅ User Interface: Designed a clean layout with CSS to ensure the generator looks great on any device. The container is styled with rounded corners and shadow effects for a modern touch.
✅ Password Generation: Wrote a JavaScript function to generate random passwords including uppercase, lowercase, numbers, and symbols. This ensures highly secure passwords.
✅ Copy Functionality: Implemented a feature to copy the generated password to the clipboard with a click, using a temporary input element to avoid visual selection.
✅ Responsive Design: Ensured the entire layout adapts smoothly to different screen sizes with responsive CSS.
🔸GitHub Repository: Random Password Generator
🔗🔗 Live Link: Live Password Generator
#projects@DevNerd0
Hey everyone!
Today, I whipped up a Random Password Generator. It was pretty simple, but super satisfying❗️
✅Technologies Used:
✅#HTML
✅#CSS
✅#JavaScript
⚙️Here’s what I tackled:
✅ User Interface: Designed a clean layout with CSS to ensure the generator looks great on any device. The container is styled with rounded corners and shadow effects for a modern touch.
✅ Password Generation: Wrote a JavaScript function to generate random passwords including uppercase, lowercase, numbers, and symbols. This ensures highly secure passwords.
✅ Copy Functionality: Implemented a feature to copy the generated password to the clipboard with a click, using a temporary input element to avoid visual selection.
✅ Responsive Design: Ensured the entire layout adapts smoothly to different screen sizes with responsive CSS.
🔸GitHub Repository: Random Password Generator
🔗🔗 Live Link: Live Password Generator
#projects@DevNerd0
👍3
Dev Nerd
image_2024-10-30_10-36-25.png
🗓 #Day45 of #100DaysChallenge
👋 Hey everyone!
🙏 I apologize for being late today. I'll do my best to be punctual in the future.
☄️ Today's task was building a Carousel. The process was a bit intense, but seeing it all come together was definitely rewarding.
📌Technologies Used:
✅#HTML
✅#CSS
✅#JavaScript
🔘Here's what I tackled:
✅ Drag & Swipe Navigation: Users can smoothly navigate through team members by dragging the carousel or using swipe gestures (mobile friendly!).
✅ Responsive Design: The layout adapts to different screen sizes, ensuring a great experience on all devices.
✅ Clean and Modern Design: The carousel features rounded corners and subtle shadows for a visually appealing look.
🔥 It’s been an incredible journey, and I’m loving every second of it!
📌GitHub Repository: Link
🔗Live Link: Link
#projects@DevNerd0
👋 Hey everyone!
🙏 I apologize for being late today. I'll do my best to be punctual in the future.
☄️ Today's task was building a Carousel. The process was a bit intense, but seeing it all come together was definitely rewarding.
📌Technologies Used:
✅#HTML
✅#CSS
✅#JavaScript
🔘Here's what I tackled:
✅ Drag & Swipe Navigation: Users can smoothly navigate through team members by dragging the carousel or using swipe gestures (mobile friendly!).
✅ Responsive Design: The layout adapts to different screen sizes, ensuring a great experience on all devices.
✅ Clean and Modern Design: The carousel features rounded corners and subtle shadows for a visually appealing look.
🔥 It’s been an incredible journey, and I’m loving every second of it!
📌GitHub Repository: Link
🔗Live Link: Link
#projects@DevNerd0
GitHub
GitHub - roobiwebdev/Day-45-Image-Slider
Contribute to roobiwebdev/Day-45-Image-Slider development by creating an account on GitHub.
⚡3
#Day46 of #100DaysChallenge
Hey everyone!
🔴a sleek and functional Stopwatch⏱️ using HTML, CSS, and JavaScript!
✅ Key Features: Intuitive Interface: Easy-to-use buttons for starting, stopping, and resetting the timer.
✅Millisecond Accuracy: Tracks time down to the hundredth of a second.
✅Responsive Design: Looks great on all devices, from desktops to smartphones.
✅Clean & Modern Aesthetics: Visually appealing design with animations on button hover.
🧡Excited to keep building and learning!
⛈GitHub Repository: Stopwatch
🔗 Live : Link
#projects@DevNerd0
Hey everyone!
🔴a sleek and functional Stopwatch⏱️ using HTML, CSS, and JavaScript!
✅ Key Features: Intuitive Interface: Easy-to-use buttons for starting, stopping, and resetting the timer.
✅Millisecond Accuracy: Tracks time down to the hundredth of a second.
✅Responsive Design: Looks great on all devices, from desktops to smartphones.
✅Clean & Modern Aesthetics: Visually appealing design with animations on button hover.
🧡Excited to keep building and learning!
⛈GitHub Repository: Stopwatch
🔗 Live : Link
#projects@DevNerd0
⚡3
✨ #Day47 of #100DaysChallenge
Hey everyone!
🚀 I built a landing page for Huddle using HTML, CSS.
✅ Highlights:
Catchy Headline: "Build The Community Your Fans Will Love."
Impressive Stats: Over 1.4k communities formed, 2.7m messages sent.
Interactive Features: Grow Together: Dynamic discussions with cool illustrations.
Flowing Conversations: Smooth design elements. Seamless Integration: Works with existing tools.
📱 Note: Mobile responsiveness isn’t fully done yet, but I’m working on it! 😊
💪 Excited to keep learning and improving! 💻
GitHub Repository: Huddle Landing Page
🔗 Live Demo: Check it out
#projects@DevNerd0
Hey everyone!
🚀 I built a landing page for Huddle using HTML, CSS.
✅ Highlights:
Catchy Headline: "Build The Community Your Fans Will Love."
Impressive Stats: Over 1.4k communities formed, 2.7m messages sent.
Interactive Features: Grow Together: Dynamic discussions with cool illustrations.
Flowing Conversations: Smooth design elements. Seamless Integration: Works with existing tools.
📱 Note: Mobile responsiveness isn’t fully done yet, but I’m working on it! 😊
💪 Excited to keep learning and improving! 💻
GitHub Repository: Huddle Landing Page
🔗 Live Demo: Check it out
#projects@DevNerd0
⚡3