# References for web development

## Tutorials and references

[W3Schools](https://www.w3schools.com/) References and tutorials for many programming languages and areas of application (HTML, JavaScript, CSS, Python, C#, Kotlin, Go, Node.js, PHP and many more).

[CSS-Tricks.com](https://css-tricks.com/)

[Mozilla Developer Network : Learn web development](https://developer.mozilla.org/en-US/docs/Learn)

[Mozilla Developer Network : Web technology for developers](https://developer.mozilla.org/en-US/docs/Web)

[HTML symbols, entities, characters and codes](https://www.toptal.com/designers/htmlarrows/)

[Bootstrap](https://getbootstrap.com/)



### Books

HTML5 und CSS3 : das umfassende Handbuch von Jürgen Wolf (EBook via our library available)

JavaScript: The Definitve Guide (5th Edition) by David Flanagan.



## JavaScript Libraries

### Layout

[Split.js](https://split.js.org/) – Split/ Grid layout

[Free Wall](http://kombai.github.io/freewall/) – Dynamic grid layout

[Justified.js](http://nitinhayaran.github.io/Justified.js/demo/) – Image layout

[Isotope](https://isotope.metafizzy.co/) – Filter & sort magical layouts

[FilterizR](https://yiotis.net/filterizr/) – Create responsive galleries

### UI

[Awesome Cursor](https://jwarby.github.io/jquery-awesome-cursor/) – FontAwesome icons as custom CSS cursors

[Superfish](https://superfish.joelbirch.design/) – Drop-down menu

[jQuery UI](http://jqueryui.com/) – UI components on top of jQuery

[Dragula](https://bevacqua.github.io/dragula/) – Drag and drop so simple it hurts

[Draggable JS](https://shopify.github.io/draggable/) – JavaScript drag and drop library

[ScrollReveal](https://scrollrevealjs.org/) – Animate elements when they enter/leave the viewport

[Rellax](https://dixonandmoe.com/rellax/) – Vanilla Javascript Parallax Library

[AOS](https://michalsnik.github.io/aos/) – Animate on scroll

[ScrollMagic](https://scrollmagic.io/) – The javascript library for magical scroll interactions

[Nicescroll](https://nicescroll.areaaperta.com/demo/) – Custom scroll bar

### Gallery

[Swiper](https://swiperjs.com/) – The Most Modern Mobile Touch Slider

[PhotoSwipe](https://photoswipe.com/) – Responsive JavaScript Image Gallery

[Fotorama](https://fotorama.io/) – Simple and Powerful Responsive jQuery Image Gallery

[baguetteBox.js](https://feimosi.github.io/baguetteBox.js/) – Simple and easy to use lightbox

[Zoom.js](https://fat.github.io/zoom.js/) – Image Zoom

[Backstretch](https://www.jquery-backstretch.com/) – Changing responsive background image

### Misc

[Chart.js](https://www.chartjs.org) – Open source HTML5 Charts for your website

[Plyr](https://plyr.io/) – A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player

[jQuery Collapser](https://github.com/vaakash/jquery-collapser) – Expand, collapse plugin (for text)

[MediumEditor](https://yabwe.github.io/medium-editor/) – The dead simple inline editor toolbar

[Quill](https://quilljs.com/) – Your powerful rich text editor

## Static page builder

### Jekyll

[jekyllrb.com](https://jekyllrb.com/)

### Hugo

[gohugo.io](https://gohugo.io/)

- simple to get started
- faster than Jekyll, but comes with less plug-ins
- templating engine is based on Go

### Nuxt.js

[nuxtjs.org](https://nuxtjs.org/)

- Vue framework, thus requires knowledge of vue.js

### Hexo

[hexo.io](https://hexo.io/)

- powered by Node.js

### Gatsby

- powered by node.js
- uses React and requires knowledge of it
- the entire page is downloaded 

### Jupyter Book

[jupyterbook.org](https://jupyterbook.org/intro.html)

- intended to create books and Web pages from computational material
- can combine Markdown-files and Jupyter Notebooks
- used to generate this book



### Comparison

https://itsfoss.com/open-source-static-site-generators/

https://jamstack.org/generators/ 





## CMS

Bolt

[Kirby](https://getkirby.com) (99.- per site) [Beispiel GD Uni Weimar](https://herbert.gd)

[WinterCMS](https://wintercms.com/)