{
    "componentChunkName": "component---src-components-blog-post-jsx",
    "path": "/blog/free-web-development-resources/",
    "result": {"data":{"site":{"siteMetadata":{"author":"Monica Powell","siteUrl":"https://www.aboutmonica.com"}},"mdx":{"id":"75cd6914-aeda-51ad-90ed-3c094e37f848","timeToRead":3,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Free Web Development Resources\",\n  \"date\": \"2015-08-22T02:43:13.595Z\",\n  \"template\": \"post\",\n  \"draft\": false,\n  \"slug\": \"free-web-development-resources\",\n  \"category\": [\"resources\"],\n  \"tags\": [\"Text Editors\"],\n  \"description\": \"This past week, I decided to re-do my personal website. I realized that even though it did not seem like it in the midst of the process, I used quite a large handful of resources while developing my…\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", {\n    \"id\": \"free-web-development-resources\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#free-web-development-resources\",\n    \"aria-label\": \"free web development resources permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Free Web Development Resources\"), mdx(\"p\", null, \"This past week, I decided to re-do my \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://aboutmonica.com/\"\n  }, \"personal website\"), \". I realized that even though it did not seem like it in the midst of the process, I used quite a large handful of resources while developing my website. Best of all\\u200A\\u2014\\u200Athese invaluable resources are all free.\"), mdx(\"figure\", null, mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/free-web-development-resources-0.png\",\n    \"alt\": null\n  }))), mdx(\"p\", null, \"At one point my computer looked like huge a pile of Sublime 2 screens D:\"), mdx(\"h2\", {\n    \"id\": \"tools\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#tools\",\n    \"aria-label\": \"tools permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Tools\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Text editing tools used:\"), \" CyberDuck, Sublime 2, HTML Beautify, Safari Developer Tools and Chrome Developer Tools.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://cyberduck.io/?l=en\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Cyberduck\")), \" (FTP/STFP tool for Mac)\\u200A\\u2014\\u200AI used Cyberduck to easily open my hosted website files on my computer in Sublime 2 and then transfer any changes I made to my hosting.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.sublimetext.com/2\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Sublime 2\"), \" (\"), \"text editor)\\u200A\\u2014\\u200AI used Sublime 2 in order to edit all of my\\xA0.html,\\xA0.css,\\xA0.js and\\xA0.php files. It color-codes each of the files based on the syntax of the language extension of the file.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.cleancss.com/html-beautify/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Clean CSS\\u2019s HTML Beautify\")), \"\\u200A\\u2014\\u200AI used HTML Beautify in order to clean up the format of my HTML\\u2026This was especially useful when I lost track of a divs opening and closing or if I had a weird formatting issue that I thought was HTML-based.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Safari Developer Tools\"), \"\\u200A\\u2014\\u200AChrome tends to slow down my computer. So I prefer to use Safari for casual browsing plus it syncs well with my iPhone. I relied on both Safari and Chrome Developer Tools to inspect elements (which helped with debugging) or if I wanted to live preview a change before updating the actual file (e.g., choosing between several different colors for one element).\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Chrome Developer Tools\"), \"\\u200A\\u2014\\u200AI really appreciate how easy the developer tools in chrome make for you to select colors in CSS. You can literally hover over any color on a web page (whether it\\u2019s in an image or styled by CSS) and chrome will provide you with an exact match! This was very helpful when I wanted to select accent colors from each of my portfolio images.\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Resources for troubleshooting and questions:\"), \" My eyes, GitHub, Google, StackOverflow, W3Schools and #CODENEWBIE Forum.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"My eyes\"), \"\\u200A\\u2014\\u200ASeriously, proof-reading and double-checking casing helped me catch a couple of small errors along the way.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"GitHub\"), \"\\u200A\\u2014\\u200AI was having issues with an add-on I used. I saw that the project was recently active on GitHub and submitted an issue via GitHub. The developer responded promptly and was able to provide me with helpful information. (The issue was that I include a non-minified version of their css whereas the minified version of their\\xA0.css which should be used for production included vendor specific css that solved issues with cross-browser compatibility.)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Google\"), \"\\u200A\\u2014\\u200AGoogle definitely helped me find random bits of information I was looking for and tended to point me at: \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://stackoverflow.com/\"\n  }, \"StackOverflow\"), \" and \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.w3schools.com/\"\n  }, \"W3Schools\"), \" which are both very helpful resources. W3Schools covers ALL things HTML/CSS and is very helpful when searching for the correct css property or if you would like to see all of the possible values.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://discourse.codenewbie.org/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"#CODENEWBIE forum\")), \"\\u2014\\u200APrior to reaching out to the developer on GitHub\\u2026I posted on #CODENEWBIE\\u2019s forum to see if anybody had any suggestions for debugging on mobile devices when the actual site displays differently on a computer\\u2019s mobile developer tools versus an actual device. The issue ended up getting resolved by contacting the developer directly (cross-browser compatibility issue) but I did get useful information for the next time I encounter a similar issue.\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Tools for architecture and styling:\"), \" Sketch, Fotoroma, Google WebFonts Paradeiser, Skeleton (including Normalize.css) and Ionicons.\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://bohemiancoding.com/sketch/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Sketch (free 30-day trial)\", \"*\")), \"\\u200A\\u2014\\u200AI used Sketch to wireframe when I was initially brainstorming ideas for my site.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://fotorama.io/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Fotorama\\u200A\")), \"\\u2014\\u200Aa jQuery plugin that I used to quickly generate a beautiful image slider.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://google.com/webfonts\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Google Web Fonts\")), \"\\u200A\\u2014\\u200AI used this in order to make the font that I intended to display on my website accessible to more users.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://lucidlemon.github.io/paradeiser/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Paradeiser\")), \"\\u200A\\u2014\\u200AA responsive, menu that displays well on mobile devices in effort to avoid a hamburger menu.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://getskeleton.com/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Skeleton\")), \" (including Normalize.css)\\u200A\\u2014\\u200ASkeletons is a barebones boilerplate for websites. I relied on Skeleton to create classes for my responsive grid. It includes Normalize.css which helps reduce discrepancies between different browsers.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://ionicons.com/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Ionicons\")), \"\\u200A\\u2014\\u200AAn icon fonts that I used for icons throughout my site.\")), mdx(\"p\", null, \"The \\u201CFinished\\u201D Product (Is a website really ever done?):\"), mdx(\"p\", null, \"Can be viewed at: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.aboutmonica.com/\"\n  }, \"www.aboutmonica.com\")), mdx(\"figure\", null, mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"/media/free-web-development-resources-1.png\",\n    \"alt\": null\n  }))), mdx(\"p\", null, \"A screenshot of my website as of August 21st, 2015. (The software I used to generate the screenshot caused the black arrow on the right to appear multiple times\\u200A\\u2014\\u200Aso please ignore that!)\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Resources I want to use on my next project:\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://owlcarousel.owlgraphic.com/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Owl Carousel\")), \"\\u2014\\u200AAn alternative to Fotorama for displaying image galleries.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://angularjs.org/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"Angular.js\")), \"\\u2014\\u200A\\u201CHTML enhanced for web apps!\\u201D\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.createherstock.com/\"\n  }, mdx(\"strong\", {\n    parentName: \"a\"\n  }, \"CreateHerStock\"), \"\\u200A\"), \"\\u2014\\u200AStock images featuring women of color.\")), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"What are your favorite resources for web development? What tools are you looking forward to working with next?\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"items":[{"url":"#free-web-development-resources","title":"Free Web Development Resources"}]},{"url":"#tools","title":"Tools"}]},"frontmatter":{"title":"Free Web Development Resources","date":"August 22, 2015","description":"This past week, I decided to re-do my personal website. I realized that even though it did not seem like it in the midst of the process, I used quite a large handful of resources while developing my…","tags":["Text Editors"]}},"allWebMentionEntry":{"edges":[]}},"pageContext":{"permalink":"https://www.aboutmonica.com/blog/free-web-development-resources/","slug":"/blog/free-web-development-resources/","prev":{"id":"308c6e71-fe4d-550f-bc54-1d830e61a1a3","frontmatter":{"title":"Free Software & Services for Students","category":["tutorial"],"date":"2016-02-05T20:35:32.517Z","slug":"free-software-services-for-students","tags":["Resources"],"redirects":null},"fields":{"slug":"/blog/free-software-services-for-students/"}},"next":null}},
    "staticQueryHashes": ["1977783444","764694655"]}