{"id":19092752,"url":"https://github.com/basedhound/freecodecamp_frontend-libraries","last_synced_at":"2026-04-12T15:37:15.710Z","repository":{"id":259437606,"uuid":"737203748","full_name":"basedhound/freeCodeCamp_frontend-libraries","owner":"basedhound","description":"🎓 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.","archived":false,"fork":false,"pushed_at":"2024-11-20T10:46:01.000Z","size":264,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-02T23:17:30.529Z","etag":null,"topics":["bootstrap","javascript","jquery","js","react","react-redux","redux","sass"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/basedhound.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-30T07:02:02.000Z","updated_at":"2024-11-20T10:46:04.000Z","dependencies_parsed_at":"2024-10-25T11:45:57.179Z","dependency_job_id":"6a0937be-bce2-4b66-977b-c0dac285a2af","html_url":"https://github.com/basedhound/freeCodeCamp_frontend-libraries","commit_stats":null,"previous_names":["basedhound/freecodecamp_frontend-libraries"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2FfreeCodeCamp_frontend-libraries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2FfreeCodeCamp_frontend-libraries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2FfreeCodeCamp_frontend-libraries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2FfreeCodeCamp_frontend-libraries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basedhound","download_url":"https://codeload.github.com/basedhound/freeCodeCamp_frontend-libraries/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240142764,"owners_count":19754633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","javascript","jquery","js","react","react-redux","redux","sass"],"created_at":"2024-11-09T03:21:43.867Z","updated_at":"2026-04-12T15:37:10.688Z","avatar_url":"https://github.com/basedhound.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Certificate](Certificate.png)\n\n## [Front End Development Libraries](https://www.freecodecamp.org/learn/front-end-development-libraries/)\n\n`[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.\n\nIn 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.\n\nLater, you'll build a shopping cart and other applications to learn how to create powerful Single Page Applications (SPAs) with React and Redux.\n\n`[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.\n\nDans 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.\n\nEnsuite, 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.\n\n\n## Projects 🎓 \n```\n1.  Build a Random Quote Machine ✅\n👉 https://quote-machine-fv.netlify.app\n\n2.  Build a Markdown Previewer  \n3.  Build a Drum Machine  \n4.  Build a JavaScript Calculator  \n5.  Build a 25 + 5 Clock  \n```\n\u003e [!NOTE] \n\u003e The projects listed above serve as certifications.\n\n## Content 👨‍🏫\n### Bootstrap\n\u003e 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.\n\n```\n01. Use Responsive Design with Bootstrap Fluid Containers  \n02. Make Images Mobile Responsive  \n03. Center Text with Bootstrap  \n04. Create a Bootstrap Button  \n05. Create a Block Element Bootstrap Button  \n06. Taste the Bootstrap Button Color Rainbow  \n07. Call out Optional Actions with btn-info  \n08. Warn Your Users of a Dangerous Action with btn-danger  \n09. Use the Bootstrap Grid to Put Elements Side By Side  \n10. Ditch Custom CSS for Bootstrap  \n11. Use a span to Target Inline Elements  \n12. Create a Custom Heading  \n13. Add Font Awesome Icons to our Buttons  \n14. Add Font Awesome Icons to all of our Buttons  \n15. Responsively Style Radio Buttons  \n16. Responsively Style Checkboxes  \n17. Style Text Inputs as Form Controls  \n18. Line up Form Elements Responsively with Bootstrap  \n19. Create a Bootstrap Headline  \n20. House our page within a Bootstrap container-fluid div  \n21. Create a Bootstrap Row  \n22. Split Your Bootstrap Row  \n23. Create Bootstrap Wells  \n24. Add Elements within Your Bootstrap Wells  \n25. Apply the Default Bootstrap Button Style  \n26. Create a Class to Target with jQuery Selectors  \n27. Add id Attributes to Bootstrap Elements  \n28. Label Bootstrap Wells  \n29. Give Each Element a Unique id  \n30. Label Bootstrap Buttons  \n31. Use Comments to Clarify Code\n```\n\n### jQuery\n\u003e 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.\n\n```\n01.  Learn How Script Tags and Document Ready Work  \n02.  Target HTML Elements with Selectors Using jQuery  \n03.  Target Elements by Class Using jQuery  \n04.  Target Elements by id Using jQuery  \n05.  Delete Your jQuery Functions  \n06.  Target the Same Element with Multiple jQuery Selectors  \n07.  Remove Classes from an Element with jQuery  \n08.  Change the CSS of an Element Using jQuery  \n09.  Disable an Element Using jQuery  \n10. Change Text Inside an Element Using jQuery  \n11. Remove an Element Using jQuery  \n12. Use appendTo to Move Elements with jQuery  \n13. Clone an Element Using jQuery  \n14. Target the Parent of an Element Using jQuery  \n15. Target the Children of an Element Using jQuery  \n16. Target a Specific Child of an Element Using jQuery  \n17. Target Even Elements Using jQuery  \n18. Use jQuery to Modify the Entire Page\n```\n\n### Sass\n\u003e 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.\n\n```\n01. Store Data with Sass Variables  \n02. Nest CSS with Sass  \n03. Create Reusable CSS with Mixins  \n04. Use @if and @else to Add Logic To Your Styles  \n05. Use @for to Create a Sass Loop  \n06. Use @each to Map Over Items in a List  \n07. Apply a Style Until a Condition is Met with @while  \n08. Split Your Styles into Smaller Chunks with Partials  \n09. Extend One Set of CSS Styles to Another Element\n```\n\n### React\n\u003e 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.\n\n```\n01.  Create a Simple JSX Element  \n02.  Create a Complex JSX Element  \n03.  Add Comments in JSX  \n04.  Render HTML Elements to the DOM  \n05.  Define an HTML Class in JSX  \n06.  Learn About Self-Closing JSX Tags  \n07.  Create a Stateless Functional Component  \n08.  Create a React Component  \n09.  Create a Component with Composition  \n10. Use React to Render Nested Components  \n11. Compose React Components  \n12. Render a Class Component to the DOM  \n13. Write a React Component from Scratch  \n14. Pass Props to a Stateless Functional Component  \n15. Pass an Array as Props  \n16. Use Default Props  \n17. Override Default Props  \n18. Use PropTypes to Define the Props You Expect  \n19. Access Props Using this.props  \n20. Review Using Props with Stateless Functional Components  \n21. Create a Stateful Component  \n22. Render State in the User Interface  \n23. Render State in the User Interface Another Way  \n24. Set State with this.setState  \n25. Bind 'this' to a Class Method  \n26. Use State to Toggle an Element  \n27. Write a Simple Counter  \n28. Create a Controlled Input  \n29. Create a Controlled Form  \n30. Pass State as Props to Child Components  \n31. Pass a Callback as Props  \n32. Use the Lifecycle Method componentWillMount  \n33. Use the Lifecycle Method componentDidMount  \n34. Add Event Listeners  \n35. Optimize Re-Renders with shouldComponentUpdate  \n36. Introducing Inline Styles  \n37. Add Inline Styles in React  \n38. Use Advanced JavaScript in React Render Method  \n39. Render with an If-Else Condition  \n40. Use \u0026\u0026 for a More Concise Conditional  \n41. Use a Ternary Expression for Conditional Rendering  \n42. Render Conditionally from Props  \n43. Change Inline CSS Conditionally Based on Component State  \n44. Use Array.map() to Dynamically Render Elements  \n45. Give Sibling Elements a Unique Key Attribute  \n46. Use Array.filter() to Dynamically Filter an Array  \n47. Render React on the Server with renderToString  \n```\n\n### Redux\n\u003e 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.\n\n```\n01. Create a Redux Store  \n02. Get State from the Redux Store  \n03. Define a Redux Action  \n04. Define an Action Creator  \n05. Dispatch an Action Event  \n06. Handle an Action in the Store  \n07. Use a Switch Statement to Handle Multiple Actions  \n08. Use const for Action Types  \n09. Register a Store Listener  \n10. Combine Multiple Reducers  \n11. Send Action Data to the Store  \n12. Use Middleware to Handle Asynchronous Actions  \n13. Write a Counter with Redux  \n14. Never Mutate State  \n15. Use the Spread Operator on Arrays  \n16. Remove an Item from an Array  \n17. Copy an Object with Object.assign \n```\n\n### React + Redux\n\u003e 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.\n\n```\n01. Getting Started with React Redux  \n02. Manage State Locally First  \n03. Extract State Logic to Redux  \n04. Use Provider to Connect Redux to React  \n05. Map State to Props  \n06. Map Dispatch to Props  \n07. Connect Redux to React  \n08. Connect Redux to the Messages App  \n09. Extract Local State into Redux  \n10. Moving Forward From Here \n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Ffreecodecamp_frontend-libraries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasedhound%2Ffreecodecamp_frontend-libraries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2Ffreecodecamp_frontend-libraries/lists"}