Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 06b5a6d

Browse files
TjebbeeTjebbee
authored
Update LESSONPLAN.md
1 parent d3bce70 commit 06b5a6d

File tree

1 file changed

+74
-34
lines changed

1 file changed

+74
-34
lines changed

‎Week1/LESSONPLAN.md

Lines changed: 74 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,73 +16,113 @@ The purpose of this class is to introduce to the student (1) the basics of worki
1616
- CSS basics
1717
- The box model
1818

19-
## FIRST HALF (12.00 - 13.30)
19+
## Core concepts
20+
FIRST HALF (12.00 - 13.30)
2021

21-
### 1. Command line interface basics
22+
## 1. Command line interface basics
2223

24+
### Explanation
2325
- The command line interface (CLI) is a way to navigate your computer by issuing direct commands
2426
- In the past computer had **just** a command line
2527
- Desktop application icons are visual shortcuts (Windows: show `$ calc` to launch the calculator)
26-
27-
_Tell and show basic command line concepts: `~`, `$`, path, avoid spaces, ctrl+c to cancel, arrow up to go through history, Windows: right click paste_
28-
29-
_Show students the most commonly used commands (`ls`, `pwd`, `cd`, `echo`, `cat`, `mkdir`, `touch`, `mv`, `cp`, `clear`, `exit`)_
30-
31-
### 2. Exercise
32-
28+
### Example
29+
30+
| Command | Description |
31+
| ------- | ----------- |
32+
| `pwd` | present working directory |
33+
| `ls` | List files in the directory |
34+
| `cd` | change the directory |
35+
| `touch` | Create an empty file |
36+
| `echo` | display the string |
37+
| `echo -n` | Display the string without newline |
38+
| `echo “something” > file` | Redirect the output of echo and create file |
39+
| `echo “another thing” >> file` | Append the string to the file |
40+
| `mkdir` | make a new directory |
41+
| `cd ~` | home |
42+
| `cd -` | previous directory |
43+
| `cd ..` | parent directory |
44+
| `ls -a` | List all files including hidden files |
45+
| `cd /` | change to the root directory |
46+
| `cat` | Concatenate the file line by line and display it on the terminal |
47+
| `less` | Print the big file line by line |
48+
| `vim <file>` | open the editor with <file> {`a:` to go to the insert mode, <ESC>`:wq` to write and quit } |
49+
| `for var in {START..END}; do <COMMAND1>; <COMMAND2>;..; ; done` | |
50+
| `head <file>` | display the first 10 lines of file |
51+
| `tail <file>` | display the last 10 lines of file |
52+
| `head -n <file>` | display first n lines of file |
53+
| `tail -n <file>` | display last n lines of file |
54+
| `man <COMMAND>` | Display manual of the COMMAND |
55+
56+
### Excercise
3357
- Open a command line (Git Bash on Windows)
3458
- Create a project folder to contain all your HYF work (mkdir)
3559
- Create a module folder (cd, mkdir)
3660
- Create a text file: notes.txt (cd, touch)
3761
- Open Visual Studio Code and add some notes (code .)
3862
- Rename the file to lecture1.txt (mv)
3963

40-
## SECOND HALF (14.00 - 16.00)
4164

42-
### 1. HTML basics
43-
44-
- HTML is just plain text, nothing special
45-
- Browsers read the HTML and CSS and render a beautiful webpage
46-
- HTML of a website comes from a server (which is just another computer somewhere)
65+
_"I go on holiday and I take with me"_ with CLI commands:
4766

48-
_Show most basic HTML structure, also show how Visual Studio Code can autocomplete html structure by just typing: html_
67+
- They have to repeat the commands said before them.
68+
- Add a new command and explain what it does.
69+
- Let the round continue twice otherwise the students that went first don't have to repeat all the commands.
4970

50-
### 2. Difference `<head>` and `<body>`
71+
E.g., first student says _"ls : lists commands"_. Second student must say _"ls and cd: change directory"_. Then third student must say _"ls, cd and pwd : show print working directory"_ and so on.
72+
_By [@unmeshvrije](https://github.com/unmeshvrije)_
73+
### Essence
5174

52-
- The `<head>` holds all the page's meta-data: information about the complete webpage
75+
SECOND HALF (14.00 - 16.00)
5376

54-
_Show examples of what the `<head>` could hold and why: `<title>`, `<link>`, `<meta>`_
77+
## 2. HTML basics
78+
### Explanation
79+
- HTML is just plain text, nothing special
80+
- Browsers read the HTML and CSS and render a beautiful webpage
81+
- HTML of a website comes from a server (which is just another computer somewhere)
82+
- Difference `<head>` and `<body>`
5583

56-
- The `<body>` holds all the elements that will be displayed in the browser
84+
Box model
85+
- Everything is a box
86+
- The "box" refers to the attributes universal to every element: `margin`, `padding`, `border`
87+
- Every element pushes against one another
5788

58-
_Show examples of commonly used HTML tags: `<h1>`, `<a href="#">`, `<div>`_
89+
### Example
90+
- Show most basic HTML structure, also show how Visual Studio Code can autocomplete html structure by just typing: html
91+
- `<title>`, `<link>`, `<meta>`
92+
- Show example of the box model by using the browser inspector on various elements
93+
### Excercise
94+
- Using the command line create a project folder, a html file and css file
95+
- Create a basic html structure, and link to an external css file
96+
- Create a webpage which uses all the html tags and css properties which were have discussed
97+
### Essence
5998

60-
### 3. Semantic HTML5
99+
## 3. Semantic HTML5
61100

101+
### Explanation
62102
- Explain why there are `<h1>`, `<h2>`, `<h3>`
63103
- In theory a page can be constructed using only `<div>`s
64104
- Semantic tags make the code more comprehensible
65105
- It helps organize the page
66106

67-
_Show examples of semantic HTML: `<header>`, `<footer>`, `<section>`_
107+
### Example
108+
### Excercise
109+
### Essence
68110

69-
### 4. CSS Basics
70111

112+
## 4. CSS Basics
113+
114+
### Explanation
71115
- Explain inline css, `<style>` block css and external css
72116
- Roughly two types of CSS, styling (text) and CSS for layout structure
73117

74-
_Show different ways to write css, and some basic css properties: `font-size`, `background-color`, `border`_
118+
### Example
119+
Show different ways to write css, and some basic css properties: `font-size`, `background-color`, `border`
120+
### Excercise
121+
### Essence
122+
123+
75124

76-
### 5. The box model
77125

78-
- Everything is a box
79-
- The "box" refers to the attributes universal to every element: `margin`, `padding`, `border`
80-
- Every element pushes against one another
81126

82-
_Show example of the box model by using the browser inspector on various elements_
83127

84-
### 6. HTML/CSS Exercise
85128

86-
- Using the command line create a project folder, a html file and css file
87-
- Create a basic html structure, and link to an external css file
88-
- Create a webpage which uses all the html tags and css properties which were have discussed

0 commit comments

Comments
 (0)