Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/basedhound/freecodecamp_frontend-libraries

🎓 Certification – Front End Libraries Projects: Bootstrap, Sass, React, Redux, and jQuery. Build SPAs, enhance styles, manage state, and streamline workflows with modern front-end tools.
https://github.com/basedhound/freecodecamp_frontend-libraries

bootstrap javascript jquery js react react-redux redux sass

Last synced: 3 months ago
JSON representation

🎓 Certification – Front End Libraries Projects: Bootstrap, Sass, React, Redux, and jQuery. Build SPAs, enhance styles, manage state, and streamline workflows with modern front-end tools.

Awesome Lists containing this project

README 

          
![Certificate](Certificate.png)



## [Front End Development Libraries](https://www.freecodecamp.org/learn/front-end-development-libraries/)



`[EN]` Now that you're familiar with HTML, CSS, and JavaScript, level up your skills by learning some of the most popular front end libraries in the industry.



In the Front End Development Libraries Certification, you'll learn how to style your site quickly with Bootstrap. You'll also learn how to add logic to your CSS styles and extend them with Sass.



Later, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux.



`[FR]` Maintenant que vous maîtrisez HTML, CSS et JavaScript, passez à la vitesse supérieure en apprenant quelques-unes des bibliothèques front-end les plus populaires du secteur.



Dans la certification 'Front End Development Libraries', vous découvrirez comment styliser rapidement votre site avec Bootstrap. Vous apprendrez également à ajouter de la logique à vos styles CSS et à les étendre avec Sass.



Ensuite, vous développerez un panier d'achat et d'autres applications pour comprendre comment créer des applications monopages (SPA) puissantes avec React et Redux.



## Projects 🎓 

```

1.  Build a Random Quote Machine âś…

👉 https://quote-machine-fv.netlify.app



2.  Build a Markdown Previewer  

3.  Build a Drum Machine  

4.  Build a JavaScript Calculator  

5.  Build a 25 + 5 Clock  

```

> [!NOTE] 

> The projects listed above serve as certifications.



## Content 👨‍🏫

### Bootstrap

> Bootstrap is a front end framework used to design responsive web pages and applications. It takes a mobile-first approach to web development, and includes pre-built CSS styles and classes, plus some JavaScript functionality.



```

01. Use Responsive Design with Bootstrap Fluid Containers  

02. Make Images Mobile Responsive  

03. Center Text with Bootstrap  

04. Create a Bootstrap Button  

05. Create a Block Element Bootstrap Button  

06. Taste the Bootstrap Button Color Rainbow  

07. Call out Optional Actions with btn-info  

08. Warn Your Users of a Dangerous Action with btn-danger  

09. Use the Bootstrap Grid to Put Elements Side By Side  

10. Ditch Custom CSS for Bootstrap  

11. Use a span to Target Inline Elements  

12. Create a Custom Heading  

13. Add Font Awesome Icons to our Buttons  

14. Add Font Awesome Icons to all of our Buttons  

15. Responsively Style Radio Buttons  

16. Responsively Style Checkboxes  

17. Style Text Inputs as Form Controls  

18. Line up Form Elements Responsively with Bootstrap  

19. Create a Bootstrap Headline  

20. House our page within a Bootstrap container-fluid div  

21. Create a Bootstrap Row  

22. Split Your Bootstrap Row  

23. Create Bootstrap Wells  

24. Add Elements within Your Bootstrap Wells  

25. Apply the Default Bootstrap Button Style  

26. Create a Class to Target with jQuery Selectors  

27. Add id Attributes to Bootstrap Elements  

28. Label Bootstrap Wells  

29. Give Each Element a Unique id  

30. Label Bootstrap Buttons  

31. Use Comments to Clarify Code

```



### jQuery

> jQuery is a JavaScript library designed to simplify DOM manipulation, event handling, animations, and AJAX requests. It provides a straightforward API that works across different browsers, letting developers write less code to achieve more. With jQuery, common tasks like selecting elements, responding to user actions, and creating animations are much easier than using plain JavaScript.



```

01.  Learn How Script Tags and Document Ready Work  

02.  Target HTML Elements with Selectors Using jQuery  

03.  Target Elements by Class Using jQuery  

04.  Target Elements by id Using jQuery  

05.  Delete Your jQuery Functions  

06.  Target the Same Element with Multiple jQuery Selectors  

07.  Remove Classes from an Element with jQuery  

08.  Change the CSS of an Element Using jQuery  

09.  Disable an Element Using jQuery  

10. Change Text Inside an Element Using jQuery  

11. Remove an Element Using jQuery  

12. Use appendTo to Move Elements with jQuery  

13. Clone an Element Using jQuery  

14. Target the Parent of an Element Using jQuery  

15. Target the Children of an Element Using jQuery  

16. Target a Specific Child of an Element Using jQuery  

17. Target Even Elements Using jQuery  

18. Use jQuery to Modify the Entire Page

```



### Sass

> Sass, or "Syntactically Awesome StyleSheets", is a language extension of CSS. It adds features that aren't available in basic CSS, which make it easier for you to simplify and maintain the style sheets for your projects.



```

01. Store Data with Sass Variables  

02. Nest CSS with Sass  

03. Create Reusable CSS with Mixins  

04. Use @if and @else to Add Logic To Your Styles  

05. Use @for to Create a Sass Loop  

06. Use @each to Map Over Items in a List  

07. Apply a Style Until a Condition is Met with @while  

08. Split Your Styles into Smaller Chunks with Partials  

09. Extend One Set of CSS Styles to Another Element

```



### React

> React is a popular JavaScript library for building reusable, component-driven user interfaces for web pages or applications. React combines HTML with JavaScript functionality into its own markup language called JSX. React also makes it easy to manage the flow of data throughout the application.



```

01.  Create a Simple JSX Element  

02.  Create a Complex JSX Element  

03.  Add Comments in JSX  

04.  Render HTML Elements to the DOM  

05.  Define an HTML Class in JSX  

06.  Learn About Self-Closing JSX Tags  

07.  Create a Stateless Functional Component  

08.  Create a React Component  

09.  Create a Component with Composition  

10. Use React to Render Nested Components  

11. Compose React Components  

12. Render a Class Component to the DOM  

13. Write a React Component from Scratch  

14. Pass Props to a Stateless Functional Component  

15. Pass an Array as Props  

16. Use Default Props  

17. Override Default Props  

18. Use PropTypes to Define the Props You Expect  

19. Access Props Using this.props  

20. Review Using Props with Stateless Functional Components  

21. Create a Stateful Component  

22. Render State in the User Interface  

23. Render State in the User Interface Another Way  

24. Set State with this.setState  

25. Bind 'this' to a Class Method  

26. Use State to Toggle an Element  

27. Write a Simple Counter  

28. Create a Controlled Input  

29. Create a Controlled Form  

30. Pass State as Props to Child Components  

31. Pass a Callback as Props  

32. Use the Lifecycle Method componentWillMount  

33. Use the Lifecycle Method componentDidMount  

34. Add Event Listeners  

35. Optimize Re-Renders with shouldComponentUpdate  

36. Introducing Inline Styles  

37. Add Inline Styles in React  

38. Use Advanced JavaScript in React Render Method  

39. Render with an If-Else Condition  

40. Use && for a More Concise Conditional  

41. Use a Ternary Expression for Conditional Rendering  

42. Render Conditionally from Props  

43. Change Inline CSS Conditionally Based on Component State  

44. Use Array.map() to Dynamically Render Elements  

45. Give Sibling Elements a Unique Key Attribute  

46. Use Array.filter() to Dynamically Filter an Array  

47. Render React on the Server with renderToString  

```



### Redux

> Redux is a state management library for JavaScript apps, often used with React. It centralizes an app’s state in a single store so components can access and update data consistently. Redux uses actions to describe changes, and reducers to update the state based on these actions. This structure makes state changes predictable and easy to debug, especially in complex applications.



```

01. Create a Redux Store  

02. Get State from the Redux Store  

03. Define a Redux Action  

04. Define an Action Creator  

05. Dispatch an Action Event  

06. Handle an Action in the Store  

07. Use a Switch Statement to Handle Multiple Actions  

08. Use const for Action Types  

09. Register a Store Listener  

10. Combine Multiple Reducers  

11. Send Action Data to the Store  

12. Use Middleware to Handle Asynchronous Actions  

13. Write a Counter with Redux  

14. Never Mutate State  

15. Use the Spread Operator on Arrays  

16. Remove an Item from an Array  

17. Copy an Object with Object.assign 

```



### React + Redux

> React-Redux is the official Redux binding library for React. It allows React components to interact with a Redux store, letting components read from and dispatch updates to the centralized state managed by Redux. React-Redux simplifies using Redux with React by efficiently managing component updates and enabling clear, predictable state handling across the app.



```

01. Getting Started with React Redux  

02. Manage State Locally First  

03. Extract State Logic to Redux  

04. Use Provider to Connect Redux to React  

05. Map State to Props  

06. Map Dispatch to Props  

07. Connect Redux to React  

08. Connect Redux to the Messages App  

09. Extract Local State into Redux  

10. Moving Forward From Here 

```