├── README.md └── src ├── 05-2018.md ├── 06-2018.md ├── 07-2018.md ├── 08-2018.md ├── 09-2018.md ├── 10-2018.md ├── 11-2018.md ├── 12-2018.md ├── Sep-CSS-Top10.png ├── Top10-Dec-CSS.png ├── Top10-Nov-CSS.png ├── aug-CSS-top10.png ├── july-CSS-top10.jpg ├── june-css-top10.jpg ├── may-css-top10.jpg └── oct-top10-css.png /README.md: -------------------------------------------------------------------------------- 1 | # css-articles 2 | Monthly Series - Top 10 CSS Articles 3 | 4 | Click "Watch" to get an email notification once a month for Top 10 CSS articles (Issue and Pull Request are disabled to keep 1 email a month) 5 | 6 | [Mybridge AI](https://www.mybridge.co) ranks articles by the number of shares, minutes read, and by its own machine learning algorithm. 7 | 8 | Every month, about 1,000 ~ 1,500 articles, specific to CSS programming, are compared and only 10 finest articles are picked. This will ensure you that every single article you read is useful and great. 9 | 10 | Also published on [Mybridge Publication](https://medium.mybridge.co) 11 | 12 | 13 | ## Monthly Series: 14 | 15 | * [v.May 2018 - Top 10 CSS Articles](./src/05-2018.md) 16 | * [v.Jun 2018 - Top 10 CSS Articles](./src/06-2018.md) 17 | * [v.Jul 2018 - Top 10 CSS Articles](./src/07-2018.md) 18 | * [v.Aug 2018 - Top 10 CSS Articles](./src/08-2018.md) 19 | * [v.Sep 2018 - Top 10 CSS Articles](./src/09-2018.md) 20 | * [v.Oct 2018 - Top 10 CSS Articles](./src/10-2018.md) 21 | * [v.Nov 2018 - Top 10 CSS Articles](./src/11-2018.md) 22 | * [v.Dec 2018 - Top 10 CSS Articles](./src/12-2018.md) 23 | 24 | 25 |
26 | 27 | ## Other Monthly: 28 | * [JavaScript Top 10](https://github.com/Mybridge/javascript-articles-monthly) 29 | * [Angular Top 10](https://github.com/Mybridge/angular-articles) 30 | * [React Top 10](https://github.com/Mybridge/react-articles-monthly) 31 | * [Vue.js Top 10](https://github.com/Mybridge/vuejs-articles) 32 | * [Python Top 10](https://github.com/Mybridge/python-articles) 33 | * [Node.js Top 10](https://github.com/Mybridge/nodejs-articles) 34 | * [Web Development Top 10](https://github.com/Mybridge/web-development-articles) 35 | * [Machine Learning Top 10](https://github.com/Mybridge/machine-learning-articles) 36 | * [Swift Top 10](https://github.com/Mybridge/swift-articles) 37 | 38 | ## Open Source Monthly: 39 | * [JavaScript Open Source Top 10](https://github.com/Mybridge/javascript-open-source) 40 | * [Angular Open Source Top 10](https://github.com/Mybridge/angular-open-source) 41 | * [React Open Source Top 10](https://github.com/Mybridge/reactjs-open-source) 42 | * [Vue.js Open Source Top 10](https://github.com/Mybridge/vuejs-open-source) 43 | * [Python Open Source Top 10](https://github.com/Mybridge/python-open-source) 44 | * [Node.js Open Source Top 10](https://github.com/Mybridge/nodejs-open-source) 45 | * [Web Development Open Source Top 10](https://github.com/Mybridge/web-development-articles) 46 | * [Machine Learning Open Source Top 10](https://github.com/Mybridge/machine-learning-open-source) 47 | * [Swift Open Source Top 10](https://github.com/Mybridge/swift-open-source) 48 | -------------------------------------------------------------------------------- /src/05-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.May 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: Scroll, Stylesheets, Bulma, Grid boilerplate, Mario Kart, Webpack, Grid, Transitions, SVG 8 | * Also published on [Medium](https://goo.gl/pBLRFR) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 | [A) Beginners: Build Responsive Real World Websites with HTML5 and CSS3.](http://bit.ly/2KkTfUZ) [14,610 recommends, 4.7/5 stars] 15 | 16 | [B) Advanced: Advanced CSS and Sass: Flexbox, Grid, Animations and More!](http://bit.ly/2mDiBDc) [4,452 recommends, 4.8/5 stars] 17 | 18 |
19 | 20 | ## Rank 1 21 | ### [Scroll to the future: Tour of latest CSS and JavaScript features that make navigating around a single page smooth & beautiful ](https://evilmartians.com/chronicles/scroll-to-the-future-modern-javascript-css-scrolling-implementations?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 22 | 23 | 24 |
25 | 26 | ## Rank 2 27 | ### [CSS at Scale: LinkedIn’s New Open Source Projects Take on Stylesheet Performance](https://engineering.linkedin.com/blog/2018/04/css-at-scale--linkedins-new-open-source-projects-take-on-stylesh?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 28 | 29 | 30 |
31 | 32 | ## Rank 3 33 | ### [Learn Bulma in 5 minutes](https://medium.freecodecamp.org/learn-bulma-in-5-minutes-ec5188c53e83?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 34 | 35 | 36 |
37 | 38 | ## Rank 4 39 | ### [Introducing cssgr.id - an interactive CSS grid boilerplate code generator](https://dev.to/dannetherton/introducing-cssgrid---an-interactive-css-grid-boilerplate-code-generator-561j?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 40 | 41 | 42 |
43 | 44 | ## Rank 5 45 | ### [Mario Kart: CSS. Interactive Mario Kart with Only CSS](https://codeburst.io/mario-kart-css-7572bd2ce608?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 46 | 47 | 48 |
49 | 50 | ## Rank 6 51 | ### [A tale of Webpack 4 and how to finally configure it in the right way (with CSS)](https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 52 | 53 | 54 |
55 | 56 | ## Rank 7 57 | ### [A Beginner’s Guide to CSS Grid](https://medium.freecodecamp.org/a-beginners-guide-to-css-grid-3889612c4b35?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 58 | 59 | 60 |
61 | 62 | ## Rank 8 63 | ### [Native-Like Animations for Page Transitions on the Web](https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 64 | 65 | 66 |
67 | 68 | ## Rank 9 69 | ### [Pure CSS 4 Designers](https://codepen.io/miocene/pen/WJRXVg?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 70 | 71 | 72 |
73 | 74 | ## Rank 10 75 | ### [SVG Path layout: Elements follow an SVG path defined on parent](https://css-houdini.rocks/svg-path-layout?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 76 | -------------------------------------------------------------------------------- /src/06-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.Jun 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: Layouts, Responsive image, Dropdown, Debug CSS, Grid, Web design, Dark theme, Hover effect, CSS abuse 8 | * Also published on [Medium](https://goo.gl/mJi6US) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 | [A) Beginners: CSS FLexbox Tutorial with Website Projects.](http://bit.ly/2LTfC4y) [129 recommends, 4.8/5 stars] 15 | 16 | [B) CSS — The Complete Guide (incl. Flexbox, Grid & Sass)](http://bit.ly/2MnOwnv) [867 recommends, 4.8/5 stars] 17 | 18 |
19 | 20 | ## Rank 1 21 | ### [Getting Started With CSS Layout](https://www.smashingmagazine.com/2018/05/guide-css-layout?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 22 | 23 | 24 |
25 | 26 | ## Rank 2 27 | ### [Building a responsive image: How to create a logo that responds to its own aspect ratio](https://medium.com/9elements/building-a-responsive-image-e4c6229fa1f6?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 28 | 29 | 30 |
31 | 32 | ## Rank 3 33 | ### [Solved With CSS! Dropdown Menus](https://css-tricks.com/solved-with-css-dropdown-menus?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 34 | 35 | 36 |
37 | 38 | ## Rank 4 39 | ### [Learn This One Weird. Trick To Debug CSS](https://medium.freecodecamp.org/heres-my-favorite-weird-trick-to-debug-css-88529aa5a6a3?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 40 | 41 | 42 |
43 | 44 | ## Rank 5 45 | ### [CSS Grid — Responsive layouts and components](https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 46 | 47 | 48 |
49 | 50 | ## Rank 6 51 | ### [New CSS Features That Are Changing Web Design](https://www.smashingmagazine.com/2018/05/future-of-web-design?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 52 | 53 | 54 |
55 | 56 | ## Rank 7 57 | ### [Dark theme in a day](https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 58 | 59 | 60 |
61 | 62 | ## Rank 8 63 | ### [Ideas for Proximity Feedback with Progressive Hover Effects](https://tympanus.net/codrops/2018/05/02/ideas-for-proximity-feedback-with-progressive-hover-effects?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 64 | 65 | 66 |
67 | 68 | ## Rank 9 69 | ### [CSS abuse: Projects using pure CSS](https://dev.to/abdelrahman3d/css-abuse-31gp?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 70 | 71 | 72 |
73 | 74 | ## Rank 10 75 | ### [The Cult of the Complex](http://alistapart.com/article/cult-of-the-complex?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 76 | -------------------------------------------------------------------------------- /src/07-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.Jul 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: Drawing Images, CSS selector, CSS units, SEM and BIO, Cards, CSS tricks, Flex Box, Prototype apps, BEM 8 | * Also published on [Medium](https://goo.gl/7NHGbY) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 | [A) Beginners: Web Design for Beginners: Real World Coding in HTML & CSS.](http://bit.ly/2FDTJEl) [3,477 recommends, 4.6/5 stars] 15 | 16 | [B) Build Creative Website Using HTML5, CSS3, jQuery & Bootstrap.](http://bit.ly/2NbuIn1) [149 recommends, 4.8/5 stars] 17 | 18 |
19 | 20 | ## Rank 1 21 | ### [Drawing Images with CSS Gradients | CSS-Tricks](https://css-tricks.com/drawing-images-with-css-gradients?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 22 | 23 | 24 |
25 | 26 | ## Rank 2 27 | ### [Level up your CSS selector skills](https://blog.logrocket.com/level-up-your-css-selector-skills-5d7bb45ddd37?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 28 | 29 | 30 |
31 | 32 | ## Rank 3 33 | ### [The new (and old) CSS units you've never heard about](https://dev.to/maxart2501/the-new-and-old-css-units-youve-never-heard-about-1mn1?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 34 | 35 | 36 |
37 | 38 | ## Rank 4 39 | ### [Combining the Powers of SEM and BIO for Improving CSS](https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 40 | 41 | 42 |
43 | 44 | ## Rank 5 45 | ### [About making cards with CSS](https://inclusive-components.design/cards?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 46 | 47 | 48 |
49 | 50 | ## Rank 6 51 | ### [4 CSS tricks I’ve learnt the hard way](https://itnext.io/4-css-tricks-ive-learnt-the-hard-way-aab1e7e8ff44?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 52 | 53 | 54 |
55 | 56 | ## Rank 7 57 | ### [One CSS Trick You Didn't Know About! ](https://www.youtube.com/watch?v=olE86OdKYQs?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 58 | 59 | 60 |
61 | 62 | ## Rank 8 63 | ### [The Complete CSS Flex Box Tutorial](https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 64 | 65 | 66 |
67 | 68 | ## Rank 9 69 | ### [How to quickly prototype apps with CSS Grid and CSS Variables](https://medium.freecodecamp.org/how-to-quickly-prototype-apps-with-css-grid-and-css-variables-8d3d96d68eaa?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 70 | 71 | 72 |
73 | 74 | ## Rank 10 75 | ### [BEM For Beginners: Why You Need BEM](https://www.smashingmagazine.com/2018/06/bem-for-beginners?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 76 | -------------------------------------------------------------------------------- /src/08-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.Aug 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: Good CSS code, Elements, Pattern Libraries, Flexbox, JavaScript, CSS Grid, Typography, eCommerce layout 8 | * Also published on [Medium](https://goo.gl/qmx2M3) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 | [A) Beginners: CSS — The Complete Guide (incl. Flexbox, Grid & Sass).](http://bit.ly/2MnOwnv) [1,335 recommends, 4.8/5 stars] 15 | 16 | [B) Advanced CSS and Sass: Flexbox, Grid, Animations and More!.](http://bit.ly/2mDiBDc) [6,280 recommends, 4.8/5 stars] 17 | 18 |
19 | 20 | ## Rank 1 21 | ### [How to get better at writing CSS](https://medium.freecodecamp.org/how-to-get-better-at-writing-css-a1732c32a72f?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 22 | 23 | 24 |
25 | 26 | ## Rank 2 27 | ### [Solved with CSS! Logical Styling Based on the Number of Given Elements](https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 28 | 29 | 30 |
31 | 32 | ## Rank 3 33 | ### [Pattern Library First: An Approach For Managing CSS](https://www.smashingmagazine.com/2018/07/pattern-library-first-css?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 34 | 35 | 36 |
37 | 38 | ## Rank 4 39 | ### [The Complete Illustrated Flexbox Tutorial](https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 40 | 41 | 42 |
43 | 44 | ## Rank 5 45 | ### [CSS: A New Kind Of JavaScript](https://medium.com/@Heydon/css-a-new-kind-of-javascript-fcf730d33ce7?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 46 | 47 | 48 |
49 | 50 | ## Rank 6 51 | ### [CSS Grid — The Swiss Army Knife For Website and Application Layouts](https://medium.com/@js_tut/css-grid-the-swiss-army-knife-for-cutting-website-and-application-layouts-c1bd7a6b4e56?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 52 | 53 | 54 |
55 | 56 | ## Rank 7 57 | ### [Create your design system, part 1: Typography](https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 58 | 59 | 60 |
61 | 62 | ## Rank 8 63 | ### [Responsive eCommerce layout using CSS Grid: Hover effect for product presentation](https://codepen.io/andybarefoot/pen/PBPrex?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 64 | 65 | 66 |
67 | 68 | ## Rank 9 69 | ### [9 Biggest Mistakes with CSS Grid](https://www.youtube.com/watch?time_continue=2&v=0Gr1XSyxZy0?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 70 | 71 | 72 |
73 | 74 | ## Rank 10 75 | ### [Why you should already be using CSS Grid](https://dev.to/willamesoares/why-you-should-already-be-using-css-grid-pch?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 76 | 77 | -------------------------------------------------------------------------------- /src/09-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.Sep 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: Animated, Responsive Images, Scroll Snapping, Exploring SMACSS, CSS Grid, Large scale CSS systems, Alignment In Flexbox, Shapes, Pie Chart, Relative units 8 | * Also published on [Medium](https://goo.gl/3r3cbd) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 |
15 | 16 | ## Rank 1 17 | ### [Flexbox — The Animated Tutorial](https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 18 | 19 | 20 |
21 | 22 | ## Rank 2 23 | ### [Time-saving CSS techniques to create responsive images](https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f90d5?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 24 | 25 | 26 |
27 | 28 | ## Rank 3 29 | ### [Practical CSS Scroll Snapping](https://css-tricks.com/practical-css-scroll-snapping?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 30 | 31 | 32 |
33 | 34 | ## Rank 4 35 | ### [Exploring SMACSS: Scalable and Modular Architecture for CSS](https://www.toptal.com/css/smacss-scalable-modular-architecture-css?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 36 | 37 | 38 |
39 | 40 | ## Rank 5 41 | ### [CSS Grid in 45 Minutes!](https://www.youtube.com/watch?v=DCZdCKjnBCs?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 42 | 43 | 44 |
45 | 46 | ## Rank 6 47 | ### [Creating the “Perfect” CSS System: A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems](https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 48 | 49 | 50 |
51 | 52 | ## Rank 7 53 | ### [Everything You Need To Know About Alignment In Flexbox](https://www.smashingmagazine.com/2018/08/flexbox-alignment?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 54 | 55 | 56 |
57 | 58 | ## Rank 8 59 | ### [Experimental layouts with CSS Shapes and clip-path](https://codepen.io/michellebarker/post/experimental-layouts-with-css-shapes-and-clip-path?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 60 | 61 | 62 |
63 | 64 | ## Rank 9 65 | ### [Simple Interactive Pie Chart with CSS Variables and Houdini Magic](https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 66 | 67 | 68 |
69 | 70 | ## Rank 10 71 | ### [15 CSS Relative units, how many do you know? em, rem, ex, cap, ch, ic...](https://dev.to/bytegasm/15-css-relative-units-how-many-do-you-know-em-rem-ex-cap-ch-ic-6m?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /src/10-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.Oct 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: pure CSS, Lazy Loading Images, Horizontal scrolling, Flexbox, CSS Grid, CSS Demo, Tutorial, Hover effects, Responsive Images 8 | * Also published on [Medium](https://goo.gl/GRyTz3) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 | [A) Beginners: CSS — The Complete Guide (incl. Flexbox, Grid & Sass).](http://bit.ly/2MnOwnv) [1,779 recommends, 4.7/5 stars] 15 | 16 | [B) Advanced CSS and Sass: Flexbox, Grid, Animations and More!](http://bit.ly/2mDiBDc) [7,332 recommends, 4.8/5 stars] 17 | 18 |
19 | 20 | ## Rank 1 21 | ### [How to create pure CSS illustrations and animate them](https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-1-1j1k?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 22 | 23 | 24 |
25 | 26 | ## Rank 2 27 | ### [The Complete Guide to Lazy Loading Images](https://css-tricks.com/the-complete-guide-to-lazy-loading-images?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 28 | 29 | 30 |
31 | 32 | ## Rank 3 33 | ### [Creating horizontal scrolling containers the right way [CSS Grid]](https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 34 | 35 | 36 |
37 | 38 | ## Rank 4 39 | ### [Flexbox: How Big Is That Flexible Box?](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 40 | 41 | 42 |
43 | 44 | ## Rank 5 45 | ### [How to Recreate the Banksy Artwork Shredder Using CSS Grid](https://medium.com/@leemartin/how-to-recreate-the-banksy-artwork-shredder-using-css-grid-ff20c0f5a19?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 46 | 47 | 48 |
49 | 50 | ## Rank 6 51 | ### [The Complete CSS Demo for OpenType Features](https://sparanoid.com/lab/opentype-features?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 52 | 53 | 54 |
55 | 56 | ## Rank 7 57 | ### [CSS Flex—An Interactive Tutorial](https://medium.freecodecamp.org/css-flex-an-interactive-tutorial-19ff6e93558?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 58 | 59 | 60 |
61 | 62 | ## Rank 8 63 | ### [Having fun with link hover effects](https://css-tricks.com/having-fun-with-link-hover-effects?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 64 | 65 | 66 |
67 | 68 | ## Rank 9 69 | ### [I created a copy of Red Onion's Daily Prophet using CSS Flexbox](https://dev.to/analizapandac/creating-a-copy-of-red-onions-daily-prophet-using-css-flexbox-1klo?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 70 | 71 | 72 |
73 | 74 | ## Rank 10 75 | ### [Responsive Images - I come here not to bury , but to praise it](https://alistapart.com/article/responsive-images?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /src/11-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.Nov 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: CSS only game, Network Performance, CSS Specificity, Border-Radius, CSS Grid, CSS Attribute Selectors, Ratio, Modular Architecture, web design tool, Lazy Load Images 8 | * Also published on [Medium](https://goo.gl/eYRGGE) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 | [A) Beginners: Build Responsive Real World Websites with HTML5 and CSS3.](http://bit.ly/2KkTfUZ) [19,216 recommends, 4.6/5 stars] 15 | 16 | [B) Creative CSS Animations, Transitions And Transforms Course.](http://bit.ly/2To3tta) [864 recommends, 4.8/5 stars] 17 | 18 |
19 | 20 | ## Rank 1 21 | ### [The Mine: No JS, CSS only adventure game](https://codepen.io/jcoulterdesign/pen/NOMeEb?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 22 | 23 | 24 |
25 | 26 | ## Rank 2 27 | ### [CSS and Network Performance](https://csswizardry.com/2018/11/css-and-network-performance?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 28 | 29 | 30 |
31 | 32 | ## Rank 3 33 | ### [CSS Specificity and the use of !important: a case study](https://dev.to/munamohamed94/css-specificity-and-the-use-of-important-a-case-study--11?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 34 | 35 | 36 |
37 | 38 | ## Rank 4 39 | ### [CSS Border-Radius Can Do That?](https://medium.com/9elements/css-border-radius-can-do-that-d46df1d013ae?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 40 | 41 | 42 |
43 | 44 | ## Rank 5 45 | ### [How I remember CSS Grid properties](https://dev.to/zellwk/how-i-remember-css-grid-properties-9i5?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 46 | 47 | 48 |
49 | 50 | ## Rank 6 51 | ### [Splicing HTML’s DNA With CSS Attribute Selectors](https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 52 | 53 | 54 |
55 | 56 | ## Rank 7 57 | ### [Designing with Ratio](https://medium.com/@getflourish/designing-with-ratio-dcc656d5385d?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 58 | 59 | 60 |
61 | 62 | ## Rank 8 63 | ### [Organize Your CSS with OOCSS, BEM, SMACSS](https://snipcart.com/blog/organize-css-modular-architecture?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 64 | 65 | 66 |
67 | 68 | ## Rank 9 69 | ### [The ultimate web design tool: a browser](https://logrocket.com/blog/ultimate-web-design-tool?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 70 | 71 | 72 |
73 | 74 | ## Rank 10 75 | ### [Teaching CSS to a Coder ](https://www.youtube.com/watch?v=a-74Zy9EfMQ?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /src/12-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Articles for the Past Month (v.Dec 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 1,000 CSS articles to pick the Top 10 stories that can help advance your career (1% chance). 6 | 7 | * Topics in this list: CSS only game, Network Performance, CSS Specificity, Border-Radius, CSS Grid, CSS Attribute Selectors, Ratio, Modular Architecture, web design tool, Lazy Load Images 8 | * Also published on [Medium](https://goo.gl/eYRGGE) 9 | 10 |
11 | 12 | #### Course of the month: 13 | 14 | [A) Beginners: CSS — The Complete Guide (incl. Flexbox, Grid & Sass)](http://bit.ly/2MnOwnv) [2,334 recommends, 4.7/5 stars] 15 | 16 | [B) Advanced CSS and Sass: Flexbox, Grid, Animations and More!](http://bit.ly/2mDiBDc) [8,964 recommends, 4.8/5 stars] 17 | 18 | 19 |
20 | 21 | ## Rank 1 22 | ### [Css-animation-101: Learn how to bring animation to your web projects [★3217]](https://github.com/cssanimation/css-animation-101?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 23 | 24 | 25 |
26 | 27 | ## Rank 2 28 | ### [An Introduction and Guide to the CSS Object Model (CSSOM)](https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 29 | 30 | 31 |
32 | 33 | ## Rank 3 34 | ### [CSS Grid For Visual Learners – Over 40 Diagrams](http://www.csstutorial.org/css-grid-tutorial.html?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 35 | 36 | 37 |
38 | 39 | ## Rank 4 40 | ### [How to understand CSS Position Absolute once and for all](https://medium.freecodecamp.org/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 41 | 42 | 43 |
44 | 45 | ## Rank 5 46 | ### [CSS Frameworks Or CSS Grid: What Should I Use For My Project?](https://www.smashingmagazine.com/2018/11/css-frameworks-css-grid?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 47 | 48 | 49 |
50 | 51 | ## Rank 6 52 | ### [An Introduction to CSS Shapes](https://tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 53 | 54 | 55 |
56 | 57 | ## Rank 7 58 | ### [A look at CSS Resets in 2018](https://bitsofco.de/a-look-at-css-resets-in-2018?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 59 | 60 | 61 |
62 | 63 | ## Rank 8 64 | ### [The journey that your browser goes through to take your CSS from braces to pixels](https://alistapart.com/article/braces-to-pixels?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 65 | 66 | 67 |
68 | 69 | ## Rank 9 70 | ### [DRY Switching with CSS Variables: The Difference of One Declaration](https://css-tricks.com/dry-switching-with-css-variables-the-difference-of-one-declaration?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 71 | 72 | 73 |
74 | 75 | ## Rank 10 76 | ### [Understanding Sass: CSS Made Awesome Everything you should know about Sass](https://blog.bitsrc.io/the-complete-beginners-guide-to-sass-ee8d5278f4c?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /src/Sep-CSS-Top10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/Sep-CSS-Top10.png -------------------------------------------------------------------------------- /src/Top10-Dec-CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/Top10-Dec-CSS.png -------------------------------------------------------------------------------- /src/Top10-Nov-CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/Top10-Nov-CSS.png -------------------------------------------------------------------------------- /src/aug-CSS-top10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/aug-CSS-top10.png -------------------------------------------------------------------------------- /src/july-CSS-top10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/july-CSS-top10.jpg -------------------------------------------------------------------------------- /src/june-css-top10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/june-css-top10.jpg -------------------------------------------------------------------------------- /src/may-css-top10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/may-css-top10.jpg -------------------------------------------------------------------------------- /src/oct-top10-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-articles/d49f128461f9ddedf73f41e7a88a40ebffb99718/src/oct-top10-css.png --------------------------------------------------------------------------------