Eleftheria Batsou 2020

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

All the projects are using HTML, CSS, and JS. Some projects also use bootstrap v3 or jquery.


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.Timer Countdown - Christmas edition (JS + CSS)

In this video I 'll show you how to build JavaScript countdown applications for any target date and time. I use the JavaScript date object to establish two dates to work between with our simple calculations. Once we get the total seconds between the two dates and times we can break the seconds down to minutes, hours, days and even years if your target date is far into the future.


yesCodepen: https://codepen.io/EleftheriaBatsou

yesWorking project:https://codepen.io/EleftheriaBatsou/pen/wvKjrVP

yesImages: https://www.pexels.com/photo/christmas-board-decors-1303098/ or https://unsplash.com/s/photos/christmas-background



2.Image Gallery Flex Panel (Flex Box + JS)

In this video: In this video I 'll show you how to build a modern flex gallery using flexbox and transitions. The JS part is going to be super simple while the emphasis is going to be on the CSS.


yesCodepen: https://codepen.io/EleftheriaBatsou

yesWorking project: https://codepen.io/EleftheriaBatsou/pen/LYpaxYR

yesImages: 1.https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?ixlib=rb-1.... 2.https://images.unsplash.com/photo-1478145046317-39f10e56b5e9?ixlib=rb-1.... 3.https://images.unsplash.com/photo-1506084868230-bb9d95c24759?ixlib=rb-1.... 4.https://images.unsplash.com/photo-1532980400857-e8d9d275d858?ixlib=rb-1.... 5.https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-1....

yesInspiration: from Wes in Javascript30.com

yesUseful links:

- Cubic bezier: https://cubic-bezier.com/

- CSS transition https://stackoverflow.com/questions/9311116/can-css3-transition-font-size and https://www.w3schools.com/css/css3_transitions.asp

- CSS selectors: https://techbrij.com/css-selector-adjacent-child-sibling



3.Game: test your reactions (Jquery + JS)


In this video we will create a simple JS game using jquery. The scope of the game is to click the squares/circles as fast as you can!


yesCodepen: https://codepen.io/EleftheriaBatsou

yesWorking project: https://codepen.io/EleftheriaBatsou/pen/BaobOma



4.FreeCodeCamp Calculator (Front end projects)

In this video we will create a javascript calculator. You can find the rules and the requirements on freeCodeCamp (https://www.freecodecamp.org/learn/front-end-libraries/front-end-librari...). it's going to be a fully functional yet simple calculator


yesCodepen: https://codepen.io/EleftheriaBatsou

yesWorking project: https://codepen.io/EleftheriaBatsou/pen/ZEbgXyB

yesYou ll need to add: bootstrap (I used bootstrap v3)

 purple : #B2127D |
 blue : #14C6CC  |    
 yellow: #FFDF27 |
 dark blue: #1BADB2 |
 almost white: #FFF0F5


Thanks for watching! 

Have a beautiful productive day :)