This is the hardest CSS Battle I've tried

Kevin Powell・2 minutes read

CSS Battles number 22 offers fun challenges focusing on speed and specific styling techniques. The speaker details struggles and successes in creating various shapes using CSS properties, inviting feedback for improvement.

Insights

  • CSS Battles are engaging challenges that offer valuable tricks for learners, focusing on speed and precise timing rather than high scores.
  • The speaker in the text navigates through various CSS styling challenges, experimenting with specific measurements, transformations, and positioning techniques to create intricate shapes, showcasing a learning process that involves trial and error and a willingness to seek feedback for improvement.

Get key ideas from YouTube videos. It’s free

Recent questions

  • What are CSS Battles?

    CSS Battles are challenges focusing on CSS styling.

Related videos

Summary

00:00

"CSS Battles: Challenge 22 Speed Tricks"

  • CSS Battles are fun challenges, with this being number 22.
  • The challenges are not overly difficult, offering some useful tricks to learn.
  • The first challenge seems tricky initially, but the approach is to start with it.
  • The focus is on speed rather than high scores, with timing each challenge.
  • Using flex instead of grid for alignment to avoid glitches.
  • Background color is set for elements A and B.
  • Styling A and B similarly with specific dimensions and border radius.
  • Transforming B to achieve the desired shape.
  • Attempting a different approach for the next challenge, Alien I.
  • Applying absolute positioning for elements B, C, and D to create the desired layout.

20:57

Design Settings: Auto Option and Positioning Success

  • The text discusses adjusting settings for a design, focusing on measurements and positioning.
  • The author mentions setting the Auto option to make the process easier.
  • Measurements are specified, with 30 pixels and 40 pixels mentioned for different sides.
  • The author corrects their initial confusion, confirming the right side and left side.
  • A circle is created with a height of 100 pixels, using specific positioning and margin settings.
  • The author explains the process of centering elements using position absolute and adjusting margins.
  • Specific measurements like 60 pixels and 100 pixels are used for positioning.
  • The author achieves a score of 100 after adjustments, highlighting the success of their method.
  • The text delves into CSS styling, with details on setting widths, heights, and border radius.
  • The author encounters challenges in creating a specific shape, experimenting with different settings and transformations.

43:12

Coding Challenges and Solutions: A Speaker's Journey

  • The text discusses various coding challenges and solutions encountered by the speaker.
  • The speaker mentions using specific values like negative 45, Z index of ten, and 99.8 in their coding process.
  • They express uncertainty about the best approach and invite feedback from viewers for improvement.
  • The speaker attempts to create shapes using CSS, such as a lamp and a moon, detailing the specific CSS properties used.
  • They struggle with creating a specific shape using clip-path and polygon, eventually resolving the issue.
  • The speaker successfully creates a triangle shape using CSS properties like border and transparent sides.
  • They confidently create a moon shape using CSS properties like width, aspect ratio, and border radius.
  • The speaker encounters difficulty in creating a spiral shape, experimenting with various CSS properties like width, height, and position.
  • They express frustration at not realizing a simpler solution for a previous shape creation challenge.
  • The speaker concludes by expressing trepidation about tackling a challenging coding task.

01:07:00

"Precision and experimentation in design process"

  • The height of the shape is 20, with a left of negative 21.
  • Adjustments are made to hide artifacts by increasing the size by one pixel.
  • Various measurements and rotations are tested to align the shape correctly.
  • The width and height are adjusted using variables for easier manipulation.
  • Specific positioning and dimensions are set for different sections of the design.
  • Attempts are made to create concentric circles using borders and positioning.
  • The process involves trial and error to achieve the desired visual outcome.
  • The final design involves multiple elements with specific dimensions and positions.
Channel avatarChannel avatarChannel avatarChannel avatarChannel avatar

Try it yourself — It’s free.