Free Web Development Resources

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 website. Best of all — these invaluable resources are all free.

At one point my computer looked like huge a pile of Sublime 2 screens D:

Tools

Text editing tools used: CyberDuck, Sublime 2, HTML Beautify, Safari Developer Tools and Chrome Developer Tools.

• Cyberduck (FTP/STFP tool for Mac) — I 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.
• Sublime 2 (text editor) — I used Sublime 2 in order to edit all of my .html, .css, .js and .php files. It color-codes each of the files based on the syntax of the language extension of the file.
• Clean CSS’s HTML Beautify — I used HTML Beautify in order to clean up the format of my HTML…This 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.
• Safari Developer Tools — Chrome 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).
• Chrome Developer Tools — I 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’s 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.

Resources for troubleshooting and questions: My eyes, GitHub, Google, StackOverflow, W3Schools and #CODENEWBIE Forum.

• My eyes — Seriously, proof-reading and double-checking casing helped me catch a couple of small errors along the way.
• GitHub — I 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 .css which should be used for production included vendor specific css that solved issues with cross-browser compatibility.)
• Google — Google definitely helped me find random bits of information I was looking for and tended to point me at: StackOverflow and 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.
• #CODENEWBIE forum— Prior to reaching out to the developer on GitHub…I posted on #CODENEWBIE’s forum to see if anybody had any suggestions for debugging on mobile devices when the actual site displays differently on a computer’s 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.

Tools for architecture and styling: Sketch, Fotoroma, Google WebFonts Paradeiser, Skeleton (including Normalize.css) and Ionicons.

• Sketch (free 30-day trial)* — I used Sketch to wireframe when I was initially brainstorming ideas for my site.
• Fotorama — a jQuery plugin that I used to quickly generate a beautiful image slider.
• Google Web Fonts — I used this in order to make the font that I intended to display on my website accessible to more users.
• Paradeiser — A responsive, menu that displays well on mobile devices in effort to avoid a hamburger menu.
• Skeleton (including Normalize.css) — Skeletons 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.
• Ionicons — An icon fonts that I used for icons throughout my site.

The “Finished” Product (Is a website really ever done?):

Can be viewed at: www.aboutmonica.com

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 — so please ignore that!)

Resources I want to use on my next project:

• Owl Carousel— An alternative to Fotorama for displaying image galleries.
• Angular.js— “HTML enhanced for web apps!”
• CreateHerStock — Stock images featuring women of color.

What are your favorite resources for web development? What tools are you looking forward to working with next?