Each certification is filled with hundreds of hours worth of interactive lessons, workshops, labs, and quizzes.

How Does the New Relational Databases Certification Work?

The new Relational Databases certification will teach you core concepts including Bash scripting, SQL, Git, and more.

The certification is broken down into several modules that include lessons, workshops, labs, review pages, and quizzes to ensure that you truly understand the material before moving onto the next module.

The lessons are your first exposure to new concepts. They provide crucial theory and context for how things work in the software development industry.

At the end of each lesson, there will be three comprehension check questions to test your understanding of the material from the lesson.

After the lesson blocks, you will do the workshops. These workshops are guided step-based projects that provide you with an opportunity to practice what you have learned in the lessons.

These workshops will not be done inside the regular freeCodeCamp editor in the browser. Instead you will need to do these workshops in one of three environments:

• GitHub Codespaces: This course runs in a virtual Linux machine using GitHub Codespaces.

• Your own local environment: This course runs in a virtual Linux machine on your computer.

• Ona: This course runs in a virtual Linux machine using Ona.

After the workshop, you will complete a lab which will help you review what you have learned so far. This will give you chance to start building projects on your own, which is a crucial skill for a developer. You will be presented with a list of users stories and will need to pass the tests to complete the lab.

At the end of each module, there is a review page containing a list of all of the concepts covered. You can use these review pages to help you study for the quizzes.

The last portion of the module is the quiz. This is a 20 question multiple choice quiz designed to test your understanding from the material covered in the module. You will need to get 18 out of 20 correct to pass.

Throughout the certification, there will be five certification projects you will need to complete in order to qualify for the exam.

Once you’ve completed all 5 certification projects, you’ll be able to take the 50 question exam using our new open source exam environment. The freeCodeCamp community designed this exam environment tool with two goals: respecting your privacy while also making it harder for people to cheat.

Once you download the app to your laptop or desktop, you can take the exam.

Frequently Asked Questions

Is all of this really free?

Yes. freeCodeCamp has always been free, and we’ve now offered free verified certifications for more than a decade. These exams are just the latest expansion to our community’s free learning resources.

What prevents people from just cheating on the exams?

Our goal is to strike a balance between preventing cheating and respecting people's right to privacy.

We've implemented a number of reliable, yet non-invasive, measures to help prevent people from cheating on freeCodeCamp's exams:

1. For each exam, we have a massive bank of questions and potential answers to those questions. Each time a person attempts an exam, they'll see only a small, randomized sampling of these questions.

2. We only allow people to attempt an exam one time per week. This reduces their ability to "brute force" the exam.

3. We have security in place to validate exam submissions and prevent man-in-the-middle attacks or manipulation of the exam environment.

4. We manually review each passing exam for evidence of cheating. Our exam environment produces tons of metrics for us to draw from.

We take cheating, and any form of academic dishonesty, seriously. We will act decisively.

This said, no one's exam results will be thrown out without human review, and no one's account will be banned without warning based on a single suspicious exam result.

Are these exams “open book” or “closed book”?

All of freeCodeCamp’s exams are “closed book”, meaning you must rely only on your mind and not outside resources.

Of course, in the real world you’ll be able to look things up. And in the real world, we encourage you to do so.

But that is not what these exams are evaluating. These exams are instead designed to test your memory of details and your comprehension of concepts.

So when taking these exams, do not use outside assistance in the form of books, notes, AI tools, or other people. Use of any of these will be considered academic dishonesty.

Do you record my webcam, microphone, or require me to upload a photo of my personal ID?

No. We considered adding these as additional test-taking security measures. But we have less privacy-invading methods of detecting most forms of academic dishonesty.

If the environment is open source, doesn't that make it less secure?

"Given enough eyeballs, all bugs are shallow." – Linus’s Law, formulated by Eric S. Raymond in his book The Cathedral and the Bazaar

Open source software projects are often more secure than their closed source equivalents. This is because a lot more people are scrutinizing the code. And a lot more people can potentially help identify bugs and other deficiencies, then fix them.

We feel confident that open source is the way to go for this exam environment system.

How can I contribute to the Exam Environment codebase?

It's fully open source, and we'd welcome your code contributions. Please read our general contributor onboarding documentation.

Then check out the GitHub repo.

You can help by creating issues to report bugs or request features.

You can also browse open help wanted issues and attempt to open pull requests addressing them.

Are the exam questions themselves open source?

For obvious exam security reasons, the exam question banks themselves are not publicly accessible. :)

These are built and maintained by freeCodeCamp's staff instructional designers.

What happens if I have internet connectivity issues mid-exam?

If you have internet connectivity issues mid exam, the next time you try submit an answer, you’ll be told there are connectivity issues. The system will keep prompting you to retry submitting until the connection succeeds.

What if my computer crashes mid-exam?

If your computer crashes mid exam, you’ll be able to re-open the Exam Environment. Then, if you still have time left for your exam attempt, you’ll be able to continue from where you left off.

Can I take exams in languages other than English?

Not yet. We’re working to add multi-lingual support in the future.

I have completed my exam. Why can't I see my results yet?

All exam attempts are reviewed by freeCodeCamp staff before we release the results. We do this to ensure the integrity of the exam process and to prevent cheating. Once your attempt has been reviewed, you'll be notified of your results the next time you log in to freeCodeCamp.org.

I am Deaf or hard of hearing. Can I still take the exams?

Yes! While some exams may include audio components, we do make written transcripts available for reading.

I am blind or have limited vision, and use a screen reader. Can I still take the exams?

We’re working on it. Our curriculum is fully screen reader accessible. We're still refining our screen reader usability for the Exam Environment app. This is a high priority for us.

I use a keyboard instead of a mouse. Can I navigate the exams using just a keyboard?

This is a high priority for us. We hope to add keyboard navigation to the Exam Environment app soon.

Are exams timed?

Yes, exams are timed. We err on the side of giving plenty of time to take the exam, to account for people who are non-native English speakers, or who have ADHD and other learning differences that can make timed exams more challenging.

If you have a condition that usually qualifies you for extra time on standardized exams, please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

What happens if I fail the exam? Can I retake it?

Yes. You get one exam attempt per week. After you attempt an exam, there is a one-week (exactly 168 hour) “cool-down” period where you cannot take any freeCodeCamp exams. This is to encourage you to study and to pace yourself.

There is no limit to the number of times you can take an exam. So if you fail, study more, practice your skills more, then try again the following week.

Do I need to redo the projects if I fail the exam?

No. Once you’ve submitted a certification project, you do not need to ever submit it again.

You can re-do projects for practice, but we recommend that you instead build some of our many practice projects in freeCodeCamp’s developer interview job search section.

What happens if I already have the old Legacy Responsive Web Design certification? Should I claim the new one?

The new certification has more theory and practice as well as an exam. So if you’re looking to brush up on your skills, then you can go through the new version of this certification.

What will happen to my existing coursework progress on the Full Stack Certification? Does it transfer over to the Responsive Web Design course?

If you’ve already started the Certified Full Stack Developer Curriculum, all of your previously completed work should already be saved there.

To be clear, we’ve copied over all of the coursework from the full stack certification to this newer certification.

Can I still continue with the current Full Stack Developer Certification and just not do the new certification?

We’ve moved the coursework for the Full Stack Developer Certification over and broken it up into smaller certifications. Currently there are seven courses available for you to go through. Here is the complete list:

• Responsive Web Design Certification

• JavaScript Certification

• Frontend Libraries Certification

• Python Certification

• Relational Databases Certification

• Backend JavaScript Certification

• Certified Full Stack Developer Certification

The Certified Full Stack Developer Certification button will remain on the learn page for a short time to give people the opportunity to switch over to the new certifications. Over the next few months, though, this option will disappear.

Will my legacy certifications become invalid?

No. Once you claim a certification, it’s yours to keep.

Also note that we previously announced that freeCodeCamp certifications would have an expiration date and require recertification. We don’t plan to implement this anytime soon. And if we do decide to, we will give everyone at least a year’s notice.

Will the exam be available to take on my phone?

At this time, no. You’ll need to use a laptop or desktop to download the exam environment and take the exam. We hope to eventually offer these certification exams on iPhone and Android.

I have a disability or health condition that is not covered here. How can I request accommodations?

If you need specific accommodations for the exam (for example extra time, breaks, or alternative formats), please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

Anything else?

Good luck working through freeCodeCamp’s coursework, building projects, and preparing for these exams.

Happy coding!

Each certification is filled with hundreds of hours worth of interactive lessons, workshops, labs, and quizzes.

How Does the New Python Certification Work?

The new Python certification will teach you core concepts including functions, loops, dictionaries, sets, classes, data structures, algorithms, and more.

The certification is broken down into several modules that include lessons, workshops, labs, review pages, and quizzes to ensure that you truly understand the material before moving onto the next module.

The lessons are your first exposure to new concepts. They provide crucial theory and context for how things work in the software development industry.

At the end of each lesson, there will be three comprehension check questions to test your understanding of the material from the lesson.

After the lesson blocks, you will do the workshops. These workshops are guided step-based projects that provide you with an opportunity to practice what you have learned in the lessons.

You do not need to install a separate application to run your Python code. We have a custom Python editor that runs Python code in the browser.

After the workshops, you will complete a lab which will help you review what you have learned so far. This will give you chance to start building projects on your own, which is a crucial skill for a developer. You will be presented with a list of users stories and will need to pass the tests to complete the lab

At the end of each module, there is a review page containing a list of all of the concepts covered. You can use these review pages to help you study for the quizzes.

The last portion of the module is the quiz. This is a 20 question multiple choice quiz designed to test your understanding from the material covered in the module. You will need to get 18 out of 20 correct to pass.

Throughout the certification, there will be five certification projects you will need to complete in order to qualify for the exam.

Once you’ve completed all 5 certification projects, you’ll be able to take the 50 question exam using our new open source exam environment. The freeCodeCamp community designed this exam environment tool with two goals: respecting your privacy while also making it harder for people to cheat.

Once you download the app to your laptop or desktop, you can take the exam.

Frequently Asked Questions

Is all of this really free?

Yes. freeCodeCamp has always been free, and we’ve now offered free verified certifications for more than a decade. These exams are just the latest expansion to our community’s free learning resources.

What prevents people from just cheating on the exams?

Our goal is to strike a balance between preventing cheating and respecting people's right to privacy.

We've implemented a number of reliable, yet non-invasive, measures to help prevent people from cheating on freeCodeCamp's exams:

1. For each exam, we have a massive bank of questions and potential answers to those questions. Each time a person attempts an exam, they'll see only a small, randomized sampling of these questions.

2. We only allow people to attempt an exam one time per week. This reduces their ability to "brute force" the exam.

3. We have security in place to validate exam submissions and prevent man-in-the-middle attacks or manipulation of the exam environment.

4. We manually review each passing exam for evidence of cheating. Our exam environment produces tons of metrics for us to draw from.

We take cheating, and any form of academic dishonesty, seriously. We will act decisively.

This said, no one's exam results will be thrown out without human review, and no one's account will be banned without warning based on a single suspicious exam result.

Are these exams “open book” or “closed book”?

All of freeCodeCamp’s exams are “closed book”, meaning you must rely only on your mind and not outside resources.

Of course, in the real world you’ll be able to look things up. And in the real world, we encourage you to do so.

But that is not what these exams are evaluating. These exams are instead designed to test your memory of details and your comprehension of concepts.

So when taking these exams, do not use outside assistance in the form of books, notes, AI tools, or other people. Use of any of these will be considered academic dishonesty.

Do you record my webcam, microphone, or require me to upload a photo of my personal ID?

No. We considered adding these as additional test-taking security measures. But we have less privacy-invading methods of detecting most forms of academic dishonesty.

If the environment is open source, doesn't that make it less secure?

"Given enough eyeballs, all bugs are shallow." – Linus’s Law, formulated by Eric S. Raymond in his book The Cathedral and the Bazaar

Open source software projects are often more secure than their closed source equivalents. This is because a lot more people are scrutinizing the code. And a lot more people can potentially help identify bugs and other deficiencies, then fix them.

We feel confident that open source is the way to go for this exam environment system.

How can I contribute to the Exam Environment codebase?

It's fully open source, and we'd welcome your code contributions. Please read our general contributor onboarding documentation.

Then check out the GitHub repo.

You can help by creating issues to report bugs or request features.

You can also browse open help wanted issues and attempt to open pull requests addressing them.

Are the exam questions themselves open source?

For obvious exam security reasons, the exam question banks themselves are not publicly accessible. :)

These are built and maintained by freeCodeCamp's staff instructional designers.

What happens if I have internet connectivity issues mid-exam?

If you have internet connectivity issues mid exam, the next time you try submit an answer, you’ll be told there are connectivity issues. The system will keep prompting you to retry submitting until the connection succeeds.

What if my computer crashes mid-exam?

If your computer crashes mid exam, you’ll be able to re-open the Exam Environment. Then, if you still have time left for your exam attempt, you’ll be able to continue from where you left off.

Can I take exams in languages other than English?

Not yet. We’re working to add multi-lingual support in the future.

I have completed my exam. Why can't I see my results yet?

All exam attempts are reviewed by freeCodeCamp staff before we release the results. We do this to ensure the integrity of the exam process and to prevent cheating. Once your attempt has been reviewed, you'll be notified of your results the next time you log in to freeCodeCamp.org.

I am Deaf or hard of hearing. Can I still take the exams?

Yes! While some exams may include audio components, we do make written transcripts available for reading.

I am blind or have limited vision, and use a screen reader. Can I still take the exams?

We’re working on it. Our curriculum is fully screen reader accessible. We're still refining our screen reader usability for the Exam Environment app. This is a high priority for us.

I use a keyboard instead of a mouse. Can I navigate the exams using just a keyboard?

This is a high priority for us. We hope to add keyboard navigation to the Exam Environment app soon.

Are exams timed?

Yes, exams are timed. We err on the side of giving plenty of time to take the exam, to account for people who are non-native English speakers, or who have ADHD and other learning differences that can make timed exams more challenging.

If you have a condition that usually qualifies you for extra time on standardized exams, please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

What happens if I fail the exam? Can I retake it?

Yes. You get one exam attempt per week. After you attempt an exam, there is a one-week (exactly 168 hour) “cool-down” period where you cannot take any freeCodeCamp exams. This is to encourage you to study and to pace yourself.

There is no limit to the number of times you can take an exam. So if you fail, study more, practice your skills more, then try again the following week.

Do I need to redo the projects if I fail the exam?

No. Once you’ve submitted a certification project, you do not need to ever submit it again.

You can re-do projects for practice, but we recommend that you instead build some of our many practice projects in freeCodeCamp’s developer interview job search section.

What happens if I already have the old Legacy Responsive Web Design certification? Should I claim the new one?

The new certification has more theory and practice as well as an exam. So if you’re looking to brush up on your skills, then you can go through the new version of this certification.

What will happen to my existing coursework progress on the Full Stack Certification? Does it transfer over to the Responsive Web Design course?

If you’ve already started the Certified Full Stack Developer Curriculum, all of your previously completed work should already be saved there.

To be clear, we’ve copied over all of the coursework from the full stack certification to this newer certification.

Can I still continue with the current Full Stack Developer Certification and just not do the new certification?

We’ve moved the coursework for the Full Stack Developer Certification over and broken it up into smaller certifications. Currently there are seven courses available for you to go through. Here is the complete list:

• Responsive Web Design Certification

• JavaScript Certification

• Frontend Libraries Certification

• Python Certification

• Relational Databases Certification

• Backend JavaScript Certification

• Certified Full Stack Developer Certification

The Certified Full Stack Developer Certification button will remain on the learn page for a short time to give people the opportunity to switch over to the new certifications. Over the next few months, though, this option will disappear.

Will my legacy certifications become invalid?

No. Once you claim a certification, it’s yours to keep.

Also note that we previously announced that freeCodeCamp certifications would have an expiration date and require recertification. We don’t plan to implement this anytime soon. And if we do decide to, we will give everyone at least a year’s notice.

Will the exam be available to take on my phone?

At this time, no. You’ll need to use a laptop or desktop to download the exam environment and take the exam. We hope to eventually offer these certification exams on iPhone and Android.

I have a disability or health condition that is not covered here. How can I request accommodations?

If you need specific accommodations for the exam (for example extra time, breaks, or alternative formats), please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

Anything else?

Good luck working through freeCodeCamp’s coursework, building projects, and preparing for these exams.

Happy coding!

Each certification is filled with hundreds of hours worth of interactive lessons, workshops, labs, and quizzes.

How Does the New JavaScript Certification Work?

The new JavaScript certification will teach you core concepts including variables, functions, loops, objects, higher order functions, DOM manipulation, working with events, asynchronous JavaScript, and more.

The certification is broken down into several modules that include lessons, workshops, labs, review pages, and quizzes to ensure that you truly understand the material before moving onto the next module.

The lessons are your first exposure to new concepts. They provide crucial theory and context for how things work in the software development industry.

These lessons include our new interactive editor so you can see previews of the code. You can also play around with the examples for deeper understanding and comprehension.

At the end of each lesson, there will be three comprehension check questions to test your understanding of the material from the lesson.

After the lesson blocks, you will do the workshops. These workshops are guided step-based projects that provide you with an opportunity to practice what you have learned in the lessons.

After the workshops, you will complete a lab which will help you review what you have learned so far. This will give you chance to start building projects on your own, which is a crucial skill for a developer. You will be presented with a list of users stories and will need to pass the tests to complete the lab.

At the end of each module, there is a review page containing a list of all of the concepts covered. You can use these review pages to help you study for the quizzes.

The last portion of the module is the quiz. This is a 20 question multiple choice quiz designed to test your understanding from the material covered in the module. You will need to get 18 out of 20 correct to pass.

Throughout the certification, there will be five certification projects you will need to complete in order to qualify for the exam.

Once you’ve completed all 5 certification projects, you’ll be able to take the 50 question exam using our new open source exam environment. The freeCodeCamp community designed this exam environment tool with two goals: respecting your privacy while also making it harder for people to cheat.

Once you download the app to your laptop or desktop, you can take the exam.

Frequently Asked Questions

Is all of this really free?

Yes. freeCodeCamp has always been free, and we’ve now offered free verified certifications for more than a decade. These exams are just the latest expansion to our community’s free learning resources.

What prevents people from just cheating on the exams?

Our goal is to strike a balance between preventing cheating and respecting people's right to privacy.

We've implemented a number of reliable, yet non-invasive, measures to help prevent people from cheating on freeCodeCamp's exams:

1. For each exam, we have a massive bank of questions and potential answers to those questions. Each time a person attempts an exam, they'll see only a small, randomized sampling of these questions.

2. We only allow people to attempt an exam one time per week. This reduces their ability to "brute force" the exam.

3. We have security in place to validate exam submissions and prevent man-in-the-middle attacks or manipulation of the exam environment.

4. We manually review each passing exam for evidence of cheating. Our exam environment produces tons of metrics for us to draw from.

We take cheating, and any form of academic dishonesty, seriously. We will act decisively.

This said, no one's exam results will be thrown out without human review, and no one's account will be banned without warning based on a single suspicious exam result.

Are these exams “open book” or “closed book”?

All of freeCodeCamp’s exams are “closed book”, meaning you must rely only on your mind and not outside resources.

Of course, in the real world you’ll be able to look things up. And in the real world, we encourage you to do so.

But that is not what these exams are evaluating. These exams are instead designed to test your memory of details and your comprehension of concepts.

So when taking these exams, do not use outside assistance in the form of books, notes, AI tools, or other people. Use of any of these will be considered academic dishonesty.

Do you record my webcam, microphone, or require me to upload a photo of my personal ID?

No. We considered adding these as additional test-taking security measures. But we have less privacy-invading methods of detecting most forms of academic dishonesty.

If the environment is open source, doesn't that make it less secure?

"Given enough eyeballs, all bugs are shallow." – Linus’s Law, formulated by Eric S. Raymond in his book The Cathedral and the Bazaar

Open source software projects are often more secure than their closed source equivalents. This is because a lot more people are scrutinizing the code. And a lot more people can potentially help identify bugs and other deficiencies, then fix them.

We feel confident that open source is the way to go for this exam environment system.

How can I contribute to the Exam Environment codebase?

It's fully open source, and we'd welcome your code contributions. Please read our general contributor onboarding documentation.

Then check out the GitHub repo.

You can help by creating issues to report bugs or request features.

You can also browse open help wanted issues and attempt to open pull requests addressing them.

Are the exam questions themselves open source?

For obvious exam security reasons, the exam question banks themselves are not publicly accessible. :)

These are built and maintained by freeCodeCamp's staff instructional designers.

What happens if I have internet connectivity issues mid-exam?

If you have internet connectivity issues mid exam, the next time you try submit an answer, you’ll be told there are connectivity issues. The system will keep prompting you to retry submitting until the connection succeeds.

What if my computer crashes mid-exam?

If your computer crashes mid exam, you’ll be able to re-open the Exam Environment. Then, if you still have time left for your exam attempt, you’ll be able to continue from where you left off.

Can I take exams in languages other than English?

Not yet. We’re working to add multi-lingual support in the future.

I have completed my exam. Why can't I see my results yet?

All exam attempts are reviewed by freeCodeCamp staff before we release the results. We do this to ensure the integrity of the exam process and to prevent cheating. Once your attempt has been reviewed, you'll be notified of your results the next time you log in to freeCodeCamp.org.

I am Deaf or hard of hearing. Can I still take the exams?

Yes! While some exams may include audio components, we do make written transcripts available for reading.

I am blind or have limited vision, and use a screen reader. Can I still take the exams?

We’re working on it. Our curriculum is fully screen reader accessible. We're still refining our screen reader usability for the Exam Environment app. This is a high priority for us.

I use a keyboard instead of a mouse. Can I navigate the exams using just a keyboard?

This is a high priority for us. We hope to add keyboard navigation to the Exam Environment app soon.

Are exams timed?

Yes, exams are timed. We err on the side of giving plenty of time to take the exam, to account for people who are non-native English speakers, or who have ADHD and other learning differences that can make timed exams more challenging.

If you have a condition that usually qualifies you for extra time on standardized exams, please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

What happens if I fail the exam? Can I retake it?

Yes. You get one exam attempt per week. After you attempt an exam, there is a one-week (exactly 168 hour) “cool-down” period where you cannot take any freeCodeCamp exams. This is to encourage you to study and to pace yourself.

There is no limit to the number of times you can take an exam. So if you fail, study more, practice your skills more, then try again the following week.

Do I need to redo the projects if I fail the exam?

No. Once you’ve submitted a certification project, you do not need to ever submit it again.

You can re-do projects for practice, but we recommend that you instead build some of our many practice projects in freeCodeCamp’s developer interview job search section.

What happens if I already have the old Legacy Responsive Web Design certification? Should I claim the new one?

The new certification has more theory and practice as well as an exam. So if you’re looking to brush up on your skills, then you can go through the new version of this certification.

What will happen to my existing coursework progress on the Full Stack Certification? Does it transfer over to the Responsive Web Design course?

If you’ve already started the Certified Full Stack Developer Curriculum, all of your previously completed work should already be saved there.

To be clear, we’ve copied over all of the coursework from the full stack certification to this newer certification.

Can I still continue with the current Full Stack Developer Certification and just not do the new certification?

We’ve moved the coursework for the Full Stack Developer Certification over and broken it up into smaller certifications. Currently there are seven courses available for you to go through. Here is the complete list:

• Responsive Web Design Certification

• JavaScript Certification

• Frontend Libraries Certification

• Python Certification

• Relational Databases Certification

• Backend JavaScript Certification

• Certified Full Stack Developer Certification

The Certified Full Stack Developer Certification button will remain on the learn page for a short time to give people the opportunity to switch over to the new certifications. Over the next few months, though, this option will disappear.

Will my legacy certifications become invalid?

No. Once you claim a certification, it’s yours to keep.

Also note that we previously announced that freeCodeCamp certifications would have an expiration date and require recertification. We don’t plan to implement this anytime soon. And if we do decide to, we will give everyone at least a year’s notice.

Will the exam be available to take on my phone?

At this time, no. You’ll need to use a laptop or desktop to download the exam environment and take the exam. We hope to eventually offer these certification exams on iPhone and Android.

I have a disability or health condition that is not covered here. How can I request accommodations?

If you need specific accommodations for the exam (for example extra time, breaks, or alternative formats), please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

Anything else?

Good luck working through freeCodeCamp’s coursework, building projects, and preparing for these exams.

Happy coding!

Each certification is filled with hundreds of hours worth of interactive lessons, workshops, labs, and quizzes.

How Does the New RWD Certification Work?

The Responsive Web Design certification will teach you core concepts including semantic HTML, working with forms, the importance of accessibility, CSS Flexbox, responsive design, CSS Grid, and more.

The certification is broken down into several modules that include lessons, workshops, labs, review pages and quizzes to ensure that you truly understand the material before moving onto the next module.

The lessons are your first exposure to new concepts. They provide crucial theory and context for how things work in the software development industry.

These lessons include our new interactive editor so you can see previews of the code. You can also play around with the examples for deeper understanding and comprehension.

At the end of each lesson, there will be three comprehension check questions to test your understanding of the material from the lesson.

After these lessons, you’ll head over to the workshops. These workshops are guided step-based projects that provide you with an opportunity to practice what you have learned in the lessons.

After the workshops, you’ll complete a lab which will help you review what you have learned so far. This will give you the chance to start building projects on your own, which is a crucial skill for a developer. You’ll be presented with a list of user stories and will need to pass the tests to complete the lab.

At the end of each module, there is a review page containing a list of all of the concepts covered. You can use these review pages to help you study for the quizzes.

The last portion of the module is the quiz. This is a 20 question multiple choice quiz designed to test your understanding from the material covered in the module. You’ll need to get 18 out of 20 correct to pass.

Throughout the certification, there will be five certification projects you’ll need to complete in order to qualify for the exam.

Once you’ve completed all 5 certification projects, you’ll be able to take the 50 question exam using our new open source exam environment. The freeCodeCamp community designed this exam environment tool with two goals: respecting your privacy while also making it harder for people to cheat.

Once you download the app to your laptop or desktop, you can take the exam.

Frequently Asked Questions

Is all of this really free?

Yes. freeCodeCamp has always been free, and we’ve now offered free verified certifications for more than a decade. These exams are just the latest expansion to our community’s free learning resources.

What prevents people from just cheating on the exams?

Our goal is to strike a balance between preventing cheating and respecting people's right to privacy.

We've implemented a number of reliable, yet non-invasive, measures to help prevent people from cheating on freeCodeCamp's exams:

1. For each exam, we have a massive bank of questions and potential answers to those questions. Each time a person attempts an exam, they'll see only a small, randomized sampling of these questions.

2. We only allow people to attempt an exam one time per week. This reduces their ability to "brute force" the exam.

3. We have security in place to validate exam submissions and prevent man-in-the-middle attacks or manipulation of the exam environment.

4. We manually review each passing exam for evidence of cheating. Our exam environment produces tons of metrics for us to draw from.

We take cheating, and any form of academic dishonesty, seriously. We will act decisively.

This said, no one's exam results will be thrown out without human review, and no one's account will be banned without warning based on a single suspicious exam result.

Are these exams “open book” or “closed book”?

All of freeCodeCamp’s exams are “closed book”, meaning you must rely only on your mind and not outside resources.

Of course, in the real world you’ll be able to look things up. And in the real world, we encourage you to do so.

But that is not what these exams are evaluating. These exams are instead designed to test your memory of details and your comprehension of concepts.

So when taking these exams, do not use outside assistance in the form of books, notes, AI tools, or other people. Use of any of these will be considered academic dishonesty.

Do you record my webcam, microphone, or require me to upload a photo of my personal ID?

No. We considered adding these as additional test-taking security measures. But we have less privacy-invading methods of detecting most forms of academic dishonesty.

If the environment is open source, doesn't that make it less secure?

"Given enough eyeballs, all bugs are shallow." – Linus’s Law, formulated by Eric S. Raymond in his book The Cathedral and the Bazaar

Open source software projects are often more secure than their closed source equivalents. This is because a lot more people are scrutinizing the code. And a lot more people can potentially help identify bugs and other deficiencies, then fix them.

We feel confident that open source is the way to go for this exam environment system.

How can I contribute to the Exam Environment codebase?

It's fully open source, and we'd welcome your code contributions. Please read our general contributor onboarding documentation.

Then check out the GitHub repo.

You can help by creating issues to report bugs or request features.

You can also browse open help wanted issues and attempt to open pull requests addressing them.

Are the exam questions themselves open source?

For obvious exam security reasons, the exam question banks themselves are not publicly accessible. :)

These are built and maintained by freeCodeCamp's staff instructional designers.

What happens if I have internet connectivity issues mid-exam?

If you have internet connectivity issues mid exam, the next time you try submit an answer, you’ll be told there are connectivity issues. The system will keep prompting you to retry submitting until the connection succeeds.

What if my computer crashes mid-exam?

If your computer crashes mid exam, you’ll be able to re-open the Exam Environment. Then, if you still have time left for your exam attempt, you’ll be able to continue from where you left off.

Can I take exams in languages other than English?

Not yet. We’re working to add multi-lingual support in the future.

I have completed my exam. Why can't I see my results yet?

All exam attempts are reviewed by freeCodeCamp staff before we release the results. We do this to ensure the integrity of the exam process and to prevent cheating. Once your attempt has been reviewed, you'll be notified of your results the next time you log in to freeCodeCamp.org.

I am Deaf or hard of hearing. Can I still take the exams?

Yes! While some exams may include audio components, we do make written transcripts available for reading.

I am blind or have limited vision, and use a screen reader. Can I still take the exams?

We’re working on it. Our curriculum is fully screen reader accessible. We're still refining our screen reader usability for the Exam Environment app. This is a high priority for us.

I use a keyboard instead of a mouse. Can I navigate the exams using just a keyboard?

This is a high priority for us. We hope to add keyboard navigation to the Exam Environment app soon.

Are exams timed?

Yes, exams are timed. We err on the side of giving plenty of time to take the exam, to account for people who are non-native English speakers, or who have ADHD and other learning differences that can make timed exams more challenging.

If you have a condition that usually qualifies you for extra time on standardized exams, please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

What happens if I fail the exam? Can I retake it?

Yes. You get one exam attempt per week. After you attempt an exam, there is a one-week (exactly 168 hour) “cool-down” period where you cannot take any freeCodeCamp exams. This is to encourage you to study and to pace yourself.

There is no limit to the number of times you can take an exam. So if you fail, study more, practice your skills more, then try again the following week.

Do I need to redo the projects if I fail the exam?

No. Once you’ve submitted a certification project, you do not need to ever submit it again.

You can re-do projects for practice, but we recommend that you instead build some of our many practice projects in freeCodeCamp’s developer interview job search section.

What happens if I already have the old Legacy Responsive Web Design certification? Should I claim the new one?

The new certification has more theory and practice as well as an exam. So if you’re looking to brush up on your skills, then you can go through the new version of this certification.

What will happen to my existing coursework progress on the Full Stack Certification? Does it transfer over to the Responsive Web Design course?

If you’ve already started the Certified Full Stack Developer Curriculum, all of your previously completed work should already be saved there.

To be clear, we’ve copied over all of the coursework from the full stack certification to this newer certification.

Can I still continue with the current Full Stack Developer Certification and just not do the new certification?

We’ve moved the coursework for the Full Stack Developer Certification over and broken it up into smaller certifications. Currently there are seven courses available for you to go through. Here is the complete list:

• Responsive Web Design Certification

• JavaScript Certification

• Frontend Libraries Certification

• Python Certification

• Relational Databases Certification

• Backend JavaScript Certification

• Certified Full Stack Developer Certification

The Certified Full Stack Developer Certification button will remain on the learn page for a short time to give people the opportunity to switch over to the new certifications. Over the next few months, though, this option will disappear.

Will my legacy certifications become invalid?

No. Once you claim a certification, it’s yours to keep.

Also note that we previously announced that freeCodeCamp certifications would have an expiration date and require recertification. We don’t plan to implement this anytime soon. And if we do decide to, we will give everyone at least a year’s notice.

Will the exam be available to take on my phone?

At this time, no. You’ll need to use a laptop or desktop to download the exam environment and take the exam. We hope to eventually offer these certification exams on iPhone and Android.

I have a disability or health condition that is not covered here. How can I request accommodations?

If you need specific accommodations for the exam (for example extra time, breaks, or alternative formats), please email support@freecodecamp.org. We’ll review your request and see whether we can find a reasonable solution.

Anything else?

Good luck working through freeCodeCamp’s coursework, building projects, and preparing for these exams.

Happy coding!

In this article, you will learn how to work with the built in JavaScript methods: pop, push, shift and unshift. You will also learn how to work with the splice method which allows you to mutate the original array and add/remove elements at a specific index.

What is an Array in JavaScript?

Before we start looking at these different array methods, it is important to understand what an array is in JavaScript.

An array is a type of data structure in JavaScript that is used to store a collection of elements that can be of different types. These data types can include strings, numbers, booleans(true or false), other arrays and objects({}).

Here is an example of an array of names:

const names = ["Jessica", "Jacob", "Zach", "Michelle"];

To access an element from an array, you reference the array name, followed by a pair of square brackets containing the index of the element you want to access.

Arrays are zero-indexed, which means the first element in the array has an index of 0, the second element has an index of 1, and so on.

Here is an example of accessing the second element in the names array:

names[1]; // "Jacob"

If you want to access the last element in an array, you can use the length of the array minus 1.

names[names.length - 1]; // "Michelle"

How to Remove an Element at the End of the Array

If you want to remove an element at the end of an array, you can use the pop method. The pop method removes the last element from an array and returns that element.

Here is an example of using the pop method on the names array:

const names = ["Jessica", "Jacob", "Zach", "Michelle"];
const removedName = names.pop();

console.log(removedName); // "Michelle"

If you try to use the pop method on an empty array, it will return undefined.

const emptyArray = [];
const removedElement = emptyArray.pop();

console.log(removedElement); // undefined

If you log out the names array, then you will see the remaining elements.

console.log(names); // ["Jessica", "Jacob", "Zach"]

How to Remove an Element at the Beginning of the Array

If you want to remove an element at the beginning of an array, you can use the shift method. The shift method removes the first element from an array and returns that element.

Here is an example of using the shift method on the names array:

const names = ["Jessica", "Jacob", "Zach", "Michelle"];
const removedName = names.shift();

console.log(removedName); // "Jessica"

Just like the pop method, if you try to use the shift method on an empty array, it will return undefined.

const emptyArray = [];
const removedElement = emptyArray.shift();

console.log(removedElement); // undefined

How to Add an Element at the End of the Array

If you need to add an element to the end of an array, you can use the push method. The push method adds one or more elements to the end of an array and returns the new length of the array.

Here is an example of an array of programming languages:

const programmingLanguages = ["JavaScript", "Python", "Ruby"];

If you want to add the languages of Go and Rust to the end of the programmingLanguages array, you would use the push method.

const programmingLanguages = ["JavaScript", "Python", "Ruby"];
const originalLength = programmingLanguages.length; // 3

const newLength = programmingLanguages.push("Go", "Rust");

console.log(newLength); // 5
console.log(programmingLanguages); // ["JavaScript", "Python", "Ruby", "Go", "Rust"]

A cool thing you can do with the push method is to add an array to the end of another array.

In this example we have an array of programmingLanguages and an array of newLanguages. We can use the push method and spread syntax to add the newLanguages array to the end of the programmingLanguages array.

const programmingLanguages = ["JavaScript", "Python", "Ruby"];
const newLanguages = ["Go", "Rust"];

const newLength = programmingLanguages.push(...newLanguages);

console.log(newLength); // 5
console.log(programmingLanguages); // ["JavaScript", "Python", "Ruby", "Go", "Rust"]

How to Add an Element at the Beginning of the Array

If you want to add an element to the beginning of an array, you can use the unshift method. The unshift method adds one or more elements to the beginning of an array and returns the new length of the array.

Here is an example of using the unshift method to add three new programming languages to the beginning of the programmingLanguages array.

const programmingLanguages = ["JavaScript", "Python", "Ruby"];
const originalLength = programmingLanguages.length; // 3

const newLength = programmingLanguages.unshift("Go", "Rust", "C#");

console.log(newLength); // 6
console.log(programmingLanguages); // ["Go", "Rust", "C#", "JavaScript", "Python", "Ruby"]

How to Add and Remove Elements at a Specific Index

An index is the position of an element in the array. The first element in the array has an index of 0, the second element has an index of 1, and so on.

To add elements at a specific index, you can use the splice method. The splice method allows you to add and remove elements from a specific index in an array.

In this example, we have a list of American cities.

const cities = ["New York", "Los Angeles", "Chicago", "Houston"];

If we want to add the city of San Francisco to the second index of the cities array, we would use the splice method.

const cities = ["New York", "Los Angeles", "Chicago", "Houston"];

cities.splice(1, 0, "San Francisco");

console.log(cities); // ["New York", "San Francisco", "Los Angeles", "Chicago", "Houston"]

The first argument of the splice method is the index where you want to add or remove elements. In this case, we want to add our city at index 1.

The second argument is the number of elements to remove. In this case, we are not looking to remove any elements, so we pass in 0.

The third argument is the element(s) you want to add. This is where we pass in the city of San Francisco.

cities.splice(1, 0, "San Francisco");

If we want to remove elements at a specific index, we can use the splice method as well.

In this example, we want to remove the city of Los Angeles from the cities array. We can use the indexOf method to find the index of Los Angeles and then use the splice method to remove it.

The indexOf method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const cities = ["New York", "Los Angeles", "Chicago", "Houston"];

const index = cities.indexOf("Los Angeles");

if (index !== -1) {
  cities.splice(index, 1);
}

console.log(cities); // ["New York", "Chicago", "Houston"]

The first argument of index is the index where we want to remove the element. The second argument of 1 is the number of elements we want to remove.

cities.splice(index, 1);

We are wrapping this inside an if statement to check if the index of Los Angeles is not equal to -1. -1 represents that the element is not present in the array.

If the city is present in the array, then we can use the splice method to remove it.

if (index !== -1) {
  cities.splice(index, 1);
}

Conclusion

In this article you learned how to work with the built in JavaScript methods of pop, push, shift and unshift. These methods are useful when you want to add or remove elements from the beginning or end of an array.

You also learned how to work with the splice method which allows you to mutate the original array and add/remove elements at a specific index.

All of the methods we covered in this article mutate the original array. This means that the original array is changed after using these methods.

I hope you found this article helpful and happy coding!

In this article, we will discuss how to access properties from a variety of arrays and look at a few code examples.

What is an Array in JavaScript?

An array is a type of data structure in JavaScript that is used to store a collection of elements that can be of different types.

You can have an array of strings, like this:

const fruits = ["apple", "banana", "mango", "orange"];

You can have an array of numbers:

const numbers = [1, 2, 3, 4, 5];

You can have a nested array of arrays like this:

const nestedArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

You can also have an array of mixed data types:

const mixedArray = ["apple", 1, "banana", 2, "mango", 3];

How to Access Elements from an Array in JavaScript

To access an element from an array, you reference the array name, followed by a pair of square brackets containing the index of the element you want to access.

Here is an example of accessing the first element from the fruits array:

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[0]); // apple

Arrays are zero-indexed, which means the first element in the array has an index of 0, the second element has an index of 1, and so on.

If you want to access the last element in an array, you can use the length of the array minus 1.

const fruits = ["apple", "banana", "mango", "orange"];
console.log(fruits[fruits.length - 1]); // orange

Sometimes it can get confusing when you are dealing with a nested array of arrays. But the syntax remains the same when you want to access an element from a nested array.

Here is an example of accessing the first element from the first array in the nestedArray:

const nestedNumberArray = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(nestedNumberArray[0][0]); // 1

nestedNumberArray[0] points to this array here:

[1, 2, 3];

To access the first element from this array, you use another pair of square brackets with the index of the element you want to access.

nestedNumberArray[0][0];

How to Access Properties from an Array of Objects in JavaScript

Often times you will encounter an array of objects in JavaScript.

Here is an example with an array of developers. Each developer has a name, age, and an array of programming languages they know.

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

If you wanted to access the name of the first developer, you can use the following syntax:

console.log(developers[0].name); // John

Here we are using a combination of dot and bracket notation to access the name property of the first developer object in the developers array.

developers[0] is the first developer object

{ name: "John", age: 25, languages: ["JavaScript", "Python"] }

Then we use dot notation (developers[0].name) to access the name property of this object.

How to Find a Specific Value from an Array of Objects in JavaScript

If we are looking for a specific object from an array of objects, we can use the find method. The find method returns the first element in the array that satisfies the provided testing function. If no elements pass the test, undefined is returned.

Here is an example of using the find method for an array of numbers:

const numbers = [1, 2, 3, 4, 5];

const foundNumber = numbers.find((number) => number > 3); // 4

The following example looks through the numbers array and returns the first number that is greater than 3. In this case, the find method returns the number 4.

We can apply the same concept to find a specific object from an array of objects.

In the following example, we are looking for the developer object with the name "Kelly".

const developers = [
  { name: "John", age: 25, languages: ["JavaScript", "Python"] },
  { name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] },
  { name: "Zack", age: 45, languages: ["Go", "C#"] },
];

developers.find((developer) => developer.name === "Kelly");

In this example, developer represents each object in the array. The find method will go through the developers array and return the first developer object that has the name "Kelly".

{ name: "Kelly", age: 37, languages: ["Ruby", "Python", "C", "C++"] }

Conclusion

I hope you found this article helpful when learning about arrays and how to access properties from them.

We looked at a few examples of arrays as well as how to access elements from nested arrays and an array of objects.

We also learned about the find method and how to use it to find a specific object from an array of objects.

Now you should have a better understanding of how to work with arrays and objects in JavaScript.

Happy coding! 🚀

In this article, we'll look at how to use these operators in greater detail through code examples.

How to Use the Greater Than > Operator in JavaScript

You can use the greater than operator to check if the value on the left is greater than the value on the right. It is represented by the > symbol.

The result will return a Boolean value of true if the value on the left is greater than the value on the right, and false if it is not.

Here is an example of checking if 5 is greater than 3:

console.log(5 > 3); // true

Since the number 5 is greater than 3, the result will be true.

If we switch the two values, then the result will be false:

console.log(3 > 5); // false

How to Use the Less Than < Operator in JavaScript

You can use the less than operator to check if the value on the left is less than the value on the right. It is represented by the < symbol.

The result will return a Boolean value of true if the value on the left is less than the value on the right, and false if it is not.

Here is an example that checks if the number 3 is less than 5:

console.log(3 < 5); // true

Since 3 is less than 5, the result will be true.

But if we switch the two values, then the result will be false:

console.log(5 < 3); // false

How to Use the Greater Than or Equal To >= Operator in JavaScript

If you need to check if the value on the left is greater than or equal to the value on the right, you can use the greater than or equal to operator. It is represented by the >= symbol.

The result will return a Boolean value of true if the value on the left is greater than or equal to the value on the right, and false if it is not.

Here is an example of that checks if the number 5 is greater than or equal to 5:

console.log(5 >= 5); // true

Since the number 5 is equal to 5, the result will be true.

If we change the left value to be the number 3, then the result will be false:

console.log(3 >= 5); // false

How to Use the Less Than or Equal To <= Operator in JavaScript

If you need to check if the value on the left is less than or equal to the value on the right, you can use the less than or equal to operator. It is represented by the <= symbol.

The result will return a Boolean value of true if the value on the left is less than or equal to the value on the right, and false if it is not.

Here is an example of that checks if the number 3 is less than or equal to 5:

console.log(3 <= 5); // true

If we change the left value to be the number 6, then the result will be false:

console.log(6 <= 5); // false

How to Use Comparison Operators in a Conditional Statement

It is common to use comparison operators inside conditional statements like an if statement.

In this example, we have an application that asks the user for their age and displays a response based on the age they entered:

For the HTML, we'll use a form to ask the user for their age. Below the form, we'll display the message based on the age entered.

<h1 class="title">How old are you?</h1>

<main>
  <form id="form">
    <div class="input-container">
      <label for="age">Enter your age: </label>
      <input type="number" id="age" required min="1" max="120" />
    </div>

    <button class="submit-btn" id="submit-btn">Submit age</button>
  </form>

  <p class="result-para" id="result"></p>
</main>

Next, we'll use a method called getElementById to go through the HTML document to find the elements that match the ids we specify.

We can use the method to get the form element, age input and result paragraph, and assign them to const variables:

const ageInput = document.getElementById("age");
const form = document.getElementById("form");
const resultParagraph = document.getElementById("result");

We then want to create an array of strings to show the user based on their age.

const responsesArr = [
  "Oh wow! You are just a kid.",
  "Nice! It looks like you are old enough to drive in the States.",
  "Awesome! It looks like you are old enough to vote in the States.",
  "Cool! It looks like you are old enough to drink in the States.",
];

Then we need to create a function called displayResponse with a parameter called age. This function will be responsible for displaying the messages based on the age entered.

function displayResponse(age) {

}

Inside that function, we need to check if the user's age is less than 16. If it is, we'll display the first message in the responsesArr array.

We'll use the textContent property to change the text inside the resultParagraph element.

if (age < 16) {
  resultParagraph.textContent = responsesArr[0];
}

If the user is between 16 and 18, we will display the second message in the responsesArr array.

else if (age >= 16 && age < 18) {
    resultParagraph.textContent = responsesArr[1];
  }

If the user is between 18 and 21, we will display the third message in the responsesArr array.

else if (age >= 18 && age < 21) {
    resultParagraph.textContent = responsesArr[2];
}

If the user is 21 or older, we will display the last message in the responsesArr array.

else {
    resultParagraph.textContent = responsesArr[3];
  }

The last part of this function is to reset the form after the user submits their age.

ageInput.value = "";

Here is the complete function:

function displayResponse(age) {
  if (age < 16) {
    resultParagraph.textContent = responsesArr[0];
  } else if (age >= 16 && age < 18) {
    resultParagraph.textContent = responsesArr[1];
  } else if (age >= 18 && age < 21) {
    resultParagraph.textContent = responsesArr[2];
  } else {
    resultParagraph.textContent = responsesArr[3];
  }
  ageInput.value = "";
}

The last part of this application is to add an event listener that checks when the user submits their input into the form, and display that message based on the age entered.

We are going to use the addEventListener method to listen for the submit event on the form. When the form is submitted, we will prevent the default behavior of the form and call the displayResponse function with the value of the age input.

form.addEventListener("submit", (e) => {
  e.preventDefault();
  displayResponse(ageInput.value);
});

Here is a complete interactive example on CodePen:

Conclusion

Working with comparison operators like the greater than, greater than or equal to, less than and less than or equal to operators is a common task in JavaScript. They are used to compare two values and return a Boolean value of true or false based on the comparison.

I hope you enjoyed this article and found it helpful.

Happy coding!

But how does this work in more detail? In this article, we will look at several examples on how to use the querySelector method as well as the querySelectorAll method.

Basic Syntax for the querySelector() Method

The querySelector method is called on the document object and takes in an argument that represents the CSS selector of the element you want to select.

document.querySelector(selector);

If the selector matches an element within the document, the method will return the first matching element. If there are no matches, the method will return null.

How to Use the querySelector() Method with Type Selectors

A type selector in CSS refers to the name of an HTML element. Examples of this would be button, div, p, and so on.

In this first example, we have a button element inside the HTML document.

<button>Show Alert</button>

If we wanted to access that element inside our JavaScript file, we could use the querySelector method like this:

const buttonElement = document.querySelector("button");

This line of code selects the first button it sees on the page and assigns that result to a const variable called buttonElement.

If we log this buttonElement variable to the console, this would be the output:

console.log(buttonElement);

console.log output for querySelector example

We can use that buttonElement variable and add an event listener to show an alert when the button is clicked.

buttonElement.addEventListener("click", () => {
  alert("Button was clicked!");
});

Here is the full code and interactive example to play around with.

How to Use the querySelector() Method with Class Selectors

A class selector in CSS refers to the name of a class that is used in an HTML element. Examples of this would be .container, .button, and so on.

Let's say we want to build out a solitaire game and want to hide/show the rules of the game when a button is clicked. We could use the querySelector method to select the button and the rules container.

Here is the starting HTML:

<h1>Let's play solitaire!</h1>
<main>
  <button class="rules-btn">Show Rules</button>
  <section class="rules-container">
    <h2>Rules to the game</h2>
    <ul>
      <li>There are 7 columns of cards</li>
      <li>First column has 1 card, second has 2, third has 3, and so on</li>
      <li>First card in each column is face up, rest are face down</li>
      <li>Move cards to build 4 stacks of cards in ascending order</li>
      <li>Start with aces and build up to kings</li>
      <li>Move cards by dragging and dropping</li>
    </ul>
  </section>
</main>

Inside the JavaScript file, we can use the querySelector method to select the rules button and the rules container.

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

We can then add an event listener to the rulesBtn variable to show/hide the rules container when the button is clicked. We are using the classList property to toggle the class of "show" on the rules container element.

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
});

Here is an interactive example where you can see the rules container being shown and hidden when the button is clicked.

While the toggle is working here, there is a small bug in the code. By default the rules will be hidden and button text says "Show Rules". When the rules are shown, the button text should change to "Hide Rules", but right now it doesn't.

Inside the event listener, we can update the text content for the button to show "Hide Rules" when the rules are shown and "Show Rules" when the rules are hidden.

rulesBtn.textContent = rulesContainer.classList.contains("show")
  ? "Hide Rules"
  : "Show Rules";

Now the button text will change based on the state of the rules container.
Here is the complete JavaScript code:

const rulesBtn = document.querySelector(".rules-btn");
const rulesContainer = document.querySelector(".rules-container");

rulesBtn.addEventListener("click", () => {
  rulesContainer.classList.toggle("show");
  rulesBtn.textContent = rulesContainer.classList.contains("show")
    ? "Hide Rules"
    : "Show Rules";
});

Here is the interactive example with the updated JavaScript code.

How to Use the querySelectorAll() Method

The querySelectorAll method is similar to the querySelector method, but instead of returning the first matching element, it returns a NodeList of all matching elements. A NodeList is an array-like object that contains all the elements that match the specified selector.

In this example we have an unordered list of sports and we want to generate random background colors for each list item.

Here is the starting HTML:

<button class="btn">Generate Random Background Colors</button>
<ul class="sports-list">
  <li>Football</li>
  <li>Basketball</li>
  <li>Tennis</li>
  <li>Golf</li>
  <li>Swimming</li>
</ul>

To select all of the list items inside the unordered list, we can use the querySelectorAll method like this:

const sportsList = document.querySelectorAll(".sports-list li");

If we log the sportsList variable to the console, this would be the output:

console.log(sportsList);

Example of NodeList

We then need to use the querySelector method to select the button.

const randomColorBtn = document.querySelector(".btn");

Then, we can create a random list of colors.

const lightColorsArr = [
  "#FFDAB9",
  "#FFE4B5",
  "#FFFFE0",
  "#FAFAD2",
  "#F0FFF0",
  "#E0FFFF",
  "#AFEEEE",
  "#00CED1",
  "#00BFFF",
  "#1E90FF",
  "#ADD8E6",
  "#7FFFD4",
  "#7CFC00",
  "#7FFF00",
  "#32CD32",
  "#ADFF2F",
  "#FFFF00",
  "#FFD700",
  "#FFA500",
  "#FF6347",
];

Each time the user clicks on the button, we want to shuffle the list of colors and select 5 random light colors from the array. We can use the Fisher-Yates shuffle algorithm to shuffle the array which is a common way to shuffle an array in JavaScript.

function shuffleArray(arr) {
  let currentIndex = arr.length;
  let randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [arr[currentIndex], arr[randomIndex]] = [
      arr[randomIndex],
      arr[currentIndex],
    ];
  }

  return arr;
}

Then we can add an event listener to the button and shuffle the array.

randomColorBtn.addEventListener("click", () => {
  const shuffledColors = shuffleArray(lightColorsArr);
});

For each list item, we can set the background color to a random color from the shuffled array.

sportsList.forEach((list, index) => {
  list.style.backgroundColor = shuffledColors[index];
});

Here is the complete code:

const sportsList = document.querySelectorAll(".sports-list li");
const randomColorBtn = document.querySelector(".btn");

console.log(sportsList);

const lightColorsArr = [
  "#FFDAB9",
  "#FFE4B5",
  "#FFFFE0",
  "#FAFAD2",
  "#F0FFF0",
  "#E0FFFF",
  "#AFEEEE",
  "#00CED1",
  "#00BFFF",
  "#1E90FF",
  "#ADD8E6",
  "#7FFFD4",
  "#7CFC00",
  "#7FFF00",
  "#32CD32",
  "#ADFF2F",
  "#FFFF00",
  "#FFD700",
  "#FFA500",
  "#FF6347",
];

// fisher-yates shuffle algorithm

function shuffleArray(arr) {
  let currentIndex = arr.length;
  let randomIndex;

  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [arr[currentIndex], arr[randomIndex]] = [
      arr[randomIndex],
      arr[currentIndex],
    ];
  }

  return arr;
}

randomColorBtn.addEventListener("click", () => {
  const shuffledColors = shuffleArray(lightColorsArr);

  sportsList.forEach((list, index) => {
    list.style.backgroundColor = shuffledColors[index];
  });
});

Here is the interactive example with the complete JavaScript code. Click on the button and you will see the list items change to random background colors.

Conclusion

The querySelector and querySelectorAll methods are helpful web API's that allow you to access elements in the DOM. You can use these methods to select elements by type, class, id, attribute, pseudo-class, and pseudo-element selectors.

I suggest you experiment with these methods and see what you can come up with in your own projects.

I hope you found this article helpful and informative. Happy coding!

In this article, we will explore the console object and the variety of methods that will help you debug your code.

What is the console Object?

The console object is a global object that provides access to the browser's debugging console. This object has a variety of methods that can be used to log messages, errors, warnings and other information to the console.

In this article, we will look at the more commonly used methods such as console.log, console.warn, and console.error.

How to Access the Console in Your Browser

To access the console in your browser, you can right click on the page and select Inspect. This will open the developer tools. You can also use the keyboard shortcut Ctrl + Shift + I on Windows or Cmd + Option + I on Mac.

How to Use the console.log() Method

The most commonly used method to debug applications is the console.log method. This method is used to log messages and variables to the console.

console.log("Hello, world!");

When you run this code in your browser, you will see the message "Hello, world!" logged to the console.

This method is also useful for logging the value of variables to the console and finding bugs in your code.

Let's say we wanted to build out a Mad Libs generator. This is a popular game where you fill in the blanks of a story with random words.

Here is the code we have created so far:

function madLibsGenerator(verb, adjective, noun) {
  return `We shall ${verb} the${adjective}${noun}.`;
}

console.log(madLibsGenerator("dance", "big", "dog"));

We want to see what our function is doing, so we have a console.log(madLibsGenerator("dance", "big", "dog"));. But when we check the console, we notice some spacing issues with the printed sentence.

Now that we know where the issue is, we can fix those spacing issues in the function here:

function madLibsGenerator(verb, adjective, noun) {
  return `We shall ${verb} the ${adjective} ${noun}.`;
}

console.log(madLibsGenerator("dance", "big", "dog"));

Now the console should print the correct result.

What is the console.warn() Method?

The console.warn method is used to log warning messages to the console. This method is useful for logging messages that are not errors, but are still important for the developer to be aware of.

For example, if you are building an application that is using a deprecated method, you can use the console.warn method to log a warning message to the console.

console.warn(
  "This method is deprecated and will be removed in the next version"
);

When you run this code in your browser, you will see the warning message "This method is deprecated and will be removed in the next version" logged to the console.

What is the console.error() Method?

The console.error method is used to log error messages to the console. This method is useful for logging messages that indicate an error has occurred in your application.

Let's say that you have an application that is trying to fetch data from an API, but the API is down. You can use the console.error method to log an error message to the console.

Here is an example of how to use the console.error method to log an error message to the console:

fetch("https://api.example.com/data")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((error) =>
    console.error("There was an error fetching the data", error)
  );

If there is an error fetching the data from the API, you will see the error message "There was an error fetching the data" logged to the console.

Conclusion

There are so many more methods that you can use with the console object to help you debug your code. In this article, we have only scratched the surface.

To learn more about the console object and the variety of methods that you can use, check out the MDN docs.

I encourage you to play around with the console object and the variety of methods that it has to offer. It is a powerful tool that will help you debug your code and find the source of any issues that you may run into.

A lot of CSS resets will change the default box model from content-box to border-box to make the layouts easier to work with.

But what does box-sizing: border-box actually do?

In this article, we will explore the box-sizing property and how it affects the layout for your web pages.

The Default Box Model

The default box model is set to content-box. This means that the width and height of an element are calculated based on the content inside the element.

If you add any padding or border to the element, then those values will be added to the final width of the element.

In this example, we have a red box that has a width of 200px, height of 200px, padding of 20px, and a black border set to 5px.

<div class="box"></div>

.box {
  background-color: #ff0000;
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

If you right click on the div element and inspect it inside the dev tools, you will see that the width of the box is 250px and the height is 250px.

example of box set to 250px by 250px

This is because the padding and border are added to the width and height of the box. The total width and height are now 250px by 250px instead of 200px.

When you are building out your layouts, you have to remember to calculate the padding and border into the width and height of the element. This can be a bit of a pain and can lead to unexpected results.

A way to avoid this is to use the box-sizing property set to border-box.

How to Work with box-sizing: border-box

When you set the box-sizing property to border-box, the width and height of the element are calculated based on the content, padding and border of the element.

In this revised example, we are using the * selector to set the box-sizing property to border-box for all elements on the page. This is known as a global CSS reset.

<div class="box"></div>

*,
*:before,
*:after {
  box-sizing: border-box;
}

.box {
  background-color: #ff0000;
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
}

Now when you inspect the box element, you will see that the width and height are set to 200px like we specified in the stylesheet. The browser is accounting for the added padding and border and adjusting the content box accordingly.

example of dev tools showing box width of 200px

What do the *, *:before and *:after selectors do?

The reason why we are using the *, *:before and *:after selectors is to ensure that the border-box value is applied to all elements on the page.

The * selector selects all elements, the *:before selector selects all elements before the content, and the *:after selector selects all elements after the content.

To learn more about the :before and :after pseudo elements, check out this freeCodeCamp article.

Conclusion

Having to remember to calculate the padding and border into the width and height of your elements can be a pain and lead to unexpected results in your layouts.

Setting the box-sizing property to border-box for all elements on the page by using the *, *:before and *:after selectors will save you a lot of time debugging and fixing layout issues in your CSS.

Instead of coding through a series of challenges, you will learn the fundamentals of JavaScript by building 16 practice projects + 5 certification projects. Each of the practice projects will lead you through a step by step process for building out dynamic HTML, CSS and JavaScript applications.

Also note that any older certifications you have earned will continue to remain valid going forward.

I have created a video walkthrough demoing each of the projects that you will build throughout this course.

Here is the complete list of projects you will build:

1. Learn Basic JavaScript by Building a Role Playing Game
2. Learn Form Validation by Building a Calorie Counter
3. Learn Basic String and Array Methods by Building a Music Player
4. Learn the Date Object By Building a Date Formatter
5. Build a Palindrome Checker - Certification project
6. Learn Modern JavaScript Methods By Building Football Team Cards
7. Learn localStorage by Building a Todo List
8. Learn Recursion by Building a Decimal to Binary Converter
9. Build a Roman Numeral Converter - Certification project
10. Learn Basic Algorithmic Thinking by Building a Number Sorter
11. Learn Advanced Array Methods by Building a Statistics Calculator
12. Learn Functional Programming by Building a Spreadsheet
13. Learn Regular Expressions by Building a Spam Filter
14. Build a Telephone Number Validator - Certification Project
15. Learn Basic OOP by Building a Shopping Cart
16. Learn Intermediate OOP by Building a Platformer Game
17. Learn Intermediate Algorithmic Thinking by Building a Dice Game
18. Build a Cash Register - Certification Project
19. Learn Fetch and Promises by Building an fCC Authors Page
20. Learn Asynchronous programming by Building an fCC Forum Leaderboard
21. Build a Pokémon Search App - Certification Project

Learn Basic JavaScript by Building a Role Playing Game

Preview for the JavaScript Role Playing Game

For the first project, you'll learn fundamental programming concepts in JavaScript by coding your own Role Playing Game. You'll learn how to work with arrays, strings, objects, functions, loops, if/else statements, and more.

You will start off by building the HTML and CSS structure inside the freeCodeCamp editor. Then you will move onto building out the JavaScript functionality.

Step 53 for the JavaScript Role Playing Game

This project will give you tons of repetition and practice working with the basics of JavaScript. And if you get stuck on a step, then you will be guided to the solution through a series of hints.

Hint for the JavaScript Role Playing Game in freeCodeCamp editor

Learn Form Validation by Building a Calorie Counter

JavaScript Calorie Counter Project

In this calorie counter project, you’ll learn how to validate user input, perform calculations based on that input, and dynamically update your interface to display the results. This project covers basic regular expressions, template literals, the addEventListener() method, and more.

Learn Basic String and Array Methods by Building a Music Player

JavaScript Music Player Project

In this project, you’ll code a basic MP3 player using HTML, CSS, and JavaScript. The project covers fundamental concepts such as handling audio playback, managing a playlist, implementing play, pause, next, previous, and shuffle functionalities.

You will learn how to work with essential string and array methods like the find(), forEach(), map(), and join().

Learn the Date Object By Building a Date Formatter

JavaScript Date formatter project

In this project, you’ll learn how to work with the JavaScript Date object, including its methods and properties. You’ll also learn how to correctly format dates.

This project will cover concepts such as the getDate(), getMonth(), and getFullYear() methods.

Certification project: Build a Palindrome Checker

Palindrome Checker Preview

For this certification project, you will build out a palindrome checker. A user should be able to input a word or phrase and your application should correctly check if is a palindrome.

A palindrome is a word or phrase that can be read the same way forwards and backwards, ignoring punctuation, case, and spacing.

This is one of the five certification projects that count towards earning the JavaScript Algorithms and Data Structures Certification.

Learn Modern JavaScript Methods By Building Football Team Cards

Preview for the Football team cards project

In this football team cards project, you'll learn how to work with DOM manipulation, object destructuring, event handling, and data filtering.

This project will cover concepts like switch statements, default parameters, Object.freeze(), the map() method, and more.

Learn localStorage by Building a Todo List

Preview for TODO app

Local storage is a web browser feature that lets web applications store key-value pairs persistently within a user's browser. This allows web apps to save data during one session, then retrieve it in a later page session.

In this TODO application, you’ll learn how to handle form inputs, manage local storage, perform CRUD (Create, Read, Update, Delete) operations on tasks, implementing event listeners, and toggle UI elements.

Learn Recursion by Building a Decimal to Binary Converter

Preview for decimal to binary converter

Recursion is a programming concept where a function calls itself. This can reduce a complex problem into simpler sub-problems, until they become straightforward to solve.

In this project, you’ll build a decimal-to-binary converter using JavaScript. You’ll learn the fundamental concepts of recursion, explore the call stack, and build out a visual representation of the recursion process through an animation.

Certification Project: Build a Roman Numeral Converter

Preview for Roman numeral project

For this certification project, you will build out a Roman numeral converter. A user should be able to input an integer and your application should correctly return a Roman numeral.

This is one of the five certification projects that count towards earning the JavaScript Algorithms and Data Structures Certification.

Learn Basic Algorithmic Thinking by Building a Number Sorter

Preview for number sorter project

In computer science, there are fundamental sorting algorithms that all developers should learn. In this number sorter project, you’ll learn how to implement and visualize different sorting algorithms like bubble sort, selection sort, and insertion sort – all with JavaScript.

This project will help you understand the fundamental concepts behind these algorithms, and how you can apply them to sort numerical data in web applications.

Learn Advanced Array Methods by Building a Statistics Calculator

Preview for Statistics Calculator

In this statistics calculator project, you'll gain experience with handling user input, DOM manipulation, and method chaining. You’ll get practice by performing statistical calculations like mean, median, mode, variance, and standard deviation.

Learn Functional Programming by Building a Spreadsheet

Preview of Spreadsheet project

In Functional Programming, developers organize code into smaller functions, then combine those functions to build complex programs.

In this spreadsheet application project, you'll learn about parsing and evaluating mathematical expressions, implementing spreadsheet functions, handling cell references, and creating interactive web interfaces. You’ll learn how to dynamically update the page based on user input.

This project will cover concepts like the map() method, find() method, parseInt(), the includes() method.

Learn Regular Expressions by Building a Spam Filter

Preview of Spam filter project

Regular expressions, often shortened to "regex" or "regexp", are patterns that help programmers match, search, and replace text. Regular expressions are powerful, but can be difficult to understand because they use so many special characters.

In this spam filter project, you'll learn about capture groups, positive lookaheads, negative lookaheads, and other techniques to match any text you want.

Certification Project: Telephone Number Validator

Preview of Telephone number validator

For this certification project, you will build out a telephone number validator. A user should be able to input a number or random set of characters and your application should correctly check if it is a valid United States phone number or not.

This is one of the five certification projects that count towards earning the JavaScript Algorithms and Data Structures Certification.

Learn Basic OOP by Building a Shopping Cart

Preview of Shopping cart project

OOP, or Object Oriented Programming, is one of the major approaches to the software development process. In OOP, developers use objects and classes to structure their code.

In this shopping cart project, you'll learn how to define classes and use them. You’ll create class instances and implement methods for data manipulation.

This project will cover concepts like the ternary operator, the spread operator, the this keyword, and more.

Learn Intermediate OOP by Building a Platformer Game

Preview of the Platfomer game

In this platformer game project, you’ll continue to learn about classes, objects, inheritance, and encapsulation. You’ll also learn how to design and organize game elements efficiently and gain insights into problem-solving and code reusability.

Learn Intermediate Algorithmic Thinking by Building a Dice Game

Preview for the Dice game

Algorithmic thinking involves the ability to break down complex problems into a sequence of well-defined, step-by-step instructions.

In this Dice game project, you’ll learn how to manage game state, implement game logic for rolling dice, keeping score, and applying rules for various combinations.

This project covers concepts such as event handling, array manipulation, conditional logic, and updating the user interface dynamically based on game state.

Certification Project: Build a Cash Register

Preview for the cash register

For this certification project, you will build out a functioning cash register. A user should be able to input cash and the register should output if any change is due and what amount.

This is one of the five certification projects that count towards earning the JavaScript Algorithms and Data Structures Certification.

Learn Fetch and Promises by Building an fCC Authors Page

Preview for freeCodeCamp authors page project

One common aspect of web development is learning how to fetch data from an external API, then work with asynchronous JavaScript.

This freeCodeCamp authors page project will show you how to use the fetch method, then dynamically update the DOM to display the fetched data. This project will also teach you how to paginate your data so you can load results in batches.

Learn Asynchronous Programming by Building an fCC Forum Leaderboard

Preview for forum leaderboard project

In this project you will gain proficiency in asynchronous concepts by building your own freeCodeCamp forum leaderboard. This project will cover the Fetch API, promises, Async/Await, and the try...catch statement.

Certification Project: Build a Pokémon Search App

Preview for Pokémon Search App

For this certification project, you will build out a Pokémon Search App. A user should be able to enter in the name or id for a Pokémon and your application should return the stats and avatar for that Pokémon.

This is one of the five certification projects that count towards earning the JavaScript Algorithms and Data Structures Certification.

Try the New JavaScript Algorithms and Data Structures Certification

This certification is currently in beta. If you find any issues, please report them to our GitHub repository.

If you need help with any of the projects, reach out on the freeCodeCamp forum.

When you are ready, you can dive right into the new JavaScript Algorithms and Data Structures Certification.

This is only the beginning

We'll be working throughout 2024 and 2025 to help as many developers as possible improve their JavaScript skills.

You can get involved in our open source efforts by becoming a volunteer in the freeCodeCamp community.

And if you want to help us speed up development of our JavaScript curriculum, and the many other initiatives we have underway, you should become a monthly supporter of our charity.

Happy coding. 🏕️

But sometimes it would be nice if there were a visualization showing the algorithms behind these problems.

In this tutorial, we will build out a visualization showing a couple of approaches to a popular LeetCode problem called Two Sum. We will use vanilla HTML, CSS, and JavaScript to build this project out.

Table of Contents

• Prerequisites
• Project Setup
• How to Solve LeetCode's Two Sum Problem
  • Description
  • Brute Force Approach
  • Brute Force JavaScript Solution and Time Complexity
  • Map Approach and Solution
  • Time Complexity for the Map Solution
• Overview for the Two Sum Visualization
• Adding the Brute Force Visualization
  • Creating the const and let Variables
  • Creating the getClassName Function
  • Creating the bruteForceApproach Function
• How to Disable the bruteForceSolutionBtn When the Animation is in Progress
• Adding the Map Solution Visualization
  • Creating the const Variables
  • Creating the optimalApproach Async Function
• How to Reset the Table Output for the Map Solution
• Final Solution Code and Live Example
• Conclusion

Prerequisites

This tutorial assumes that you have basic knowledge of HTML, CSS and JavaScript. If you haven't gone through a beginner course in any of those languages, then I would suggest starting with these resources:

• freeCodeCamp's Responsive Web Design Certification
• freeCodeCamp's JavaScript Algorithms and Data Structures Certification

This tutorial also assumes that you have some basic knowledge of how to work with a code editor or IDE. If not, then I would suggest looking into these resources:

• Visual Studio Code Crash Course
• How to Use CodePen
• How to Use Replit

Project Setup

You are free to build out this project in either your local code editor of choice, or through an online IDE or editor like CodePen, CodeSandbox, or Replit.

This project will consist of three files: index.html, index.js, and styles.css. Since this project is going to mainly focus on JavaScript, I have supplied all of the HTML and CSS in this GitHub repo here.

You are free to fork and clone the repository, or you can copy the code found in the HTML and CSS files and add it to your project.

Once you get your project environment setup, then you should start the local server and see this result on the screen:

Visualization styles for Leetcode's Two Sum problem

How to Solve LeetCode's Two Sum problem

Before we can build out the visualization for this problem, we need to first understand and solve the problem.

Description

For this problem, you will be given a list of numbers in any order and a target number. The goal is to find the pair of numbers that adds up to the target and return an array of indices for that pair of numbers.

In this example, we have the following list and target number:

[2,7,11,15]
target: 9

The numbers 2 and 7 equal 9 so we would return [0,1] because that represents the indices for where the pair of numbers can be found in the array.

For this problem, you can assume there will be at least two numbers or more in the array and there will only be one possible solution.

So for example you can not have this input here which produces no solution because there are no two numbers in that list that add up to the target.

[1,2,3,4,5]
target: 55

You will also not get an input with multiple solutions. The following input has two answers of [0,1] and [1,2] which goes against the rules of this problem.

[3,3,3]
target: 6

Brute Force Approach

The more intuitive approach would be to start at the beginning of the list of numbers and compare each possible pair of numbers until we find the pair that adds up to the target.

Let's take a look at this example here:

[11, 15, 2, 7]
target:9

We can start with the first number in the list (11) and check each possible pair and see if it adds up to the target number (9).

11 + 15 = 9? NO
11 + 2 = 9? NO
11 + 7 = 9? NO

Since none of those pairs equal the target (9), then we move to the second number in the list (15) and check all possible pairs. There is no need to check 11+15 because we already checked that earlier.

15 + 2 = 9? NO
15 + 7 = 9? NO

Since none of those pairs equal the target (9), then we move to the third number in the list (2) and check all possible pairs.

2 + 7 = 9? YES!!!

Now, we have found the pair that adds up to the target we would return [2,3] because that represents the indices for where the pair of numbers can be found in the array.

Brute Force JavaScript Solution and Time Complexity

This solution uses a nested for loop which would be an O(n²) time complexity. The outer loop is used to get the current number in the list and the inner loop is used to check if the sum of the current number and other numbers in the list add up to the target.

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */

var twoSum = function (nums, target) {
  if (nums.length === 2) return [0, 1];

  for (let i = 0; i < nums.length; i++) {
    const currentNum = nums[i];
    for (let j = i + 1; j < nums.length; j++) {
      if (currentNum + nums[j] === target) return [i, j];
    }
  }
};

Note: I have added an additional check in my solution to check if the input array has only two numbers. In that case, we immediately return [0,1] because those are the only possible indices for that test case.

 if (nums.length === 2) return [0, 1];

So far, our input arrays have been very small. But if we had an input array of 100, 500, or 1000+ numbers, then it could take a while to find the pair that adds up to the target.

In the next section, we are going to take a look at a solution that utilizes JavaScript's Map object and runs in linear time O(n).

Map Approach and Solution

In the brute force approach, we started at the beginning of the array and compared all possible pairs of numbers until we found the pair that added up to the target. But in this approach we can use JavaScript's Map object and one for loop to find that pair.

JavaScript's Map object is a collection of key-value pairs that allows for quick lookups and has built in methods like set(), get() and has().

Let's work with the same example from earlier:

[11, 15, 2, 7]
target:9

We can start looping through the array and look at the current number in the list which would be nums[i]. We also want to create a new map object which will be empty to start.

const map = new Map();

for(let i=0; i<nums.length; i++){

}

Inside our loop, we need to calculate the difference which will be the target minus the current number.

    const map = new Map();

    for(let i=0; i<nums.length; i++){
        const difference = target - nums[i]
    }

Since we know there can only be two numbers that add up to the target, we can check if the difference is in the map. If so, we have found the pair and can return the indices. Otherwise, we can add that current number to the map along with its index.

    const map = new Map();

    for(let i=0; i < nums.length; i++) {
        const difference = target - nums[i]

        if(map.has(difference)) {
            return [map.get(difference), i]
        } else {
            map.set(nums[i], i)
        }
    }

In the following code, the has() method is used to check if the following key is in the map object. This method will return a boolean of true or false.

map.has(difference)

The get() method is used to return that element from the map.

 if(map.has(difference)) {
   return [map.get(difference), i]
 }

The set() method will add or update an entry in the map with a key and value.

else {
  map.set(nums[i], i)
}

Here is the complete code for this approach:

/**
 * @param {number[]} nums
 * @param {number} target
 * @return {number[]}
 */
var twoSum = function(nums, target) {
    if(nums.length === 2) return [0,1]

    const map = new Map();

    for (let i = 0; i < nums.length; i++) {
        const difference = target - nums[i]

        if (map.has(difference)) {
            return [map.get(difference), i]
        } else {
            map.set(nums[i], i)
        }
    }

};

Time Complexity for the Map Solution

This solution would be a linear time complexity O(n). Since we are only using one loop instead of two, we have improved on the time complexity and no longer running in quadratic time O(n²) like we were earlier.

In the next few sections, we are going to start to build out the visualizations for each of these approaches.

Overview for the Two Sum Visualization

The goal of this project is to create visualizations for both the map and brute force solutions.

For the brute force solution, we will show what is it like to walk through each pair of numbers until we find the pair that adds up to the target.

Brute Force approach visualization

For the map solution, we will show the map being built out and checking for the pair that adds up to the target.

Map solution visualization

Adding the Brute Force Visualization

Creating the const and let Variables

We first need to create const variables and assign them the result of accessing the HTML elements responsible for displaying the brute force solution button and output.

const bruteForceSolutionBtn = document.getElementById("brute-force-visual-btn");
const bruteForceNumbersOutput = document.querySelector(
  "#brute-force-output > .numbers-array"
);
const bruteForceTextOutput = document.querySelector(
  "#brute-force-output > .result-text"
);

The next step is to create const variables for the test case array and target that will be used for both visualizations.

const testCaseArray = [11, 15, 2, 7];
const target = 9;

Then, we need to create the let variables that will represent the current number we are looking at in the outer loop and the compliment number we are looking at in the inner loop.

let currentNum;
let currentCompliment;

Creating the getClassName Function

In our visualization we want to show the user the current pair of numbers we are checking by applying different colored borders around them. The current number will have a green border around it and the current compliment number will have a blue border around it.

In order to dynamically update these styles over time, we need to create a function that will be responsible for adding the appropriate classes to the current number and it compliment.

First, start by creating a new getClassName function that takes in a num parameter.

const getClassName = (num) => {

};

Inside that function, create a switch statement that has the num for the expression we are checking for.

const getClassName = (num) => {
  switch (num) {

  }
};

The first case should check for currentNum and return a string for the current-num class.

const getClassName = (num) => {
  switch (num) {
    case currentNum:
      return "class='current-num'";
  }
};

The second case should check for the currentCompliment and return a string for the compliment-num class.

const getClassName = (num) => {
  switch (num) {
    case currentNum:
      return "class='current-num'";
    case currentCompliment:
      return "class='compliment-num'";
  }
};

For the default case, it should return an empty string because we are not going to apply any classes for that element.

const getClassName = (num) => {
  switch (num) {
    case currentNum:
      return "class='current-num'";
    case currentCompliment:
      return "class='compliment-num'";
    default:
      return "";
  }
};

Creating the bruteForceApproach Function

This function will be responsible for executing the brute force solution and displaying the visualization on the page.

We first need to create the bruteForceApproach function which will be an async function.

const bruteForceApproach = async () => {

};

Then, we need to add the outer loop for our test case array.

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {

  }
};

Inside the for loop, update the currentNum to assign it the value of the current number we are looking at in the test case array.

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
  }
};

Next, create the inner for loop.

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {

    }
  }
};

Inside the inner for loop, update the currentCompliment number and assign it the value of testCaseArray[j]. This is meant to represent each number to the right of the current number.

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
    }
  }
};

Next, we need to add a setTimeout which will delay the visual changes made to the markup by one second. This is what is going to help create the animated effect of showing the different pairs of numbers.

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
  }
};

Then we need to update the HTML for the output. Start by assigning the test case array to bruteForceNumbersOutput.innerHTML.

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
      await new Promise((resolve) => setTimeout(resolve, 1000));

      bruteForceNumbersOutput.innerHTML = testCaseArray;
    }
  }
};

Then, we want to use the map method on the array, to create a new array of span elements which represents each number in the array along with the styles. We also need to chain the join method on that to remove the commas that the map method adds when the new array is created.

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
      await new Promise((resolve) => setTimeout(resolve, 1000));

      bruteForceNumbersOutput.innerHTML = testCaseArray
        .map(
          (num, index) =>
            `
            <span ${getClassName(num)}>
            ${testCaseArray[index]}
            </span>
          `
        )
        .join("");
    }
  }
};

If we don't find a pair that adds up to the target, then we want to display a message to the user. Update the text content for the bruteForceTextOutput and assign it the following message:

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
      await new Promise((resolve) => setTimeout(resolve, 1000));

      bruteForceNumbersOutput.innerHTML = testCaseArray
        .map(
          (num, index) =>
            `
            <span ${getClassName(num)}>
            ${testCaseArray[index]}
            </span>
          `
        )
        .join("");

      bruteForceTextOutput.textContent = `Does the sum of ${currentNum} + ${currentCompliment} equal ${target}? NO!`;
    }
  }
};

The last piece is to add a condition that checks if we found the pair of numbers that adds up to the target. If so, then we can display that final indices array and return from the function.

  if (currentNum + currentCompliment === target) {
      bruteForceTextOutput.textContent = `Final indices: [${i}, ${j}]`;
      return;
  }

To test out the brute force visualization, we will need to add an event listener to the bruteForceSolutionBtn. The event listener should listen for a "click" event and should reference the bruteForceApproach function.

bruteForceSolutionBtn.addEventListener("click", bruteForceApproach);

This should be your complete code so far:

const bruteForceSolutionBtn = document.getElementById("brute-force-visual-btn");
const bruteForceNumbersOutput = document.querySelector(
  "#brute-force-output > .numbers-array"
);
const bruteForceTextOutput = document.querySelector(
  "#brute-force-output > .result-text"
);
const testCaseArray = [11, 15, 2, 7];
const target = 9;
let currentNum;
let currentCompliment;

const getClassName = (num) => {
  switch (num) {
    case currentNum:
      return "class='current-num'";
    case currentCompliment:
      return "class='compliment-num'";
    default:
      return "";
  }
};

const bruteForceApproach = async () => {
  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
      await new Promise((resolve) => setTimeout(resolve, 1000));

      bruteForceNumbersOutput.innerHTML = testCaseArray
        .map(
          (num, index) =>
            `
            <span ${getClassName(num)}>
            ${testCaseArray[index]}
            </span>
          `
        )
        .join("");

      bruteForceTextOutput.textContent = `Does the sum of ${currentNum} + ${currentCompliment} equal ${target}? NO!`;

      if (currentNum + currentCompliment === target) {
        bruteForceTextOutput.textContent = `Final indices: [${i}, ${j}]`;
        return;
      }
    }
  }
};

bruteForceSolutionBtn.addEventListener("click", bruteForceApproach);

Try out your visualization by clicking on the "Show Visualization" button for the Brute force approach.

Result of clicking the "show visualization" button for brute force approach

How to Disable the bruteForceSolutionBtn When the Animation is in Progress

If you try to click on the bruteForceSolutionBtn multiple times in a row, you will see glitches in the animation. To fix that, we should disable the button when the animation is running and then re-enable it when the animation is complete.

Inside the bruteForceApproach function, set the disabled attribute for the bruteForceSolutionBtn.

const bruteForceApproach = async () => {
  bruteForceSolutionBtn.setAttribute("disabled", "");

Inside the if statement, remove the disabled attribute for the bruteForceSolutionBtn.

   if (currentNum + currentCompliment === target) {
        bruteForceTextOutput.textContent = `Final indices: [${i}, ${j}]`;
        bruteForceSolutionBtn.removeAttribute("disabled");
        return;
   }

Here is the complete code with the fix:

const bruteForceSolutionBtn = document.getElementById("brute-force-visual-btn");
const bruteForceNumbersOutput = document.querySelector(
  "#brute-force-output > .numbers-array"
);
const bruteForceTextOutput = document.querySelector(
  "#brute-force-output > .result-text"
);
const testCaseArray = [11, 15, 2, 7];
const target = 9;
let currentNum;
let currentCompliment;

const getClassName = (num) => {
  switch (num) {
    case currentNum:
      return "class='current-num'";
    case currentCompliment:
      return "class='compliment-num'";
    default:
      return "";
  }
};

const bruteForceApproach = async () => {
  bruteForceSolutionBtn.setAttribute("disabled", "");

  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
      await new Promise((resolve) => setTimeout(resolve, 1000));

      bruteForceNumbersOutput.innerHTML = testCaseArray
        .map(
          (num, index) =>
            `
            <span ${getClassName(num)}>
            ${testCaseArray[index]}
            </span>
          `
        )
        .join("");

      bruteForceTextOutput.textContent = `Does the sum of ${currentNum} + ${currentCompliment} equal ${target}? NO!`;

      if (currentNum + currentCompliment === target) {
        bruteForceTextOutput.textContent = `Final indices: [${i}, ${j}]`;
        bruteForceSolutionBtn.removeAttribute("disabled");
        return;
      }
    }
  }
};

bruteForceSolutionBtn.addEventListener("click", bruteForceApproach);

Try out the visualization again, and now you should see that the button is disabled when the animation is running.

Image showing how button is disabled when animation is showing

Adding the Map Solution Visualization

Creating the const Variables

We are going to create some new const variables which represent the optimal solution button element, output, and table elements for the animation.

const optimalSolutionBtn = document.getElementById("optimal-visual-btn");
const currentValueOutput = document.getElementById("current-value-output");
const finalOptimalSolutionResult = document.getElementById(
  "final-optimal-result"
);
const table = document.getElementById("table-output");
const tableBodyOutput = document.getElementById("map-table-body");

Here is the complete list of variable declarations for both visualizations:

const bruteForceSolutionBtn = document.getElementById("brute-force-visual-btn");
const bruteForceNumbersOutput = document.querySelector(
  "#brute-force-output > .numbers-array"
);
const bruteForceTextOutput = document.querySelector(
  "#brute-force-output > .result-text"
);
const optimalSolutionBtn = document.getElementById("optimal-visual-btn");
const currentValueOutput = document.getElementById("current-value-output");
const finalOptimalSolutionResult = document.getElementById(
  "final-optimal-result"
);
const table = document.getElementById("table-output");
const tableBodyOutput = document.getElementById("map-table-body");

const testCaseArray = [11, 15, 2, 7];
const target = 9;
let currentNum;
let currentCompliment;

Creating the optimalApproach Async Function

The first step is to create the new optimalApproach function which will be an async function. You can add this below your bruteForceApproach function.

const optimalApproach = async () => {

};

Just like the bruteForceApproach function, we want to disable the button when the animation starts to prevent users from clicking it multiple times and breaking the animation.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
};

When the page first loads, the table is hidden by default. We want to show the table element when the animation starts.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
};

Each time we run this animation, we want to display messages to the user on if we have found the correct pair or not. At the beginning of the animation, we want to clear the previous output.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
};

Then, we need to create an empty map object which will eventually be updated over time in the for loop.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
  const map = new Map();
};

Next, we need to create a for loop which will be responsible for looping through each number in the array and updating the animation overtime.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
  const map = new Map();

  for (let i = 0; i < testCaseArray.length; ++i) {

  }
};

Inside the loop, we need to add the expression for calculating the difference.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
  const map = new Map();

  for (let i = 0; i < testCaseArray.length; ++i) {
    const difference = target - testCaseArray[i];
  }
};

Then, we need to add a setTimeout which will delay the changes by 2 seconds in the HTML markup and help with the animation effect.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
  const map = new Map();

  for (let i = 0; i < testCaseArray.length; ++i) {
    const difference = target - testCaseArray[i];

    await new Promise((resolve) => setTimeout(resolve, 2000));
  }
};

We then need to add an if statement to check if the map has the difference value.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
  const map = new Map();

  for (let i = 0; i < testCaseArray.length; ++i) {
    const difference = target - testCaseArray[i];

    await new Promise((resolve) => setTimeout(resolve, 2000));

    if (map.has(difference)) {

    }
  }
};

Inside the if statement, we need to update the text content to show the final indices array result on the screen. We will use the get method to get the index value from the map.

 if (map.has(difference)) {
      finalOptimalSolutionResult.textContent = `Final indices: [${map.get(
        difference
      )}, ${i}]`;
 }

We also need to update the output for displaying a message that shows we have found the pair of numbers that adds up to the target.

  if (map.has(difference)) {
      finalOptimalSolutionResult.textContent = `Final indices: [${map.get(
        difference
      )}, ${i}]`;
      currentValueOutput.innerHTML = `
      <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
      <p>Is the difference(${difference}) in our map? YES, we found that pair of numbers that add up to the target.</p>
    `;
  }

We also need to remove the disabled attribute from the optimalSolutionBtn and return from the function.

  if (map.has(difference)) {
      finalOptimalSolutionResult.textContent = `Final indices: [${map.get(
        difference
      )}, ${i}]`;
      currentValueOutput.innerHTML = `
      <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
      <p>Is the difference(${difference}) in our map? YES, we found that pair of numbers that add up to the target.</p>
    `;
      optimalSolutionBtn.removeAttribute("disabled");
      return;
  }

If the pair has not been found, then we need to add an else clause.

  if (map.has(difference)) {
      finalOptimalSolutionResult.textContent = `Final indices: [${map.get(
        difference
      )}, ${i}]`;
      currentValueOutput.innerHTML = `
      <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
      <p>Is the difference(${difference}) in our map? YES, we found that pair of numbers that add up to the target.</p>
    `;
      optimalSolutionBtn.removeAttribute("disabled");
      return;
  } else {

  }

Inside the else clause, we need to update the message to show that we have not found the pair and that the current number testCaseArray[i] is going to be added to the map along with its index value.

else {
      currentValueOutput.innerHTML = `
        <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
        <p>Is the difference(${difference}) in our map? No.</p>
        <p>Add the current number ${testCaseArray[i]} to our map.</p>
      `;
}

We then need to update the table output with the current number and its index value.

else {
      currentValueOutput.innerHTML = `
        <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
        <p>Is the difference(${difference}) in our map? No.</p>
        <p>Add the current number ${testCaseArray[i]} to our map.</p>
      `;
      tableBodyOutput.innerHTML += `
      <tr>
        <td>${testCaseArray[i]}</td>
        <td>${i}</td>
      </tr>
    `;
}

Lastly, use the set method to set the current number and index value in the map.

else {
      currentValueOutput.innerHTML = `
        <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
        <p>Is the difference(${difference}) in our map? No.</p>
        <p>Add the current number ${testCaseArray[i]} to our map.</p>
      `;
      tableBodyOutput.innerHTML += `
      <tr>
        <td>${testCaseArray[i]}</td>
        <td>${i}</td>
      </tr>
    `;
      map.set(testCaseArray[i], i);
}

Here is the complete code for your optimalApproach function.

const optimalApproach = async () => {
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
  const map = new Map();

  for (let i = 0; i < testCaseArray.length; ++i) {
    const difference = target - testCaseArray[i];

    await new Promise((resolve) => setTimeout(resolve, 2000));

    if (map.has(difference)) {
      finalOptimalSolutionResult.textContent = `Final indices: [${map.get(
        difference
      )}, ${i}]`;
      currentValueOutput.innerHTML = `
      <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
      <p>Is the difference(${difference}) in our map? YES, we found that pair of numbers that add up to the target.</p>
    `;
      optimalSolutionBtn.removeAttribute("disabled");
      return;
    } else {
      currentValueOutput.innerHTML = `
        <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
        <p>Is the difference(${difference}) in our map? No.</p>
        <p>Add the current number ${testCaseArray[i]} to our map.</p>
      `;
      tableBodyOutput.innerHTML += `
      <tr>
        <td>${testCaseArray[i]}</td>
        <td>${i}</td>
      </tr>
    `;
      map.set(testCaseArray[i], i);
    }
  }
};

To test out this visualization, add an event listener to the optimalSolutionBtn and pass in the "click" event and optimalApproach function reference.

optimalSolutionBtn.addEventListener("click", optimalApproach);

When you click on the "Show Visualization" button for the map solution, you should see the animation, as shown below:

Visualization for map solution

How to Reset the Table Output for the Map Solution

If you try to run the animation multiple times, then you will see that the table shows the results from the previous run.

Table showing results from the previous run

To fix this, we can reset the table before each run of the animation. Start by creating a resetTable function above your optimalApproach function.

const resetTable = () => {

};

const optimalApproach = async () => {
    .........

Inside that function, clear out the table and final text results.

const resetTable = () => {
  tableBodyOutput.innerHTML = "";
  finalOptimalSolutionResult.textContent = "";
};

Call the resetTable function inside your optimalApproach function in order to see the results of resetting the table.

const optimalApproach = async () => {
  resetTable();
  optimalSolutionBtn.setAttribute("disabled", "");
    ...........

Test out your animation again, and now you should see that the table results reset before each new animation run.

Final Solution Code and Live Example

Here is the complete JavaScript solution code for both visualizations:

const bruteForceSolutionBtn = document.getElementById("brute-force-visual-btn");
const bruteForceNumbersOutput = document.querySelector(
  "#brute-force-output > .numbers-array"
);
const bruteForceTextOutput = document.querySelector(
  "#brute-force-output > .result-text"
);
const optimalSolutionBtn = document.getElementById("optimal-visual-btn");
const currentValueOutput = document.getElementById("current-value-output");
const finalOptimalSolutionResult = document.getElementById(
  "final-optimal-result"
);
const table = document.getElementById("table-output");
const tableBodyOutput = document.getElementById("map-table-body");

const testCaseArray = [11, 15, 2, 7];
const target = 9;
let currentNum;
let currentCompliment;

const getClassName = (num) => {
  switch (num) {
    case currentNum:
      return "class='current-num'";
    case currentCompliment:
      return "class='compliment-num'";
    default:
      return "";
  }
};

const bruteForceApproach = async () => {
  bruteForceSolutionBtn.setAttribute("disabled", "");

  for (let i = 0; i < testCaseArray.length; ++i) {
    currentNum = testCaseArray[i];
    for (let j = i + 1; j < testCaseArray.length; ++j) {
      currentCompliment = testCaseArray[j];
      await new Promise((resolve) => setTimeout(resolve, 1000));

      bruteForceNumbersOutput.innerHTML = testCaseArray
        .map(
          (num, index) =>
            `
              <span ${getClassName(num)}>
              ${testCaseArray[index]}
              </span>
            `
        )
        .join("");

      bruteForceTextOutput.textContent = `Does the sum of ${currentNum} + ${currentCompliment} equal ${target}? NO!`;

      if (currentNum + currentCompliment === target) {
        bruteForceTextOutput.textContent = `Final indices: [${i}, ${j}]`;
        bruteForceSolutionBtn.removeAttribute("disabled");
        return;
      }
    }
  }
};

const resetTable = () => {
  tableBodyOutput.innerHTML = "";
  finalOptimalSolutionResult.textContent = "";
};

const optimalApproach = async () => {
  resetTable();
  optimalSolutionBtn.setAttribute("disabled", "");
  table.style.display = "block";
  currentValueOutput.innerHTML = "";
  const map = new Map();

  for (let i = 0; i < testCaseArray.length; ++i) {
    const difference = target - testCaseArray[i];

    await new Promise((resolve) => setTimeout(resolve, 2000));

    if (map.has(difference)) {
      finalOptimalSolutionResult.textContent = `Final indices: [${map.get(
        difference
      )}, ${i}]`;
      currentValueOutput.innerHTML = `
      <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
      <p>Is the difference(${difference}) in our map? YES, we found that pair of numbers that add up to the target.</p>
    `;
      optimalSolutionBtn.removeAttribute("disabled");
      return;
    } else {
      currentValueOutput.innerHTML = `
        <p>Difference(${difference}) = target(${target}) - current number(${testCaseArray[i]})</p>
        <p>Is the difference(${difference}) in our map? No.</p>
        <p>Add the current number ${testCaseArray[i]} to our map.</p>
      `;
      tableBodyOutput.innerHTML += `
        <tr>
          <td>${testCaseArray[i]}</td>
          <td>${i}</td>
        </tr>
      `;
      map.set(testCaseArray[i], i);
    }
  }
};

bruteForceSolutionBtn.addEventListener("click", bruteForceApproach);
optimalSolutionBtn.addEventListener("click", optimalApproach);

Here is a link again to the final live result on CodePen.

Conclusion

I hope you enjoyed that project and learned a little bit more about how the Two Sum problem works.

I encourage you to play around with the project and maybe add some new features on your own like testing out different numbers or asking for user inputs for the numbers array and targets. 👍🏾

In this article, I have created a study guide for the freeCodeCamp curriculum's entire Learn Basic CSS by Building a Cafe Menu practice project. This study guide is filled with additional information, articles, and videos to help you understand the concepts better.

Feel free to reference this guide as you go through the certification. The first part of the project reviews HTML elements and then moves onto CSS.

Here is the complete list of topics covered. Click on any of the links below to learn more about the topic.

Table of Contents

• DOCTYPE and HTML elements - Step 1
• Head and Title elements - Step 2
• Meta charset attribute - Steps 3,17
• Body element - Step 4
• Heading elements - Steps 6,9,10, 47
• Paragraph element - Steps 7, 30, 31, 49, 65
• Header element - Step 7
• Main element - Step 5
• Section Elements - Steps 8, 9, 46
• Style element - Step 10
• text-align property in CSS - Steps 11, 12, 33, 35
• Grouping CSS selectors - Steps 13, 51
• Linking External Stylesheets - Step 16
• Viewport meta tag - Step 18
• background-color property - Steps 18, 19, 23, 68
• Div element - Step 20
• CSS width property - Steps 21, 24, 38, 39, 41, 45
• CSS comments - Steps 22, 77
• Margin property - Steps 25, 73, 75, 84, 85, 86, 91
• Class selectors - Steps 26, 27, 32, 34, 36, 42, 44, 50, 61, 76, 87
• background-image property - Step 28
• Article element - Steps 29, 31, 48, 52
• Block, inline and inline-block values - Steps 37, 89
• Padding - Steps 53 - 55, 72
• max-width property - Step 56
• font-family - Step 57 - 59
• font-style property - Step 60
• font-size property - Steps 62, 74, 78
• Footer elements - Step 63
• Anchor elements - Step 64
• hr element - Steps 66, 71
• Height property - Steps 67, 70
• border-color property - Step 69
• Color property - Steps 79, 83
• Pseudo-classes - Steps 80, 81, 82
• Image elements - Steps 88, 90
• Additional resources for HTML and CSS

DOCTYPE and HTML elements

The first line in your HTML code should be the DOCTYPE declaration. A DOCTYPE tells the browser what version of HTML the page is written in.

This is the DOCTYPE declaration for HTML 5:

<!DOCTYPE html>

If you forget to include this line of code in your file, then some of the HTML 5 tags like <article>, <footer>, and <header> may not be supported by the browser.

The html element is the root element where all other elements go inside of it.

<!DOCTYPE html>
<html lang="en">
  <!--All other elements go inside here-->
</html>

The lang attribute inside the opening <html> tag sets the language for the page. It is also good to include it for accessibility reasons, because screen readers will know how to properly pronounce the text.

<html lang="en">

Head and Title elements

The <head> tags contain information that is processed by machines. Inside the <head> tags, you will nest metadata which is data that describes the document to the machine.

<head>
  <!--important meta data goes inside here-->
  <!--title element also goes inside here-->
</head>

The <title> tag is the title for the web page. This text is shown in the browser's title bar.

    <title>HTML 5 Boilerplate</title>

This is an example of what a head would look like on a real web page. None of this information is displayed on the web page itself.

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>

For a detailed description of each meta tag listed, you can read through this article on an HTML5 Boilerplate.

Meta charset attribute

UTF-8 is the standard character encoding you should use in your web pages. This will usually be the first <meta> tag shown in the <head> element.

 <meta charset="UTF-8">

According to the World Wide Web Consortium,

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.

Body element

The body element contains all of the content for the web page. This includes headings, paragraphs, images, links, and more.

<html>
  <head>
    <title>Let's learn about the body element</title>
  </head>
  <body>
    <!--web page content goes inside here-->
  </body>
</html>

Heading elements

HTML heading elements represent the main heading and subheadings of a web page.

The h1 element represents the most important heading and should only be used once per web page.

<h1>I represent the main heading of a web page</h1>

The h2 element represents the second most important heading on the page.

<h2>I am the second most important heading element</h2>

There are a total of six section heading elements:

<h1>I am the most important heading element</h1>
<h2>I am the second most important heading element</h2>
<h3>I am the third most important heading element</h3>
<h4>I am the fourth most important heading element</h4>
<h5>I am the fifth most important heading element</h5>
<h6>I am the least important heading element</h6>

This is what it looks like rendered to the page.

To learn more about heading elements, you can read through this DevDocs detailed heading elements explanation.

Paragraph element

Paragraph elements represent the paragraphs on a web page.

<p>I love learning with freeCodeCamp. They have thousands of free articles and videos to help me learn how to code.</p>

This is what it looks like rendered to the page:

To learn more about paragraph elements, you can read through this DevDocs p element detailed explanation.

Header element

The header element contains introductory content of the web page. This can include elements like a nav, h1 or website logo.

<header>
  <img src="link-for-logo" alt="description for fake logo goes here">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="#bio">Bio</a></li>
      <li><a href="#projects">Projects</a></li>
    </ul>
  </nav>
</header>

Main element

The main element is used to group all of the main content of the web page.

<h1>What freeCodeCamp has to offer</h1>
<main>
  <p>The core freeCodeCamp curriculum teaches full stack JavaScript and Python. There are hundreds of lessons to go through to get you ready for an entry level developer job.</p>

  <p>freeCodeCamp has thousands of free articles on their news publication. They also have hundreds of videos on their YouTube channel.</p>
</main>

This is what the code looks like rendered to the page.

To learn more about the main element, you can read through this DevDocs detailed main element explanation.

Section elements

The section element is used to group sections of content in the HTML document.

Here is an example of the section element:

<h1>Let's learn about section elements</h1>
<section>
  <h2>Defintion</h2>
  <p>The section element is used to group sections of content in the HTML document.</p>
</section>

This is what the result looks like rendered to the page.

To learn more about section elements, you can read through this DevDocs section element detailed explanation.

Style element

The style element contains the styling for the web page. This is known as internal CSS.

The style element goes inside the head tags.

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    /*Styles will go inside here*/
  </style>
</head>

<body>
  <!--website content goes inside here-->
</body>

</html>

To learn more, you can read through this helpful DevDocs explanation on the style element.

text-align Property in CSS

When you are working with heading or paragraph tags, the default styling in HTML will position the text on the left hand side of the page.

In this example, we have an <h1> which is placed on the upper left hand side of the page.

<h1>Let's learn about centering text</h1>

If we wanted to horizontally center that text on the page, then we can use the text-align property.

h1 {
  text-align: center;
}

To learn more, you can read through this helpful article on centering text: Text Align in CSS – How to Align Text in Center with HTML.

Grouping CSS selectors

If you have multiple CSS selectors with the same styles, then you can group them together like this:

h1, h2, h3 {
    text-align: center;
}

Notice how the h1, h2 and h3 are separated by commas. Grouping multiple CSS selectors together cleans up your CSS and removes repetition.

You can read more about CSS combinators here.

Linking External Stylesheets

The link element is used in most cases to link an external stylesheet to the HTML document. Using external CSS is preferred in most cases to help keep your HTML and CSS in separate documents for readability.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
</html>

rel="stylesheet" defines the relationship between the HTML file and the external stylesheet.

To learn more, you can read this DevDocs example on link elements.

Viewport meta tag

This tag renders the width of the page to the width of the device's screen size. If you have a mobile device that is 600px wide, then the browser window will also be 600px wide.

The initial-scale controls the zoom level. The value of 1 for the initial-scale prevents the default zoom by browsers.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

background-color property

You can change the background color of an HTML element by using the CSS background-color property.

Let's say we have this HTML markup.

<h1>Let's learn about the background-color property</h1>
<p>We are learning about background colors</p>

I wanted to change the background color from the default of white to pink. We can target the body selector and use background-color: pink;

body {
  background-color: pink;
}

To learn more, you can read through this helpful article: CSS Background Color – How to Change the Background Color in HTML.

Div element

The div HTML element is used to group multiple HTML elements and represents a generic container. This element holds no semantic meaning and is mainly used for styling purposes.

<div>
  <h1>Let's learn about divs</h1>
  <p>div elements are generic containers to group elements</p>
</div>

To learn more, you can read through this helpful article: HTML Div – What is a Div Tag and How to Style it with CSS.

CSS width property

The width property will set the width for the HTML element.

In this example, I want to set the width of this div to 200px.

div {
  width: 200px;
}

To learn more, you can read through this helpful DevDocs explanation on the width property.

CSS comments

If you need to comment out code or leave messages for yourself or other developers, you can use comments.

Here is the basic syntax for a comment in CSS:

/* this is a comment in CSS */

Anything inside that comment tag will not be rendered to the web page.

In this example, we have some HTML markup.

<h1>CSS comments</h1>
<p class="red-text">This is some demo text</p>

For the CSS, I have changed the text color to red and increased the font size.

.red-text {
  font-size: 1.2rem;
  color: red;
}

Here is the current result:

If I comment out the red text color, then the text will go back to black.

.red-text {
  font-size: 1.2rem;
  /* color: red; */
}

Margin property

The margin property represents the space around the HTML element. There are four different margin properties:

• margin-left
• margin-right
• margin-top
• margin-bottom

In this first example, we have two div elements which represent blue and red boxes.

<div class="blue-box"></div>
<div class="red-box"></div>

.blue-box,
.red-box {
  width: 200px;
  height: 200px;
}

.blue-box {
  background-color: blue;
}

.red-box {
  background-color: red;
}

Here is what the result looks like rendered to the page:

If we want to created some space between the red and blue boxes we can use the margin property. I am going to add a margin-bottom: 20px; to the blue box to create space.

.blue-box {
  background-color: blue;
  margin-bottom: 20px;
}

This is what the result looks like:

We can also center both boxes, by setting the margin-left and margin-right properties to auto.

.blue-box,
.red-box {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

Here is the result:

In this next example, we have a green box, a blue box, and some text on the page. We can use the margin-left, margin-right, margin-top, and margin-bottom properties to create spaces between the text and boxes.

<h1 class="text">Margin shorthand property</h1>
<div class="green-box"></div>
<p class="text">Margins create space around HTML elements</p>
<div class="blue-box"></div>
<p class="text">CSS is fun</p>

.text {
  text-align: center;
}
.blue-box,
.green-box {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.blue-box {
  background-color: blue;
}

.green-box {
  background-color: green;
}

Here is the result:

For the blue and green boxes, we can clean up our code here and place all of these margin styles all in one line.

  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;

The margin shorthand property is used to set the margin for all sides of the element. If two values are present, then the first value represents the top & bottom margins while the second value represents the left & right margins.

  margin: 20px auto;

To learn more about the margin shorthand property, you can read through this helpful DevDocs explanation.

Class selectors

If you wanted a group of HTML elements to share the same styles, then you would use the class attribute.

Here is an example of how to apply a class to an HTML element.

<h1 class="title">Jessica Wilkins blog</h1>

Then in your CSS, you can target that class and add some styles to it.

Here is an example of turning that text red, using CSS. Note, that you need to precede that class name with a . which tells the computer that you want to use a class selector.

.title {
  color: red;
}

background-image property

The background-image property is used to set the background image for an HTML element.

In this example, we are going to apply a background image of lasagna to the body element.

body {
  background-image: url("https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg");
}

The reason why this image is repeating on the screen is because that is the default behavior for the background-image property. You could use background-repeat: no-repeat; to change that default behavior.

Article element

The article element is a semantic HTML element that is used for independent self contained content.

<article>
  <h2>Blog entry #3</h2>
  content goes here...
</article>

Block, inline and inline-block values

The display property is used to apply block or inline characteristics to an element. Block level elements take up the full horizontal space on the page while inline elements only take up the horizontal space for that element.

Inline elements will not work with width and height properties. The margin left and right values will work for inline elements but not the top and bottom values.

You can have multiple inline elements displayed in a row while you can have only one block level element per row. Here is an example for multiple inline elements in a row:

<a href="">this is link 1</a>
<a href="">this is link 2</a>
<a href="">this is link 3</a>

You can use the display:block; value on these anchor element to change their default behavior and set it to block characteristics.

a {
  display: block;
}

This next example is for multiple block level elements. Notice how each of these divs takes up the entire horizontal space on the page and they are not displayed next to each other.

<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>

This last value is called inline-block which will treat elements as inline but will also have characteristics of block level elements.

Here is an example of two paragraph elements that are block level elements by default.

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>

I can set the width, margin, padding and background-color for these p elements.

p {
  background-color: #89cff0;
  width: 100px;
  margin: 20px;
  padding: 15px;
}

We can add display: inline-block; to place the paragraph elements next to each other.

p {
  background-color: #89cff0;
  width: 100px;
  margin: 20px;
  padding: 15px;
  display: inline-block;
}

Padding

In CSS, you can add padding to create space around the element's content.

In this example we have a paragraph element with a pink background that uses no padding.

<p>This is an example without padding</p>

p {
  background-color: pink;
  width: 100px;
}

Notice how the text is right up against the border of the p element. That is because we haven't added any padding.

If we want to create space around that text, then we can use padding. Let's add 10px of padding on all sides of the text.

p {
  background-color: pink;
  width: 100px;
  padding: 10px;
}

If we only wanted to add padding to the left and right sides, then we can use the padding-left and padding-right properties.

p {
  background-color: pink;
  width: 100px;
  padding-left: 10px;
  padding-right: 10px;
}

We can also modify it so there is only space around the top and bottom of the text.

p {
  background-color: pink;
  width: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
}

Similar to the margin property, you can use a shorthand notation to apply different types of padding to the top, left, right, and bottom sides.

In this example we are going to add 10px of padding to the top and bottom of the text and add 15px of padding to the left and right sides of the text.

Without the shorthand property the code would look like this:

p {
  background-color: pink;
  width: 100px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

But we can use the shorthand notation to achieve the same result. The first number in the padding property represents the top and bottom while the second number represents the left and right.

p {
  background-color: pink;
  width: 100px;
  padding: 10px 15px;
}

To learn more about the padding shorthand notation, you can read through this helpful DevDocs explanation.

max-width property

The max-width property is useful when you want to set a maximum width for an element.

In this example, we have a red container with a width set to 70% of the viewport width.

<div class="red-container"></div>

.red-container {
  width: 70%;
  height: 40px;
  background-color: red;
}

We can use the max-width property to set a maximum width of 1000px to this red container.

.red-container {
  width: 70%;
  max-width: 1000px;
  height: 40px;
  background-color: red;
}

Now, when the viewport is larger than 1000px, the width will no longer be set to 70% of the viewport. Instead, it will stay at the maximum width of 1000px.

font-family property

In design, a font-family represents a collection of fonts that share similar design characteristics. Here are some examples of some font families:

Times, Times New Roman, serif    
Comic Sans MS, Comic Sans, cursive

In CSS, you can use the font-family property to apply a set of fonts to given elements.

<h1>Let's learn about font families</h1>
<p>This is an example on how to use the font-family CSS property</p>

body {
  font-family: Comic Sans MS, Comic Sans, cursive;
}

The browser will select the first font in the list and display if it is available. If that font is not available, then it will move onto the next font in the list.

It is good practice to provide a fallback font in the event that the other fonts in the list are not available to the browser. In our example, cursive would considered the fallback if Comic Sans MS and Comic Sans were not available.

font-style property

The font-style property is used to set the text in a normal, italic, or oblique font style.

Here is an example of setting the text to an italic font-style.

<h1>This example is about the font-style property</h1>

h1 {
  font-style: italic;
}

It's important not to use the HTML i (Idiomatic Text) element for styling text in italics. When it comes to styling text, you should always use the font-style property.

font-size property

The font-size property is used to change the font sizes for HTML elements like headings and paragraphs. Here are some common values that you can use with the font-size property:

• xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
• smaller, larger
• px, em, rem
• percentages (for example, font-size: 60%;)

In this example, we are going to set the font-size for this paragraph element to be 20px.

<p>This example is about the font-size property</p>

p {
  font-size: 20px;
}

Footer elements

The footer element is located at the bottom of the HTML document and contains information like copyrights, or links to other related information for the page.

Here is a basic example:

<footer>
  <p>© 2022 Jessica Wilkins</p>
</footer>

To learn more about the footer element, you can read through this DevDocs explanation of the footer element.

Anchor elements

An anchor element represents a link on the web page.

Here is the basic syntax:

<a href="link-where-you-want-to-go">anchor text goes here</a>

This is what it looks like rendered to the page:

You use the href attribute to tell the hyperlink where to go.

href="link-where-you-want-to-go"

The anchor text is what gets displayed on the screen to users.

Here is an example of an anchor tag that links to freeCodeCamp:

<a href="https://www.freecodecamp.org/">freeCodeCamp</a>

This is what it looks like rendered to the page.

To learn more about HTML anchor elements, I suggest reading through these helpful articles:

• The HTML Tag – Anchor Tag Example Code
• HTML Tag – Anchor Link HREF Example

hr element

The hr (Horizontal Rule) element is used to created breaks between the paragraph elements.

Here is an example of how to use the hr element between two paragraph elements. hr elements are self closing.

<p>This is paragraph 1</p>
<hr>
<p>This is paragraph 2</p>

You can style the hr element by changing its border and color.

hr {
  border: 5px solid red;
}

Height property

The height property in CSS is used to set the height for an HTML element. Here is an example where we have a blue container with a height of 50px.

<div class="blue-container"></div>

.blue-container {
  background-color: blue;
  width: 30px;
  height: 50px;
}

To learn more about the height property, you can read through this helpful DevDocs explanation.

border-color property

The border-color property is used to set the color for an element's border.

In this example, we are going to create two paragraph elements with different border colors. The first step is to set the border widths and style.

<p class="para1">This is paragraph one with a green border</p>
<p class="para2">This is paragraph two with a blue border</p>

p {
  border-style: solid;
  border-width: 3px;
}

Then we can set the first paragraph to have a border color of green and the second paragraph to have a border color of blue.

.para1 {
  border-color: green;
}

.para2 {
  border-color: blue;
}

We can rewrite our example to use the border shorthand notation to apply the border width, color, and style all at the same time.

.para1 {
  border: 3px solid green;
}

.para2 {
  border: 3px solid blue;
}

Color property

You can change the color of the text by using the color property. Here is an example to change the paragraph text to blue:

<p>This is an example for the color property</p>

p {
  color:blue;
}

Pseudo-classes

Pseudo-classes are special keywords that you can add to CSS selectors to show the specific state of an HTML element.

In this first example, we are going to create a blue button that changes to a darker shade of blue when the user hovers over it. We can use the :hover pseudo-class to achieve that result.

<button>Login</button>

button {
  border: none;
  padding: 10px;
  font-size: 20px;
  color: white;
  background-color: #0e3386;
  cursor: pointer;
}

button:hover {
  background-color: #041e42;
}

In this next example, we are going to use CSS pseudo-classes to style the different states for a link.

The :link pseudo-class is used to show the initial state of the link.

a:link {
  color: #0066b2;
}

The :hover pseudo-class is used to show when a user hovers over a link.

a:hover {
  color: #13274f;
}

The :visited pseudo-class is used to show when a user clicks on that link and visits the site.

a:visited {
  color: #5a4fcf;
}

You can play around with this CodePen example to see the different link states.

If you want to learn more about pseudo-classes, then you can read through this helpful article.

Image elements

img elements are used to add images to the web page.

The src attribute represents the location of the image and the alt attribute is descriptive text for the image.

<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="plate of lasagna">

This is the what code looks like rendered to the page:

To learn more about the img element, you can read through this helpful img element tutorial.

Additional resources for HTML and CSS

Thanks for reading! Here are some more helpful resources to get you comfortable with CSS:

• CSS Tutorial – Full Course for Beginners
• CSS Tutorial - Zero to Hero (Complete Course)
• Learn HTML & CSS – Full Course for Beginners
• Introduction To Responsive Web Design - HTML & CSS Tutorial
• HTML and CSS Tutorial - Create a Website for Beginners

I merged a total of 356 pull requests and helped a lot of new contributors get started with open source. We were able to add a total of 477 new quiz questions to the Developer Quiz Site.

Here are some more statistics:

Stats on Oct 1, 2022

Number of questions: 694

Forks: 61

Stars:42

Stats on November 1, 2022

Number of questions: 1171

Forks: 246

Stars: 109

This month long journey has been crazy, productive, fun and educational. Here are all of the things that I learned during Hacktoberfest 2022.

Table of Contents

• How it all began
• Preparing for Hacktoberfest
  • Step 1: Adding the Hacktoberfest topic and labels
  • Step 2: Creating issue templates
  • Step 3: Updating the contributing documentation
  • Step 4: Creating well-defined issues
  • Step 5: Adding Saved replies
  • Step 6: Opening up GitHub Discussions
• Lessons I learned during Hacktoberfest
  • Lead with patience, empathy and kindness
  • Don't get worked up over spam
  • How to gracefully close PR's that will not be accepted
• Conclusion

How it All Began

In December of 2021, freeCodeCamp was launching their Learn to Code RPG game. It's an interactive visual novel that follows Lydia's dream of becoming a developer.

I was involved with helping to create quiz questions on topics like HTML, CSS, Computer Science, Python, and so on for the initial launch.

About a week before the launch, Quincy approached me and a few others to build out a Developer Quiz Site. This was meant to be a companion site to the Learn to Code RPG game and provide campers with a way to practice more quiz questions outside of the game.

The initial launch of the Developer Quiz Site had about 600+ quiz questions. We also created a few open issues in the repository for the community to add more questions to the site.

During parts of 2022, there was a moderate amount of activity in the repository but a lot of the time it remained rather slow. But once September rolled around, I thought about entering the Developer Quiz Site into Hacktoberfest.

I reached out to Quincy and he thought it was a great idea because we could use this opportunity to get more quiz questions from the community.

Preparing for Hacktoberfest

There were about 3 weeks left before Hacktoberfest started. Here is how I used that time to get the repository ready.

Step 1: Adding the Hacktoberfest topic and labels

The first step was to add the Hacktoberfest topic to the repository so people knew we were participating in this year's event. I spruced up the About section and added the appropriate labels to help invite people to the repository.

I then made sure to create the hacktoberfest-accepted label so I could apply it to each approved PR to help us keep track of the total number of Hacktoberfest PR's. I also added the spam, hacktoberfest, and first-timers-only labels because I knew they would come in handy.

Step 2: Creating issue templates

GitHub issue templates are a great way to ensure that contributors provide all of the necessary information for bug fixes, documentation changes, feature requests or general issues.

I decided to setup 5 issue categories and make certain fields required so contributors would provide some level of detail to the issues they were creating.

Step 3: Updating the contributing documentation

When the repository was initially created, the contributing documentation pointed to the general freeCodeCamp contributing guidelines. While that documentation is very thorough, it wasn't specific enough on how people could best contribute to the Developer Quiz site repository in particular.

I decided to completely overhaul the documentation and create a new in depth file just for the Developer Quiz Site. Since I anticipated that we would have a lot of beginners with Git and GitHub, I tried to make it as accessible and beginner friendly as possible.

Step 4: Creating well-defined issues

In order to attract contributors to our repository, I knew that we needed to have some clearly defined issues. If the issues were too vague, then I knew people would have tons of questions or might not be interested in contributing.

I made sure to include all of the necessary guidelines for submission, including code snippets for the proper formatting, links to the Code of Conduct, Contributing docs, and links to the files they needed to change.

Here is an example of one of the issues I created to encourage more JavaScript questions.

Sample issue

developerquiz.org currently has over 600 quiz questions. We are looking to expand on the JavaScript questions and we encourage other developers to add their quiz questions to the site.

Please note: we are only focusing on general JavaScript questions instead of library and framework specific questions.

You can find the complete list of questions below. https://github.com/freeCodeCamp/Developer_Quiz_Site/blob/main/src/data/javascript-quiz.ts

You can add your own questions to the top of that file. Please first check to make sure your question doesn't already exist in the file before creating a PR.

Here is an example format for the questions.

  {
    Question:
      "In JavaScript, what is the name of the method used to remove white space from the beginning and end of a string?",
    Answer: ".trim()",
    Distractor1: ".substring()",
    Distractor2: ".reduce()",
    Distractor3: ".slice()",
    Explanation:
      "The .trim() method removes white space (including space, tab, etc.) from both ends of a string and returns a new string without modifying the original.",
    Link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim",
  },

For the link field, please make sure to use a freeCodeCamp article, freeCodeCamp YouTube video, or official documentation. If you choose to reference a video, please make sure to include the timestamp for the topic covered.

You can read more about how to create timestamps in this helpful article.

This issue will not be assigned to anyone and will remain open for multiple contributors.

Please do not assign yourself to this issue or close it.

Happy contributing!

For most of our issues, I wanted multiple contributors to be able to participate. So I added a disclaimer at the bottom letting people know that it would remain open and wouldn't be assigned to anyone.

I also made sure to add the good-first-issue, help-wanted, and hacktoberfest labels to help attract more contributors.

Step 5: Adding Saved replies

Saved replies is a feature on GitHub were you can create and save your own messages that you intend to use repeatedly in issues and pull requests.

I decided to create the following replies:

I wanted replies to congratulate both first time and returning contributors because they took the time to make our repository better.

I also wanted to create a reply where I thanked the contributor for their contribution and requested changes to the pull request.

The last reply I created was to let contributors know that their pull request was reviewed but was not going to be accepted. I saw that the main freeCodeCamp learn repository used a similar reply so I wanted to include it in the Developer Quiz Site repository.

Step 6: Opening up GitHub Discussions

A few days before Hacktoberfest started, I wanted to open up another avenue for contributors to ask questions and propose new features. So I decided to open up GitHub discussions.

When I created this post, we had a few people new to the repository feel welcomed to contribute and happy that there was a place to connect with me and other contributors.

Now that everything was in place, the countdown to Hacktoberfest was underway.

Lessons I learned during Hacktoberfest

Right from day 1, I was pretty busy reviewing pull requests and helping new contributors get started in open source. But the whole experience was very educational and rewarding.

Here are a few lessons that I learned during this time.

Lead with patience, empathy, and kindness

We were all beginners once, and sometimes it is scary to learn something new. I made sure to lead with kindness and empathy because I remember what it was like to just start out in open source.

Every time a new question came in, I made sure to reply back and provide as much as assistance as I could to help them resolve the issue. This resulted in a welcoming and safe environment to learn.

We also had times where some contributors wanted to add quiz questions but were nervous because English is not their first language. My job was to assure them that I was here to help and not pass judgement on spelling or grammar mistakes.

I believe that helped in the larger volume of quiz questions we ended up getting.

Don't get worked up over spam

One of the downsides to Hacktoberfest is the increased amount of spam pull requests for open source maintainers. While this is frustrating to deal with, I learned pretty quickly to just close the PR, label it as spam, and move on.

There was no point in arguing with them or getting upset because that is wasted energy. The majority of people did want to meaningfully contribute and that is where I chose to spend my energy.

How to gracefully close PR's that will not be accepted

One of the surprising issues that came up were people wanting to take quiz questions and explanations from other quiz sites and add it to freeCodeCamp's Developer Quiz Site. The first couple of times this happened, I closed the pull request and let them know that this is plagiarism and we can't accept that.

Well, I received a response back from one contributor stating that they didn't realize and they wanted to know if they could try again. I assured them that they were free to create a new PR and I could help them with any spelling or grammar.

This led me to revise my response to let contributors know that they weren't in trouble and were free to contribute again in the future with their own questions.

This helped to maintain a healthy open source environment and most of those cases ended up being prolific contributors after they understood the rules.

Conclusion

I am really glad that I participated as a maintainer in this year's Hacktoberfest. I learned a lot about communication, empathy, patience, and leadership.

I hope my post encourages you to want to get involved with open source either as a maintainer or contributor in the future.

In this article, I will talk about the typical day of a software developer and what to expect on the job.

Main Responsibilities of a Software Developer

As a software developer, your main responsibilities will include fixing bugs in the codebase, building out new features, writing tests for the applications, writing documentation, performing code reviews, and participating in team discussion meetings.

Very experienced developers, like software architects, will be responsible for the higher level technical and architectural decisions for the software applications.

Let's take a look at each of these responsibilities in greater detail.

Debugging Codebases and Fixing Bugs

When you first start out as a software developer, one of your main responsibilities will be to work on small bug fixes and debugging small errors in the codebase.

There will be a list of tickets (issues) that will break up the work into manageable pieces, and some of them will include bugs in the application.

You will pick up some of the small ticket items which will help you learn the codebase. It is standard as a junior developer to spend the first couple of months ramping up with a codebase and with the new job in general.

Just make sure to ask plenty of questions and try to pair program with other developers on the team. Working with other developers will help you learn new techniques and grow faster.

I have learned a lot from my coworkers, and most of the time a fresh pair of eyes have helped me see the problem in a different way.

Building New Features

As you start to become more comfortable with the job and gain more experience, you will start to be given more responsibility with the codebase. This is where building out new features comes in.

Features are essential components of the software product. This type of work will take longer than small bug fixes and give you an opportunity to contribute more to the project.

This will also provide you with the opportunity to work on more complex problems and grow more as a developer. The first feature I worked on was to implement a light/dark theme for the company website.

I spent time thinking about the best approach on how to implement this feature for our existing codebase. Then I went about implementing my solution and testing out the website.

The final phase was to go through code reviews and update the website documentation to include the new feature.

The whole experience taught me how to build out solutions that were maintainable and scalable that would work well with the existing codebase.

Writing Tests for the Applications

One important element of software applications is ensure that they work they way they are supposed to work. This is where testing comes in.

Software developers are responsible for writing different types of tests like unit tests, integrated tests, functional tests and more. They might also engage in manual testing which includes the developer going through the application with a set of test cases and ensuring it is working the way it is supposed to.

One of my first experiences with testing came in the form of smoke testing and writing manual test guides for a couple of our apps. Smoke testing is where the developer will go through the application and ensure that basic functionality is intact.

Writing test guides involves the developer going through all of the features of the application and creating test cases. These test cases involve writing down the exact steps a user should go through and the expected outcome.

The first time I had to write a manual test guide, I didn't realize how specific I needed to be in writing out each step. But once I wrote a few test cases, the process started to make more sense and it became easier to write these manual test cases.

If you are interested to learn more about testing, then I suggest you read this helpful freeCodeCamp article.

Writing Documentation

Documentation is an important part of any software application. It is important to document the main features of the application as well as all of the steps required to run it locally for developers.

Whenever you join a new project, and you notice anything confusing or missing about the documentation, make sure to bring it up with the team. That would be a good opportunity to update the documentation.

Sometimes when you are working on a project and the team is busy with meeting deadlines, documentation can sometime fall behind. When things calm down a bit, make sure to revisit the documentation and make sure it is up to date and accurate.

Performing Code Reviews

Building software is a team activity, and it important that everyone on the team has their code reviewed by their peers. When you have made changes to the codebase you will create what is called a pull request.

That pull request represents the changes you want to add to the codebase. You will then request a review from team members and they will look over your code and provide feedback.

It is important to view the feedback as constructive, because your team is just trying to help catch issues and make suggestions on how to optimize your solution.

It is also important to provide constructive feedback and ensure that everything in the pull request fixes the issue or meets the requirements of the new feature.

To learn more about the code review process, please read through this helpful freeCodeCamp article.

Participating in Team Discussion Meetings

There are a lot of moving components that go into building software products. It is important that the entire team is on the same page during the entire application process.

The goal of these meetings is for each team member to share status updates with the team and share any blockers that are preventing them from moving forward on the project. If you are newer to software development, it can be intimidating to participate in meetings.

You might also feel overwhelmed with some of the discussion and all of the new terminology being used in the meeting. Just try to ask questions and remember that it takes a while to understand all of the ins and outs for the software process.

My natural inclination is to be more reserved in meetings, but I have made more of an effort to speak up and ask questions on what I don't understand. Sometimes you will learn that other people had the same question and were glad that you asked that question.

Try your best to actively participate in meetings and share your input on the project and ask questions on what you need help with.

Conclusion

As you can see, there are a lot of components to building out software products. Your days won't be spent writing code 8 hours straight.

Instead, your days will be filled with meetings, pair programing sessions, debugging code, reading documentation, writing documentation, and testing software.

I hope you enjoyed this article and have a better understanding what it is like to be a software developer. Best of luck on your software journey.