Overview

Tutorial

Calculator

Binary

Grades

Graph

Life

Snake

---

Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website. In this class, we will be using Fastpages on top of GitHub Pages to maximize our presentations, while minimizing our front-end coding.

• CSS style layout is provided by using Themes provided through GH Pages. Each page we make we assume the defined theme and insert our HTML fragments, local page style, and local page JavaScript.
• Fastpages defaults to the minima theme. Review the the README.md for style or layout customizations.
• GitHub Pages deployment is performed through Jekyll, which regenerates the website automatically after each commit, tracking can be seen in Actions tab within GitHub.
• HTML generation is performed through Liquid, a template language (similar to Jinja2 or Thymeleaf).
• JavaScript enable pages to have actions, fetch content, animate, etc

---

Sample Code in this Sub Menu

HTML, CSS, and JavaScript are the front-end of the Web. Many tools and languages complement development using markup, style and javascript. This section of the Del Note CS website is providing some code samples. These are intended to spark your own PBL ideas. Each of these were generated after watching others teach or interacting with students.

• Tutorial: This is a Jupyter Notebook built using the JavaScript kernel. This provides a few fundamentals of JavaScript language. Pull this file into VSCode and explore the fundamentals of the language.
• Calculator: This calculator was inspired by Mr. Mortensen’s calculator that he built in Objective-C during his first year of teaching at DNHS. It was recreated by former student Anthony using GitHub pages, HTML, JavaScript, and CSS in 2022.
• Binary: This example was created after watching Harvard CS50 by David J. Malan in 2020, he had built a machine to turn on and off lights/binary digits. My thought after watching machine, why not simulate it in software?
  • Liquid is used to generate the HTML bits and parameters for onclick actions
  • JavaScript is used base 2, 8, 16 calculations
• Grades: This grade calculator was created to show interaction of HTML and JavaScript to perform input. Additionally, it show how to add element to HTML Document Object Model (DOM). FYI, the IJavaScript kernel did not support input as of this writing.
• Graph: This was created when a student named Bryant 2022 asked me the question “how would I plot data?” as described in an FRQ.
  • JavaScript canvas is used to draw grid, axis, lines
• Life: This was created by Nathaniel 2022 when I asked him about something interesting to show students in JS that relates to school.
  • Built on Conway’s Game of Life (Wikipedia, Original)
  • Somewhat pure JavaScript, no canvas usage even though it has a grid.
• Snake: This was interest of students in each of my 3 years, inspiration and some of the code came from a student named Nolan 2021.
  • Contains menu and settings, as well as Grid
  • Uses JavaScript canvas and key events