Merge pull request #145 from webgems/resources/css-design

Resources/css design

resources/css.json

@@ -6,133 +6,133 @@
       "title": "CSS Grid Generator",
       "desc": "Visually create your css grid and export the code.",
       "url": "https://cssgrid-generator.netlify.com/",
-      "tags": []
+      "tags": ["generator", "grid", "layout", "visual tool"]
     },
     {
       "title": "Keyframes Editor",
       "desc": "An insanely simple way to create CSS animations",
       "url": "https://keyframes.app/editor/",
-      "tags": []
+      "tags": ["generator", "animation", "visual tool"]
     },
     {
       "title": "Flexbox Froggy",
       "desc": "A game to learn Flexbox",
       "url": "https://flexboxfroggy.com",
-      "tags": []
+      "tags": ["educational", "beginner"]
     },
     {
       "title": "Flexbox Zombies",
       "desc": "A course to learn Flexbox",
       "url": "https://mastery.games/p/flexbox-zombies",
-      "tags": []
+      "tags": ["educational", "beginner"]
     },
     {
       "title": "CSS Gridgarden",
       "desc": "A game to learn Grid",
       "url": "https://cssgridgarden.com",
-      "tags": []
+      "tags": ["educational", "beginner"]
     },
     {
       "title": "30 Seconds of Code",
       "desc": "A curated collection of useful CSS snippets you can understand in 30 seconds or less.",
       "url": "https://30-seconds.github.io/30-seconds-of-css/",
-      "tags": []
+      "tags": ["tips", "tricks", "collection"]
     },
     {
       "title": "Grid by example",
       "desc": "Everything you need to learn CSS Grid Layout",
       "url": "https://gridbyexample.com/learn/",
-      "tags": []
+      "tags": ["example", "showcase", "educational"]
     },
     {
       "title": "BEM naming convention",
       "desc": "Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development",
       "url": "https://getbem.com/",
-      "tags": []
+      "tags": ["convention", "naming", "structure"]
     },
     {
       "title": "CSS Triggers",
       "desc": "Overview of css attributes which trigger either layout, paint or composite. Good to know if you want to learn more about css performance.",
       "url": "https://csstriggers.com/",
-      "tags": []
+      "tags": ["performance", "rendering"]
     },
     {
       "title": "A complete guide to flexbox",
       "desc": "A comprehensive guide to flexbox, focusing on all the different possible properties for the parent element (the flex container).",
       "url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
-      "tags": []
+      "tags": ["guide", "educational"]
     },
     {
       "title": "Learn CSS layout",
-      "desc": "This site teaches the CSS fundamentals that are used in any website's layout (Unfortunately nothing abour display:grid yet).",
+      "desc": "This site teaches the CSS fundamentals that are used in any website's layout.",
       "url": "http://learnlayout.com",
-      "tags": []
+      "tags": ["layout", "educational", "beginner"]
     },
     {
       "title": "CSSmatic - box shadow generator",
       "desc": "The ultimate box shadow generator",
       "url": "https://www.cssmatic.com/box-shadow",
-      "tags": []
+      "tags": ["generator", "visual tool"]
     },
     {
       "title": "AirBnB CSS / Sass Styleguide",
       "desc": "A mostly reasonable approach to css and sass.",
       "url": "https://github.com/airbnb/css",
-      "tags": []
+      "tags": ["structure", "styleguide", "convention"]
     },
     {
       "title": "Animista",
       "desc": "CSS animations on demand.",
       "url": "http://animista.net/",
-      "tags": []
+      "tags": ["animation", "collection", "generator", "visual tool"]
     },
     {
       "title": "Use CSS Grids the right way",
       "desc": "CSS Grid is robust, flexible, and a refreshing paradigm shift from other CSS layout systems. While these are selling points for Grid, they also make it hard to learn.",
       "url": "https://vgpena.github.io/using-css-grid-the-right-way/",
-      "tags": []
+      "tags": ["guide", "educational"]
     },
     {
       "title": "CSS Protips",
       "desc": "A collection of tips to help take your CSS skills pro.",
       "url": "https://github.com/AllThingsSmitty/css-protips#readme",
-      "tags": []
+      "tags": ["collection", "tips", "tricks"]
     },
     {
       "title": "Flexbox Defense",
       "desc": "Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!",
       "url": "http://www.flexboxdefense.com/",
-      "tags": []
+      "tags": ["educational", "beginner"]
     },
     {
       "title": "CSS Diner",
       "desc": "Learn CSS selectors while playing a game.",
       "url": "https://flukeout.github.io/",
-      "tags": []
+      "tags": ["educational", "beginner"]
     },
     {
       "title": "CSS Animation",
       "desc": "CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills.",
       "url": "https://cssanimation.rocks/",
-      "tags": []
+      "tags": ["collection", "guide", "educational"]
     },
     {
       "title": "JustREM",
       "desc": "Easily and quickly convert pixel values into rem values.",
       "url": "https://justrem.xyz/",
-      "tags": []
+      "tags": ["units"]
     },
     {
       "title": "(Re)learn css layout",
       "desc": "If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.",
       "url": "https://every-layout.dev/",
-      "tags": []
+      "tags": ["educational", "guide"]
     },
     {
       "title": "Interactive CSS box-model view",
       "desc": "Learn CSS box-model by interractively changing the values.",
       "url": "https://codepen.io/carolineartz/full/ogVXZj",
-      "tags": []
+      "tags": ["visual tool", "educational", "beginner"]
     }
   ]
 }

resources/daily.json

@@ -6,43 +6,43 @@
       "title": "dev.to",
       "desc": "Where programmers share ideas and help each other grow. It is an online community for sharing and discovering great ideas, having debates, and making friends.",
       "url": "https://www.dev.to",
-      "tags": []
+      "tags": ["community", "reading"]
     },
     {
       "title": "CSS Tricks",
       "desc": "Daily webdev related articles, snippets and guides since 2007",
       "url": "https://css-tricks.com/",
-      "tags": []
+      "tags": ["reading", "educational", "design"]
     },
     {
       "title": "Smashing magazine",
       "desc": "Founded in September 2006 in Germany, Smashing Magazine delivers reliable, useful, but most importantly practical articles to web designers and developers. ",
       "url": "https://www.smashingmagazine.com/",
-      "tags": []
+      "tags": ["reading", "educational", "design", "development"]
     },
     {
       "title": "Hackernews",
       "desc": "Hacker News is a social news website focusing on computer science and entrepreneurship.",
       "url": "https://news.ycombinator.com/",
-      "tags": []
+      "tags": ["forum", "development", "reading"]
     },
     {
       "title": "Producthunt",
       "desc": "Check popular new products out and get inspired, maybe even post yours?",
       "url": "https://www.producthunt.com/",
-      "tags": []
+      "tags": ["discover", "explore"]
     },
     {
       "title": "dailydevlinks",
       "desc": "Fresh, daily links so you can keep up-to-date with everything developer ",
       "url": "https://dailydevlinks.com/",
-      "tags": []
+      "tags": ["development", "reading"]
     },
     {
       "title": "Sidebar.io",
       "desc": "The five best design links, every day.",
       "url": "https://sidebar.io/",
-      "tags": []
+      "tags": ["design", "reading"]
     }
   ]
 }