Web Presentation

Intro Presentation to Web Development for students that want to learn basics of HTML/CSS/JS

🎞 Live preview

Web Intro Presentation

↔ Navigation

• left/right/up/down arrows, page down/up keys
• click on sidebar pages

💠 Transitions modes

• Animations
• Slide Up/Down
• Slide Right/Left
• Fade
• Clock
• Print (CTRL + P - Save as PDF & Margins: None)
• Slide Headings (every h1 -> down, every h2 -> right)
• Book Style (Simulate 2 pages and move left - right)

⌨ English Signs (chars)

You have to know how to type this characters :) on your keyboard

 () brackets (parenthesis)
 {} curly brackets
 [] square brackets
 #  hash
 :  colon
 ;  semicolon
 `  backquote (left quote, grave accent)
 /  slash
 \  backslash
 |  pipe
 -  dash
 ,  comma
 _  underscore
 ?  question mark
 %  percent

📋 Developer

If you wish to use this project directly on your PC you can use:

git clone https://github.com/nmatei/web-intro-presentation.git
cd web-intro-presentation
npm i
npm start

TODOs

• When browser does not support impress (animations) (convert them all to "slide" style)
• Test print preview
  • Chrome -> Dev tools -> "..." -> More tools -> Rendering -> Emulate CSS media type print
• Check how to display video with gray bg on print version (not black)

👋 Thanks

• https://impress.js.org
• https://fontawesome.com/v4.7/icons