- 325
- 33 186
Battles4U
Canada
Приєднався 21 вер 2020
The UA-cam channel "Battles4U" offers daily solutions for challenges on cssbattle.dev. It provides step-by-step guides to solve CSS coding puzzles, helping viewers improve their web development skills through practical examples.
28/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Target (28/12/2024) - CSSBattle
100% Match - Solution
#Daily challenges, #CSSBattle
#HTML and #CSS
cssbattle.dev
davetef
100% Match - Solution
#Daily challenges, #CSSBattle
#HTML and #CSS
cssbattle.dev
davetef
Переглядів: 17
Відео
27/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 202 години тому
Target (27/12/2024) - CSSBattle 100% Match - Solution #Daily challenges, #CSSBattle #HTML and #CSS cssbattle.dev davetef
26/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 174 години тому
Target (26/12/2024) - CSSBattle 100% Match - Solution #Daily challenges, #CSSBattle #HTML and #CSS cssbattle.dev davetef
25/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 187 годин тому
Target (25/12/2024) - CSSBattle 100% Match - Solution #Daily challenges, #CSSBattle #HTML and #CSS cssbattle.dev davetef
24/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 239 годин тому
Target (24/12/2024) - CSSBattle 100% Match - Solution #Daily challenges, #CSSBattle #HTML and #CSS cssbattle.dev davetef
23/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3012 годин тому
Target (23/12/2024) - CSSBattle 100% Match - Solution #Daily challenges, #CSSBattle #HTML and #CSS cssbattle.dev davetef
22/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 2314 годин тому
Target (22/12/2024) - CSSBattle 100% Match - Solution #Daily challenges, #CSSBattle #HTML and #CSS cssbattle.dev davetef
21/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 2816 годин тому
21/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
20/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 2819 годин тому
20/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
19/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3021 годину тому
19/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
18/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 16День тому
18/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
17/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 29День тому
17/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
16/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 29День тому
16/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Gears loading Animation - HTML and CSS #html #css #battles4u
Переглядів 21День тому
Gears loading Animation - HTML and CSS #html #css #battles4u
15/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 24День тому
15/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
14/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 4514 днів тому
14/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
13/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 4214 днів тому
13/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
12/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3714 днів тому
12/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
11/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 8514 днів тому
11/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
10/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 4814 днів тому
10/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
9/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3214 днів тому
9/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
8/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3014 днів тому
8/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
7/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 2921 день тому
7/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
6/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3821 день тому
6/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
5/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 5121 день тому
5/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
4/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 4921 день тому
4/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
3/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 2421 день тому
3/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
2/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3221 день тому
2/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
1/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 2821 день тому
1/12/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
30/11/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Переглядів 3728 днів тому
30/11/2024 - CSS battle - Daily Challenge Solution - 100% Match | #html #css #cssbattle
Sorry, how do you know this box size? And padding size or margin size. I wanna know this. I’m just learning css. Please tell me
It is through trial and error. But if you do more practice, you can estimate the sizes more precisely.
Sorry, how do you know this boxing size? (pz or q)?
Better Solution (157 Chars): <p><p><style>*{background:#3F4869;*{background:#F4DA64;margin:0 65%0 80}p{position:fixed;padding:30 200;margin:229 28;rotate:30deg}p+p{rotate:-30deg;top:-218
Better Solution (104 chars): <style>&{background:radial-gradient(1q at 50%100%,#fff 30pt,#0B2429 0 75pt,#63A3A0)no-repeat 0 0/100%50%
Better solution: (147 Chars): <style>&{background:#0B2429;border-block:64q solid#F3AC3C;margin:60 110;border-radius:63q 63q 0 0;*{background:#F3AC3C;margin:0;border-radius:1in 0
Better solution (177 characters): <style>*{background:radial-gradient(1q,#E0E7FF 53q,#4F77FF 0 95q,#E0E7FF 0 106q,#4F77FF 0 148q,#E0E7FF);*{background:#E0E7FF;margin:130 20%130 180;box-shadow:138q 0 0 21q#E0E7FF
Bro with another banger❤❤❤
your video keeps motivating for me to do daily css challenge. kindly pls upload and dont give up. one small request kindly suggest best resource to learn css in-depth
Thanks, I will keep up the good work. I'd recommend using MDN documentations and doing a lot of projects as much as possible. Don't fall in a trap of binging tutorials. MDN: developer.mozilla.org/en-US/docs/Web/CSS
thank you
You're welcome
Very Helpful
Glad to hear that
Why complicate it so much if you can make this figure in figma and upload it as svg
Possible. But this is a CSS challenge. You need to create that using css and html only.
что за софт?
Visit cssbattle.dev/
Better solution (133 Chars): <p><style>*{background:#F0F0F0;border:59q solid#E05947;margin:-60-35;*{margin:90-55}p{padding:10 65;margin:-75 115;border-width:80q 0
что за редактор? такой хочу
Code editor? cssbattle.dev Video editor? Capcut
niceeee
How does --b equals to background is this some kind of hack where if we assign variables to background it iwll assume itlsef as background ?
The variable --b represents a color, not a background. The background is applied to all elements through the * selector, which uses --b as its value. Changing the value of --b will automatically update the background color for that element.
like it
Very coool ❤
Hey, you just nailed the css battle. Would you kindly explain the box-shadow thing? box-shadow: -76q 0#... , -153q 0#
Sure, Box shadow basically applies shadows to an element. There are different forms of box shadow 1. box-shadow: 10px 10px; This applies a shadow behind an element 10px from on the x-axis and 10px on the y-axis, from the parent element. 2. box-shadow: 10px 10px green; This also follows the same rule as #1, but the color of the shadow will be green 3. box-shadow: 10px 10px 5px green; This follows the previous rules with an addition of the fourth parameter (5px) which adds blur effect. 4.box-shadow: 10px 10px 5px 20px green; This form follows the same rules, plus the 20px parameter, which spreads the shadow with an extra 20px perimeter around the shadow. The values can be in (px, q, in, %....) depending on your use case. For more detail you can check this link: www.w3schools.com/css/css3_shadows_box.asp
Pls show the html part as well
I am not sure how the html is on CSSBattle, but I always assume the structure to be something like this, like any boilerplate html code.... <html> <body> </body> </html>
Where is Saturn's ring? 😉
hi
Hi👋👋
Great video
🔥🔥🔥
not working in my vs code
Sorry to hear that. Can you explain where exactly it is failing... so that I can help?
@@battles4uI was making mistakes, it was my fault and I resolved it
Great video, keep on posting similar videos @Battles4U
Thanks, will do!
really amazing i want to learn how it possible for me...?
I'm really glad you liked it! If you’re interested in learning, you can totally get started. it’s all about practice and experimenting with code. I’d recommend starting with some basic HTML/CSS tutorials.
Серьезно? А если из 100 будет? Вы про переменные что-нибудь слышали?
Hey, I get what you're saying! 😅 You're right, using CSS variables would be a much better approach, especially if there are a lot of similar elements. I kept this example simple to make it easier for beginners to follow, but it’s definitely something I’ll keep in mind for future tutorials. Thanks for the feedback-it helps me improve! 🙌
Src?
Please check the video description.
Better solution with 153 Chars <p><style>*{background:#b5e0ba}p{padding:25;position:fixed;color:5d3a3a;margin:117 192;box-shadow:0 -25px 0 25px,-25px -25px 0 50px#b5e0ba,-25px 0 0 75px
Great bro..
Better Solution with 163 Chars: <style>*{background:#434B92;*{background:#EAC049;color:EAC049;margin:60 160 210 40;box-shadow:148q -30px,127q 30px,21q 60px,106q 90px,42q 120px,85q 150px,63q 180px
Is there any specific reason for using aspect-ratio instead of height?
No specific reason... We can use the height as well. Aspect ratio can be used to maintain the height and width of an element to a certain proportion, irrespective of its parent.
🔥
👏👏👏
Nice! Keep going
Great bro..
Great bro
that's awesome, keep it up dude
Great, diversification of content is good
🙏 Thanks, will add more content soon
🔥
🔥
nicee! keep it up dudeee, you got my subscribe
thank you bro
You're welcome!
Is it a live record?
Yes, but then edited
Keep going bro, don't stop like other youtubers
I will try my best
Well done 👏
Keep it up
Thanks for sharing your solution. I had difficulty doing this challenge and many of the solutions I found were not as clear as this one.
Glad it helped!