Software & Web Development Archives - DevWorld Tech Academy

Is AI Taking Software Engineering Jobs in Ghana? The Real Truth, Opportunities, and How to Stay Relevant

DevWorld Tech Academy — Sun, 18 Jan 2026 15:50:25 +0000

Artificial Intelligence (AI) is no longer a distant concept discussed only in Silicon Valley or academic conferences. In Ghana today, students, graduates, parents, and professionals are asking a pressing question: Is AI taking software engineering jobs in Ghana?

From Accra’s growing startup ecosystem to university lecture halls and WhatsApp tech communities, the conversation is everywhere. Some fear that tools like ChatGPT, GitHub Copilot, and automated code generators mean fewer jobs for developers—especially juniors. Others believe AI is opening new doors and accelerating Ghana’s digital economy.

So what is the real truth?

This article cuts through the fear, hype, and misinformation to give a balanced, Ghana-focused reality. We explore how AI is reshaping—not replacing—software engineering, what this means globally, across Africa, and specifically in Ghana, and how aspiring and early-career developers can stay relevant in the age of AI.

Global Reality: Is AI Really Replacing Software Engineers?

Globally, the idea that “AI will replace all software engineers” is not supported by reality. What we are witnessing is transformation, not elimination.

AI tools are increasingly capable of:

Writing boilerplate code
Generating basic functions
Debugging common errors
Automating repetitive tasks

This has led to a reduction in routine coding work, especially tasks traditionally given to junior developers. However, these same tools have increased demand for experienced engineers who can:

Design complex systems
Make architectural decisions
Ensure security, scalability, and performance
Integrate AI tools responsibly into products

In global tech hubs, AI has become a force multiplier. One skilled engineer using AI effectively can now do the work of several people—but that engineer still needs strong fundamentals, critical thinking, and real-world problem-solving skills.

In other words, AI replaces tasks, not professions.

Africa’s Perspective: Opportunity Meets Skills Gap

When discussing AI and software engineering jobs in Ghana, it’s important to zoom out and look at Africa as a whole.

Africa faces a paradox:

A rapidly growing digital economy
A shortage of highly skilled software engineers

Despite headlines about automation, African companies are not laying off developers en masse. Instead, they are struggling to find talent with the right mix of skills.

Why Africa Still Needs More Engineers, Not Fewer

Across fintech, healthtech, agritech, logistics, and e-commerce, African companies are:

Digitizing operations
Building platforms for local problems
Integrating global tools with local realities

AI adoption in Africa is cautious and selective. Many companies are not building advanced AI models from scratch—but they need engineers who can integrate AI APIs, manage cloud infrastructure, and build reliable software systems.

This means the future of software engineering in Ghana and Africa is skill-dependent, not AI-dependent.

The Truth in Ghana: Jobs, Challenges, and Opportunities

Are Software Engineering Jobs Disappearing in Ghana?

No—but they are changing.

In Ghana:

Senior and mid-level developers remain in demand
Entry-level roles are more competitive
Employers expect more practical ability than before

AI has raised the bar.

Entry-Level Reality: The Hard Truth

For junior developers and fresh graduates, the market feels tougher—and that feeling is valid.

Key challenges include:

Fewer “train-you-from-scratch” roles
Employers expecting juniors to already understand tools, frameworks, and workflows
Increased competition from remote talent and AI-assisted productivity

This is why many people ask: Will AI replace software engineers in Africa?

The honest answer: AI is replacing unprepared engineers, not skilled ones.

Where the Real Demand Is in Ghana

In Accra, Kumasi, and emerging tech hubs, companies are actively hiring developers who can:

Build and maintain backend systems
Work with cloud platforms (AWS, Azure, GCP)
Secure applications and data
Integrate AI features into existing products

Local startups are already using AI for:

Customer support automation
Fraud detection in fintech
Data analytics and reporting
Content moderation and recommendation systems

They need engineers who understand how AI fits into real products, not just how to prompt a chatbot.

What Skills Will Keep Ghanaian Engineers Relevant?

If you’re wondering about AI skills Ghana developers need, the answer is broader than learning one tool.

1. Strong Software Engineering Fundamentals

AI cannot replace:

Logical thinking
Clean architecture
Debugging complex systems
Understanding how software behaves in production

Core skills still matter:

Data structures and algorithms
Backend development (APIs, databases)
Version control (Git)
Testing and documentation

2. AI Tools for Software Developers

Modern developers are expected to work with AI, not ignore it.

Important tools include:

Code assistants (Copilot-style tools)
AI-powered testing and debugging
API-based AI services (text, vision, speech)

Knowing when to trust AI and when not to is a critical professional skill.

3. Cloud, DevOps, and Scalability

Many Ghanaian companies are moving to the cloud. Skills in:

Cloud infrastructure
Deployment pipelines
System monitoring

are increasingly valuable.

4. Security and Reliability

As systems grow, security risks increase. Engineers with knowledge of:

Application security
Data protection
Secure authentication

stand out immediately.

5. Practical AI Integration

You don’t need a PhD in machine learning to stay relevant.

What matters more is:

Using AI APIs responsibly
Understanding limitations and bias
Integrating AI into real workflows

This is where software engineering careers in the age of AI are heading.

Mindset Shift: How to Work With AI, Not Against It

One of the biggest mistakes young developers make is seeing AI as a competitor instead of a collaborator.

AI as a Productivity Partner

AI can:

Speed up learning
Reduce time spent on repetitive work
Help you explore new ideas

But it cannot:

Think strategically for your product
Understand local user needs
Take responsibility for decisions

The engineers who thrive are those who use AI to amplify their skills, not replace their thinking.

Adaptability Beats Raw Coding Speed

In today’s market, adaptability matters more than memorizing syntax.

Employers value engineers who:

Learn continuously
Adjust to new tools
Understand business problems

This mindset is especially important for entry level software engineering jobs and AI-driven environments.

How Training & Structured Learning Make the Difference

With rising competition, how and where you learn software engineering matters more than ever.

Self-learning is valuable, but many learners struggle with:

Lack of structure
Gaps in fundamentals
No real-world project exposure

This is why software engineering training in Ghana is evolving toward:

Practical, project-based learning
Industry-aligned curricula
Exposure to modern tools, including AI

Institutions that focus on real skills, not just theory, help learners bridge the gap between education and employment.

This approach—combining solid engineering foundations with modern tools—is what prepares developers to remain relevant, even as AI advances.

Final Reality Check & Future Outlook

So, is AI taking software engineering jobs in Ghana?

The honest answer is no—but it is reshaping them.

Routine coding tasks are increasingly automated
Entry-level roles are more competitive
Skilled, adaptable engineers are in demand
AI is creating new opportunities, not closing doors

For Ghanaian students, graduates, and career switchers, the future belongs to those who:

Build strong fundamentals
Learn how to work with AI
Focus on real-world problem-solving
Commit to continuous learning

The question is no longer whether to learn software engineering, but how well and how practically you learn it.

Ghana’s digital economy is still growing. Companies still need developers. The difference is that the market now rewards preparedness, adaptability, and real skills.

If there is one takeaway, it is this:

Don’t panic about AI. Prepare for it.

Those who do will not only survive the AI era—they will shape Ghana’s digital future.

Where Ghanaian Developers Fit in the Global AI Economy

As AI adoption accelerates worldwide, Ghanaian developers are no longer competing only within local borders. Remote work, global freelancing platforms, and distributed teams mean that skills—not location—are becoming the primary currency in software engineering.

This shift cuts both ways.

On one hand, junior developers in Ghana now compete with peers from across Africa, Asia, and Eastern Europe—many of whom are also using AI tools to boost productivity. On the other hand, skilled Ghanaian engineers now have unprecedented access to global opportunities that were nearly impossible a decade ago.

The developers who benefit from this new reality share common traits:

They understand core software engineering principles
They can explain why a system works, not just that it works
They use AI tools intelligently, not blindly
They have real projects that demonstrate competence

This is why the conversation about learning software engineering in Ghana must move beyond “Can AI write code?” to “Can you build reliable systems with AI as part of your toolkit?”

What Ghanaian Employers Are Actually Looking For in the AI Era

Contrary to popular belief, most employers in Ghana are not asking junior developers to build AI models from scratch. What they want are engineers who can:

Understand existing codebases
Build APIs and backend services
Work with databases and cloud platforms
Integrate third-party services, including AI tools
Communicate clearly with teams and stakeholders

In interviews and hiring decisions, employers increasingly look for:

Evidence of hands-on experience
Practical problem-solving ability
Familiarity with modern development workflows

This is where many graduates struggle—not because they lack intelligence, but because their training was too theoretical or outdated.

Why Structured, Industry-Aligned Training Matters More Than Ever

In the age of AI, unstructured learning can leave dangerous gaps. Watching random tutorials or relying entirely on AI-generated code often creates false confidence.

What consistently makes a difference is structured learning that mirrors real industry expectations:

Clear progression from fundamentals to advanced concepts
Emphasis on building complete, functional projects
Exposure to modern tools used in real workplaces
Guidance on how to use AI responsibly in development

This is where institutions like DevWorld Tech Academy quietly stand out in Ghana’s tech education landscape. Rather than chasing hype, DevWorld focuses on practical software engineering skills—the kind employers actually test for—while preparing learners to operate confidently in an AI-enabled environment.

Graduates who understand how systems are built, why decisions are made, and where AI fits into the workflow are far more resilient in today’s job market.

AI Will Change How You Start Your Career—Not Whether You Can

For SHS graduates, university students, and career switchers, the fear is understandable:
“If AI can code, is there still a future for me?”

The answer is yes—but the path is different.

In the past, junior developers could rely on:

Memorizing syntax
Completing basic coding tasks
Learning slowly on the job

Today, the entry point is more demanding—but also more rewarding for those who prepare properly.

Early-career developers now need to:

Learn faster and more deliberately
Build projects that solve real problems
Show they can work with modern tools, including AI

This doesn’t mean the door is closed. It means the door now opens to those who are intentional about skill-building.

The Long-Term Outlook: Software Engineering Is Still a Smart Bet in Ghana

Looking ahead, the future of software engineering in Ghana remains strong.

Key trends support this:

Continued digitization of businesses
Growth in fintech, e-commerce, logistics, and healthtech
Increasing government and private-sector interest in digital transformation
Rising demand for secure, scalable systems

AI will be part of this future—but not the whole story.

Software engineers will continue to be needed to:

Translate human needs into technical solutions
Design systems that work in Ghanaian contexts
Ensure reliability, security, and ethical use of technology

Those who combine strong engineering foundations with AI literacy will be the most valuable.

Final Takeaway: The Question Is Not About AI—It’s About Readiness

So when people ask, “Is AI taking software engineering jobs in Ghana?” the most accurate response is this:

AI is raising the standard, not ending the profession.

For anyone serious about a tech career, the focus should shift from fear to preparation:

Learn deeply, not superficially
Build real skills, not just certificates
Use AI as a tool, not a crutch

With the right mindset, training, and effort, software engineering remains one of the most future-proof careers in Ghana—and one where those who adapt will continue to thrive.

And as Ghana’s tech ecosystem matures, institutions that emphasize practical, industry-relevant learning, like DevWorld Tech Academy, will play an increasingly important role in shaping developers who are ready—not just for today’s jobs, but for tomorrow’s challenges.

The post Is AI Taking Software Engineering Jobs in Ghana? The Real Truth, Opportunities, and How to Stay Relevant appeared first on DevWorld Tech Academy.

The Success Story of a lady Software Engineer and Tech Coach

Margaret Tettehfo — Wed, 28 Apr 2021 13:29:41 +0000

Most of the time, the youth have thousands of reasons not to follow their passions of being an IT expert, they have excuses like I’m too, young or too old, It won’t yield much income as other courses do. the fact is, the world is now revolving around technology. if you don’t join this fast-moving train, you will miss a lot. Most of the institutions in the world are now changing from employing labor-related employees to tech-related ones as it is faster, easier, and safer.

Info Pages & Links for Prospective Students

Let me tell you a story about a lady who made this same decision to switch from a normal job to study tech and the result is mesmerizing. This journey started back in February 2019. when she received a scholarship to attend an intensive 16-week Software Engineering Bootcamp training at Makers. While working at an FTSE 250 rail and coach ticketing platform, an unknown advert popped up in her LinkedIn account and that became a turning point.

According to her, When she read the job advert, the only thing that came to mind was a self-doubting question. Despite those discouraging questions, her determination keeps growing each day. with such determination, she started Bootcamp training in Intensive Software Engineering course for months She is now an employee as a Software Engineer & Tech Coach role at Tech Returners. As a career woman, this is what she does about her job, which is helping people to code and creating workshops for the community with her friends, speaking, and mentoring work.

Despite being an active Software Engineer, she blends both roles perfectly. Her Techniques She does a lot of visualizations She illustrated all tech concepts using IT terminologies and relate them to real-life things She does a video recording to explain complex technical concepts, provide thorough code review feedback and she aids with debugging strategies.

She conducts a one on one and group video calls to host sessions, webinars and provide technical supports She starts by teaching the main principles and then breaks down technical terms as much as she can for it sounds less daunting.

She balances her learning and coaching job, by helping others upgrade their skills to a secondary level and this helps her expand her skills to gain more experience in HTML, CSS, JavaScript, React, and many others.

Her aim is to be the best in code development as she has the skills for spotting patterns in a code quickly no matter the tech language used. She developed herself by learning from other expert developers and this improved her understanding of all tech concepts and terminologies. Her interest in precision and deeper understanding, made her make some time for herself to build her own project and practice coding skills, she researches on advanced technical terms and has time for herself to be more efficient.

She loves to see others grow in their understanding of technical-related issues. Her only challenging moments were the times when the self-doubt questions pop up, but with confidence, she overcame it all. Her future plans to be globally known as one of the best specialists in HTML, CSS, and React.

Inspiring right? You can also make it by taking a step to visit DWTA. She came out of her shells before getting to where she is now. Don’t hesitate as DevWorld Tech academy admits students from age 15 – 40 years of age. This means it’s not too early or too late for you to start so apply now!.

The post The Success Story of a lady Software Engineer and Tech Coach appeared first on DevWorld Tech Academy.

Reasons Why You Are Finding It Difficult to Learn Programming

Margaret Tettehfo — Wed, 28 Apr 2021 12:49:32 +0000

You have made an effort and given up countless times. Maybe you are just not competent enough for it.

It seems you have spent a lot of internet bundle on watching YouTube tutorials, paying huge amounts of monies to do an online course and even to the extent of reading basic articles on programming yet it feels like there is no hope and you feel like there people out there who are good at writing complex code which you do not understand and solving them as well.
And you sadly declare “I can never be like them” and you start to wonder, how did they know and learn it as well.

Info Pages & Links for Prospective Students

Honestly speaking, they were not born with the skills to code, or are they more intelligent than you are. In this article, there are steps that if you take it seriously, you will overcome the fears of programming.
If you are truly passionate to pursue this course, it is very necessary to overcome the fears first. Most of the time, coding unease is a challenge that can stop you from progressing for many years. Unfortunately, it is something most people don’t talk about.

 Let me Share My Personal Experience with You.
Being a student, I perform very well in school that I am always proud of my ability to solving problems. I was a very clever and a fast learner as well. But this diversified after I completed High School, that is where I have realized that programming is not the same as the subjects taught in High School.

According to Elbert Hubbard, “the greatest mistake a man can ever make is to be afraid of making one”. This is the fact as someone who is not used to this kind of course, it took me by surprise how long it took to get to understand and know how to code. I felt so bad that I was making too many mistakes, then the feeling of not been the best at it led me to struggle with a clear simple task to an extent of not being able to set up a programming environment.

Then all of a sudden, I start doubting my ability to code and seems to me that everyone is better than I am as they are very good at it. To an extent that I could not complete a code on the internet without any error, not to talk about understanding it. This resulted in a lot of frustration and I threw in the towel. The problem I have realized is not that I have lacked self-confidence but I was overconfident that, I became disappointed that things did not go the way I wanted I was upset and frustrated and that led me to finally giving up.

Was that my biggest mistake?

I was thinking that programming was a course that can be studied in a short time and not admitting that, there was a new way of learning it. And if I have known and agreed that learning the process of coding from zero, was something that involves efforts and diligence, I would have released myself from a lot of frustration and time. In this article, I will explain the types of approaches you need to take for you to succeed in this field.

When I was surrendering to learning code, I thought there were two kinds of people in the world now – people who were qualified for programming and people who were not. It turns out that I was right. The people who are competent for programming are not usually more intelligent than you are, they only have a mindset and an attitude that has helped achieve positive results in the field. With the same attitude, you can also get there too.

Steps in becoming a good programmer

Provided you want to become half good, then you need to put in much effort. It is not a competition, if they manage to a complex problem that you couldn’t mean that they are smarter than you are, the truth is they put in much more effort and time than you do. For you to get there, you need to do the same.

• Exercise patience

Patience is undeniably the most necessary character that a programmer needs. You have to be someone who has to stare at the computer screen hour after hour and, clearly simple problem can take hours or days to solve. you can learn by patiently spending time debugging code.

This was why I find it difficult to develop the patience to stay at one place, if you get bored easily like me, or you have short concentration points, then you have a lot of time to train yourself.

Once you get the idea of staring at the computer screen in an effort to solve the problem, you get closer to reaching your dream of becoming a good programmer.

• Being stubborn
Have you remembered when you followed your parents to the mall and you spotted a toy that you like so much and you requested for it be bought for you but they refused, you cried and decided not to leave the mall and created a scene until your parent gave up, and bought you the toy?

This is definitely the kind of stubbornness you need when studying programing. Don’t accept no for an answer, whenever you want to give up because of the frustration. Pause take your time to try again and again until you get the desired result, keep a stubborn determination till you get it right.

• An accurate amount of confidence.
being overconfident is bad, it will stop you from progressing because your expectation will be higher than what you will achieve. There are people who may be a lot better than you but it is natural to feel that way. The first step is to accept that they are and it is the fact because they have spent a lot of time and dedicated years of learning how to code. If you want to be the best, then you must dedicate your time and effort to learning how to.

Finally, in order to overcome the fears of programming, you first have to understand that there are various ways of learning. And if you are not able to code, accept it and know that it is normal. Because as time passes by, you get better until you have mastered it.
Thanks for reading!! For more articles click here

The post Reasons Why You Are Finding It Difficult to Learn Programming appeared first on DevWorld Tech Academy.

Coding Soft Skills a Result of Constant Reading

Margaret Tettehfo — Wed, 28 Apr 2021 11:08:49 +0000

As a career person, I have two separate jobs which a very strong needs for soft skills. They include communication, problem-solving, empathy, stress management skills, and many others. Most of the time, we place a lot of attention on the hard skills of coding.

Info Pages & Links for Prospective Students

In a matter of months in my career as a software engineer, it became clear to me that all my attention was focused on writing code which was only one aspect of productive software engineering. It will take many skills to be a member of an engineering team and you will need this skill as well.

 Communication

This is one of the skills one needs to acquire not only as a developer but for all professions, especially in coding. Communication is very crucial, know that communication has two ways that are listening and speaking. You need to be a good listener, listening to your fellow colleagues, clients or users will make a big difference. When you listen, you end up getting an advantage over those who only do the talking and helps you to excellently execute your task.

When speaking, do it with confidence and accuracy. With persuasion, try your best to achieve a result when communicating, remember that your ability to speak fluently is your weapon and a very useful tool so make good use of it. Be polite and never interrupt the other person this shows that you are patient, keep your composure while listening, keep in mind that communication is not only verbal.

 Reviewing of Codes

Being aware of what your code does is very easy, after all, it is you wrote it. Reading another person’s code is a different thing altogether as it takes a deeper and a higher level of understanding, and expertise to be able to follow what is taking place and be able to catch potential bugs.

 Decision making
This all depends on your role, you may be involved in managing people and projects and maybe a project team. It helps to complete a task faster. Software engineering decision includes time management, organization skills and apprehension of the ecology at a higher level, deliberation on business growth.

The Importance of Reading
There is a never-ending variety of resources available for use, they are Blogs, YouTube, documentations, and number one is the good old book.

Be a Sponge
Being a sponge means, the ability to absorb a lot of information, and this type of learning comes in two folds.

a. Completing every circle.
it is hard to tell you the countless times I read a piece of work and a week later it becomes the topic for discussing at work, it feels good to be ahead and know more to be on top of the conversation. Whenever I have realized that I had not read anything, on that day I would contribute much less to the conversation. Most of the time, I seem lost about what they are discussing. So, I do my best to read more and broader.

b. Pushing beyond your limit
Honestly, I always don’t feel like I have understood what I read on the first attempt but it depends on the kind of book. I am going for something new and technical, and it feels too difficult for me to understand it constantly though, as long as I keep on repeating the reading, and find the meaning to difficult terms.

Then it means the mind of “I can’t do it” will be pushed away, sometime ago I felt like none of the things I’m studying made sense and I have realized that not knowing is having something new in-store. As for engineering, you will never know everything.

But if you are learning something confusing, if you are not learning something that is confusing in the first place, you are not challenging yourself and the aim is to move a bit higher from your comfort zone. The only solution is to read to more. It does not matter if you feel like it makes sense or not just keep on reading.

c. Be comfortable when talking about code

Talking about code most of the time comes less naturally compared to writing it You might have known it in your head all you need to know is, it is only kept in your head. You have to open up and share it with your colleagues. Reading more books opens your mind when it comes to discussing your work, it helps you to see how others introduce theirs and you familiarize yourself with the kind of conversation and exposes which help in making the conversation flow and be flexible and to flow with time.

d. Know the “why” Concept
It is very important you understand always the “Why” beyond the code (and the one you are reading). This is the idea that will allow you to enhance your program, expect possible issues, debug all errors, and adjust to all changing conditions. To understand why something was done, you can use your own understanding to build a precise solution rather than a multipurpose patch.

Reading all code samples and analyses
As mentioned earlier, the skills to read other people’s code and get meaningful feedback is very important to being part of the engineering at first, and you may know where to begin. Most book on engineering books that are language-based which includes code examples with additional analyses which:

i. provides an opportunity to gain the skills of reading others code in a good space (there is no risk of missing a bug that gets into production)
ii. it helps to learn code that is already analyzed. This shows that you are able to get an idea of what kind of things to look for, where to begin and to ask yourself and the team a useful question.
Learning the code language

Each and every technology has its own custom language that they use to talk about you from your conversation with your colleagues. Reading can also provide the opportunity to familiarize yourself with the language in a much safe space(that means without committing an error in the presence of your colleague). Constant tautology is important to strong communication and knowing this is an important foundation.

I cannot emphasize how important it feels to be reading to your own growth as an engineer. Read a few pages every day. even if you have to reread it, stick to it and you will see that both your conversation and approach will change.

The post Coding Soft Skills a Result of Constant Reading appeared first on DevWorld Tech Academy.

THE BEST GUIDE FOR BEGINNERS IN BUILDING JAVASCRIPT PROJECT FOR THE FIRST TIME

Margaret Tettehfo — Wed, 28 Apr 2021 09:22:15 +0000

In this article, we will be setting – up a JavaScript Project together with students of DWTA. The project is a team of mixed-up engineers and these are the features this project is going to have:

A data box to take the number of teams the user would like to make.
An information box that lists the names of colleagues.
A recorder that lists how many player names have been entered.
A selector that gives the user the chance to choose what actions they would like to perform with their team player names, in this instant ‘ Team Creator’ and ’Team Selector’
We now have a nice display of our fairly divided teams.

Info Pages & Links for Prospective Students

Fantastic!! let’s get started

Breaking It Down into Sections.

IDE set – up
HTML & CSS Crash Course
DOM & DOM Manipulation
Building A Team Generation App
Mark up
b. Logic
c. Testing
d. Refactoring
e. Styling

IDE Setup

The VScode software application is a well-known IDE (Integrated Developer Environment) used universally by developers, it’s where we write code. If you do not have it installed, I recommend it to you because it allows you to add some useful extensions that will help your development process.

NB: In this tutorial, we will be using only HTML, CSS, and JavaScript.

Now let’s have a look at the file structure, because it is not a big project, all files needed for this project are stored in an ‘src’ directory. So first create a folder for your project and give it a suitable name followed by another folder called ‘src’. Inside the src folder, you can create three more files:

HTML – This holds the code according to your preference.
CSS – This helps the code in styling the HTML page.
script.js – This holds the for the inscriptions on the JavaScript in making the webpage more attractive.

If you finally install the VScode and the required extension from Live Server from the video, you can now click on the ‘’Go Live’ button’’ to activate it. Once you click on the button, any changes you make to your files will automatically reflect in the browser. But for now, nothing will show because we haven’t started with the writing of the code.

HTML & CSS Crash Course
HTML is illustrated as a markup language, which means, it describes the content of a website page. Whiles CSS is used to style the page to make it more beautiful. If you are a newbie to HTML & CSS I advise that you take some time in watching the Crash Course linked to getting a better idea of these two terms.
Nonetheless, if you just want to go straight into coding, you only need to understand a few things such as
• Html files hold the basic elements which are written with opening <> and closing arrow brackets
• These basics have characteristics like IDs which should be ideal. There are other attributes like type, value, and many others.
• Html pages are usually broken down into head (contains details of the page) and body (contains the page layout/structure, and necessary script files)
• CSS files select HTML element IDs, Class or attribute to apply the styles to. To select
o ID – You use a # [followed by name or id] for instance #my-id.
o CLASS – You use. [followed by name of class] for example, my-class.
o ELEMENT – You just write the name of the element. For instance. div.
• CSS has many ways of selecting elements, according to its Cascading Style and name Sheet the last selector would override a previous selector if the same element is selected. So, in CSS, been specific on the element you want to style is very important

DOM & DOM Manipulation
JavaScript is used to control the DOM, however, the DOM methods we will be using are not part of the JavaScript language.

The DOM (Document Object Model) is a structured demonstration of HTML documents, it allows JavaScript to access HTML elements and CSS styles in order to control them. So, we can basically say the DOM is a connection point between HTML or CSS code and JavaScript.

The Tree features are created by the browser on page load. Each feature in the tree illustrates a node in the DOM Tree Structure. We have Parent Elements and Children Elements. on the top of this tree structure, is the document node which is known as the entry point into the tree structure.

We use this document node to find other elements in the tree. e.g. document.querySelector(). There are different other methods the document object can use to access the nodes in the DOM tree for manipulation. Without the project, we will only be using the ‘querySelector()’

Building A Team Generation App
Now that you have an understanding of how the different parts of our application will come together, then let’s progress to build the application.

MARK UP
Before anything else, let’s first write down the layout of our one-page application using HTML. In the Html file, we use a pair of elements. I will break down certain core elements and their uses.
• – This term explains to the browser what type of document to expect. In this case it’s

HTML.
• – This stands for the root of an HTML document, it contains all other HTML elements
• – This have metadata (data about data) and it’s usually placed between the and tag
• – This tag describes the content of the HTML body, it usually contains other elements like header, mains, sections, paragraphs, buttons etc.

Element

Beginning with the vital structure, in each element, you will notice it has other qualities like lang in the HTML element and charset in the meta element. These are known characteristics.
We can also add some links to different sources in our head element, in this case, we have linked our custom CSS file.

We might as well link our script file here, it’s the best option to allow the page load before adding our JavaScript file. Moreover, we would add this at the bottom instead. Finally, all pages should have a title that names each page, this can be any name of your choosing. Now that we have deliberated on the head element, let’s move onto the body element.

Element
In this section, we have used an appropriate element to systematically describe the body of our page. That is, we have explained a header and the main section. In our header, we have a CTA (call to action) where users are notified to enter the number of team players to generate.

In the first segment, we have two parts that appear to have an element named section. If you notice we have a feature called class which is used to group elements together for styling. In this section, we have sections with class attributes top and bottom, and inside top, we have class attributes left and right.

Other characteristics to take note of in this section are:

• The type attribute which implements the type of value placed on an input.
• The value attribute which holds the price we would like to pass when an option is selected.
right before the closing tag, we add the script.js file we might be writing all our logic in.

Click on the Go live button or refresh your page.

Good job!! Markup is done. Now let’s move on to implementing the logic.

B. LOGIC
I love to implement the logic before applying the styles as it gets it out of the way, giving me some opportunity to spend as much or as little time playing with styling. Inside the script file, we begin the file with the expression ‘use strict’; which shows that your JavaScript code should be run in strict mode, therefore catching errors like using undeclared variables.

I like to choose all the elements I would be manipulating first. Through the DOM, we can select specific elements.

Take some time to examine the values that are passed to the querySelector(). If you examine your HTML file, you will notice that this corresponds to the class characters. So the first chooser, in this instance, is referring to this element.

there is no need to use the btn class name as it is shared with other button elements we will like to behave differently when it is clicked. But a shared class attribute name would help with styling
We can add an event listener to input & button elements, so here we would like to handle the event by clicking the buttons submit and again.

Handling Submit Button

it is without any argument that it’s a lot of code but let’s take a look at what this is doing.

1. Team Generator Action
• First we take the value from our data field for the number of teams we want to generate.
• Then we take all the values from the text area box, the different function splits the names into an array of names. How does it separate each name? It does so by looking for the ‘\n’ flag we passed it. So after every new line, it pushes the name into an array.
• We then take the data of our selected dropdown menu.
• Then we check if the value from the dropdown menu is “team generator” if it is so, then we would use the number of teams we want to generate to separate the array into a fair group of team names.
• This array is used to design an HTML element to shows each group to the user.
• The outer hoop is for the outer array and the inner loop is for the inner array values. These make elements that will contain the Team Name and Containers.

The inner loop designs the paragraphing element and text node that will be inserted in the paragraph and added to the container
• subsequently, this div (another HTML element that serves as a container) is inserted in our section with the class character bottom.

If you sum all the input values in your markup you should see a generated list of names like this.

Name Picker Action
• However, if the action is a name picker, then a second if statement is issued. Using the Math. random function it returns a random index from between 0 and the length of the team names array. This index is a number we can use to access values from an array.
• We design HTML elements to display the random names picked and also pin this to the bottom section.
Your outcome should be this

Handling Again Button
We want to reset the input boxes when the again button is clicked, and also remove any displayed HTML controls we might have done. So basically resetting the whole page.

This setup should reset the page for new inputs.
Handling counting the number of names entered
This feature exhibits the number of names a user has entered in the text area box, it is useful just in case the user loses count.

The keyCode 13 stands for “enter” on your keyboard, the number of Names has already been selected at the top of the file and the textContent is the only thing we would like to change. In this case, we have a shorthand for increasing numbers. We add 1 after the multiples, so it can match up correctly with our keypresses.
Now it’s time to do some testing!

C. TESTING
What would happens if we do not have some inputs given by a user? For instance, if you enter names without the number of teams you want to generate,… We go into a non – stop loop which crashes the page. Let’s prevent this from happening.

• We will create a single function to handle this check. This feature will take numbers of Teams and an array of teams as parameters. It will return true if a value is entered in the data box or false if not.

From this function we can say, if the no of teams is empty, less than or equal to zero, greater than the number of names inputted, it means it is invalid, therefore return false.
You could notice that there is a different custom function named display ValueOnPage which takes in the value we would want to display. This is how it is implemented.

Lastly, we have to add our check to the submit button click event function. So this changes to:

The” &&” symbol ensures that both the right and left sides of the operations are true before the contents of the “if “statement is executed. try it again now and instead of a crashed page, you get a nice warning text.

D. REFACTORING
If you have heard of this term before, it is the process by which we try to make our code more sustainable and easier to read. Remember the rule of thumb is just about writing as much code as you can, and after it works, go back and see what you can do better.

That’s perfectly what we will be doing here.
If we look back at the code written so far we can make a couple of things easier and better.
• Split the functionality of grouping the names into arrays and creating the HTML markup for displaying them
• Do the same t for the name picker action.
Have you heard of functional programming? It is the process of breaking a piece of code into functions so they serve one purpose. In this instance, we have three functions to write on.
• Group Teams by Sizes.

The handy function splice allows us to do this easily. This is the same as we had before, but we have just made it reusable bypassing the relevant parameters.
• Generate team in Markup

Now the Submit Button click event should look neater if we replace the current code we have with this.

many lines of code have just been replaced with one line of code, tell me if you haven’t fallen in love with how your code looks now! I will repeat the same thing for the other half.

Random name Picker
This accepts an array of names and returns the value of a random name from the list of names.

Now we can use this to replace what is in the second half of the handle submit button click button. And using the function (displayValueOnPage) we created earlier, throws more light on the usefulness of creating functions.

this is all the refactoring we need to do for now.
E. STYLING
At the top of the CSS file, we move a custom font, you can use any of your choices.
• Select any font of your choice.
• Click on the ‘select this style’ button for any style of font you like.
• You should see an @import button, click on that
• Copy that text in between the