Skip to main content

Day 2 - Box Developer Fast Track

Prep

Watch list

Reading list

Search list

  • “the box model”
  • “codepen getting started”

Housekeeping

  • CPNT 201 - Assignment 2 is due tonight
    • We’ll review the git add, commit and push process after lunch
  • Late Penalties on Assignments:
    • 10% deduction per day;
    • Assignments will be accepted up to 3 days late.

1. Slides: The Browser Triad

The Browser Triad

Quiz time: UI Icons and the Triad

UI Quiz Slides In groups of 3-4:

  1. Discuss each of the User Interface icons listed in the above;
  2. Decide on which Triad technology (HTML, CSS, JS) the icon is most associated;
  3. Report your answers in the main room.

2. Codepen tour

  • Create a Codepen account.
  • Search: ”codepen tutorial” or similar

Lab: Pair-coding

In groups of two, decide on which lab you’d like to collab on.

See: Introduction to Pair Programming with Fiona and Semira

Wiki markup Use openly licensed text of your choice from Wikipedia or similar service. Code it in HTML using Codepen. Start with the following HTML tags:

  • h1-h3: headings
  • p: paragraphs
  • a: links
  • strong, em: bold and italicize
  • ul and/or ol: unordered and ordered lists

3. Setting up dailies, projects and assignments directories

It’s recommended that you set up the following directories in your workspace:

  1. dailies for day-to-day code as one repo:
    /dailies
    /2022-09-19-box-model
        /topic-1
        /topic-2
    /2022-09-20
        /more-topics
  2. projects for misc repos
    /projects
   /portfolio-site
   /moms-bakery
   /client-1
  3. assignments for repos that contain WBDV assessments to be handed in:
    /cpnt-260
    /assignment-1
    /assignment-2
    /etc
/cpnt-262
    /assignment-1
    /etc

Demo: Codepen Challenge

Instructions

  1. Copy and paste the code of this empty HTML file into a file named index.html. Place this file inside it’s own repo named codepen-challenge.
  2. Move the code inside the Codepen HTML panel to a <body> element of an empty HTML page named index.html;
  3. Move the code inside the CSS panel to a <style> element inside <head> element of the same HTML page;
  4. Move the code inside the JS panel, if it exists, to a <script> at the bottom of the <body> element of the HTML page;
  5. Confirm the page is working as expected;
  6. Push index.html to a GH repo named codepen-challenge and enable GH Pages;

Lab Time