10 CSS Professional Ideas – Code this, NOT that!



Prime 10 CSS Professional Tricks to make your life as an online developer extra productive. A number of the finest programmers say CSS is just too exhausting… however you could be shocked at how fashionable methods can dramatically enhance your code. https://fireship.io/tags/css/

00:00 CSS is just too exhausting (fable)
00:56 1. Study the field mannequin
02:00 2. Firefox is Amazeballs
02:31 3. Flexbox is Improbable
03:34 4. Grid is Nice
04:23 5. Clamp it Down
05:09 Bonus: Impress your Boss
05:30 6. Facet Ratio One-Liner
06:01 7. Variables for variables
06:46 8. Fancy Calculations
07:38 9. State Administration Counter
08:18 10. Discovering focus-within
09:01 Bonus: Deal with an Incurable Illness

#css #learntocode #top10

Field Mannequin https://developer.mozilla.org/en-US/docs/Study/CSS/Building_blocks/The_box_model
Focus-within CSS dropdown https://fireship.io/snippets/basic-css-dropdown-menu/

Set up the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/retailer/apps/particulars?id=io.fireship.quizapp

Improve to Fireship PRO at https://fireship.io/professional
Use code lORhwXd2 for 25% off your first fee.

My VS Code Theme

– Atom One Darkish
– vscode-icons
– Fira Code Font

source

28 thoughts on “10 CSS Professional Ideas – Code this, NOT that!”

  1. I cannot express how useful this was. I found most of the on-screen memes/jokes very distracting, though, and feel like your verbal expression by itself would have been even more entertaining.

    Reply
  2. A minor mistake at 2:45 that might get some beginners confused is that the CSS shown on the screen does not put the element (the poop icon in this case) at the bottom right of the container (i.e. the first absolutely or relatively positioned parent element, so not necessary its direct parent). It puts the top-left corner of the element at the center of the container, so now the element's position within the container is slightly off and not exactly at the center. That's why we need the specify the `transform: translate(-50%, -50%);` property which moves the element upwards by 50% of its height, along the Y-axis and leftwards by 50% of its width, along the X-axis, thus properly puts it right at the center of the container.

    Reply

Leave a Comment