Free Code Camp assignments

FCC-1

Responsive Web Design Certification > Basic HTML and HTML 5

    • Say Hello to HTML Elements
    • Headline with the h2 Element
    • Inform with the Paragraph Element
    • Fill in the Blank with Placeholder Text
    • Uncomment HTML
    • Comment out HTML
    • Delete HTML Elements
    • Introduction to HTML 5 Elements
    • Add Images to Your Website
    • Link to External Pages with Anchor Elements
    • Link to Internal Sections of a a Page with Anchor Elements
    • Nest an Anchor Elements within a Paragraph
    • Make Dead Links Using the Hash Symbol
    • Turn an Image into a Link

FCC-2

Responsive Web Design Certification > Basic HTML and HTML 5

    • Create a Bulleted Unordered List
    • Create an Ordered List
    • Create a Text Field
    • Add Placeholder Text to a Text Field
    • Create a Form Element
    • Add a Submit Button to a Form
    • Use HTML5 to Require a Field
    • Create a Set of Radio Buttons
    • Create a Set of Checkboxes
    • Check Radio Buttons and Checkboxes by Default
    • Nest Many Elements within a Single div Element
    • Declare the Doctype of an HTML Document
    • Define the Head and Body of an HTML Document

FCC-3

Responsive Web Design Certification > Basic CSS

    • Change the Color of Text
    • Use CSS Selectors to Style Elements
    • Use a CSS Class to Style an Element
    • Style Multiple Elements with a CSS Class
    • Change the Font Size of an Element
    • Set the Font Family of an Element
    • Import a Google Font
    • Specify How Fonts Should Degrade
    • Size Your Images
    • Add Borders Around Your Elements
    • Add Rounded Corners with border-radius
    • Make Circular Images with a border-radius
    • Give a Background Color to a div Element
    • Set the id of an Element
    • Use an id Attribute to Style an Element

FCC-4

Responsive Web Design Certification > Basic CSS

    • Adjust the Padding of an Element
    • Adjust the Margin of an Element
    • Add a Negative Margin to an Element
    • Add Different Padding to Each Side of an Element
    • Add Different Margins to Each Side of an Element
    • Use Clockwise Notation to Specify the Padding of an Element
    • Use Clockwise Notation to Specify the Margin of an Element
    • Use Attribute Selectors to Style Elements
    • Understand Absolute versus Relative Units
    • Style the HTML Body Element
    • Inherit Styles from the Body Element
    • Prioritize One Style Over Another
    • Override Styles in Subsequent CSS
    • Override Class Declarations by Styling ID Attributes
    • Override Class Declarations with Inline Styles
    • Override All Other Styles by using Important

FCC-5

Responsive Web Design Certification > Basic CSS

    • Use Hex Code for Specific Colors
    • Use Hex Code to Mix Colors
    • Use Abbreviated Hex Code
    • Use RGB values to Color Elements
    • Use RGB to Mix Colors
    • Use CSS Variables to change several elements at once
    • Create a custom CSS Variable
    • Use a custom CSS Variable
    • Attach a Fallback value to a CSS Variable
    • Cascading CSS variables
    • Change a variable for a specific area
    • Use a media query to change a variable

FCC-6

Responsive Web Design Certification >Applied Visual Design

    • Create Visual Balance Using the text-align Property
    • Adjust the Width of an Element Using the width Property
    • Adjust the Height of an Element Using the height Property
    • Use the strong Tag to Make Text Bold
    • Use the u Tag to Underline Text
    • Use the em Tag to Italicize Text
    • Use the s Tag to Strikethrough Text
    • Create a Horizontal Line Using the hr Element
    • Adjust the background-color Property of Text
    • Adjust the Size of a Header Versus a Paragraph Tag
    • Add a box-shadow to a Card-like Element
    • Decrease the Opacity of an Element
    • Use the text-transform Property to Make Text Uppercase
    • Set the font-size for Multiple Heading Elements
    • Set the font-weight for Multiple Heading Elements
    • Set the font-size of Paragraph Text
    • Set the line-height of Paragraphs
    • Adjust the Hover State of an Anchor Tag

FCC-7

Responsive Web Design Certification > Applied Visual Design

    • Change an Element’s Relative Position
    • Move a Relatively Positioned Element with CSS Offsets
    • Lock an Element to its Parent with Absolute Positioning
    • Lock an Element to the Browser Window with Fixed Positioning
    • Push Elements Left or Right with the float Property
    • Change the Position of Overlapping Elements with the z-index Property
    • Center an Element Horizontally Using the margin Property
    • Learn about Complementary Colors
    • Learn about Tertiary Colors
    • Adjust the Color of Various Elements to Complementary Colors
    • Adjust the Hue of a Color
    • Adjust the Tone of a Color
    • Create a Gradual CSS Linear Gradient
    • Use a CSS Linear Gradient to Create a Striped Element
    • Create Texture by Adding a Subtle Pattern as a Background Image
    • Use the CSS Transform scale Property to Change the Size of an Element
    • Use the CSS Transform scale Property to Scale an Element on Hover
    • Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
    • Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis

FCC-8

Responsive Web Design Certification > Applied Visual Design

    • Create a Graphic Using CSS
    • Create a More Complex Shape Using CSS and HTML
    • Learn How the CSS @keyframes and animation Properties Work
    • Use CSS Animation to Change the Hover State of a Button
    • Modify Fill Mode of an Animation
    • Create Movement Using CSS Animation
    • Create Visual Direction by Fading an Element from Left to Right
    • Animate Elements Continually Using an Infinite Animation Count
    • Make a CSS Heartbeat using an Infinite Animation Count
    • Animate Elements at Variable Rates
    • Animate Multiple Elements at Variable Rates
    • Change Animation Timing with Keywords
    • Learn How Bezier Curves Work
    • Use a Bezier Curve to Move a Graphic
    • Make Motion More Natural Using a Bezier Curve

FCC-9

Responsive Web Design Certification > Applied Accessibility

    • Add a Text Alternative to Images for Visually Impaired Accessibility
    • Know When Alt Text Should be Left Blank
    • Use Headings to Show Hierarchical Relationships of Content
    • Jump Straight to the Content Using the main Element
    • Wrap Content in the article Element
    • Make Screen Reader Navigation Easier with the header Landmark
    • Make Screen Reader Navigation Easier with the nav Landmark
    • Make Screen Reader Navigation Easier with the footer Landmark
    • Improve Accessibility of Audio Content with the audio Element
    • Improve Chart Accessibility with the figure Element
    • Improve Form Field Accessibility with the label Element
    • Wrap Radio Buttons in a fieldset Element for Better Accessibility
    • Add an Accessible Date Picker
    • Standardize Times with the HTML5 datetime Attribute
    • Make Elements Only Visible to a Screen Reader by Using Custom CSS
    • Improve Readability with High Contrast Text
    • Avoid Colorblindness Issues by Using Sufficient Contrast
    • Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
    • Give Links Meaning by Using Descriptive Link Text
    • Make Links Navigatable with HTML Access Keys
    • Use tabindex to Add Keyboard Focus to an Element
    • Use tabindex to Specify the Order of Keyboard Focus for Several Elements

FCC-10

Responsive Web Design Certification > Applied Accessibility

    • Add an Accessible Date Picker
    • Standardize Times with the HTML5 datetime Attribute
    • Make Elements Only Visible to a Screen Reader by Using Custom CSS
    • Improve Readability with High Contrast Text
    • Avoid Colorblindness Issues by Using Sufficient Contrast
    • Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information
    • Give Links Meaning by Using Descriptive Link Text
    • Make Links Navigatable with HTML Access Keys
    • Use tabindex to Add Keyboard Focus to an Element
    • Use tabindex to Specify the Order of Keyboard Focus for Several Elements

FCC-11

Responsive Web Design Certification > Responsive Web Design Principles

    • Create a Media Query
    • Make an Image Responsive
    • Use a Retina Image for Higher Resolution Displays
    • Make Typography Responsive

FCC-12

Responsive Web Design Certification > CSS Flexbox

    • Use display: flex to Position Two Boxes
    • Add Flex Superpowers to the Tweet Embed
    • Use the flex-direction Property to Make a Row
    • Apply the flex-direction Property to Create Rows in the Tweet Embed
    • Use the flex-direction Property to Make a Column
    • Apply the flex-direction Property to Create a Column in the Tweet Embed
    • Align Elements Using the justify-content Property
    • Use the justify-content Property in the Tweet Embed
    • Align Elements Using the align-items Property
    • Use the align-items Property in the Tweet Embed

FCC-13

Responsive Web Design Certification > CSS Flexbox

    • Use the flex-wrap Property to Wrap a Row or Column
    • Use the flex-shrink Property to Shrink Items
    • Use the flex-grow Property to Expand Items
    • Use the flex-basis Property to Set the Initial Size of an Item
    • Use the flex Shorthand Property
    • Use the order Property to Rearrange Items
    • Use the align-self Property

FCC-14

Front End Libraries Certification > Bootstrap

    • 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

FCC-15

Front End Libraries Certification > Bootstrap

    • 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

FCC-16

Front End Libraries Certification > Bootstrap

    • 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

FCC-17

JavaScript Algorithms And Data Structures Certification > Basic JavaScript

    • Comment Your JavaScript Code
    • Declare JavaScript Variables
    • Storing Values with the Assignment Operator
    • Initializing Variables with the Assignment Operator
    • Understanding Uninitialized Variables
    • Understanding Case Sensitivity in Variables
    • Add Two Numbers with JavaScript
    • Subtract One Number from Another with JavaScript
    • Multiply Two Numbers with JavaScript
    • Divide One Number by Another with JavaScript
    • Increment a Number with JavaScript
    • Decrement a Number with JavaScript
    • Create Decimal Numbers with JavaScript
    • Multiply Two Decimals with JavaScript
    • Divide One Decimal by Another with JavaScript
    • Finding a Remainder in JavaScript
    • Compound Assignment With Augmented Addition
    • Compound Assignment With Augmented Subtraction
    • Compound Assignment With Augmented Multiplication
    • Compound Assignment With Augmented Division
    • Declare String Variables
    • Escaping Literal Quotes in Strings
    • Quoting Strings with Single Quotes
    • Escape Sequences in Strings
    • Concatenating Strings with Plus Operator
    • Concatenating Strings with the Plus Equals Operator
    • Constructing Strings with Variables
    • Appending Variables to Strings
    • Find the Length of a String
    • Use Bracket Notation to Find the First Character in a String
    • Understand String Immutability
    • Use Bracket Notation to Find the Nth Character in a String
    • Use Bracket Notation to Find the Last Character in a String
    • Use Bracket Notation to Find the Nth-to-Last Character in a String
    • Word Blanks

FCC-18

JavaScript Algorithms And Data Structures Certification > Basic JavaScript

    • Store Multiple Values in one Variable using JavaScript Arrays
    • Nest one Array within Another Array
    • Access Array Data with Indexes
    • Modify Array Data With Indexes
    • Access Multi-Dimensional Arrays With Indexes
    • Manipulate Arrays With push()
    • Manipulate Arrays With pop()
    • Manipulate Arrays With shift()
    • Manipulate Arrays With unshift()
    • Shopping List
    • Write Reusable JavaScript with Functions
    • Passing Values to Functions with Arguments
    • Global Scope and Functions
    • Local Scope and Functions
    • Global vs. Local Scope in Functions
    • Return a Value from a Function with Return
    • Understanding Undefined Value returned from a Function
    • Assignment with a Returned Value
    • Stand in Line

FCC-19

JavaScript Algorithms And Data Structures Certification > Basic JavaScript

    • Understanding Boolean Values
    • Use Conditional Logic with If Statements
    • Comparison with the Equality Operator
    • Comparison with the Strict Equality Operator
    • Practice comparing different values
    • Comparison with the Inequality Operator
    • Comparison with the Strict Inequality Operator
    • Comparison with the Greater Than Operator
    • Comparison with the Greater Than Or Equal To Operator
    • Comparison with the Less Than Operator
    • Comparison with the Less Than Or Equal To Operator
    • Comparisons with the Logical And Operator
    • Comparisons with the Logical Or Operator
    • Introducing Else Statements
    • Introducing Else If Statements
    • Logical Order in If Else Statements
    • Chaining If Else Statements
    • Golf Code
    • Selecting from Many Options with Switch Statements
    • Adding a Default Option in Switch Statements
    • Multiple Identical Options in Switch Statements
    • Replacing If Else Chains with Switch
    • Returning Boolean Values from Functions
    • Return Early Pattern for Functions
    • Counting Cards

FCC-20

JavaScript Algorithms And Data Structures Certification > Basic JavaScript

    • Build JavaScript Objects
    • Accessing Object Properties with Dot Notation
    • Accessing Object Properties with Bracket Notation
    • Accessing Object Properties with Variables
    • Updating Object Properties
    • Add New Properties to a JavaScript Object
    • Delete Properties from a JavaScript Object
    • Using Objects for Lookups
    • Testing Objects for Properties
    • Manipulating Complex Objects
    • Accessing Nested Objects
    • Accessing Nested Arrays
    • Record Collection

FCC-21

JavaScript Algorithms And Data Structures Certification > Basic JavaScript

    • Iterate with JavaScript While Loops
    • Iterate with JavaScript For Loops
    • Iterate Odd Numbers With a For Loop
    • Count Backwards With a For Loop
    • Iterate Through an Array with a For Loop
    • Nesting For Loops
    • Iterate with JavaScript Do…While Loops
    • Profile Lookup
    • Generate Random Fractions with JavaScript
    • Generate Random Whole Numbers with JavaScript
    • Generate Random Whole Numbers within a Range
    • Use the parseInt Function
    • Use the parseInt Function with a Radix
    • Use the Conditional (Ternary) Operator
    • Use Multiple Conditional (Ternary) Operators

FCC-22

Front End Libraries Certification > jQuery

    • 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