Structure

_project_starter is the boilerplate

Projects

Blurry Background

What? Blurs the background or image while the page is loading.

How? We use the filter CSS property https://developer.mozilla.org/en-US/docs/Web/CSS/filter and the JavaScript setInterval() method https://developer.mozilla.org/en-US/docs/Web/API/setInterval

Live Demo ⇒ https://loicsanchez.github.io/HTML-CSS-VanillaJS/Blurry%20Background/

Form Labels with Wave Animation

What? Animate the labels on a form to move with a wavy pattern.

How? We use JavaScript to split the text into elements and dynamically assign a different transition-delay to each of them.

Live Demo ⇒ https://loicsanchez.github.io/HTML-CSS-VanillaJS/Wave%20Label/

Progress Steps

What? An animated progress bar with multiple steps.

How? We use JavaScript to change the class of the active element and CSS to apply a different style to active elements. We also set the width of the progress bar in JavaScript.

Live Demo ⇒ https://loicsanchez.github.io/HTML-CSS-VanillaJS/Progress%20Steps/

Split Screens

What? Split the screen in half and animation on hover.

How? We use JavaScript to add events on mouse enter and mouse leave and change the class of the elements. We use CSS to apply a different widths and opacity to the elements.

Live Demo ⇒ https://loicsanchez.github.io/HTML-CSS-VanillaJS/Split%20Landing/

Dad Joke

What? Generate a Dad Joke on every click. Try not to laugh!

How? We use the JavaScript fetch API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API to fetch a joke and update the innerHTML value of the element.

Live Demo ⇒ https://loicsanchez.github.io/HTML-CSS-VanillaJS/Dad%20Joke/