Search 6,000+ CA Community College Courses

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Front End Development Libraries

via freeCodeCamp

Go to class Write review

Overview

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 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.

Major Topics:
  • Bootstrap
  • jQuery
  • Sass
  • React
  • Redux
  • React and Redux
  • Front End Development Libraries Projects

Syllabus

  • Use Responsive Design with Bootstrap Fluid Containers
  • Make Images Mobile Responsive
  • Center Text with Bootstrap
  • Create a Bootstrap Button
  • Create a Block Element Bootstrap Button
  • Taste the Bootstrap Button Color Rainbow
  • Call out Optional Actions with btn-info
  • Warn Your Users of a Dangerous Action with btn-danger
  • Use the Bootstrap Grid to Put Elements Side By Side
  • Ditch Custom CSS for Bootstrap
  • Use a span to Target Inline Elements
  • Create a Custom Heading
  • Add Font Awesome Icons to our Buttons
  • Add Font Awesome Icons to all of our Buttons
  • Responsively Style Radio Buttons
  • Responsively Style Checkboxes
  • Style Text Inputs as Form Controls
  • Line up Form Elements Responsively with Bootstrap
  • Create a Bootstrap Headline
  • House our page within a Bootstrap container-fluid div
  • Create a Bootstrap Row
  • Split Your Bootstrap Row
  • Create Bootstrap Wells
  • Add Elements within Your Bootstrap Wells
  • Apply the Default Bootstrap Button Style
  • Create a Class to Target with jQuery Selectors
  • Add id Attributes to Bootstrap Elements
  • Label Bootstrap Wells
  • Give Each Element a Unique id
  • Label Bootstrap Buttons
  • Use Comments to Clarify Code
  • Learn How Script Tags and Document Ready Work
  • Target HTML Elements with Selectors Using jQuery
  • Target Elements by Class Using jQuery
  • Target Elements by id Using jQuery
  • Delete Your jQuery Functions
  • Target the Same Element with Multiple jQuery Selectors
  • Remove Classes from an Element with jQuery
  • Change the CSS of an Element Using jQuery
  • Disable an Element Using jQuery
  • Change Text Inside an Element Using jQuery
  • Remove an Element Using jQuery
  • Use appendTo to Move Elements with jQuery
  • Clone an Element Using jQuery
  • Target the Parent of an Element Using jQuery
  • Target the Children of an Element Using jQuery
  • Target a Specific Child of an Element Using jQuery
  • Target Even Elements Using jQuery
  • Use jQuery to Modify the Entire Page
  • Store Data with Sass Variables
  • Nest CSS with Sass
  • Create Reusable CSS with Mixins
  • Use @if and @else to Add Logic To Your Styles
  • Use @for to Create a Sass Loop
  • Use @each to Map Over Items in a List
  • Apply a Style Until a Condition is Met with @while
  • Split Your Styles into Smaller Chunks with Partials
  • Extend One Set of CSS Styles to Another Element
  • Create a Simple JSX Element
  • Create a Complex JSX Element
  • Add Comments in JSX
  • Render HTML Elements to the DOM
  • Define an HTML Class in JSX
  • Learn About Self-Closing JSX Tags
  • Create a Stateless Functional Component
  • Create a React Component
  • Create a Component with Composition
  • Use React to Render Nested Components
  • Compose React Components
  • Render a Class Component to the DOM
  • Write a React Component from Scratch
  • Pass Props to a Stateless Functional Component
  • Pass an Array as Props
  • Use Default Props
  • Override Default Props
  • Use PropTypes to Define the Props You Expect
  • Access Props Using this.props
  • Review Using Props with Stateless Functional Components
  • Create a Stateful Component
  • Render State in the User Interface
  • Render State in the User Interface Another Way
  • Set State with this.setState
  • Bind 'this' to a Class Method
  • Use State to Toggle an Element
  • Write a Simple Counter
  • Create a Controlled Input
  • Create a Controlled Form
  • Pass State as Props to Child Components
  • Pass a Callback as Props
  • Use the Lifecycle Method componentWillMount
  • Use the Lifecycle Method componentDidMount
  • Add Event Listeners
  • Optimize Re-Renders with shouldComponentUpdate
  • Introducing Inline Styles
  • Add Inline Styles in React
  • Use Advanced JavaScript in React Render Method
  • Render with an If-Else Condition
  • Use && for a More Concise Conditional
  • Use a Ternary Expression for Conditional Rendering
  • Render Conditionally from Props
  • Change Inline CSS Conditionally Based on Component State
  • Use Array.map() to Dynamically Render Elements
  • Give Sibling Elements a Unique Key Attribute
  • Use Array.filter() to Dynamically Filter an Array
  • Render React on the Server with renderToString
  • Create a Redux Store
  • Get State from the Redux Store
  • Define a Redux Action
  • Define an Action Creator
  • Dispatch an Action Event
  • Handle an Action in the Store
  • Use a Switch Statement to Handle Multiple Actions
  • Use const for Action Types
  • Register a Store Listener
  • Combine Multiple Reducers
  • Send Action Data to the Store
  • Use Middleware to Handle Asynchronous Actions
  • Write a Counter with Redux
  • Never Mutate State
  • Use the Spread Operator on Arrays
  • Remove an Item from an Array
  • Copy an Object with Object.assign
  • Getting Started with React Redux
  • Manage State Locally First
  • Extract State Logic to Redux
  • Use Provider to Connect Redux to React
  • Map State to Props
  • Map Dispatch to Props
  • Connect Redux to React
  • Connect Redux to the Messages App
  • Extract Local State into Redux
  • Moving Forward From Here
  • Build a Random Quote Machine
  • Build a Markdown Previewer
  • Build a Drum Machine
  • Build a JavaScript Calculator
  • Build a 25 + 5 Clock

Taught by

freeCodeCamp Team

Reviews

4.7 rating, based on 12 Class Central reviews

Start your review of Front End Development Libraries

  • Profile image for Luke S
    Luke S @lucasrsorenson
    FreeCodeCamp is the main course that I used to learn web development and get a job as a Junior Full Stack Developer. The organization and presentation of the lessons, challenges, and projects are very intuitive, and while you may have to look outside of FCC to dive deeper into some advanced subjects, it is invaluable as both a solid foundation and a syllabus for your web development journey.
  • Profile image for Sajan Paudel
    Sajan Paudel
    I recently completed the "Front end developments Libraries" course, and I must say it exceeded my expectations in every aspect. Taught by industry experts, this comprehensive course is a gem for both beginners and experienced developers looking to d…
  • Profile image for Himani Kinkar
    Himani Kinkar
    I recently completed the "Front end developments Libraries" course, and I must say it exceeded my expectations in every aspect. Taught by industry experts, this comprehensive course is a gem for both beginners and experienced developers looking to d…
  • Profile image for Jhon Hacker
    Jhon Hacker
    FreeCodeCamp's front-end course is an excellent resource for anyone looking to learn web development. The course is comprehensive and covers a range of topics from HTML, CSS, and JavaScript to advanced concepts like responsive web design and front-end libraries.

    One of the standout features of the course is its interactive nature. Rather than just watching videos or reading text, learners are encouraged to practice what they've learned through coding challenges and projects. This hands-on approach helps solidify concepts and ensures that learners are truly understanding what they're being taught
  • Profile image for Shubham Dave
    Shubham Dave
    Very nicely designed course covering all majorly used and basic fundamental topics. Muat take this course as it enhances the knowledge and gives a skill boost to beginners or intermediate developers.
  • Profile image for Aditya Saharan
    Aditya Saharan
    course was really good
    im fully impressed by this course and i have learnt many thing from this course realted to the libraries of frontend devlopment and way of practicing after studying was nice
  • Yosua Vega Christyananda
    the Front-End Development Libraries course surpassed all my expectations, providing a comprehensive and hands-on learning experience.
  • LIKITHA BONTHU
    This course helps me a lot to gain knowledge and experience of libraries in frontend and full stack development.
  • Divya T R
    course is very good and helpful. Even the person who does not know coding can also learn in this course.
  • Sushant Raj Dangal
    It the same tool and mechanism that existed for past 2 years. This is a useful tool from Google. Since it comes from Google, I will find it easier to convince clients of it's credentials and usefulness. Based on a quick study for a couple of sites we handle, it throws out decent quick wins.
  • Thaufiq Ahmed
    this would be more helpful to learn about Front End Development in online mode for develop my knowlede
  • Katha Ghosh
    Good course and well defined materials. Highly suggested to know more about web development. Cherry on top is that the course is self paced.
Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.