Modern CSS Tips and Tricks

Channel:
United States Coding Tech
Subscribers:
725,000
Published on ● Video Link: https://www.youtube.com/watch?v=ZUd3DYPyHR4


Duration: 28:24
16,898 views
609

HTML & CSS have come a long way in a relatively short period of time. In this video, we show you some of the modern CSS tips and tricks in an effort to help you improve your workflow and become a more efficient front-end developer. Got any tips of your own? Comment below and let us know!

Source code: https://github.com/codingtechonline/csstricks

Presented by Munch Development: https://www.youtube.com/channel/UClfbNSFre5pOmEhyEpGpyRw

CSS Grid
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://css-tricks.com/snippets/css/complete-guide-grid/

CSS Firefox
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

⌚︎ Timestamps
00:00 - Introduction
00:23 - Basic Setup
03:32 - Sidebar Layout
07:09 - Pancake Layout
10:55 - Pancake with Sidebars Layout
16:41 - One Line Center
18:19 - Evenly Spaced Card
22:07 - Stacking Cards (Bonus)
22:42 - VSCode Tip (Bonus)
23:51 - C-Span Grid
27:39 - Conclusion



Other Videos By Coding Tech


2021-01-17Transitioning to Modern JavaScript (Better Value and Performance Per Byte)
2021-01-10Building JavaScript Minecraft in 1 Hour [React & Three.js Tutorial]
2021-01-09Concepts vs Typeclasses vs Traits vs Protocols
2021-01-03Deno, a Secure Runtime for JavaScript and TypeScript
2020-12-235 Reasons to Choose Vue
2020-12-15Building the Optimal Architecture for Open Banking
2020-12-1410 Helpful VS Code Extensions for JavaScript
2020-12-1310 Helpful VS Code Extensions for HTML & CSS
2020-12-13Put Down the JavaScript: Level Up With the Fundamentals of Web Development
2020-12-10Create a PsyTrance Riff with JavaScript and use it in Ableton Live
2020-11-28Modern CSS Tips and Tricks
2020-11-07Modern JavaScript for Python Developers
2020-11-07Web Assembly for Enterprise Developers
2020-11-07How Secure Is Your Build Server? A Story of Packages and Trust
2020-10-29Write Safer JavaScript Applications With TypeScript!
2020-10-28Using JavaScript and D3js to Create A Movie Ranking App (Tutorial)
2020-10-11Modern, Principled Data Science Workflow || Eric Ma
2020-09-26Introduction to Machine Learning with Time Series || Markus Loning
2020-09-26Monads in Python: Why and How?
2020-09-08Building WebGPU with Rust
2020-09-07An Introduction to Data Structures


Tags:
css
front end
web development
css grid
css layout