Skip to main content

1. Intro to Web Dev

Duration​

  • Average for past successful students: 12 sessions
  • 90th percentile: 19

Expected Outcomes:​

At the end of the module, the student:

  • Can set up and manage their future projects using github/vscode
  • Gets into the habit of committing and pushing code frequently, ideally every day
  • Can create simple web apps using html, css and vanilla JS
  • Has a strong understanding of JS and programming logic, ready to move to ES6, React.js or Node.js

Topics​

Below are the topics that we expect students to know by the end of this module:

  • Why developers use Git & Github
  • Simple repo management: creating, cloning, committing, pushing
  • Proper README
    • Description (what is it?) + link to the actual web page
    • Motivation (why this project?)
    • How to install/setup
    • How to run
  • Github Pages
  • Structure of a web page (html + css + js) and the role of each part
  • Common HTML elements: headings, div, p, input
  • CSS
    • Sizing and styling
    • Important display options: block, inline, inline-block, flex, grid
    • Classes and IDs
    • Pseudo classes (:hover, :focus)
    • Selectors
  • Responsiveness (mobile friendliness)
  • Basic Accessibility: alt, colour contrast, semantic tags (navbar, section)
  • JavaScript
    • Variables: let, const, arrays, objects
    • Logic: if, switch, while, for
    • Functions
    • Accessing and modifying HTML using JS
    • Importing libraries using the <script>, e.g. bootstrap or axios
    • APIs
      • Understanding the structure of an API call (request, response, address, method, status, body)
      • Making API calls
      • Parsing JSON
    • Related to the above: the asynchronous nature of JS (event driven)
  • Debugging
    • Browser Developer Console
    • HTML/CSS inspector
    • Network inspector
    • JS Debugging using VSCode debugger + chrome

Nice to Have's​

  • branching, merging, pull requests

Some Tips:​

  • Don't spend too much time on HTML/CSS; focus on JS
  • Use a UI after a few sessions to make the project look nice
  • Check the #projects channel to see what others are doing
  • This is probably their first ever programming experience, keep it small in scope
  • There are lots of open APIs (weather, stock, restaurants, movies)
  • Use localstorage to save data between sessions, e.g. API Keys, user's name

Project Bank​

Here's a list of some of the projects for this module: