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)
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.
Working project: https://codepen.io/EleftheriaBatsou/pen/LYpaxYR
Images: 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....
- Cubic bezier: https://cubic-bezier.com/
- 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!
Working project: https://codepen.io/EleftheriaBatsou/pen/BaobOma
4.FreeCodeCamp Calculator (Front end projects)
Working project: https://codepen.io/EleftheriaBatsou/pen/ZEbgXyB
You 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 :)