The purpose of this class is to introduce to the student (1) the basics of working with the command line interface, and (2) basic HTML/CSS concepts:
FIRST HALF:
- Command line interface basics
SECOND HALF:
- Difference
<head>and<body> - Semantic HTML5
- The box model
FIRST HALF (12.00 - 13.30)
- Command line interface basics
- The command line interface (CLI) is a way to navigate your computer by issuing direct commands
- Desktop application icons are visual shortcuts
- Commonly used commands
Show students the most commonly used commands (ls, pwd, cd, echo, cat, mkdir, touch, head, tail)
SECOND HALF (14.00 - 16.00)
- Difference
<head>and<body>
- The
<head>holds all the page's meta-data: information about the complete webpage
Show examples of what the <head> could hold and why: <title>, <link>, <meta>
- The
<body>holds all the elements that will be displayed in the browser
Show examples of commonly used HTML tags: <h1>, <a href="#">, <div>
- Semantic HTML5
- In theory a page can be constructed using only
<div>s - Semantic tags make the code more comprehensible
- It helps organize the page
Show examples of semantic HTML: <header>, <footer>, <section>
- The box model
- Everything is a box
- The "box" refers to the attributes universal to every element:
margin,padding,border - Every element pushes against one another
Show example of the box model by using the browser inspector on various elements