10 CSS Shapes in 10 minutes (Coding timelapse)

10 CSS Shapes in 10 minutes (Coding timelapse)

Channel:
Serbia Double D
Subscribers:
9,300
Published on ● Video Link: https://www.youtube.com/watch?v=59f7VHLu2GQ


Duration: 10:16
2,146 views
47

Coding timelapse of me solving 10 CSSBattle challenges with relaxing background music.

CSSBattle is a cool website for practicing your CSS skills where your goal is to replicate an image as good as you can, using as little code as possible! Today, I tried out 3 challenges and recorded the process of completing them.

Challenge #1 - Froggy:
https://cssbattle.dev/play/70​
Challenge #2 - Magical tree:
https://cssbattle.dev/play/45​
Challenge #3 - Birdie:
https://cssbattle.dev/play/33
Challenge #4 - Ice cream:
https://cssbattle.dev/play/35​
Challenge #5 - Pastel logo:
https://cssbattle.dev/play/53
Challenge #6 - Suffocate:
https://cssbattle.dev/play/29
Challenge #7 - Cups & balls:
https://cssbattle.dev/play/28
Challenge #8 - Push button:
https://cssbattle.dev/play/3
Challenge #9 - SitePoint logo:
https://cssbattle.dev/play/21
Challenge #10 - Stay at home:
https://cssbattle.dev/play/49

My solutions:
https://github.com/DoubleDebug/cssbattle-solutions/tree/main
_________________________________________________________
Previous episode:
https://www.youtube.com/watch?v=7TqgoBV1ZQo

Background music: "Better Days" by Lakey Inspired
YouTube | https://www.youtube.com/watch?v=RXLzvo6kvVQ​
Spotify | https://spoti.fi/2YxsvYG​

Timestamps:
00:00​ - 00:14​ Intro
00:14​ - 01:27​ Challenge #1
01:27​ - 02:22​ Challenge #2
02:22​ - 03:24​ Challenge #3
03:24​ - 04:20​ Challenge #4
04:20​ - 05:15​ Challenge #5
05:15​ - 06:04​ Challenge #6
06:04​ - 07:03​ Challenge #7
07:03​ - 08:02​ Challenge #8
08:02​ - 09:01​ Challenge #9
09:01​ - 10:00​ Challenge #10
10:00 - 10:15​ Outro
_________________________________________________________
Social media:
● Facebook: https://www.facebook.com/YoutubeDoubleD
● Twitter: https://twitter.com/YoutubeDoubleD
● Twitch: http://twitch.tv/NotDoubleD



Other Videos By Double D


2022-06-16How to record your keyboard (Keylogger)
2022-06-10The Basics of Coding
2022-06-03What is web scraping?
2022-05-29Using a bot to navigate a website (Web scraping)
2022-05-11Wordle card flipping animation
2022-03-05Wordle in JavaScript in 20 minutes
2021-12-02How to monetize your API (Tutorial)
2021-08-09How Bitcoin Changed the World
2021-07-28What is Windows Registry? (regedit.exe)
2021-07-23How to record your keyboard (Keylogger update)
2021-03-1110 CSS Shapes in 10 minutes (Coding timelapse)
2021-03-09Hire me on Fiverr (Fiverr Gig Trailer)
2021-02-243 Cool Shapes I Made in CSS (CSS Battle #2)
2021-02-20How to reverse a binary tree? (Problem solving #2)
2021-02-12Can you replicate this shape in CSS? (CSS Battle #1)
2021-01-21Problem solving #1 - Coding practice on HackerRank (C++)
2020-09-21How to use a real API in your web app (rapidAPI tutorial)
2020-07-25The power of JavaScript
2020-07-12What are memory leaks? (and how to detect them)
2020-07-075 Basic Concepts of Web programming
2020-02-18Can you solve this chess puzzle? (8 Queens problem)


Tags:
CSS
HTML
web dev
web design
web
website
coding
programming
timelapse
web development
web programming
css battle
cssbattle.dev
challenge
WebDev
JavaScript
java script
div
body
shape
overflow
overflow hidden
learn
tutorial
github
box
display flex
display grid
justify content
align items
border radius
SASS
class
container
position absolute
position relative
target
code golfing
online tournament
competition
tournament
logo
logo design
coder coder
parent
yt:cc=on