{"id":3030,"date":"2017-01-07T13:53:05","date_gmt":"2017-01-07T19:53:05","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2056"},"modified":"2017-01-07T13:53:05","modified_gmt":"2017-01-07T19:53:05","slug":"the-newbies-guide-to-code-snippets","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/the-newbies-guide-to-code-snippets\/","title":{"rendered":"The Newbie&#8217;s Guide to Code Snippets"},"content":{"rendered":"<p class=\"p1\"><span class=\"s1\">If you\u2019re new to CSS (or even if you aren\u2019t!), you can learn a lot from checking out different CSS code snippets. Not only can you use them to learn some new CSS techniques or skills (studying snippets is a great way to see how properties can be used in different ways to achieve all sort of CSS effects), but you can also use them to spark your creativity and get some ideas for your next projects. Snippets are definitely an invaluable resource for budding developers.<\/span><\/p>\n<h3 class=\"p1\"><span class=\"s1\"><i>Where can you find them?<\/i><\/span><\/h3>\n<p class=\"p1\"><span class=\"s1\">A lot of tech sites or blogs have a section dedicated to CSS snippets (we even have a few <a href=\"http:\/\/cssnewbie.com\/7-useful-css-snippets-for-developers\/%20\" target=\"_blank\" rel=\"noopener noreferrer\">posts<\/a> about snippets). Some of the best sites to visit for snippets are <a href=\"\/\/littlesnippets.net\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span class=\"s2\">LittleSnippets.net<\/span><\/a> , <a href=\"https:\/\/css-tricks.com\/snippets\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Tricks<\/a>, and <a href=\"http:\/\/www.cssflow.com\/snippets\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Flow<\/a>. <\/span><\/p>\n<h3 class=\"p1\"><span class=\"s1\"><i>How can you use them?<\/i><\/span><\/h3>\n<p class=\"p1\"><span class=\"s1\">On most snippet sites, the snippet code will be available for you to copy and paste into your own projects (for front-end snippets, this can usually include both the HTML and the CSS, or just the CSS, maybe some JavaScript\u2026or any combination of the three). More complex snippets might be zipped and available for you to download and then access on your own text editors. The easiest way to use the snippets is to just copy and paste them into your own projects (be sure to change any class, id, or element names so that the snippet will correspond with the HTML elements in your projects). The best part about snippets is that they\u2019re open source, so you can change and modify them a little OR a lot to suit your needs. Maybe you just want to change a color or a font-size, or maybe you want to use the snippet as a jumping-off point to create something totally different \u2014 either way, you can do with them what you please.<\/span><\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p class=\"p1\">If you\u2019re new to CSS (or even if you aren\u2019t!), you can learn a lot from checking out different CSS code snippets. Not only can you use them to learn some new CSS techniques or skills (studying snippets is [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/the-newbies-guide-to-code-snippets\/\" title=\"Click to read 'The Newbie&#8217;s Guide to Code Snippets'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[175,192],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3030"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3030"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3030\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}