Andy Brown's IPND Notes

Project Examples

Examples of what your project may look like at various stages of the Nanodegree.

Stage 0

HTML with <b>, <p>, and <em> tags.

See the Pen ByVLVX by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Stage 1 Work Session 2

Structured HTML (no CSS).

See the Pen LEjWaj by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Stage 1 Complete

Structured HTML with CSS styling.

See the Pen KweNKa by AndyAtUdacity (@AndyAtUdacity) on CodePen.

HTML and CSS Core Concepts

Demonstrations of various HTML and CSS concepts covered in Nanodegree courses.

Inline vs Block Demo

A demonstration of various HTML elements to determine which are block-level and which are inline.

See the Pen LEqLNz by AndyAtUdacity (@AndyAtUdacity) on CodePen.

<span> vs <div> Demo

An example showing the difference between spans and divs and what it means to "nest" elements.

See the Pen LEqLje by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Using Classes to Style Elements

Simple traffic light demonstrates how to use classes to style certain elements.

See the Pen OPdjXy by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Multiple Classes on one Element

More sophisticated traffic light example shows how to give a single element multiple classes.

See the Pen RNvZRX by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Making Reusable CSS Classes

Demonstrates how to create reusable CSS classes (comes from Codepen user mandybee).

See the Pen EapyqV by mandybee (@mandybee) on CodePen.

Additional Topics

JavaScript, Advanced HTML / CSS, and anything else.

JavaScript Clickable Traffic Light

Demonstrates some simple JavaScript.

See the Pen MYxWjY by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Making Shapes with CSS

Shows how to make various shapes through clever use of borders and rotations.

See the Pen vEbWBp by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Nested Rows and Columns

Shows behavior of nested rows and columns.

See the Pen LEqJaw by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Scratchpad vs. Codepen vs. Sublime

A table that breaks down the pros and cons of these three tools.

See the Pen azYrBM by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Drawing with CSS

Warning: you will spend hours tweaking attribute values if you go down this road.

See the Pen GgzVrK by AndyAtUdacity (@AndyAtUdacity) on CodePen.

RGB Playground

Shows how different amounts of red, green, and blue can create colors.

See the Pen wBOBrG by AndyAtUdacity (@AndyAtUdacity) on CodePen.

Codepen Examples