Web Dev

👋

🕸️

🥾

📰

🛠️

📚

Free Code Camp Assignments – SS1 + SS2

Colorful legos on a hardwood floor.
Photo by Markus Spiske.

Free Code Camp is an interactive learning platform that we will utilize in this class like a textbook or exercise book. The lessons have been divided into sections that you’ll be assigned throughout the semester.

Not sure what’s due when? Check your syllabus!

It’s a little like building a house…

So why are we doing this? Imagine that you have to build a house, but you have no idea what tools you’ll need or even how to use them. Free Code Camp is going to show you those tools. Some will be simple and straightforward, like a hammer or screwdriver. Some will be more complex, like miter saw or a concrete mixer.

You might not need to use all those tools right away, and that’s fine! The point is to show you that the tools exist so that you’ll know what’s possible when you do need them.

To take our analogy a bit further, imagine that you’re walking through a big home improvement store. As you walk through the aisles you’ll encounter all sorts of tools and equipment that might inspire you in your house building adventure. You might not need to install light fixtures right now–maybe right now you’re still building the house’s frame– but when you get to that stage you’ll know where to go to get the tools you need to get the job done.

That’s Free Code Camp: it’s a collection of tools that you’ll explore so that you know what’s possible as you build increasingly sophisticated websites.

Time to channel our inner child…

As you work through these challenges, don’t be afraid to play! It’s a great idea to keep Visual Studio Code open while you work on Free Code Camp and test out how some of the tools work on real live code.

Don’t feel like you have to memorize every Free Code Camp lesson– that’s not the expectation! You can take notes if you’re a note-taking kind of person, but the best way to learn this stuff is to use it.

So seriously, channel your inner child and then channel your inner child’s inner mad scientist and have fun building and breaking and experimenting with all the tools Free Code Camp has to offer!

One last thing before you get started!

We’re going to be testing out some new curriculum this summer! I’m sure there will be some growing pains, but we will figure it out together. I’ve worked through every lesson you’ll be doing and there are some things you need to know before tackling the new curriculum!

  1. It looks like a LOT, and it kind of is, BUT a lot of it is repetitive. Make sure you read every step, but if you start getting the hang of it feel free to move through faster!
  2. If you get stuck, there are several steps you can take. First, try reading! Reread the step and check the error message below the submit button! The next thing to do is move on to the next step to see what the answer is /footnote/ (just make sure you go back so you get credit). Lastly, Google and then send me a Slack message.
  3. Take note that each exercise is being completed in a code editor just like Visual Studio Code! Making your own website will work the exact same way as it does in freeCodeCamp.

Good luck!

Basic HTML and HTML 5 (67 lessons total)

FCC-1

(New) Responsive Web Design Certification > Learn HTML by Building a Cat Photo App (67 lessons, Running Total (RT) 67)

Basic CSS (92 lessons total)

FCC-2

(New) Responsive Web Design Certification > Learn Basic CSS by Building a Cafe Menu (46 lessons, RT 113)

FCC-3

(New) Responsive Web Design Certification > Learn Basic CSS by Building a Cafe Menu (45 lessons, RT 158)

FCC-4

Legacy Responsive Web Design Certification > Basic CSS (18 lessons, RT 176)

  • 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
  • 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
  • Improve Compatibility with Browser Fallbacks
  • 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

Applied Visual Design (52 lessons total)

FCC-5

Legacy Responsive Web Design Certification > Applied Visual Design (18 lessons, RT 194)

  • 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-6

Legacy Responsive Web Design Certification > Applied Visual Design (19 lessons, RT 213)

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

Legacy Responsive Web Design Certification > Applied Visual Design (15 lessons, RT 228)

  • 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 Bézier curve

FCC-8

(New) Responsive Web Design Certification > Learn the CSS Box Model by Building a Rothko Painting (45 lessons, RT 273)

FCC-9

(New) Responsive Web Design Certification > Learn CSS Flexbox by Building a Photo Gallery (21 lessons, RT 294)

Applied Accessibility (22 lessons total)

FCC-10

Legacy Responsive Web Design Certification > Applied Accessibility (12 lessons, RT 306)

  • 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

FCC-11

Legacy Responsive Web Design Certification > Applied Accessibility (10 lessons, RT 316)

  • 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

Responsive Web Design Principles (4 lessons total)

FCC-12

Legacy Responsive Web Design Certification > Responsive Web Design Principles (4 lessons, RT 320)

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

Bootstrap (31 lessons total)

FCC-13

Front End Libraries Certification > Bootstrap (9 lessons, RT, 329)

  • 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-14

Front End Libraries Certification > Bootstrap (13 lessons, 338)

  • 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-15

Front End Libraries Certification > Bootstrap (9 lessons, RT 351)

  • 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

This concludes the required lessons.

NOTE: the javascript lessons are optional

Basic JavaScript (110 lessons total)

FCC-16

JavaScript Algorithms And Data Structures Certification > Basic JavaScript (35 lessons, RT 386)

  • 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-17

JavaScript Algorithms And Data Structures Certification > Basic JavaScript (19 lessons, RT 405)

  • 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-18

JavaScript Algorithms And Data Structures Certification > Basic JavaScript (25 lessons, RT 430)

  • 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-19

JavaScript Algorithms And Data Structures Certification > Basic JavaScript (13 lessons, RT 443)

  • 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-20

JavaScript Algorithms And Data Structures Certification > Basic JavaScript (18 lessons, RT 461)

  • 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
  • Replace Loops using Recursion
  • 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
  • Use Recursion to Create a Countdown
  • Use Recursion to Create a Range of Numbers

jQuery (18 lessons total)

FCC-21

Front End Libraries Certification > jQuery (18 lessons, RT 479)

  • 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

479 lessons total