Full Stack Web Developer Course

Course Description

This course teaches fundamental web development skills. Even though it is designed as a High School curriculum, the course prepares students for real world web developer skills- and can be used immediately in the work place to build powerful business applications.

Prerequisites

This course aims to be both welcoming to people without experience in programming, web or mobile app development, and valuable to those who have some experience in these areas.

  • Students must be familiar with using a laptop or macbook computer
  • Familiarity with basic computer skills such as:
    • Ability to navigate the file system of computer using Windows (file) Explorer, or Finder in MacBook
    • Creating files and folders, saving files, editing files
    • Familiarity with different file extensions such as .txt .html .php .css .js .json .sql

Attendance is critical to succeed in this Full Stack Developer course. The course moves at a rapid pace and it is expected that all students be present. If you foresee that you will miss a session, please email the instructor. It will be up to the student to seek out information missed.

Course Overview

In this course students will:

  • Learn HTML5, CSS, JavaScript, PHP, SQL, MySQL, Bootstrap, and jQuery
  • Learn PHP for server code execution
  • Learn SQL for programming dynamic web pages with PHP
  • Learn MySQL for saving data (databases)
  • Learn how to use the Bootstrap framework for rapid web development
  • Build three (3) dynamic web apps that solve specific business problems

Course Outline

Introduction to Full Stack Web Development

Fundamentals of Computer Science

This section covers the theory associated with the High School Computer Coding Competition (HSCC)

Topics covered are selected from the book Computer Science Principles: The Foundational Concepts of Computer Science

  • Unit 1: The Computer: Basics and Binary
    • Computers
    • Software
    • Hardware
      • The Von Neumann architecture (i.e. software as data)
      • Hardware components (e.g. CPU, RAM, BIOS, graphics, motherboard)
      • Storage
        • HDD vs SSD
        • Memory (primary storage) vs Storage (secondary storage)
    • Volatile versus Non-volatile
    • The Power of Two
    • Converting Binary to Decimal Format
    • Binary and Hexadecimal math
    • Important Vocabulary
  • Unit 4: Data and Compression
    • Metadata
    • Color Images and RGB Values
    • Important Vocabulary
  • Unit 5: The Internet
    • Origins
    • IP Addresses
    • IPv4 vs. IPv6
    • The Web
    • HTML
    • Addressing
    • DNS
    • TCP/IP
    • Fault Tolerant
    • Routers
    • The Internet Infrastructure
    • Speed
    • Important Vocabulary
  • Unit 7: Big Data and Security
    • Big Data
    • Security
    • Cryptography
    • Public Key Encryption
    • How Public Key Encryption Works
    • Public Key Security Certificates
    • Important Vocabulary
  • Cyber Security
    • Security Principles
      • Multi-factor authentication
      • Storing passwords and other sensitive information securely (in databases)
      • Determining password strength
      • HTTP vs HTTPS
      • Basic SSL/TLS facts
      • Email security best practices
      • Internet browsing best practices
      • Social engineering (phishing, spear phishing)
      • Definitions (hashing vs encryption, SHA1, SHA2, MD5, authenticity, fidentiality, integrity)
    • Adversary
      • Malware (viruses, worms, trojans, rat, rootkit)
      • Virus vs malware (anti-malware and how it works)
      • Various attack types (MitM, D/DoS, Replay, CSRF, XSS)
    • Further reading: https://github.com/DerekBabb/CyberSecurity
  • Basic Networking
    • Basic facts about the ISO-OSI model
    • Basics of TCP/IP (facts about IP addresses, ports, packets)
    • Basics of routing
    • Basics of Firewalls
  • Basic Cloud
    • What is a bucket?
    • What is the cloud?
    • Public cloud vendors: AWS, Google GCP, Azure

Business Logic

Why build a web app, or mobile app?

Review the Software Development Life Cycle SDLC

  • Input
  • Process
  • Output

Front End Developer

  • HTML
    • What is HTML?
    • Elements
    • Block Elements
    • Attributes
    • Make a new line using HTML
    • Headers And Paragraphs
    • Creating hyperlinks
    • Using images
    • Text Formatting
    • Inline styling with the style attribute
    • HTML Comments
    • The most common element: <div>
    • Introduction to lists
    • Creating Tables
    • Accepting information with forms
  • CSS
    • What Is CSS?
    • How to write CSS: syntax
    • Using style sheets
    • Using external style sheets
    • Identities and classes
    • Style entire elements
    • CSS Comments
    • Change background colors
    • Setting background images
    • Change text color
    • Text formatting using CSS
    • Font Properties
    • Text Properties
    • Styling hyperlinks using CSS
    • Styling lists using CSS
    • Setting element width and height
    • Adding borders
    • Spacing: margin & padding
    • Change the mouse type: cursor
    • Hide, show and display elements
    • What to do with overflowing content
  • JavaScript
    • JavaScript Essentials
    • What is JavaScript?
    • JavaScript: Internal vs. External
    • JavaScript comments
    • document.write();
    • Display info from the browser: alert & confirm
    • Prompting the user for information
    • Programming fundamentals: Variables
    • Add two sentences together: concatenation
    • Basic math in JavaScript
    • Redirecting users and opening new windows
    • Creating empty hyperlinks
    • String Manipulation
    • Comparing variables and values
    • Programming fundamentals: If...Else Statements
    • Programming fundamentals: Else...If Statements
    • Programming fundamentals: Switch Statements
    • Programming fundamentals: Functions
    • JavaScript Events
    • Selecting HTML elements using getElementById()
    • Escaping content
    • Programming fundamentals: Arrays
    • Programming fundamentals: For Loops
    • Programming fundamentals: While Loops
    • Programming fundamentals: Breaking Out Of Loops
    • Programming fundamentals: Skipping A Loop Cycle
  • Bootstrap - HTML/CSS/JavaScript Framework
    See Tutorial on W3Schools Website

Backend Developer

  • PHP Basics
    • What Is PHP?
    • Syntax & Hello World
    • How to write comments in PHP
    • Introduction to PHP Variables
    • Strings & Concatenation
    • Replace areas of a string
    • Manipulate other areas of a string
    • Displaying HTML entities
    • PHP Lists: Arrays
    • Creating and destroying arrays: explode & implode
    • Operators
    • if...else Statements
    • elseif Statements
    • if/else statements: Ternary Logic
    • Switch Statements
    • for Loops
    • while Loops
    • Break From Loops
    • continue, is_array() and quotes
    • Including Files
    • Functions
    • Constants. The unchangeable variable.
    • Checking if something exists
    • Accepting information - forms
    • Server date and time
  • PHP Essentials

    These are some of the PHP keywords and functions commonly used in this course.
    This list will continue to grow

    
      $_REQUEST
      $_SERVER['DOCUMENT_ROOT']
      __DIR__
      preg_replace
      empty
      include_once
      if
      while
      foreach
      for
      return
      HereDoc
      trim
      count
      mysqli_query
      mysqli_error
      mysqli_num_rows
      mysqli_fetch_array
      mysqli_num_field
      strtoupper
      strtolower
      echo
      continue
      stripslashes
      global
      return
  • PHP Advanced
    • Temporarily save user information: Sessions
    • Server Super Global Variables that are usable anywhere
    • Connecting to MySQL/MariaDB Databases
    • Saving records to a database (create)
    • Fetching rows from a database (read)
    • Updating rows in a database (update)
    • Deleting rows in a database (delete)
    • Uploading files
    • Sending emails
    • Introducing file systems and managements
    • Creating new files
    • Writing to existing files
    • Read file contents
    • Add information to a file
    • Deleting a file
    • All File Modes
  • MySQL/MariaDB
    • Learn how to access the MySQL database installed on the laptops
    • Look into the basics of SQL and how to use with the built-in phpMyAdmin database tool that came with the installation
    • Review syntax for how to create, update, delete (CRUD) tables and data
    • Create a few tables that we will be working with during this course
  • SQL - Indepth instruction of the SQL code used to Create, Update and Delete data in a database
    • MySQL Database
    • What is SQL?
    • Setting up a Database
    • Introducing phpMyAdmin
    • MySQL Syntax
    • Tables, Columns and Rows
    • Connecting to a Database
    • Creating a Table: 5 Columns and 3 Rows.
    • Inserting Information
    • Escaping Information
    • Get information that is stored in a database
    • Selecting specific information: The WHERE clause
    • Selecting specific information: The And/Or clauses
    • Limiting results and ordering data
    • Updating the database
    • Deleting stored information

Developer Tool Bag

In this course we will setup and use XAMPP, Bootstrap, and jQuery

XAMPP is a free, easy to install Apache distribution containing MariaDB/MySQL DB, and PHP. It is used to enable your personal computer with the web and database tools necessary to host its own dynamically driven websites for testing and development purposes.

Our development tools will include:

  • Apache Web Server (from XAMPP)
  • PHP scripting language (from XAMPP)
  • MySQL/MariaDB Database (from XAMPP)
  • phpMyAdmin Database Management App (from XAMPP)
  • Bootstrap
  • jQuery
  • Code Editors e.g. Notepad++, Atom, etc
  • Git BASH Source Code Control

All software used in this course is FREE, open source, and appropriately licensed for personal or commercial use at no cost

Setup your Environment

Use these instructions to setup your environment

Coding Guidelines

You will most likely be presented with a challenge to build a web app that involves a login, calculations, and basic navigation on different screens.

Tip #1 - Create your folder structure immediately. Use the following inside htdocs:

  • /data (to hold your sql schema, database related info)
  • /lib/db.php (this is your database connection)
  • /forms (to hold all your forms)
  • /web-assets/css (move bootstrap css into here)
  • /web-assets/js (move bootstrap, popper and jQuery js into here)
  • /web-assets/tpl (to hold your app_header.php and app_footer.php)

Tip #2 - Figure out which forms are required or needed

At a minimum, you will need the following:

  • login form
  • change password form
  • lost/forgoten password form
  • user profile or registration form

Tip #3 - Assign actions inside index.php that will trigger specific pages to be displayed:

examples:

  • w=login_f (will cause login form to be displayed)
  • w=login (will cause login form to be processed)
  • w=profile_f (will cause profile/user registration form to be displayed)
  • w=profile (will cause profile/user registration form to be processed)
  • ...

Tip #4 - All your files MUST be .php files (except for bootstrap and javascript files)

Tip #5 - Your forms must be plain html/css

  • Make sure there is no processing or unnecessary php logic inside your forms
  • All your form actions should be: <form action="/" method="post">

Tip #6 - Lowercase names

  • All file names MUST be in lowecase letters
  • Filenames must not contain any spaces or special characters
  • All database column names and form field names MUST be in lowercase
  • All field names MUST be the same as column names (NO EXCEPTIONS)

Real Life Apps

We will build real-life apps that solve specific business problems

  • Project: Web App #1 (tba)
  • Project: Web App #2 (tba)
  • Project: Web App #3 (tba)

Mobile App Development

The Mobile App Development Track option (20 weeks) teaches introductory and intermediate skills that help students brainstorm, plan and build business apps that could be potentially deployed to the Apple App Store (iPhone/iPad/Mac) or Google Playstore (Android Devices)

Students present their Apps to regional judges in a Mobile App Development competition

Curriculum

  • Mobile app Orientation
  • Intro to JavaScript
  • Intro to React Native
  • Manage your project with Trello
  • Create Wireframes/functionality
  • Labels, Buttons, and Actions
  • List views
  • Navigation
  • Layout
  • Styling in React Native
  • Styling pt 2
  • Authentication
  • Using External Database Firebase CRUD
  • Database pt. 2
  • Using Audio/Video Camera
  • Using Location
  • Using Search
  • Push Notifications
  • Publishing to the store, Competition Prep

Grading

  • Attendance - 10%
  • Homework - 20%
  • In-class Quizzes - 30%
  • Web App projects - 40%

Resources