DEV Community: Uzondu

AI Won’t Replace You—But It Will Expose You

Uzondu — Tue, 08 Jul 2025 11:28:33 +0000

I used to resist AI.
At first glance, it felt like a shortcut for non-thinkers—a lazy tool. 🛑🧠
A cheat code for those unwilling to learn or build real skills.

But months later, my perspective has shifted—just like the entire tech landscape.
Now I understand: the tool isn’t the problem. The thinking is.

We’re in the thick of AI hype:
💼 Tech layoffs dominate headlines
🧠 AI models outperform humans on tasks
🧑‍💻 “Developers are obsolete” becomes clickbait
🌐 AI is now in every field—from law to medicine to design

But here’s the truth no one’s shouting loud enough:
🟢 AI didn’t replace people—it replaced repetition.

Companies cut roles not because they hate humans,
but because investors want efficiency.
Repetitive tasks—those based purely on structure, syntax, or templates—were the first to go.

What followed?
📈 Rising market caps
🚀 New AI startups
💼 Job titles we didn’t have a year ago

So no—the jobs didn’t vanish. They just evolved.

So who’s thriving in this new era?
🎯 Critical thinkers
💻 Programmers who can architect, not just copy
🎨 Designers who understand why not just how
⚙ Engineers who connect dots across disciplines

These aren’t just roles—they're minds. Minds that do more than give instructions to machines.

AI can automate syntax.
It can scaffold a project, generate boilerplate, or design a layout.
But here’s what it can’t do 👇

❌ Ask: "Is this the right direction for the user?"
❌ Think through: "How does this connect with the business goal?"
❌ Understand: "What are the consequences of this decision?"
❌ Recognize when something “works,” but feels wrong

These are creative, intuitive, and context-driven questions.
AI works with rules.
Humans bend them, break them, create them.

We’ve been here before:
🖨 The printing press didn’t kill writers.
🖌 Photoshop didn’t replace artists.
⌨ Word processors didn’t erase authors.

Each time, what got wiped out was the mechanical part of the job.
What survived—and soared—was creativity. Vision. Skill.

The pattern never changed.
🧠 Creative thinkers rise.
♻ Repetitive executors fade.

⚠️ But there’s a danger now:
The rise of a new class of “AI professionals”
who build careers on tools they don’t truly understand.

They generate code but can't debug.
They output UIs but can’t explain user needs.
They write copy but lack voice or depth.

The result?
🌪 A saturated market of surface-level devs and designers
who can’t survive without the prompt.

Meanwhile, companies are desperately looking for:
💡 Hybrid minds—who combine AI with real skills
🛠 Thinkers who can tweak, test, and rethink
🧩 Professionals who understand the why behind the what

AI isn’t replacing you.
It’s filtering you.
Only those who know how to think, build, and adapt will pass through.

So don’t just use AI to move fast.
Don’t depend on it to be smart for you.

🧠 Use it like a partner. A tool. A jumping-off point.
But always bring your brain to the table.

Don’t just prompt. Plan.
Don’t just build. Design.
Don’t just automate. Imagine.

That’s the edge.
That’s the future.

Battlefronts in Browser: Mercury Defenders & Nova Invaders Unleashed

Uzondu — Sat, 03 May 2025 22:36:02 +0000

🚀 Two Web Games, One Journey

I’ve built two distinct browser‑based games—from a tower‑defense on Mercury to an endless robot arena shooter—all with pure JavaScript, HTML5 Canvas, and browser storage. Here’s a side‑by‑side look at what I’ve learned, where each shines, and why you might give them a spin.

👾 Alieno‑Mercury Combat

A retro‑style tower‑defense where you deploy defenders to protect your base from alien hordes on Mercury.

Uzondu

Sep 29 '24

Alieno Mercury-Combat

#devchallenge #gamechallenge #gamedev #webdev

Comments 2

2 min read

Live Demo & Code

🎮 Play
💻 Source on GitHub

Key Features

Resource Management & Tactics: Choose defender types to counter waves
Retro Pixel Art Aesthetic: Nostalgic visuals with modern performance
Procedural Enemy Waves: Increasing difficulty with each round

🤖 Nova Invaders

A fast‑paced, endless arena shooter where you control a robot, outlast invaders, and level up your firepower.

Uzondu

Apr 27 '25

🚀 Nova Invaders: A Game of Bullets, Bots & Bold Ambition

#alibabachallenge #devchallenge #gamedev #webdev

Comments

3 min read

Live Demo & Code

🎮 GitHub Pages Demo
💻 GitHub Repo

Core Innovations

Endless Mode & Dynamic Waves: No end—just ever‑escalating chaos
Smart Bullet Refills: B2 (3/sec), B3 (2/sec), B4 (1/sec) for strategic depth
Level‑Up Mechanics: Scaling enemy health, speed, and spawn randomness
Seamless UI Transitions: Hand‑crafted DOM logic—no frameworks
Browser Storage Persistence: Save progress locally—no server needed

🔄 Tech & Tools Comparison

Aspect	Alieno‑Mercury Combat	Nova Invaders
Game Type	Tower‑Defense	Endless Arena Shooter
Engine	JS Classes + Canvas	JS Classes + Canvas
Data Persistence	localStorage (score)	No localStorage (Set target (full state)
Performance	Procedural waves, simple AI	Object pooling for bullets
UI	Static menus + Canvas HUD	Dynamic state transitions

🧠 Lessons & Next Steps

OOP & Logical Thinking: Moved from coder to engineer by structuring code for reuse and clarity
Browser Storage Mastery: Learned nuances of localStorage limits and serialization
Performance Tuning: Implemented object pooling to avoid GC spikes
Deployment Realities: Balanced GitHub Pages reliability with Alibaba Cloud ambition

What’s Next?

Leaderboards, mobile port, co‑op modes
Enhanced AI patterns and new defender/bullet types
Polishing visuals and accessibility

❤️ Your Turn

Give these games a spin and let me know which you prefer! Stars, claps, and feedback fuel the next iteration.

🎮 Alieno‑Mercury Combat on DEV
🎮 Nova Invaders Demo

🚀 Nova Invaders: A Game of Bullets, Bots & Bold Ambition

Uzondu — Sun, 27 Apr 2025 22:57:58 +0000

My entry for the Alibaba Cloud x DEV Game Challenge — built with love, logic, and browser storage.

🎮 Play the Game

🕹️ Live Demo on GitHub Pages

💻 GitHub Repository

⚠️ I also deployed this game to Alibaba Cloud using their OSS + Domain service, but DNS propagation is still in progress. GitHub Pages is your best bet for now.

✨ What If a Game Got a Heartbeat?

Nova Invaders isn’t just another robot shooter. It’s a high-speed, endlessly evolving arena built on pure JavaScript. With custom bullet logic, dynamic waves, and a seamless UI — this browser game learns, adapts, and keeps you on edge.

I built it from scratch: no frameworks, no fluff — just DOM logic, OOP, and raw gameplay energy.

🔥 Core Features

🌀 Endless Mode

There’s no final boss — just survival. Chaos ramps up endlessly.

🔄 Bullet Types & Smart Refills

Each bullet type has a unique cooldown refill system:

B2 → 3 bullets/sec
B3 → 2 bullets/sec
B4 → 1 bullet/sec

Strategic use is everything.

🚀 Level-Up Mechanics

Unpredictable Waves
Escalating Difficulty
Randomized Patterns

No two runs feel the same.

🌗 Smooth UI Transitions

Everything flows — no janky reloads. From menus to game over screens, transitions are built manually with clean DOM logic.

🗂️ Persistent Browser Storage

Your progress is saved in local Storage. No logins. No servers. Just load and play.

🆕 What’s Coming?

💰 Coins System

Coins are earned through gameplay and used for upgrades and boosters — integrated across mechanics.

⚡ Boosters

Add tactical variety and life-saving options:

Health+: Instantly gain +20 HP
Booster-1: Full health restore
Booster-2: Wipe every enemy on screen (panic button!)

📸 Sneak Peek

🎥 Gameplay Video

🔧 Built With

JavaScript (Classes + DOM)
HTML5 Canvas
CSS for UI polish
Object Pooling for performance
LocalStorage API
Alibaba Cloud OSS + Domain Service

Alibaba was a big part of deployment. I used OSS for storage and domain setup — but GitHub Pages is the backup due to DNS propagation delays.

🧠 Key Challenges

No Frameworks, Full Experience

UI states, transitions, and logic — all custom-built with JS.
Cooldown Bullet System

Bullets refill based on type, managed through object pooling.
Hosting Delays

Alibaba deployment worked, but DNS lag led me to use GitHub Pages to avoid demo downtime.

📚 What I Learned

HTML Canvas + JS = Powerful combo
Browser storage is excellent for solo-dev games
Deployment = more than uploading files
Performance tuning matters even in small games

🚪 What’s Next?

Leaderboards + difficulty scaling
More robots, bullet types, and boosters
Mobile version with Capacitor
Possibly co-op mode 👀

❤️ Final Thoughts

This was only my second time coding this year, and building Nova Invaders reignited my drive. I didn’t just code — I engineered. I thought through systems, wrote maintainable logic, and leaned on AI tools to refine my problem-solving process.

“Logical thinking is what takes you from a coder to an engineer — solving problems and bending AI tools to your belt.”

Judges & DEV team: racing against the clock meant I pushed deployment and docs to the wire—and my Alibaba link still catches up—but Nova Invaders delivers an OOP‑fueled engine, evolving levels, strategic bullets, and browser‑saved progress. Please look past the deadline’s rough edges and reward the creativity and passion driving every line of code.

If you enjoyed it, hit the ❤️, drop a comment, or star the repo — it fuels the journey. 💬

🔗 Quick Links

🎮 Play Nova Invaders

💻 GitHub Repository

☁️ Alibaba Hosting (Coming Soon)

WeCoded 2025: A Celebration of Impact & Innovation

Uzondu — Mon, 07 Apr 2025 09:40:29 +0000

This is a submission for the WeCoded Challenge: Celebrate in Code

✨ My WeCoded Landing Page

I designed and built a dynamic landing page for the WeCoded Challenge that highlights past WeCoded and SheCoded stories while capturing the celebratory and empowering spirit of the campaign. My goal was to create a space that not only shares stories but invites new developers to feel part of something bigger.

This project helped me blend creativity with real API data, turning static layouts into a lively and inclusive experience.

🚀 Demo

🔗 Live Site: Link
💻 GitHub Repo: Link
📸 Screenshots:

🛠️ How I Built It

The landing page was crafted using:

HTML, CSS & JavaScript for the layout and styling
DEV.to Articles API to fetch real WeCoded and SheCoded stories
Responsive Design so the experience feels great on mobile and desktop
Dark/Light Mode Toggle to match user preference
Horizontal scrolling "Spotlights" section to showcase featured stories in a clean, interactive way

Process:

I started with wireframes and gradually moved to a high-fidelity mockup in Figma. Then I implemented it section by section, with focus on accessibility and responsiveness. The Spotlights section was especially fun—it uses a scroll snapping technique to elegantly slide between stories.

One thing I’m proud of is how the page feels like a living, growing celebration of developers from around the world. It’s minimal, but powerful.

🎨 Mobile Design Image

✨ Final Thoughts

While I’m proud of the progress I made with this project, I acknowledge that not everything is perfect. There were challenges along the way, such as refining certain elements and balancing responsiveness with functionality. However, I learned a lot throughout this process and continue to grow as a developer.

I’d love to hear your insights and comments on how I can improve further. Any feedback is much appreciated!

From Gaming Dreams to Web Development—My Unexpected Journey

Uzondu — Sat, 15 Mar 2025 07:40:51 +0000

This is a submission for the WeCoded Challenge: Echoes of Experience

The journey into coding is often filled with curiosity, challenges, and moments of pure excitement. Looking back, my path into web development has been no different. From my first encounter with HTML to building interactive experiences, every step has been a learning curve—one that has shaped my skills, mindset, and passion for creating on the web.

How It All Started: A Gamer’s Frustration

I had dabbled in various areas of software tech—app development, game development, and web development—before finally deciding to major in web development. My ambition? To conquer the software industry one step at a time, starting with the web. But here’s the funny part—I never liked coding in the first place.

My entry into the tech world started long before I even knew what a website was. It all began with game development. As a kid, I loved video games—especially soccer and war games. They simulated real experiences and fueled my love for technology and entertainment. But here’s the thing—no game was ever perfect. There was always something missing, something I wished I could change.

I kept scrolling through app stores, searching for the perfect game—one that had everything I wanted. But no matter how many I tried, there was always some flaw, some missing feature. That frustration became the seed of something bigger.

The Moment of Change: Eyes Open, Mind Blown

At that time, my only way of coping was writing reviews and commenting on game forums, hoping developers would magically read my mind and improve their games. But after a while, even that felt pointless. I resigned myself to just accepting the flaws in games and forcibly focusing only on their bright sides.

Then something unexpected happened.

One day, while scrolling through the App Store, I stumbled upon an app called Grasshopper. It claimed to teach JavaScript in a fun, interactive way. I misinterpreted it as some kind of math puzzle (which I loved), and that curiosity made me explore further.

Not long after, I came across another app called Programming Hero, and a simple yet powerful sentence changed my trajectory:

"Learn to code and build a game."

That was all I needed. If I couldn't find the perfect game, maybe—just maybe—I could build my own.

Copy-Pasting My Way to “Success” (The False Pride Phase)

With zero coding experience, I did what any beginner would do—I followed tutorials. But not just any tutorials, I copied code word for word from them, pasted it into game engines, and called it my project.

And guess what? It worked! I had games running that made me beam with pride. But deep down, I knew the truth—I didn’t actually understand what I was doing. It was false pride, built on copy-paste programming.

As I kept experimenting, I dabbled in different languages. I started with Python, hoping to create games with it. But then I stumbled into Java and got stuck there for the longest time, trying to figure out its most relevant use. Eventually, Java led me into app development—a huge detour from my initial goal of building games.

How a Challenge Changed Everything (Or, How My Cousin Accidentally Made Me a Web Developer)

My journey into web development wasn’t something I planned—it was triggered by a challenge. My cousin had built something visually stunning with HTML and CSS, and when I saw it, I had two thoughts:

This is really cool.
Why can't I do this?
Until then, my focus had been on game and app development, but seeing how easily he could shape a webpage sparked something in me. Unlike the complexity of game engines, web development felt instant and satisfying—write a few lines of code, refresh the page, and boom! Magic.

Coding on a Tablet: The Start of Something Beautiful (Literally)

With nothing but a tablet, I started learning HTML and CSS. Watching simple lines of code turn into beautiful designs felt creative and rewarding—like art mixed with logic.

Then came JavaScript. If HTML and CSS made things look good, JavaScript made them do things. The moment I got my first button to actually work, I felt powerful. It was like I had unlocked a new superpower.

Books for Brain, Videos for Biceps

As I dived deeper into web development, I realized something:

Books put concepts in my brain. They gave me understanding—the why behind everything.
Videos were my practice gym. I used YouTube tutorials like workout sessions, following along and applying what I learned.
This combo of reading + doing became my ultimate learning strategy.

Freelancing? I’ll Pass (For Now…)

Most beginners create a portfolio early in their learning process, but I was hesitant. I actually made one dummy portfolio, but deep down, I knew I wanted real projects before making a marketable one.

At one point, I considered freelancing, excited by the idea of earning through my skills. I browsed job listings and imagined landing my first gig. But here’s the thing—I never applied.

It wasn’t that I lacked skills, but I lacked confidence. I kept questioning whether my work was good enough, whether I had enough experience. Because I had tied my success to freelancing, this hesitation drained my enthusiasm.

Project Paralysis: When Finishing is Harder Than Starting

The deeper I went into web development, the harder it became to finish projects.

I started countless projects, only to abandon them halfway. It wasn’t because I lost interest in coding—it was because I didn’t have a clear direction.

UI/UX: The Roadmap I Didn’t Know I Needed

That’s when I decided to learn UI/UX design. Instead of jumping straight into code, I began creating mockups and prototypes first. This changed everything.

I knew exactly what I was building before writing a single line of code.
My projects felt polished and structured.
I found new motivation by engaging with communities and sharing my work.
This shift reignited my passion and gave me the push I needed.

No Rush for a Portfolio—Quality Over Speed

A lot of people create a portfolio as part of their learning journey, but I’ve decided to hold off on a proper one until I have a collection of strong, meaningful projects—including my submission for the WeCoded landing page.

I want my portfolio to showcase real, marketable work, not just rushed projects.

What’s Next? The Bigger Picture

With my passion for web development stronger than ever, I now have a clear goal:

✅ Master the Web – Learn both frontend and backend development to become a full-stack software engineer.
✅ Freelancing with Purpose – Build up my portfolio and return to freelancing, this time with confidence.
✅ Entrepreneurial Goals – Eventually, I want to create SaaS tools that solve real-world problems.

I’m incredibly grateful for everyone and everything that has helped me along this journey—especially my family, who have always believed in and appreciated my work.

To every coder out there: keep learning, keep building, and never lose sight of your passion. Good luck! 🚀

Narriva - A Minimalist Blog for Traditions and Celebrations**

Uzondu — Fri, 27 Dec 2024 00:17:46 +0000

What I Built

Narriva is a minimalist and visually engaging blog website designed to spotlight traditions and celebrations. The goal was to create a blog site with a strong emphasis on modern design principles, responsive layouts, and interactivity using CSS and JavaScript.

I wanted the blog to be simple yet elegant, showcasing its content with a clean interface and intuitive navigation. The main focus was ensuring that it is aesthetically pleasing across devices while maintaining functionality.

Demo

Take a look at my project below:

Project Code Repository

Live Demo

Here’s a quick preview of the blog and post pages:

The home page features a compelling navigation bar, a dynamic blog header, and a grid of recent posts with a clean, modern card design.
The post page showcases an image based list of contents, large feature images, and engaging section design

Journey

Setting Up

The foundation of this project started with understanding the requirements of the challenge. I began by choosing a theme for the blog—one that would stand out visually and resonate with an audience interested in traditions and celebrations. After some brainstorming, I settled on "Narriva" as the blog's title to evoke a sense of storytelling and cultural richness.

I sketched out the blog’s structure, listing essential components like:

A fixed navigation bar for seamless browsing.
A blog header with captivating gradients and a search bar.
Recent post cards with an interactive layout.
A cohesive design for the footer to tie the page together.

Crucial Stage

Design and Implementation

The design process centered on creating a polished and visually appealing layout using light colors with touches of purple-pink gradients. I made sure the UI adhered to accessibility standards while maintaining a modern aesthetic. Key design highlights include:

Navigation Bar: Responsive, fixed-position navigation that works across the blog and post pages, featuring toggle functionality for smaller screens.
Header Section: A large heading and subheading with gradient text effects for visual impact.
Blog Post Cards: Unique cards with separated content and images, ensuring they stand out while maintaining a cohesive design.
Post Page Enhancements: Dynamic features like an accordion-based table of contents, section images, and a focus on readability.

Challenges and Solutions

One of the significant challenges was ensuring responsiveness across devices. While using Chrome DevTools helped in testing, I encountered issues with scaling and alignment, especially with the fixed-position navigation. To address this:

I utilized CSS media queries to fine-tune the layout for various screen sizes.
Debugged positioning inconsistencies by refining the structure of the navbar and container elements.

Another challenge was implementing toggle functionality for the mobile navbar. Using event listeners, I dynamically toggled classes to control animations and content visibility effectively.

Technical Highlights

CSS Animations and Transitions: Used to bring life to the accordion and button interactions.
JavaScript Manipulation: Querying and dynamically injecting HTML elements for modularity and scalability.
Image Optimization: Focused on using high-quality, lightweight images in modern formats like WebP to ensure performance without compromising visuals.

Ending

As the project came together, I felt a sense of accomplishment seeing the designs come to life. The features I’m particularly proud of include:

The blog's intuitive layout and responsiveness.
The dynamic accordion for the post page, which organizes content efficiently.
The aesthetic harmony achieved through consistent typography and color palettes.

What’s Next?

Moving forward, I’d like to:

Add animations to the blog post cards for hover effects.
Explore integrating APIs to dynamically load post content.
Optimize the site for SEO and improve accessibility further.

Conclusion

This project challenged me to think creatively while honing my CSS and JavaScript skills. Narriva is not just a blog but a testament to the power of design and interactivity. I’m excited about the possibilities it holds for storytelling and celebrating cultural heritage.

Thank you for taking the time to view my submission. I hope you enjoy exploring Narriva as much as I enjoyed building it!

Let me know if there’s anything you’d like to refine or add!

Alieno Mercury-Combat

Uzondu — Sun, 29 Sep 2024 23:16:25 +0000

This is a submission for the Web Game Challenge, Build a Game: Alien Edition

What I Built

I built a Tower-Defense game based on an Alien theme.
The aim of the game is to clear all enemies before they arrive at your defenders base(This is the other side of the battlefield). Basically your trying to dominate Mercury but there are life threatening creatures inhabitants and you need to defeat them; you will to gain resources and know what combination of defenders you will use. This game allows for flexible tactics and can be retro.

About game

Browser compatibility: Desktops and large screens(900px +)

Game Features

Defender types: 3
Alien types 3 (Armored trees, Giant insects and UFO's)
Air Battle Ships (Part of defender types)
2 types of Soldiers (Part of defender types);
Fairly good animation

Demo

Live Site
GitHub Repo

Journey

Step 1: I created a canvas of specific with and height and some basic boilerplate

Step 2: I used canvas rectangles for both enemies and defenders, I also created the logic; HTML canvas element, JavaScript classes and JavaScript DOM all came in handy.

Step 3: I replaced shapes with sprite sheets and animations which made the game beautiful and whole lot better.

What I wish I could do:

Make it responsive on mobiles; I cannot do this in this game because the mouse hovering for collecting resources is a very important aspect of the game.
Make the canvas width less constrained, right now its in pixel values.

I would appreciate it if I could get feedback on how I could improve on the game, for example, making it responsive or fishing out hidden bugs(though I debugged it almost all the time). Thanks in advance everyone helping me achieve my own model of Plants vs Zombies by EA

Licence

Apache License

Version 2.0, January 2004

Cricket league landing page

Uzondu — Fri, 02 Aug 2024 21:48:25 +0000

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

I designed and built a two column webpage, supposedly, for a cricket league based in New York. Glossed with rich graphics, it provides elaborate information, inviting interested participants to join the league.

Demo

Here is the link to the code: GitHub code link.
Here is the live site: Webpage link.

Journey

Initial stage

I started with the designing and planning the layout of the page. I also thought ahead of making the page responsive to mobile devices and put that to paper as well (Don’t worry I’ll be publishing a more detailed post on my steps to planning and designing a webpage soon; so stay tuned!). After following through the design process, I began creating the code files for the page.

Middle stage

I used JavaScript to relocate the elements to suite the two-column page I had in mind; I created new elements for new purposes, then partly edited the initial HTML structure. With some additional inline tags to contain text which I needed to style separately, I used CSS to style the page in steps, following the hierarchy of the page elements.

End stage

I integrated the images (Which I got from Unsplash and Freepik) to give the page the final feel I aimed for. I also made sure the page would be responsive across common devices.

This is a solo project created by Uzondu

Earth Day Celebration

Uzondu — Sun, 28 Apr 2024 16:59:37 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

I built a mini-site (one-page) for the Earth day celebration. The goal was to organize the given content in a more defined manner, using a book-like widget.
I aspired to and succeeded in creating something useful, interactive and responsive; I adapted it to be useful on a laptops, tablets and smartphones.

Demo

Live Demo

Here is the link to the code on Github

Journey

Setting up

I started off with creating the structure which provided the template for the project. I particularly liked the layout of my encyclopedia’s historic contents, so I decided to adopt the same in organizing the contents of the page.

Crucial stage

I began converting my blueprint, to code. Each section of the site would be distinguished from the others. The first section would be at full width and also contain the hero section. But the header section only contained a heading, so I transferred the ‘Take action ‘section to the header using JavaScript. It seemed to me as the best hero section amongst the others.
Looking again at the structure of my encyclopedia, I noticed how the presentation of ‘did-you-know’ section was distinguished from the rest of the content. So I adapted this to my site, giving the section a lesser width than half, on the laptop screen. The rest of the content was contained in the remaining width, since I used sliding for navigation of the content. I then decorated the footer.
I used media queries to make the site responsive and also created a quiz widget that would appear on a button click.

Ending

Once done, I took the project for a test drive, fixed all errors, completed my links and added some final touches. The site’s responsiveness was not exactly… flawless. Some content and elements weren’t positioned as I would have loved. However, I didn’t want to risk putting myself in a quagmire, trying to fix things that were already functional; especially not being very conversant with those aspects of the programming language. For me I learned media queries only recently. The images I used in this project were from Adobe istock. It’s a good place to source some free images.
So finally I marked up the boilerplate; I ‘cooked’ it in a way that seemed best to me.
I probably could have done it better; but certainly feel a sense of achievement and progress.

Take a look at the quiz widget

This is a solo project , I am the only coder behind it

Uzondu9

MIT License

API EXPOSED

Uzondu — Sat, 30 Mar 2024 23:31:11 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

API stands for Application Programming Interface, a set of rules that allows software programs to communicate with each other. DOM stands for Document Object Model, a programming interface for HTML/XML documents that represents the structure of a document and allows manipulation.

Additional Context

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content

"GLAM UP MY MARKUP" Submission Template.

Uzondu — Sat, 30 Mar 2024 22:08:50 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities✨

What I Built

Starting with the provided HTML, I built a form to gather data from prospective camp participants. Beautifully styled with CSS, I employed JavaScript to make it interactive. It has a dynamic and attractive beach-camp background. The original HTML was not edited.

Demo

The Code

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    body {
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      background-repeat: no-repeat;
      background-image: url(Summer_Camp.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      max-width: 1250px;
      box-sizing: border-box;
      animation: day 16s ease infinite;
    }

    @keyframes day {
      10% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 90, 3, 0.22)), url(Summer_Camp.png);
      }

      30% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 70, 3, 0.22)), url(Summer_Camp.png);
      }

      50% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 50, 3, 0.22)), url(Summer_Camp.png);
      }

      70% {
        background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 3, 0.7)), url(Summer_Camp.png);
      }

      90% {
        background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 10, 53, 0.22)), url(Summer_Camp.png);
      }
    }

    .subMess {
      background-color: rgb(219, 243, 250);
      padding: 20px;
      padding-right: 7%;
      padding-left: 0px;
      padding-top: 2%;
      width: 63%;
      height: 55%;
      box-sizing: border-box;
      border-radius: 10px;
      border: 2px dashed #1a739dd4;
      background-image: url(tent-tree.png);
      background-size: 40%;
      background-repeat: no-repeat;
      background-position: 10%, 50%;
      position: absolute;
      margin: 30px;
      margin-left: 160px;
      margin-top: 10%;
      border: 12px solid transparent;
      border-image: url(wood-frame22.2.jpg) 40 round;
      transform: translate(34px, 20px);

    }

    .subF {
      position: relative;
      left: 55%;
      display: grid;
      padding-top: 40px;
    }

    .subH1 {
      color: #1616de;
      font-size: 32px;
      display: inline;
      padding-left: 420px;
    }

    .subF .subP {
      color: #b50936;
      font-size: 25px;
      font-weight: 550;
      font-style: italic;
      font-stretch: semi-expanded;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      position: relative;
      padding-bottom: 35px;
      padding-left: 12px;
    }

    .subF #subB {
      width: 45%;
      border-radius: 10px;
      height: 40px;
      border: 1px dashed #181818;
      background-color: teal;
      transition: 0.5s;
      transition-timing-function: linear;
      color: blanchedalmond;
      position: relative;
      left: 7px;
      font-size: 14px;
      text-transform: uppercase;
      box-sizing: border-box;
      border: 12px solid transparent;
      border-image: url(wood-frame22.2.jpg) 40 round;
    }

    .subF #subB:hover {
      border-image: url(wood-frame22.2.jpg) 40 round;
      transform: scale(1.1);
      opacity: 1;

    }

    #camp-activities-inquiry {
      background: lightblue;
      position: relative;
      padding: 25px;
      padding-right: 10%;
      width: 66%;
      box-sizing: border-box;
      border-radius: 10px;
      border: 20px solid transparent;
      background-image: url(tent-tree.png);
      background-size: 40%;
      background-repeat: no-repeat;
      background-position: 10%, 65%;
      margin: 30px;
      margin-left: 150px;
      transform: translate(60px, 20px);
      border-image: url(wood-frame22.2.jpg) 50 round;
    }

    form {
      position: relative;
      margin-top: 4%;
      left: 380px;
      display: flex;
      flex-direction: column;
      width: 80%;
    }

    label {
      color: brown;
      font-size: 14px;
      font-weight: 500;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }


    h1 {
      color: #1616de;
      padding-left: 400px;
      padding-top: 20px;
      font-size: 22px;
      display: inline;
      animation: anime 36s infinite;

    }

    @keyframes anime {
      25% {
        color: teal;
      }

      50% {
        color: #b80f0f;
      }

    }

    #activity-select {
      margin-top: 10px;
      margin-bottom: 20px;
      width: 65%;
      height: 40px;
      border-radius: 12px;
      font-weight: 700;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      color: palevioletred;
    }

    #NewFoodAllergies {
      width: 65%;
      height: 40px;
      border-radius: 12px;
      font-weight: 700;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      color: palevioletred;
    }

    #additional-info {
      margin-top: 5px;
      margin-bottom: 20px;
      width: 65%;
      height: 5.0em;
      border-radius: 5px;
      color: seagreen;
      font-size: 17px;
      font-weight: 600;
      font-family: 'Times New Roman', Times, serif;
      border-top-right-radius: 50px 20px;
    }

    #button {
      width: 65%;
      border-radius: 10px;
      height: 40px;
      border: 1px dashed #181818;
      background-color: teal;
      transition: 0.5s;
      transition-timing-function: linear;
      color: blanchedalmond;
      position: relative;
      left: 5px;
      font-size: 14px;
      text-transform: uppercase;
      box-sizing: border-box;
      border: 12px solid transparent;
      border-image: url(wood-frame22.2.jpg) 40 round;
    }

    #button:hover {
      border-image: url(wood-frame22.2.jpg) 40 round;
      transform: scale(1.1);
      opacity: 1;

    }

    .errorA {
      animation: error 2s linear infinite;
    }

    @keyframes error {
      from {
        border: 3px solid red
      }

      to {
        border: none;
      }
    }

    #label2 {
      transform: translateY(24px);
    }

    #label0 {
      transform: translateY(10px);
    }
  </style>
</head>

<body>
  <section id="camp-activities-inquiry">
    <h1>Camp Activities Inquiry</h1>
    <form action="/submit-form" method="POST">
      <label for="activity-select">Which camp activities are you most looking forward to?</label>
      <select id="activity-select" name="activity">
        <option value="">--Please choose an option--</option>
        <option value="hiking">Hiking</option>
        <option value="canoeing">Canoeing</option>
        <option value="fishing">Fishing</option>
        <option value="crafts">Crafts</option>
        <option value="archery">Archery</option>
      </select>
      <label for="food-allergies">Food Allergies (if any)</label>
      <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>
      <label for="additional-info">Additional things the counselor should know</label>
      <br>
      <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>
      <button type="submit">Submit</button>
    </form>
  </section>
  <script>
    let main = document.getElementById("camp-activities-inquiry");
    let btn = document.getElementsByTagName("button")[0];
    let body = document.getElementsByTagName("body")[0];

    let foodAllergies = document.getElementsByTagName("textarea")[0];
    let addInfo = document.getElementsByTagName("textarea")[1];
    let activitySelect = document.getElementsByTagName("select")[0];

    let label2 = document.getElementsByTagName("label")[2];
    label2.setAttribute("id", "label2");

    let label0 = document.getElementsByTagName("label")[0];
    label0.setAttribute("id", "label0");

    btn.setAttribute("id", "button");

    let messBox = document.createElement("div");
    messBox.classList.add("class", "subMess");

    let messBoxH1 = document.createElement("h1");
    messBoxH1.classList.add("class", "subH1");
    messBoxH1.innerHTML = "Thanks for the feedback";

    let messBoxP = document.createElement("p");
    messBoxP.classList.add("class", "subP")
    messBoxP.innerHTML = "Want to send another inquiry?";

    let messBoxButt = document.createElement("button");
    messBoxButt.id = 'subB';
    messBoxButt.innerHTML = "Send Another";

    let messForm = document.createElement("div");
    messForm.classList.add("class", "subF");

    messForm.append(messBoxP, messBoxButt);
    messBox.append(messBoxH1, messForm);

    let NewFoodAllergies = document.createElement("select");
    NewFoodAllergies.id = "NewFoodAllergies";

    var optionAA = document.createElement("option");
    optionAA.text = "--Please choose an option--";
    optionAA.value = "";


    var optionA = document.createElement("option");
    optionA.text = "None";

    var option1 = document.createElement("option");
    option1.text = "Milk";

    var option2 = document.createElement("option");
    option2.text = "Eggs";

    var option3 = document.createElement("option");
    option3.text = "Caffiene";

    var option4 = document.createElement("option");
    option4.text = "Peanuts";

    var option5 = document.createElement("option");
    option5.text = "Tree Nuts";

    var option6 = document.createElement("option");
    option6.text = "Seaseme";

    var option7 = document.createElement("option");
    option7.text = "Soy";

    var option8 = document.createElement("option");
    option8.text = "Fish";

    var option9 = document.createElement("option");
    option9.text = "ShellFish";

    var option10 = document.createElement("option");
    option10.text = "Wheat";

    var option11 = document.createElement("option");
    option11.text = "Celery";

    var option12 = document.createElement("option");
    option12.text = "Carrot";

    var option13 = document.createElement("option");
    option13.text = "Avacado";

    var option14 = document.createElement("option");
    option14.text = "Bell Pepper";

    var option15 = document.createElement("option");
    option15.text = "Potato";

    var option16 = document.createElement("option");
    option16.text = "Pumpkin";

    var option17 = document.createElement("option");
    option17.text = "Mushroom";

    var option18 = document.createElement("option");
    option18.text = "Onion";

    var option19 = document.createElement("option");
    option19.text = "Mustard";

    var option20 = document.createElement("option");
    option20.text = "Spices";

    foodAllergies.replaceWith(NewFoodAllergies);

    NewFoodAllergies.add(optionAA);
    NewFoodAllergies.add(optionA);
    NewFoodAllergies.add(option1);
    NewFoodAllergies.add(option2);
    NewFoodAllergies.add(option3);
    NewFoodAllergies.add(option4);
    NewFoodAllergies.add(option5);
    NewFoodAllergies.add(option6);
    NewFoodAllergies.add(option7);
    NewFoodAllergies.add(option8);
    NewFoodAllergies.add(option9);
    NewFoodAllergies.add(option10);
    NewFoodAllergies.add(option11);
    NewFoodAllergies.add(option12);
    NewFoodAllergies.add(option13);
    NewFoodAllergies.add(option14);
    NewFoodAllergies.add(option15);
    NewFoodAllergies.add(option16);
    NewFoodAllergies.add(option17);
    NewFoodAllergies.add(option18);
    NewFoodAllergies.add(option19);
    NewFoodAllergies.add(option20);

    let connect = true;
    function valid() {
      if (NewFoodAllergies.value === "" && activitySelect.value === "") {
         NewFoodAllergies.setAttribute("class", "errorA");
         activitySelect.setAttribute("class", "errorA");
         connect = false;
      }
      else if(NewFoodAllergies.value !== "" && activitySelect.value !== ""){
        NewFoodAllergies.removeAttribute("class", "errorA");
        activitySelect.removeAttribute("class", "errorA");
        connect = true;
      }
      else if (NewFoodAllergies.value !== "" && activitySelect.value === "" ) {
         activitySelect.setAttribute("class", "errorA");
          NewFoodAllergies.removeAttribute("class", "errorA");
         connect = false;
      }
      else if(NewFoodAllergies.value === "" && activitySelect.value !== ""){
         NewFoodAllergies.setAttribute("class", "errorA");
        activitySelect.removeAttribute("class", "errorA");
        connect = false;
      }
    }


    btn.onclick = (x) => {
      valid();
      x.preventDefault();
      if(connect == true){
        main.style.display = "none";
        body.appendChild(messBox);
        messBox.style.display = "block";
      }
    }    


    messBoxButt.addEventListener("click", function (y) {
      y.preventDefault();
      NewFoodAllergies.value = "";
      activitySelect.value == "";
      addInfo.value = "";
      messBox.style.display = "none";
      main.style.display = "block";

    });

  </script>
</body>

</html>

Here is the link to the code on GitHub

https://github.com/uzondu9/frontend-project/edit/main/index.html#L3C6

Here's is the webpage;
http://campactivities.mywebcommunity.org/

My Journey

A green-horn, I joined the DEV community a day after the challenge was announced. As a self-tutored coding student, I felt it was a good opportunity to try my new and developing skills in the public domain. Perhaps, I could learn a lot more from others by participating.
I chose ‘Glam up My Markup’ because I am currently learning HTML, CSS and JavaScript. I feel it is time to begin applying what I learn to small projects. I attempted working in Codepen to enable me embed my project directly in the submission template, but found it’s an environment I’m not yet quite familiar with. So I stuck with VScode with which I am more at home.

At first, I found it difficult to create what I had in mind without touching the starting HTML, but refused to be deterred by that challenge. Not sure of other options then, I initially gave IDs and classes to the HTML. I also added break tags(br) right in the HTML file to improve the semantics/structure of the form. These were to lay foundations for the CSS codes. But then, determined to stick to the instructions, I decided to spend some time studying the DOM to see if I could learn how to add some flare to the HTML via JavaScript without touching the HTML. Thankfully, I was able to gain some insight on the DOM. Then I undid my previous touching on the HTML, except for two specific edits for the purpose of Event Listeners. I eventually cleared that up after using arrays along side document.getElementByTagNames selectors.

Please, for you all to note:

This is my first time in an official dev challenge
Like I said earlier, I joined the community only a day before the challenge was announced; and I am really new to coding. I am actually submitting my project late because I was learning new tricks to give it the best I can for now. That takes time!

Since this is my very first time writing a post, it may not be quite forthcoming, but I believe I'll learn as we go.

So pals,

Through new knowledge, I eventually created the project nearly as I conceived; without touching a single line of the HTML.
And if you notice, my project presents transiting background shades. Yep! there has to be day and night camp times after all (linear gradient animation.

And for me, the result feels great, given my basic knowledge and experience in the HTML, CSS and JavaScript.

Finally,

I will really appreciate any comments and ideas on how I can improve on the project. I really look forward to growing with this community.

Hopefully, I will be coming back stronger🕵️‍♂️ ;

*more knowledge better projects

Thanks to dev.to for uploading this challenge 😍
It has really ~~helped~~ forced me to improve on my coding skills.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

DEV Community: Uzondu

AI Won’t Replace You—But It Will Expose You

Battlefronts in Browser: Mercury Defenders & Nova Invaders Unleashed

🚀 Two Web Games, One Journey

👾 Alieno‑Mercury Combat

Alieno Mercury-Combat

Key Features

🤖 Nova Invaders

🚀 Nova Invaders: A Game of Bullets, Bots & Bold Ambition

Core Innovations

🔄 Tech & Tools Comparison

🧠 Lessons & Next Steps

❤️ Your Turn

🚀 Nova Invaders: A Game of Bullets, Bots & Bold Ambition

🎮 Play the Game

✨ What If a Game Got a Heartbeat?

🔥 Core Features

🌀 Endless Mode

🔄 Bullet Types & Smart Refills

🚀 Level-Up Mechanics

🌗 Smooth UI Transitions

🗂️ Persistent Browser Storage

🆕 What’s Coming?

💰 Coins System

⚡ Boosters

📸 Sneak Peek

🎥 Gameplay Video

🔧 Built With

🧠 Key Challenges

📚 What I Learned

🚪 What’s Next?

❤️ Final Thoughts

🔗 Quick Links

WeCoded 2025: A Celebration of Impact & Innovation

✨ My WeCoded Landing Page

🚀 Demo

🛠️ How I Built It

Process:

🎨 Mobile Design Image

✨ Final Thoughts

From Gaming Dreams to Web Development—My Unexpected Journey

How It All Started: A Gamer’s Frustration

The Moment of Change: Eyes Open, Mind Blown

Copy-Pasting My Way to “Success” (The False Pride Phase)

How a Challenge Changed Everything (Or, How My Cousin Accidentally Made Me a Web Developer)

Coding on a Tablet: The Start of Something Beautiful (Literally)

Books for Brain, Videos for Biceps

Freelancing? I’ll Pass (For Now…)

Project Paralysis: When Finishing is Harder Than Starting

UI/UX: The Roadmap I Didn’t Know I Needed

No Rush for a Portfolio—Quality Over Speed

What’s Next? The Bigger Picture

Narriva - A Minimalist Blog for Traditions and Celebrations**

What I Built

Demo

Journey

Setting Up

Crucial Stage

Design and Implementation

Challenges and Solutions

Technical Highlights

Ending

What’s Next?

Conclusion

Alieno Mercury-Combat

What I Built

About game

Game Features

Demo

Journey

What I wish I could do:

Licence

Apache License

Cricket league landing page

What I Built

Demo

Journey

Initial stage

Middle stage

End stage

Battlefronts in Browser: Mercury Defenders & Nova Invaders Unleashed

🤖 Nova Invaders