117 lines
4.0 KiB
Vue
117 lines
4.0 KiB
Vue
<template lang="pug">
|
|
div
|
|
h1 CSS
|
|
.cards
|
|
template(v-for='resource in resources')
|
|
Card(:title='resource.title' :desc='resource.desc' :url='resource.url')
|
|
</template>
|
|
|
|
<script>
|
|
import Card from '../../components/Card'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
resources: [
|
|
{
|
|
title: 'CSS Grid Generator',
|
|
desc: 'Visually create your css grid and export the code.',
|
|
url: 'https://cssgrid-generator.netlify.com/'
|
|
},
|
|
{
|
|
title: 'Keyframes Editor',
|
|
desc: 'An insanely simple way to create CSS animations',
|
|
url: 'https://keyframes.app/editor/'
|
|
},
|
|
{
|
|
title: 'Flexbox Froggy',
|
|
desc: 'A game to learn Flexbox',
|
|
url: 'https://flexboxfroggy.com'
|
|
},
|
|
{
|
|
title: 'CSS Gridgarden',
|
|
desc: 'A game to learn Grid',
|
|
url: 'https://cssgridgarden.com'
|
|
},
|
|
{
|
|
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/'
|
|
},
|
|
{
|
|
title: 'Grid by example',
|
|
desc: 'Everything you need to learn CSS Grid Layout',
|
|
url: 'https://gridbyexample.com/learn/'
|
|
},
|
|
{
|
|
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/'
|
|
},
|
|
{
|
|
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/'
|
|
},
|
|
{
|
|
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/'
|
|
},
|
|
{
|
|
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).',
|
|
url: 'http://learnlayout.com'
|
|
},
|
|
{
|
|
title: 'CSSmatic - box shadow generator',
|
|
desc: 'The ultimate box shadow generator',
|
|
url: 'https://www.cssmatic.com/box-shadow'
|
|
},
|
|
{
|
|
title: 'AirBnB CSS / Sass Styleguide',
|
|
desc: 'A mostly reasonable approach to css and sass.',
|
|
url: 'https://github.com/airbnb/css'
|
|
},
|
|
{
|
|
title: 'Animista',
|
|
desc: 'CSS animations on demand.',
|
|
url: 'http://animista.net/'
|
|
},
|
|
{
|
|
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/'
|
|
},
|
|
{
|
|
title: 'CSS Protips',
|
|
desc: 'A collection of tips to help take your CSS skills pro.',
|
|
url: 'https://github.com/AllThingsSmitty/css-protips#readme'
|
|
},
|
|
{
|
|
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/'
|
|
},
|
|
{
|
|
title: 'CSS Diner',
|
|
desc: 'Learn CSS selectors while playing a game.',
|
|
url: 'https://flukeout.github.io/'
|
|
},
|
|
{
|
|
title: 'CSS Animation',
|
|
desc: 'CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills.',
|
|
url: 'https://cssanimation.rocks/'
|
|
},
|
|
]
|
|
}
|
|
},
|
|
components: {
|
|
Card
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|