freecodecamp / learn Goto Github PK

freeCodeCamp's learning platform with 2,000 interactive coding challenges

Home Page: https://learn.freecodecamp.org

License: BSD 3-Clause "New" or "Revised" License

JavaScript 89.53% CSS 10.47%

learn's Introduction

freeCodeCamp.org's open-source codebase and curriculum

freeCodeCamp.org is a friendly community where you can learn to code for free. It is run by a donor-supported 501(c)(3) charity to help millions of busy adults transition into tech. Our community has already helped more than 40,000 people get their first developer job.

Our full-stack web development and machine learning curriculum is completely free and self-paced. We have thousands of interactive coding challenges to help you expand your skills.

Certifications
The Learning Platform
Reporting Bugs and Issues
Reporting Security Issues and Responsible Disclosure
Contributing
Platform, Build and Deployment Status
License

Certifications

freeCodeCamp.org offers several free developer certifications. Each of these certifications involves building 5 required web app projects, along with hundreds of optional coding challenges to help you prepare for those projects. We estimate that each certification will take a beginner programmer around 300 hours to earn.

Each of these 50 projects in the freeCodeCamp.org curriculum has its own agile user stories and automated tests. These help you build up your project incrementally and ensure you've fulfilled all the user stories before you submit it.

You can pull in these test suites through freeCodeCamp's CDN. This means you can build these projects on websites like CodePen and Replit - or even on your local computer's development environment.

Once you've earned a certification, you will always have it. You will always be able to link to it from your LinkedIn or resume. And when your prospective employers or freelance clients click that link, they'll see a verified certification specific to you.

The one exception to this is if we discover violations of our Academic Honesty Policy. When we catch people unambiguously plagiarizing (submitting other people's code or projects as their own without citation), we do what all rigorous institutions of learning should do - we revoke their certifications and ban those people.

Here are our twelve core certifications:

1. Responsive Web Design Certification

2. JavaScript Algorithms and Data Structures Certification

3. Front End Libraries Certification

Bootstrap
jQuery
Sass
React
Redux
React and Redux

Projects: Random Quote Machine, Markdown Previewer, Drum Machine, JavaScript Calculator, 25 + 5 Clock

4. Data Visualization Certification

Data Visualization with D3
JSON APIs and Ajax

Projects: Bar Chart, Scatterplot Graph, Heat Map, Choropleth Map, Treemap Diagram

5. Relational Database

6. Back End Development and APIs Certification

7. Quality Assurance Certification

8. Scientific Computing with Python Certification

Introduction to Python for Everybody

Projects: Arithmetic Formatter, Time Calculator, Budget App, Polygon Area Calculator, Probability Calculator

9. Data Analysis with Python Certification

10. Information Security Certification

11. Machine Learning with Python Certification

12. College Algebra with Python

Legacy Full Stack Development Certification

Once you have earned the Responsive Web Design, Algorithms and Data Structures, Front End Development Libraries, Data Visualization, Back End Development and APIs, and Legacy Information Security and Quality Assurance certifications, you'll be able to claim your freeCodeCamp.org Full Stack Development Certification. This distinction signifies that you've completed around 1,800 hours of coding with a wide range of web development tools.

Legacy Certifications

We also have 4 legacy certifications dating back to our 2015 curriculum, which are still available. All of the required projects for these legacy certifications will remain available on freeCodeCamp.org.

Legacy Front End Development Certification
Legacy Data Visualization Certification
Legacy Back End Development Certification
Legacy Information Security and Quality Assurance Certification

Free professional certifications

(New) Foundational C# with Microsoft

The Learning Platform

This code is running live at freeCodeCamp.org.

Our community also has:

A forum where you can usually get programming help or project feedback within hours.
A YouTube channel with free courses on Python, SQL, Android, and a wide variety of other technologies.
A technical publication with thousands of programming tutorials and articles about mathematics and computer science.
A Discord server where you can hang out and talk with developers and people who are learning to code.

Join the community here.

Reporting Bugs and Issues

If you think you've found a bug, first read the how to report a bug article and follow its instructions.

If you're confident it's a new bug and have confirmed that someone else is facing the same issue, go ahead and create a new GitHub issue. Be sure to include as much information as possible so we can reproduce the bug.

Reporting Security Issues and Responsible Disclosure

We appreciate responsible disclosure of vulnerabilities that might impact the integrity of our platforms and users.

Read our security policy and follow these steps to report a vulnerability.

Contributing

The freeCodeCamp.org community is possible thanks to thousands of kind volunteers like you. We welcome all contributions to the community and are excited to welcome you aboard.

Please follow these steps to contribute.

Recent Contributions:

Platform, Build, and Deployment Status

The general platform status for all our applications is available at status.freecodecamp.org. The build and deployment status for the code is available in our DevOps Guide.

License

The content of this repository is bound by the following licenses:

The computer software is licensed under the BSD-3-Clause license.
The learning resources in the /curriculum directory including their subdirectories thereon are copyright © 2024 freeCodeCamp.org

learn's People

Contributors

Stargazers

Watchers

Forkers

bouncey scissorsneedfoodtoo simbaxo vkweb rajarshi1 hsribei tchaffee iabrenne nikrb alvinkl oguduvictor emaamodt joops75 dereje1 rsyehann rushughes dawnwoodson skatsa dverdin83 petemiller89 kudeh jahbenjah shanf-gh dmeredith96 jayyargh mblancodev frandarko angelyoung24 westminsterabi vorabrijesh skobraf mouri11 renojvarghese jesseh42t scrawlon cpdis matthew-t-smith anku255 usamagazay iamsuryau eolculnamo2 mtfelisb sarah1010x sr-cyber manish-giri nandit123 dancouper freecodecamptaiwan hayanisaid ceoehis edisplay jromest owlfox quincylarson kareniel chrislmartin ktajpuri zacharie-pertgen gforce2k5 only1dallas tortxof ahonnet software-company lana-light gundu91 wordaddict valeras iarobinson ankitm27 bvipul wadleo inikel arunabhp75 rivera1294 troubleminds kietly joshalling user512 akshaykumarmonap beaucarnes ethan-arrowood arunkumarramanan katastroffa shantdashjian chaitanyaashtekar ugoson lindakovacs katieyang hzuni samueltang-x alexch nitronr glynl arijitthehacker zolbayars chris-tse torilin nonamenoslogan tyj144 jusmreid

learn's Issues

User integration

Fetch user challenge map
Indicate completed challenges in the map
Update backend on challenge completion

Should intro pages index challenges for the block being introduced

It wouldn't be too much work to have each intro page host a table of contents for the upcoming block.

Generation of these tables will be programmatic.

Thoughts @QuincyLarson

/current-challenge on home does not have my current challenge.

@raisedadead commented on Fri May 25 2018

I think my last challenge before this was at HTML Uncomment Elements

Preview area empty when lesson loads

Challenge Name
Affects all the HTML and CSS lessons

Browser Information
Browser Name, Version:
Firefox Quantum 60.0.1 (64-bit)
Chrome: Version 66.0.3359.117 (64-bit)
Operating System: Windows 10 Pro 64-bit
Mobile, Desktop, or Tablet: Dell Latitude Laptop (15")

Issue Description
The lesson(s) load with an empty preview area, the content appears once code starts to be entered into the editor. I am not certain if this is intentional but reporting it anyway.

On-Load:

After typing code:

Add favicons

Unable to vertically resize code / tests frames

The mouse curser indicates that it should be possible to vertically resize the code / test frames. However, it is not possible. For a better user experience for people on small screens, this should be possible. See gif below.

Carets in the map shrink in size when the associated text wraps

Pane re-sizing allows you to shrink but not expand

Challenge Name
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements
Issue Description
There are several issues here (similar to the issue that already existed in Beta):

When shrinking and expanding the lesson pane => the editor size does not expand to the new pane size when expanding the lesson pane. No issue on expanding the lesson pane, adjusts accordingly
Shirking the editor window is fine, expanding has several issues
a) does not allow you to expand the editor window, this green highlighted bar shows up

b) to get the editor back, you need to re-size the lesson plan, then you can re-size the editor/preview pane
After attempting to expand the editor/preview pane which fails, if you move your cursor over the lesson pane ( no mouse button is clicked) the cusor changes to from arrow to expanding icon and it resizes the editor/preview pane and follows the mouse movement.

Disable the intellisense on the Monaco editor

The autocomplete intellisense on the monaco editor brings up a huge load of things that we do not want, its best we disable it.

beta FCC React-Redux section errors halt progress

Specifically, in the react-redux section, upon running tests on the challenges after I've finished the code (which I know 100% is correct from visiting previous solves and other forum posts) I am presented with the following issues:

"Cannot read property 'rendered' of undefined" (note that this one appears in the console window below the code editor and not the chrome console). After google searching this issue, I tried adding one line of code: " import ReactDOM from 'react-dom'; " and got error: 'require is not defined'

Not sure if these miscellaneous errors are relevant:
going to the home page of beta.fcc.org I get two errors:

vendor-main-eb0b5913eb.js:27
Uncaught TypeError: Cannot read property 'version' of undefined
at vendor-main-eb0b5913eb.js:27
at vendor-main-eb0b5913eb.js:27
at vendor-main-eb0b5913eb.js:27

and

main.js:1
Uncaught ReferenceError: require is not defined
at main.js:1

Upon trying to load any challenge page (before running any tests) I get the following error:

Uncaught (in promise) TypeError: Request scheme 'chrome-extension' is unsupported
at sw.js:279

Use gatsby-plugin-sitemap

Map Modal does not close automatically when selecting a lesson from map

Challenge Name
Not a challenge - main page issue

Issue Description
When selecting a lesson from the modal, it re-directs you to the challenge but the modal does not close automatically, you need to use the 'x' to close out the modal.

This happens from the map on the main page and also if you select the 'View the curriculum' button when on a lesson to view the map.

Increase the spacing in between the challenges

Add transitions from end of block -> intro page -> first challenge of next block

Files to touch include:

./gatsby-node.js
./templates/Introduction/Intro.js
completion-epic.js

Modal background not long enough

The curriculum map modal background does not continue to the bottom of a long list. See below.

Pasting into editor menu text is too dark - visibility issue

Challenge Name
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements

Issue Description
Right clicking into the editor to paste text from lesson, the menu items are hard to see as its green on dark grey

Test Results in Preview Pane showing passed on incorrect code

Challenge Name
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements
Issue Description
The test results in the preview pane are showing as all passed but the code is incorrect. The editor console is showing the correct information.

Test results overlap onto the preview area when panes at default size

Challenge Name
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property
Issue Description
The test results are overlapping the preview area at the default pane size. The ❌ or ✔️ appear to be too large, making either:

the text squished together
the text to overlap into the preview section of the pane

Code Storage

Add submitted code to localStorage
Retrieve saved code from localStorage
Clear saved code on challenge reset

Editor test results logging special characters instead of text

Challenge Name
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements

Issue Description
The test results in the editor are logging special characters rather than the text those characters represent

Many introductory challenges missing from learn curriculum

The challenge titled "Introduction to the Managing Packages with npm Challenges" is in beta but not in learn. Many other introductory challenges are also missing. They are important because they introduce Glitch which is referred to in many other tasks.

Many tasks start with the line, "As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub." Without this missing task, we are reminding people of something we never told them.

See screenshot with learn and beta side-by-side. There are many more missing introductions not shown.

Example link in lesson text opens to FCC website in same tab

Challenge Name
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph

Issue Description
In the lesson text opens to freecodecamp.org website in the same tab. My suggestion is to have it open to a new tab so the camper does not lose lesson they are on.

All challenge views should have a completion modal

Cannot return to Curriculum map from section intro page

Challenge Name
Not Challenge Specific - it originates from the curriculum map - section introduction pages
(eg: https://learn.freecodecamp.org/responsive-web-design/applied-visual-design )

Issue Description:
From any challenge if :

Select the 'View the Curriculum"
Select any main section (not the lessons), it brings me to a introduction page for that section
if I made a mistake, I can't get back to the map. I have to select a lesson to get the 'View the Curriculum" button back or use the back button on the browser to get back to the last lesson that was accessed

CTRL + Enter doesn't work to complete challenges (RWD)

Challenge Name
All Projects under Responsive Web Design
(i.e) https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

Issue Description:
CTRL + Enter is not working to mark the project as completed. The button is working as normal.
There is no error in the console when using the CTRL + Enter to mark project complete.

Various Style and wording issues with learn

While QA'ing another PR I noticed several minor style and wording issues.

Update challenge.successMessage on a 'per challenge' basis

The success message is what is displayed in the completion modal header, it defaults to 'Happy Coding!'.

Before we used a words.json available here. This should be acceptable to use again.

"yarn develop" fails

yarn develop was working fine for me until today when I did a rebase over master. After the rebase, I ran yarn install which completed succesfully.

Now I'm getting this error when running yarn develop:

info bootstrap finished - 21.409 s

error Class constructor DefinePlugin cannot be invoked without 'new'


  TypeError: Class constructor DefinePlugin cannot be invoked without 'new'
  
  - plugin.js:8 new F
    [learn]/[webpack-configurator]/lib/resolve/plugin.js:8:33
  
  - plugin.js:13 
    [learn]/[webpack-configurator]/lib/resolve/plugin.js:13:16
  
  - plugin.js:14 module.exports
    [learn]/[webpack-configurator]/lib/resolve/plugin.js:14:8
  
  - index.js:180 Config.resolve
    [learn]/[webpack-configurator]/index.js:180:22
  
  - webpack-modify-validate.js:45 _callee$
    [learn]/[gatsby]/src/utils/webpack-modify-validate.js:45:43
  
  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7
  
  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9
  

error Command failed with exit code 1.

node --version

v8.11.1

npm --version

5.6.0

$(npm bin)/yarn --version

1.6.0

Ubuntu 16.04.4

Map expands past the modal

Challenge Name

Not a challenge - main page issue

Issue Description

When accessing the map from the main page => Explore the lesson map (button) => expand several menu group items in the modal and it exceeds the modal size

Browser Information

Browser Name, Version:
Firefox Quantum 60.0.1 (64-bit)
Chrome: Version 66.0.3359.117 (64-bit)
Operating System: Windows 10 Pro 64-bit
Mobile, Desktop, or Tablet: Dell Latitude Laptop (15")

Your Code

Selecting item in curriculum map should close modal

Selecting item in curriculum map should close map modal. Currently it updates the page but the modal stays open.

Swap out the copy-webpack-plugin for monaco-editor-webpack-plugin

We edit the webpack config though ./gatsby-node.js, near the bottom of the file

inconsistent const variable declaration

Challenge Name
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const

Issue Description:
The previous challenge ES6 - Declare a Read-Only Variable with the const Keyword enforces the const variable to be declared in all uppercase letters, where as the Mutate an Array Declared with const lesson does not, it accepts the const variable declared in lowercase letters.

Add backend challenges

view
tests

Swap out redux for apollo-link-state

In prep for graphql api

'yarn develop' gets error with buildChallenges.js

After a fresh clone of this project and a successful yarn install, I get the following error messages when running yarn develop:

success delete html and css files from previous builds — 0.008 s
error We encountered an error while trying to load your site's gatsby-config.js. Please fix the error and try again.


  Error: /home/tc/ws/learn/seed/buildChallenges.js:78
                ...file,
                ^^^
  SyntaxError: Unexpected token ...

jQuery code appears in the preview pane

Challenge Name(s)
jQuery - Target HTML Elements with Selectors Using jQuery
https://learn.freecodecamp.org/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery
then each lesson in jQuery following this one ..
it appears to be affecting the challenges as I can't pass any of them

Issue Description:
The jQuery code is appearing in the preview pane on the right hand side. This occurs as of the Target HTML Elements with Selectors Using jQuery. I have tested a majority of the lessons and the lessons don't pass.

possible error in challenge description

Challenge: "Basic HTML and HTML5 - Create a Set of Radio Buttons"
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

Here is the relevant text in the description for this challenge:

Each of your radio buttons should be nested within its own label element. Wrapping an input element inside of a label element makes the label text clickable.

It is NOT necessary to wrap an input element inside of a label element to make the text clickable as long as there is a for field on the label that matches the id of the input. The recommendation on fCC is contrary to what is shown at MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

It works either way so this is not necessarily an error but I think it is best to change this to go along with MDN.

Assert tests appear in the preview window while typing in editor

Challenge Name
https://learn.freecodecamp.org/responsive-web-design/basic-css/prioritize-one-style-over-another

Issue Description
The assert tests show up in the preview pane while typing in the editor. It disappears once the complete needed code is written.

The message is actually quite long.. a small screenshot has been provided

Links to Glitch starter project should open in new window

Some challenges link to a Glitch starter project. The link opens in the same window. It would be more user-freindly if the link opened in a new window/tab. Most people clicking on that link will want the fCC page to still be open so they can submit their project. This also applies to GitHub link.

Example url: https://deploy-preview-45--freecodecamp-learn.netlify.com/information-security-and-quality-assurance/advanced-node-and-express/use-a-template-engines-powers

Image of one page that has the link:

JSONP errors when new bundle available (ServiceWorker)

Well sorry for the bad background information on this one... 😅

Unfortunately I don't have much information as I can't reproduce it.

This happened on the very first page load - all subsequent ones worked perfectly.

The Firefox v60.0.1 dev tools warned about 3 scripts that failed to load.
When I clicked the button to open curricullum on the landing page, it threw an error instead of opening the modal.

The error said something about JSONP - but unfortunately I hit the refresh-button instead of screenshot-button...

Thanks for the work on the learn-update though. Keep it up! 🙂

Monaco Editor should use the light mode in the light version of the learn app.

The theme to be used on the monaco editor should be light one on the light version of learn

Stub superBlock index pages

Much like we moved the introduction challenges to markdown, see /responsive-web-design/basic-css for an idea of what I am talking about, We would like to so the same to /superBlock routes.

Step one is to stub the pages until we have a better idea as to what they will look like and how they will function.

Each top-level folder in the /src/introductions directory should have and index.md file. The contents of this markdown file should be

---
title: <Title of the superBlock (Title Case)>
superBlock: <Title of the superBlock (Title Case)>
---
This is a stub introduction for <Title of the superBlock (Title Case)>

In /src/utils/gatsby, the createIntroPages function will need to be changed to check for the presence of block in the values passed to it. If block is falsey, we should create the page with a different component. This is the current Intro component is not compatible with the what we have in the superBlock stubs.
Create a SuperBlockIntro component in /src/templates, all we want it to do for now is render the html passed to it. See the Introduction component to see how the graphql query is structured and how the data is passed in as props.
Most importantly, have fun!

If you get stuck, reach out to us and ask all the questions! No question is a silly question if you don't know the answer.

General React/Jest testing errors

@LBWright commented on Mon May 21 2018

Describe your problem and - if possible - how to reproduce it

Going through Beta with React and after going through a few of the classes, I'm receiving errors or the tests just aren't passing. The first error is f(...) undefined' in the stateless component section. The second of the errors is Enzyme Internal Error: unknown composite type undefinedin theCreate a React Component` page.
This problem is reproduced by just providing the solution to the problem.

I've heard of these issues when the package.json and the Jest configuration don't match but I could also be completely wrong.

Add a Link to the page with the problem

https://learn.freecodecamp.org/front-end-libraries/react/create-a-react-component

Tell us about your browser and operating system

Browser Name: Firefox
Browser Version: UTD
Operating System: Ubuntu 16.04

If possible, add a screenshot here

@LBWright commented on Mon May 21 2018

Went ahead and tried one more and got the same error.

Test suite for projects is not working

The test suite on projects is not working. Projects pass no matter what. This seems to apply to all projects.

In the example below, I should not have passed by entering 'http://freecodecamp.org'.

Error Messages When Running yarn develop

@Bouncey, I saw Quincy announce this new web app over on Gitter. Can't wait to get it running and see how everything works!

However, when I run yarn develop, I get the following error:

 ERROR  Failed to compile with 3 errors                               16:22:30

These dependencies were not found:

* /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-object-oriented-programming-use-closure-to-protect-properties-within-an-object-from-being-modified-externally.json in ./.cache/sync-requires.js
* /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.json in ./.cache/sync-requires.js
* /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.json in ./.cache/sync-requires.js

To install them, you can run: npm install --save /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-object-oriented-programming-use-closure-to-protect-properties-within-an-object-from-being-modified-externally.json /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.json /home/kris/Documents/GitHub/forks/learn/.cache/json/javascript-algorithms-and-data-structures-functional-programming-use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.json

When I try to run npm install --save ... from the error message, I get an error from npm saying that the filename is too long. I believe it's because my home directory is encrypted, so filenames can only be ~143 characters.

Is there an easy way to work around this limitation? Maybe change the way that the files are saved in .cache/json? I tried poking around the codebase to find a way to get the files to save folders and create a longer path / shorten the actual filenames, but wasn't able to figure out how to do so.

Challenge Reset

Reset editor to the challenge seed, can be found in state.challenge.files

Disable the minimap view on the monaco editor

We do not want the minimap on the monaco editor.

Add interview prep section to Learn

Coding Interview Prep:

Algorithm Questions
Data Structure Questions
Take-home Projects

And also add the Information Security and Quality Assurance certification back in.

need to fix typo and add info about env in the Contributing file.

When I follow the step to step.
after I run the yarn develop. I went to check browser. I checked the site. I got white page and an error in the console.

I didn't realize, I have to create env file. since set up the step to step didn't tell us, we need to do it before run yarn develop

more like we need to info them about it. as the user use learn repo first time.

about typo,
4. git branch -b <your-branch-name> is typo.
i think correct info is 4. git checkout -b <your-branch-name>

Glitch starter project should have all references to 'HyperDev' changed to 'glitch'

This issue is not actually in the codebase but it is part of the curriculum. The Glitch starter project should have all references to 'HyperDev' changed to 'glitch'. @QuincyLarson may have to do this one and it may not be high priority.