Introduction Page

[alayek]

Add an introduction page to introduce sections of the curriculum

The Problem

• The different sections cover many topics but never give an overview of how everything fits together.
• Prerequisites - we don't state what's expected of the camper before starting the section.
• What can they expect from the section - never explicitly stated.

  Proposed Solution

We think we need to add an introduction page to each section under the curriculum expansion. This page, for each section, should cover all the necessary info a camper would need to know about the section, such as:

• when they should complete it
• how important it is to their goal etc.

For example RegEx, HTML, CSS, Accessibility, ES6 etc. or another clear example: the backend challenges which cover a lot of topics but never give an overview of how the challenges fit together, what's required to know

// @Greenheart and @alayek

Similar introduction course prolgue is found on most other MOOC sites as well.

The introduction is always so hard to fit into the first challenge's content - you don't have time to explain the extremely important "general picture" that learners need before they can focus on the section's details

It should be a simple page, with text and diagram, or even a gif or a video would be fine

Probably a text since it's easier to maintain and keep up to date than a video

---

Here are the challenges for which we need intro sections :

• [ ] Front-End
  • [ ] HTML
  • [x] CSS3
  • [ ] Basic JavaScript Challenges
  • [x] Object-Oriented Design
  • [ ] User Experience Design Challenges
  • [x] CSS Flexbox Challenges
  • [x] SASS Challenges
  • [ ] Pure CSS Portfolio Project
  • [x] Applied Visual Design
  • [x] Accessibility
  • [x] ES6 Challenges
  • [x] Functional Programming
  • [x] RegEx Challenges
  • [x] JSON APIs and AJAX
  • [x] React Challenges
  • [ ] Redux Challenges
  • [ ] React with Redux Challenges
  • [x] D3 Challenges
• [ ] Backend Challenges
  • [x] Node Modules with NPM
  • [x] Node JS and Express
  • [x] Mongo and Mongoose
  • [ ] API Projects
  • [ ] Information Security with Helmet JS
  • [ ] QA with Chai
  • [ ] Dynamic Web Apps
• [ ] Interview topics
  • [ ] Advanced Data Structures
  • [ ] Advanced Algorithm Design

---

@FreeCodeCamp/issue-moderators FYI.

[QuincyLarson]

@alayek Great idea.

I talked with @BerkeleyTrue on the phone about this. I agree 💯 that we need these. Berkeley is looking into exactly how we would cover them. Each of these would probably be only be a couple paragraphs, and would potentially contain an image of the badge the camper will get for completing the section (though we probably won't start working on the badge system until Q4 2016).

These would also provide significant SEO value, and would be convenient for linking campers to specific sections of the curriculum (currently, I have to link people to /map and tell them to scroll down).

One thing we're pretty sure about - all of these would have uniform paths, such as: "http://beta.freecodecamp.com/es/challenges/javascript/about"

[HKuz]

Hi @alayek - I'm working on the applied accessibility challenges (issue #9) and inadvertently wrote some intro text that got to be too long for the first challenge, so it was split out. Let me know if you want me to re-post it here, or if that link to the original post is sufficient.

[RexRowan]

Bravo bravo, great minds think alike! I'll contribute! :smiley:

[HKuz]

Link to issue #47 Debugging challenges intro text

[gopherine]

I would like to work on this if possible seems a good beginner task and this issue even i was thinking today that there should be an overview of the content comming up next and what is it actually about like a mini wiki.. would start from any section which you would want me to do

[HKuz]

Hi @atharvajava - you can certainly help write introductory text for sections! I've been handling it so far for the new curriculum expansion sections, but the plan is to have introductory 'landing pages' for every section (new and original) in the FCC curriculum.

For the latest list of all topics, please reference issue #46 - it's more recent than the one above.

If you want to work on any of the new (curriculum expansion) sections, you can see what I've completed and what is outstanding in issue #52. (Issue 52 is more up-to-date for the new sections than 46). Make sure to coordinate with me if you want to start on any of those so we don't overlap work 😄. I'm currently working on the D3 section. Generally, I post the first draft of the text in the issue for the topic and ask for feedback and comments from the team. You can check out this comment for a list of some examples of what I've done.

All topics in the current FCC curriculum are fair game (HTML, CSS, JavaScript, jQuery, Bootstrap, etc.). These sections don't have their own issues in this repo, with the exception of HTML & CSS. We're splitting those 2 in the new curriculum and each will need its own intro - see issue #74. Other than HTML and CSS, you can post your work on this issue.

There isn't an official style guide, but here are some suggestions based on the feedback I've received so far:

• use simple language that is a non-native English speaker could understand
• keep sentences short and direct
• keep paragraphs short - folks are more likely to read several short paragraphs than a wall of text. (I've been aiming for ~2-4 sentences per paragraph and, depending on the topic, 1-4 paragraphs)
• try to limit any jargon. If you need to use it, define it using simple language
• use second person singular ("you", "your") instead of "we", "let's", or "us"
• don't use emojis - they don't render the same on all machines. Also, FCC has a global user base, and emojis may have different cultural meanings in different parts of the world
• try to avoid idioms or culturally-specific analogies

The Hemingway Editor is a useful tool to help with some of the points above.

Feel free to ask any questions here, in the Contributors chat room, or message me directly on Gitter. Thank you! 🎉 :shipit: 👍

[dhcodes]

@HKuz Below is a first go at the intro page for CSS. You can give me feedback here or via Gitter. Also, feel free to make edits directly in this post.

CSS

Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML. CSS has been adopted by all major browsers and allows you to control:

• colors
• fonts
• positioning
• spacing
• sizing
• decorations
• transitions

CSS can be applied both as inline styles--typed directly within your HTML tags--or external style sheets--typed in a separate file that is referenced from your HTML file. Most developers prefer external style sheets because they keep the styles separate from the HTML elements, therefore improving the readability and reusability of your code.

The idea behind CSS is that you can use a selector to target an HTML element in the DOM (Document Object Model) and then apply a variety of attributes to that element to change the way it is displayed on the page.

In this section, you'll see how adding CSS styles to the elements of your CatPhotoApp can change it from simple text to something more.

[HKuz]

This is solid, @dhcodes - nice job! 👍 I may make some minor text tweaks for consistency with the other sections, but you hit on all the key points of CSS. Thank you! ✨ 🎉

[QuincyLarson]

@dhcodes This reads great.

A couple very minor suggestions:

manipulate -> control

"the latter is the preferred method as it keeps" -> "Most developers prefer external style sheets because they keep"

[dhcodes]

@HKuz Added a potential React intro page below.

React

React is a JavaScript library designed to make it easier to build complex user interfaces. React does this in a few ways:

1. React allows HTML to render from a JavaScript file.
2. React breaks a website's parts into Components that can then be combined to build pages.
3. React Components can pass data to each other as properties

React uses a virtual Document Object Model. Instead of changing the DOM directly, React makes a simplified copy of the DOM (the virtual DOM) when the page loads. This allows React to make changes to elements on the page without re-rendering the entire page. This can improve the responsiveness and functionality of single-page applications.

While not part of the React library and not required, JSX is often paired with React. JSX is a preprocessor for JavaScript written in a syntax akin to XML that results in more readable code.

Fun fact: freeCodeCamp is built using React.

[QuincyLarson]

@dhcodes This looks great! I think we could drop the part about it being maintained by Facebook and "shared under a BSD license" as most people will not know what that means and it would be distracting for them to go look it up.

[HKuz]

Thanks @dhcodes and well done 👍!

[dhcodes]

@HKuz @QuincyLarson Below is a proposed description for node modules with npm. I've left npm lowercase as this seems to be their style (see Wikipedia entry that is lowercase):

Node Modules with npm

The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js.

When starting a new project, npm generates a package.json file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project.

npm saves packages in a folder named node_modules. These packages can be installed in two ways:

1. globally in a root node_modules folder, accessible by all projects.
2. locally within a project's own node_modules folder, accessible only to that project.

Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects.

[Greenheart]

Nice work Dylan! :)

tisdag 15 november 2016 skrev Dylan notifications@github.com:

@HKuz https://github.com/HKuz @QuincyLarson https://github.com/QuincyLarson Below is a proposed description for node modules with npm. I've left npm lowercase as this seems to be their style (see Wikipedia entry that is lowercase): Node Modules with npm

The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of Javascript code written for use with Node.js.

When starting a new project, npm generates a package.json file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project.

npm saves packages in a folder named node_modules. These packages can be installed in two ways:

1. globally in a root node_modules folder, accessible by all projects.
2. locally within a project's own node_modules folder, accessible only to that project.

Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/CurriculumExpansion/issues/45#issuecomment-260726781, or mute the thread https://github.com/notifications/unsubscribe-auth/AF12KRqHBsgNYmjzK7riWSrXsLNZ94Glks5q-fungaJpZM4JkhlU .

[HKuz]

Looks good, @dhcodes!

[dhcodes]

Below is a proposed introduction draft for the ES6 challenges:

ES6 Challenges

ECMAScript is a standardized version of JavaScript with the goal of unifying the language's specifications and features. As all major browsers and JavaScript-runtimes follow this specification, the term ECMAScript is interchangeable with the term JavaScript.

Most of the challenges on freeCodeCamp use the ECMAScript 5 (ES5) specification of the language, finalized in 2009. But JavaScript is an evolving programming language. As features are added and revisions are made, new versions of the language are released for use by developers.

The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. This new version of the language adds some powerful features that will be covered in this section of challenges, including:

• Arrow functions
• Classes
• Modules
• Promises
• Generators
• let and const

Note: Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6.

[Greenheart]

Yet again a solid introduction :)

How about changing "As all major browsers" to "As all major browsers and other JavaScript-runtimes"

It would add complexity, but emphasise that the language is used in multiple environments. This could be relevant since we're talking about the broader ecosystem and not just the web browsers.

torsdag 17 november 2016 skrev Dylan notifications@github.com:

Below is a proposed introduction draft for the ES6 challenges: ES6 Challenges

ECMAScript is a standardized version of Javascript with the goal of unifying the language's specifications and features. As all major browsers follow this specification, the term ECMAScript is interchangeable with the term Javascript.

Most of the challenges on freeCodeCamp use the ECMAScript 5 (ES5) specification of the language, finalized in 2009. But Javascript is an evolving programming language. As as features are added and revisions are made, new versions of the language are released for use by developers.

The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. This new version of the language adds some powerful features that will be covered in this section of challenges, including:

• Arrow functions
• Classes
• Modules
• Promises
• Generators
• let and const

Note: Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/FreeCodeCamp/CurriculumExpansion/issues/45#issuecomment-261376720, or mute the thread https://github.com/notifications/unsubscribe-auth/AF12KUGOvCUb0AQYkhsE6aDxmtr1yxeoks5q_MhegaJpZM4JkhlU .

[dhcodes]

Struggles a bit more with Node.js and Express but here goes nothing:

Node.js and Express

Node.js is a JavaScript tool that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules--small, independent programs--that help facilitate this purpose. Some of the core modules include:

• HTTP, a module that acts as a server
• File System, a module that reads and modifies files
• Path, a module for working with directory and file paths
• Assertion Testing, a module that checks code against prescribed constraints

Express, while not included with Node.js, is another module often used with it. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing. Routing directs users to the correct page based on their interaction with the application.

While there are alternatives to using Express, its simplicity makes it a good place to begin when learning the interaction between a backend powered by Node.js and the frontend.

[QuincyLarson]

@dhcodes it's very hard to define Node.js in a way that will keep purists happy. But I'll be honest - a newcomer won't understand "JavaScript runtime platform" and saying "a middleware is a framework" will probably go over many peoples' heads, as well.

Instead of defining what these technologies are, I recommend referring to them as "tools" and focusing on what they're used for.

[dhcodes]

Saving the fuzziest for last. Here's a go at Mongo and Mongoose:

Mongo and Mongoose

MongoDB is a database that stores data records (documents) for use by an application. Mongo is a non-relational, "NoSQL" database. This means Mongo stores all data associated within one record, instead of storing it across many preset tables as in a SQL database. Some benefits of this storage model are:

• Scalability: by default, non-relational databases are split (or "sharded") across many systems instead of only one. This makes it easier to improve performance at a lower cost.

• Flexibility: new datasets and properties can be added to a document without the need to make a new table for that data.

• Replication: copies of the database run in parallel so if one goes down, one of the copies becomes the new primary data source.

While there are many non-relational databases, Mongo's uses JSON as its document storage structure, making it a logical choice when learning backend Javascript. Accessing documents and their properties within is like accessing objects in javascript.

Mongoose.js is an npm module for Node.js that allows you to write objects for Mongo as you would in Javascript. This can make is easier to construct documents for storage in Mongo.

[QuincyLarson]

@dhcodes this is a pretty good explanation of Mongo itself, but I think we may need a more general and lay-accessible explanation of databases in general. The fact that we're teaching MongoDB is secondary - the main thing we're teaching is how to use a database to store and retrieve data.

[QuincyLarson]

Thanks for your help everyone! We've loaded these descriptions into the seed files and plan to deploy them to beta as soon as possible.

I'm closing this issue. If anyone wants to discuss these further, please reopen it.