freeCodeCamp Front End Development Libraries Syllabus

Front End Development Libraries syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Front End Development Libraries in freeCodeCamp, not a summary of it.

1. 1

   Bootstrap

   2 topics

   • Grid System
   • Components and Utilities
2. 2

   jQuery

   2 topics

   • DOM Selection and Manipulation
   • Events and Animations
3. 3

   Sass

   3 topics

   • Variables and Nesting
   • Mixins and Functions
   • Partials and Inheritance
4. 4

   React

   4 topics

   • JSX and Components
   • State and Lifecycle
   • Handling Events
   • Conditional and List Rendering
5. 5

   Redux

   3 topics

   • Store, Actions, and Reducers
   • Dispatching and State
   • React and Redux Integration
6. 6

   Certification Projects

   5 topics

   • Random Quote Machine
   • Markdown Previewer
   • Drum Machine
   • JavaScript Calculator
   • 25 + 5 Clock

Front End Development Libraries flashcards for freeCodeCamp

24 of 50 cards from the Front End Development Libraries deck — real questions with worked answers.

1. In the Bootstrap grid system, how many columns is each row divided into, and what class would you use to make an element span half the row on medium screens and up?

   Bootstrap's grid divides each row into 12 columns. To span half the row (6 of 12 columns) on medium screens and up, use the class col-md-6.

2. List Bootstrap 5's responsive breakpoint infixes and their minimum viewport widths.

   sm ≥ 576px, md ≥ 768px, lg ≥ 992px, xl ≥ 1200px, xxl ≥ 1400px. No infix (e.g., col-6) applies to all widths starting from extra-small (< 576px).

3. What is the required nesting structure for a Bootstrap grid layout?

   Columns must be placed inside a .row, and rows inside a .container (or .container-fluid): .container > .row > .col-*. The container centers and pads content, the row creates a flexbox wrapper, and columns hold the content.

4. What is the difference between Bootstrap's .container and .container-fluid classes?

   .container sets a fixed max-width that changes at each responsive breakpoint (centered with margins), while .container-fluid spans 100% of the viewport width at all breakpoints.

5. In Bootstrap, what class combination creates a styled primary button, and what is the general pattern for button color variants?

   Use class="btn btn-primary". The pattern is the base class btn plus a contextual variant: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, or btn-link (and btn-outline-* for outlined versions).

6. Decode Bootstrap's spacing utility notation: what do the letters and numbers in classes like mt-3 and px-2 mean?

   The first letter is the property: m = margin, p = padding. The second letter is the side: t = top, b = bottom, s = start (left in LTR), e = end (right), x = left and right, y = top and bottom (none = all sides). The number 0-5 is the size step (0 = none, 3 = 1rem by default); auto is also allowed for margins.

7. What does Bootstrap's .img-fluid class do to an image?

   It makes the image responsive by applying max-width: 100% and height: auto, so the image scales down to fit its parent container but never grows beyond its native size.

8. In jQuery, how do you select (a) all p elements, (b) all elements with class .target, and (c) the element with id #btn?

   (a) $("p") — element selector; (b) $(".target") — class selector with a dot; (c) $("#btn") — id selector with a hash. jQuery uses CSS selector syntax inside $().

9. What is the purpose of $(document).ready(function() { ... }) in jQuery?

   It delays running the enclosed code until the DOM is fully loaded and parsed, ensuring all elements exist before the script tries to select or manipulate them. Without it, code in the head could run before the page elements are rendered.

10. Compare the jQuery methods .html() and .text().

    .html() gets or sets the inner HTML of an element, parsing tags as markup (e.g., <em> renders as emphasis). .text() gets or sets only the text content, escaping any HTML so tags appear as literal characters.

11. Which jQuery methods add, remove, and toggle a CSS class on selected elements?

    .addClass("name") adds the class, .removeClass("name") removes it, and .toggleClass("name") adds the class if absent and removes it if present.

12. In jQuery, what is the difference between .appendTo() and .clone(), and how would you copy an element into another container without removing the original?

    .appendTo("#target") moves the selected element into the target. .clone() makes a copy of the element. Chain them to copy instead of move: $("#item").clone().appendTo("#target") leaves the original in place and appends a duplicate.

13. How do you attach a click event handler to a button with jQuery, and what is the advantage of using .on()?

    $("#btn").on("click", function() { ... }); The .on() method is the general-purpose event binder — it can attach any event type (click, mouseover, keydown, etc.) and supports event delegation for dynamically added elements via $(parent).on("click", ".child", handler).

14. Name the main jQuery built-in animation/effect methods for showing and hiding elements.

    Visibility: .show(), .hide(), .toggle(). Fading: .fadeIn(), .fadeOut(), .fadeToggle(), .fadeTo(). Sliding: .slideDown(), .slideUp(), .slideToggle(). Custom animations of numeric CSS properties use .animate({props}, duration).

15. How do you declare and use a variable in Sass?

    Declare with a dollar sign: $main-color: #1a2b3c; then reference it wherever a value is expected: h1 { color: $main-color; }. Variables let you reuse and change values (colors, sizes, fonts) in one place.

16. What does nesting mean in Sass, and what does the & (parent selector) do inside a nested rule?

    Nesting lets you write child rules inside a parent rule, mirroring HTML structure — nav { ul { ... } } compiles to nav ul { ... }. The & refers to the parent selector, used for pseudo-classes and modifiers: a { &:hover { ... } } compiles to a:hover { ... }.

17. In Sass, how do you define and use a mixin with parameters?

    Define with @mixin name($param) { ...rules using $param... } and apply with @include name(value); inside a selector. Mixins let you reuse whole groups of CSS declarations, optionally customized by arguments (e.g., a border-radius mixin with vendor prefixes).

18. How does a Sass @function differ from a @mixin?

    A @function computes and returns a single value using @return, and is called where a value is expected (e.g., width: half(100px)). A @mixin outputs blocks of CSS declarations and is inserted with @include. Use functions for values, mixins for reusable style rules.

19. What Sass directives provide conditionals and loops, and what is the basic syntax of a @for loop?

    Conditionals: @if, @else if, @else. Loops: @for, @each (iterates a list or map), @while. Example @for: @for $i from 1 through 5 { .text-#{$i} { font-size: 15px * $i; } } — #{ } interpolates the variable into the selector.

20. What is a Sass partial, how is it named, and how is it brought into another stylesheet?

    A partial is a Sass file holding a reusable segment of styles, named with a leading underscore (e.g., _variables.scss). The underscore tells Sass not to compile it to its own CSS file. It is loaded with @import 'variables' (or the newer @use) — omitting the underscore and extension.

21. How does inheritance work in Sass with @extend?

    @extend lets one selector inherit all the styles of another and then add or override rules: .info-important { @extend .info; background-color: red; }. Sass compiles this by adding the extending selector to the original rule set, avoiding duplicated CSS.

22. What is JSX and how does it become executable JavaScript in a React app?

    JSX is a syntax extension that lets you write HTML-like markup inside JavaScript, with JavaScript expressions embedded in curly braces { }. Browsers cannot run JSX directly — a transpiler such as Babel compiles it into React.createElement() calls (plain JavaScript).

23. State three syntax rules JSX imposes that differ from plain HTML.

    (1) A component must return a single parent element — sibling elements must be wrapped (e.g., in a div or Fragment). (2) HTML attributes use camelCase and reserved words are renamed: class → className, for → htmlFor, onclick → onClick. (3) Every element must be closed; void elements are self-closed like <br /> and <img />.

24. Compare a functional (stateless) React component with a class component, and state the naming rule both must follow.

    A functional component is a JavaScript function that receives props and returns JSX. A class component extends React.Component, requires a constructor calling super(props), holds this.state, and returns JSX from its render() method. Both must be named with a capital first letter so React treats them as components, not HTML tags.

See more Front End Development Libraries flashcards →

Planning Front End Development Libraries for freeCodeCamp

Front End Development Libraries (freeCodeCamp) FAQ