diff --git a/README.md b/README.md index d2d9702..dcaa3e9 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,10 @@ # Contents -Material completion denoted with 🌑🌘🌗🌖🌕 . - -| # | Lecture | Materials | Exercises | -| ---: | ------------------------------------- | --------: | --------: | -| 1 | [Example Lecture](example-lecture.md) | 🌕 | 🌕 | - - -## Repository notes (remove before publishing) - -- After reading, remove [example-lecture.md](./example-lecture.md), [example-lecture-slides.html](./example-lecture-slides.html) and [buuttilogo.png](./imgs/buuttilogo.png) -- See [Markdown code snippets](.vscode/markdown.code-snippets) for autocomplete stuff. -- Remove the .gitkeep files from imgs and solutions folders after adding new files to those folders. - -## Running scripts to convert lectures to MD - -Note: These instructions are for a Windows PC with WSL installed - -1) Install `pptx2md`: in an admin powershell, run `pip install pptx2md` -2) copy `.pptx` lecture slides to `.scripts` folder -3) In the `.scripts` folder, run `.\convertAndReplaceAll.bat` -4) If everything went ok, move the generated `.md` files and the `imgs` folder to the root folder -5) Remove .pptx files and the example lecture and its slides html -7) In the `.scripts` folder, run `python generateREADME.py` -8) Remove everything else from README than the generated table \ No newline at end of file +| # | Lecture | Slides | +|:--|:-------------------------------------------------|:----------------------------------------------------| +| 1 | [Introduction to the Web](1-web-introduction.md) | [Download slides](1-web-introduction-slides.html) | +| 2 | [HTTP](2-http.md) | [Download slides](2-http-slides.html) | +| 3 | [HTML basics](3-html.md) | [Download slides](3-html-slides.html) | +| 4 | [CSS](4-css.md) | [Download slides](4-css-slides.html) | +| 5 | [Bootstrap](5-bootstrap.md) | [Download slides](5-bootstrap-slides.html) | +| 6 | [JS in HTML & DOM](6-js-in-html-and-dom.md) | [Download slides](6-js-in-html-and-dom-slides.html) | diff --git a/example-lecture-slides.html b/example-lecture-slides.html deleted file mode 100644 index dcc8159..0000000 --- a/example-lecture-slides.html +++ /dev/null @@ -1,112 +0,0 @@ -N. Example Lecture
-

Example Lecture

-
-
-

Section

-
    -
  • This line appears instantly
    • -
-
    -
  • This line appears by pressing spacebar (preferred)
    • -
  • This line has an inline code variable
    • -
-
    -
  1. This line appears instantly
    2. -
-
    -
  1. This line appears by pressing spacebar
    2. -
-
-
-

Code and maths

-
    -
  • code code code:
    console.log("Here's a syntax-highlighted JavaScript code block");
-console.log("Remember indentation so it's revealed after the bullet point.");
-
    -
    • -
  • This line has an inline LaTeX maths equation
    • -
  • Here's a maths block:
    • -
-

Footers are exclusive to presentation; they are not shown in the webpage markdown document
-
-
-

Columns

-
-
-

-
    -
  • Basic image example
    • -
-
-
-

-
    -
  • Wider image
    • -
-
-
-
    -
  • This line is outside the columns and goes from left all the way to the right
    • -
-
-
-

Columns 2

-
-
-
    -
  • Another column example with a wider left panel
    • -
-
-
-
    -
  • Change class name to change proportions
    • -
  • If suitable proportions not available, add to buutti.css
    • -
-
-
-
-
-

Setup

- -
-
\ No newline at end of file diff --git a/example-lecture.md b/example-lecture.md deleted file mode 100644 index 6c11c6d..0000000 --- a/example-lecture.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -marp: true -paginate: true -math: mathjax -theme: buutti -title: N. Example Lecture ---- - -# Example Lecture - - - - -## Section - -- This line appears instantly -* This line appears by pressing spacebar (preferred) -* This line has an inline code `variable` -1. This line appears instantly -2) This line appears by pressing spacebar - -## Code and maths - -* code code code: - ```js - console.log("Here's a syntax-highlighted JavaScript code block"); - console.log("Remember indentation so it's revealed after the bullet point."); - ``` -* This line has an inline LaTeX maths equation $c = \frac{a^2}{\sqrt{b}}$ -* Here's a maths block: - -$$ -F(x) = \int_a^b f(x) dx -$$ - - - -## Columns - -
-
- -![](imgs/buuttilogo.png) - -* Basic image example - -
-
- -![width:800px](imgs/buuttilogo.png) -* Wider image - -
-
- -* This line is outside the columns and goes from left all the way to the right - -## Columns 2 - -
-
- -* Another column example with a wider left panel - -
-
- -* Change `class` name to change proportions -* If suitable proportions not available, add to `buutti.css` - -
-
- -## Setup - -* In VS Code, install the extensions - * [Marp for VS code](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode) - * So you can see the slideshow preview when editing. - * [Markdown all in one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) - * [Markdown table formatter](https://marketplace.visualstudio.com/items?itemName=fcrespo82.markdown-table-formatter) - * *Right click > Format document* makes tables pretty - * [Save and run](https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run) - * An HTML version of the lecture is created on save - * See [settings.json](./.vscode/settings.json) - * Add filenames to `notMatch` if a HTML on save is not needed \ No newline at end of file