Hello friends, in this post I have included 4 live streams I did on youtube.

All the projects are using HTML, CSS, and JS.

Sometimes I focus more on JS other times more on CSS.

But I always try to have a fun creative project that you'll enjoy :)

1.Peekaboo - Animations (JS + CSS)

In this video:In this video I'll show you how to program animated HTML, and in particular, Peekaboo boxes using CSS transitions. The transitions are triggered using only one line of JavaScript! The Peekaboo box can be animated into the web page at any desired scroll point.

Codepen: https://codepen.io/EleftheriaBatsou

Peekaboo image: https://derpicdn.net/img/2017/1/11/1337488/thumb.png

Working project: https://codepen.io/EleftheriaBatsou/pen/mdewyvz

Inspiration: http://www.developphp.com/

2.Pomodoro Timer By FreeCodeCamp (JS)

In this video: I 'll show you how to create a Pomodoro clock using javascript, jquery and some animations! In FCC you can find all the user stories. I'm going to implement only some of them.

-User Story: I can start a 25-minute pomodoro, and the timer will go off once 25 minutes has elapsed.

-User Story: I can reset the clock for my next pomodoro.

-User Story: I can customize the length of each pomodoro.

-User Story: After 'break' or 'work' is done you'll hear a sound.

If you watched the video you know:

So... I found the error... :(

I misspelled the function 'onclick' I capitalized the 'C'...

I wrote onClick when it should have been 'onclick'

Codepen: https://codepen.io/EleftheriaBatsou

Background sound: http://soundbible.com/grab.php?id=1377&type=mp3

Working project: https://codepen.io/EleftheriaBatsou/pen/ZEbXJLV?editors=0010

Instructions on FCC: https://www.freecodecamp.org/learn/front-end-libraries/front-end-librari...

External Library for Animation: https://www.jqueryscript.net/demo/Customizable-Liquid-Bubble-Chart-With-...

and https://www.jqueryscript.net/demo/Customizable-Liquid-Bubble-Chart-With-...

3.Simple Digital Clock (JS)

In this video, I'll show you how to program animated HTML, and in particular, Peekaboo boxes using CSS transitions. The transitions are triggered using only one line of JavaScript! The Peekaboo box can be animated into the web page at any desired scroll point.

Codepen: https://codepen.io/EleftheriaBatsou

Background image: https://derpicdn.net/img/2017/1/11/1337488/thumb.png

Working project: https://codepen.io/EleftheriaBatsou/pen/VwvzWpo