Can you replicate this shape in CSS? (CSS Battle #1)

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


Duration: 15:52
643 views
27

I tested my HTML and CSS skills over at the CSS Battle website.

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 - Windmill:
https://cssbattle.dev/play/55
Challenge #2 - Mountains:
https://cssbattle.dev/play/46
Challenge #3 - Web Maker Logo:
https://cssbattle.dev/play/14

My solutions:
https://github.com/DoubleDebug/cssbattle-solutions

How to make a triangle in CSS (cool animation):
https://css-tricks.com/snippets/css/css-triangle/

Timestamps:
00:00 - 00:37 Intro
00:37 - 02:48 Intro to CSSBattle
02:48 - 09:08 Challenge #1
09:08 - 12:02 Challenge #2
12:02 - 15:16 Challenge #3
15:16 - 15:51 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-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)
2019-03-25Why Apex Legends isn't fun for casual players
2019-03-025 Basic Concepts of Programming
2019-02-24iSlide review (all-in-one PowerPoint add-in)
2019-02-23Let's talk about J Cole's verse on 'a lot'


Tags:
HTML
CSS
CSS battle
CSSBattle
Challenge
Programming
Coding
WebDev
Web
Web design
Website
JavaScript
div
body
background
overflow hidden
practice
learn
tutorial
code
box
display
display flex
display grid
justify content
align items
height
width
border
radius
style
class
container
position
position abosolute
position relative
child
parent
coder coder
logo
Dev
code golfing
online