/udacity-fsnd

Udacity Full Stack Web Developer Nanodegree program (FSND) course materials

Primary LanguageJupyter NotebookMIT LicenseMIT

README

Udacity logo

Udacity Full Stack Web Developer Nanodegree program

Brendon Smith

br3ndonland

license

Table of Contents

Description

This is a repository for Udacity Full Stack Web Developer Nanodegree program (FSND) course notes and materials.

Full stack web developers work on all aspects of websites and apps, from front end (features that users see) to back end (servers and databases). In this program, I built skills including:

  • Developing webpages based on mockup images from designers
  • Querying and manipulating large databases with SQL
  • Creating functional multi-page web apps with databases and sign-ins
  • Fetching data from Application Programming Interfaces (APIs)
  • Deploying apps to Linux servers

Projects

The Full Stack Web Developer Nanodegree program is focused on projects, in which students can independently implement what they have learned in the lessons. I stored each project in its own repository.

  1. Python web server movie trailer site
  2. Portfolio website
  3. SQL database logs analysis
  4. Python Flask catalog app
  5. Neighborhood map
  6. Linux server deployment

Lessons

Udacity provides lessons prior to each project. The lesson curriculum could benefit from some reorganization. I have included my suggested organization below, and have organized repository materials in my suggested order.

Strategies

  • Focus on projects. The Nanodegree is awarded for projects, not lessons and quizzes. As you advance, you may want to just skip directly to the projects, and go back through the lessons as needed. Other students have succeeded with this project-focused approach.
  • Limit lesson time. Speed up videos to 1.5x or 2x, and set a timer when working through the lessons. I used the Pomodoro technique, and limited myself to 25 minutes max per lesson section. I would often complete 2-3 lesson sections per 25 minute interval.
  • Limit quiz attempts. When I was getting started, I aimed to complete 100% of the lesson material, and I took the quizzes too seriously. I pushed myself to answer quiz questions correctly without checking solutions. This caused me to hit sticking points, and I would sometimes take 1-2 days just to complete a quiz. As I went on, I set a limit of three quiz attempts. If I didn't get it in three attempts, I would check the solution and move on.

See my program feedback for more comments.

Course progression

The lessons are mostly material from free courses. Here is how I would suggest progressing through the FSND program:

  1. Programming foundations
  2. The front-end
  3. The back-end
  4. Web applications
  5. Servers

(Back to top)

Code

Markdown

Markdown intro

Markdown is a syntax for easy generation of HTML pages from plain text files. It has most of the functionality of HTML while being much easier to read, and is very widely used (for example, READMEs on GitHub).

I take notes on the lessons in Markdown.

When coding projects, I keep computational narratives describing what I do at each step, like journals or lab notebooks. I learned how to keep computational narratives from scientific computing in Jupyter Notebook/JupyterLab and RMarkdown. Computational narratives capture the process, so I can retrace my steps, retain what I have learned, and teach others.

Examples of my computational narratives are available for projects including the portfolio website and the SQL database logs analysis. I also created a Markdown guide during the Grow with Google program to explain how I use Markdown.

Syntactic suggestions

Suggestions for standardized Markdown formatting have been provided by markdownlint and Markdown Style Guide. Here are a few personal pointers:

Headers
  • Create headers with #. Each # increases header level (## is outline level two), up to six levels.
  • For organization, I reserve H1 (#) for the title of the file at the top. Major headers begin with H2 (##).
  • I use headers to create a Table of Contents (TOC) at the beginning of the file.
    • I add ## Table of Contents before the TOC for navigation.
    • I include (Back to top) links after each section for easy navigation back to the table of contents. Simply write [(Back to top)](#top).
    • I add and auto-update TOCs in vscode with the Markdown All in One extension. See below for more on vscode.
    • Markdown All in One, JupyterLab and RStudio provide inline TOC displays (see below).
    • Prior to vscode, I was adding and updating TOCs with DocToc from the command line.
Lists
  • I use dashes exclusively for lists.
  • When adding an unordered list to an ordered list (or vice versa), I indent with four spaces.
File extensions
  • Several different extensions can be used, including .md, .mdown, and .markdown.
  • I prefer to use .md for brevity and consistency.

Python

  • Python code is formatted for Python 3 and PEP 8. Line length is relaxed to 100 characters when permitted.

  • JupyterLab can be used to run Jupyter Notebook files locally. I would suggest using JupyterLab within a Pipenv virtual environment.

  • I install Python and the Pipenv virtual environment tool on macOS via Homebrew. I install JupyterLab with Pipenv. Once installation is complete, navigate to your project's directory, install dependencies, and run JupyterLab.

  • Here are the necessary command line arguments:

    brew install python3
brew install pipenv
brew install jupyter
cd path/where/you/want/jupyterlab
# On first install: pipenv install jupyterlab requests numpy statistics twilio
# After Pipfile is generated
pipenv install
pipenv shell
# Install any JupyterLab extensions at this point
(pipenv) $ jupyter labextension install @jupyterlab/toc
(pipenv) $ jupyter lab

  • I previously used Anaconda to manage my Python and R distributions, and now use Homebrew. I switched because Anaconda is a very large installation, not as flexible or general as Homebrew, and not as important for virtual environments now that we have Pipenv.

  • A Binder is available to run the Jupyter Notebook files in the cloud. Binder

JavaScript

  • JavaScript Standard Style (two-space indentations, no semicolons)
  • There is a StandardJS vscode extension available for linting and autoformatting.
  • Semicolons are syntactic clutter. Much like multivitamins, semicolons provide peace of mind while being unnecessary. Omitting semicolons, and using ES6 features like template literals (similar to Python 3 string formatting), also allows me to easily switch between JavaScript and Python.

HTML and CSS

  • Two-space indentations.

Software

  • For the foundational Python programming work (part 1, lessons 00-11), I took notes and ran my code in Jupyter notebook files. Jupyter notebook was a nice way to bundle Markdown-formatted notes with Python code, but it lacked the speed and autocompletion features of other text editors.
  • As I continued, I kept separate files for code and Markdown notes. I was originally writing in Sublime Text, but switched to Visual Studio Code (vscode). I configure vscode using Settings Sync with this gist.
  • For my terminal application, I used iTerm2 and Hyper.
  • I used Firefox Quantum Developer Edition as my web browser.
  • Some of the work was done in a Vagrant Linux virtual machine with the following components:
    • Oracle VirtualBox Version 5.2.6 r120293 (Qt5.6.3)
      • Software that runs special containers called virtual machines, like Vagrant.
    • Vagrant 2.0.1 with Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-75-generic i686)
      • Software that provides the Linux operating system in a defined configuration, allowing it to run identically across many personal computers. Linux can then be run as a virtual machine with VirtualBox.
    • Udacity Virtual Machine configuration
      • Repository from Udacity that configures Vagrant.
      • My personal fork of the configuration is also available on GitHub if needed.

(Back to top)